(core) Add config to include custom CSS

Summary: Adds a new environment variable that allows for custom CSS to be included in all core static pages. Test Plan: Tested manually in grist-core. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D3419
gristlabs · May 12, 2022 · 524dbf3 · 524dbf3
1 parent e6983e9
commit 524dbf3
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -192,6 +192,7 @@ ALLOWED_WEBHOOK_DOMAINS | comma-separated list of permitted domains to use in we
 APP_DOC_URL | doc worker url, set when starting an individual doc worker (other servers will find doc worker urls via redis)
 APP_HOME_URL | url prefix for home api (home and doc servers need this)
 APP_STATIC_URL | url prefix for static resources
+APP_STATIC_INCLUDE_CUSTOM_CSS | set to "true" to include custom.css (from APP_STATIC_URL) in static pages
 APP_UNTRUSTED_URL   | URL at which to serve/expect plugin content.
 GRIST_ADAPT_DOMAIN | set to "true" to support multiple base domains (careful, host header should be trustworthy)
 GRIST_APP_ROOT      | directory containing Grist sandbox and assets (specifically the sandbox and static subdirectories).

diff --git a/app/client/ui/AppHeader.ts b/app/client/ui/AppHeader.ts
@@ -98,7 +98,7 @@ const cssAppLogo = styled('a', `
   height: 48px;
   width: 48px;
   background-image: var(--icon-GristLogo);
-  background-size: 22px 22px;
+  background-size: ${vars.logoSize};
   background-repeat: no-repeat;
   background-position: center;
   background-color: ${vars.logoBg};

diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
@@ -110,6 +110,7 @@ export const vars = {
   controlBorderRadius:  new CustomProp('border-radius', '4px'),
 
   logoBg: new CustomProp('logo-bg', '#040404'),
+  logoSize: new CustomProp('logo-size', '22px 22px'),
   toastBg: new CustomProp('toast-bg', '#040404'),
 };
 

diff --git a/app/server/lib/ICreate.ts b/app/server/lib/ICreate.ts
@@ -29,6 +29,9 @@ export interface ICreate {
   sessionSecret(): string;
   // Get configuration information to show at start-up.
   configurationOptions(): {[key: string]: any};
+  // Return a string containing 1 or more HTML tags to insert into the head element of every
+  // static page.
+  getExtraHeadHtml?(): string;
 }
 
 export interface ICreateActiveDocOptions {
@@ -90,6 +93,13 @@ export function makeSimpleCreator(opts: {
         if (config) { return config; }
       }
       return {};
-    }
+    },
+    getExtraHeadHtml() {
+      let customHeadHtmlSnippet = '';
+      if (process.env.APP_STATIC_INCLUDE_CUSTOM_CSS === 'true') {
+        customHeadHtmlSnippet += '<link rel="stylesheet" href="custom.css">';
+      }
+      return customHeadHtmlSnippet;
+    },
   };
 }
diff --git a/app/server/lib/sendAppPage.ts b/app/server/lib/sendAppPage.ts
@@ -90,10 +90,12 @@ export function makeSendAppPage(opts: {
     const tagManagerSnippet = needTagManager ? getTagManagerSnippet(process.env.GOOGLE_TAG_MANAGER_ID) : '';
     const staticOrigin = process.env.APP_STATIC_URL || "";
     const staticBaseUrl = `${staticOrigin}/v/${options.tag || tag}/`;
+    const customHeadHtmlSnippet = server?.create.getExtraHeadHtml?.() ?? "";
     const warning = testLogin ? "<div class=\"dev_warning\">Authentication is not enforced</div>" : "";
     const content = fileContent
       .replace("<!-- INSERT WARNING -->", warning)
       .replace("<!-- INSERT BASE -->", `<base href="${staticBaseUrl}">` + tagManagerSnippet)
+      .replace("<!-- INSERT CUSTOM -->", customHeadHtmlSnippet)
       .replace("<!-- INSERT CONFIG -->", `<script>window.gristConfig = ${JSON.stringify(config)};</script>`);
     resp.status(options.status).type('html').send(content);
   };

diff --git a/static/account.html b/static/account.html
@@ -5,6 +5,7 @@
   <!-- INSERT BASE -->
   <link rel="icon" type="image/x-icon" href="icons/favicon.png" />
   <link rel="stylesheet" href="icons/icons.css">
+  <!-- INSERT CUSTOM -->
   <title>Grist</title>
 </head>
 <body>

diff --git a/static/app.html b/static/app.html
@@ -13,6 +13,7 @@
 <link rel="stylesheet" href="bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
 <link rel="stylesheet" href="bundle.css">
 <link rel="stylesheet" href="icons/icons.css">
+<!-- INSERT CUSTOM -->
 
 <title>Grist</title>
 </head>

diff --git a/static/custom.css b/static/custom.css
@@ -0,0 +1,42 @@
+:root {
+  /* logo */
+  --icon-GristLogo: url("ui-icons/Logo/GristLogo.svg") !important;
+  --grist-logo-bg: #040404 !important;
+  --grist-logo-size: 22px 22px !important;
+
+  /* colors */
+  --grist-color-light-grey: #F7F7F7 !important;
+  --grist-color-medium-grey: rgba(217,217,217,0.6) !important;
+  --grist-color-medium-grey-opaque: #E8E8E8 !important;
+  --grist-color-dark-grey: #D9D9D9 !important;
+  --grist-color-light: #FFFFFF !important;
+  --grist-color-dark: #262633 !important;
+  --grist-color-dark-bg: #262633 !important;
+  --grist-color-slate: #929299 !important;
+  --grist-color-light-green: #16B378 !important;
+  --grist-color-dark-green: #009058 !important;
+  --grist-color-darker-green: #007548 !important;
+  --grist-color-lighter-green: #b1ffe2 !important;
+  --grist-color-lighter-blue: #87b2f9 !important;
+  --grist-color-light-blue: #3B82F6 !important;
+  --grist-color-cursor: #16B378 !important;
+  --grist-color-selection: rgba(22,179,120,0.15) !important;
+  --grist-color-selection-opaque: #DCF4EB !important;
+  --grist-color-selection-darker-opaque: #d6eee5 !important;
+  --grist-color-inactive-cursor: #A2E1C9 !important;
+  --grist-color-hover: #bfbfbf !important;
+  --grist-color-error: #D0021B !important;
+  --grist-color-warning: #F9AE41 !important;
+  --grist-color-warning-bg: #dd962c !important;
+  --grist-color-backdrop: rgba(38,38,51,0.9) !important;
+  --grist-label-text-bg: #FFFFFF !important;
+  --grist-label-active-bg: #F0F0F0 !important;
+  --grist-primary-fg: #16B378 !important;
+  --grist-primary-fg-hover: #009058 !important;
+  --grist-primary-bg: #ffffff !important;
+  --grist-control-bg: #ffffff !important;
+  --grist-control-fg: #16B378 !important;
+  --grist-primary-fg-hover: #009058 !important;
+  --grist-control-border: 1px solid #11B683 !important;
+  --grist-toast-bg: #040404 !important;
+}
diff --git a/static/error.html b/static/error.html
@@ -5,6 +5,7 @@
   <!-- INSERT BASE -->
   <link rel="icon" type="image/x-icon" href="icons/favicon.png" />
   <link rel="stylesheet" href="icons/icons.css">
+  <!-- INSERT CUSTOM -->
   <title>Grist</title>
 </head>
 <body>