sync config to SCSS

.nova/Tasks/build & deploy index.json

@@ -1,13 +1,13 @@
 {
-  "actions": {
-    "build": {
-      "enabled": true,
-      "script": "pnpm -F @groton/knowledgebase.indexer run build"
+  "actions" : {
+    "build" : {
+      "enabled" : true,
+      "script" : "pnpm -F @groton\/knowledgebase.indexer run build"
     },
-    "run": {
-      "enabled": true,
-      "script": "pnpm -F @groton/knowledgebase.indexer run build\npnpm -F @groton/knowledgebase.router run deploy:deploy"
+    "run" : {
+      "enabled" : true,
+      "script" : "pnpm -F @groton\/knowledgebase.indexer run build\npnpm -F @groton\/knowledgebase.router run deploy:deploy"
     }
   },
-  "openLogOnRun": "start"
+  "openLogOnRun" : "start"
 }

apps/ui/.gitignore

@@ -4,4 +4,5 @@
 /build
 /node_modules
 /public
+/src/config.scss
 /var

apps/ui/bin/sync-config.ts

@@ -1,7 +1,9 @@
+import cli from '@battis/qui-cli';
 import Var from '@groton/knowledgebase.config';
+import fs from 'fs';
 import path from 'path';
 
-Var.Config.sync(
+const config = Var.Config.sync(
   {
     env: {
       root: path.dirname(__dirname),
@@ -17,3 +19,32 @@ Var.Config.sync(
     return config;
   }
 );
+
+function quoted(key: string, value: string = '') {
+  switch (key) {
+    case 'navbarColor':
+      return value;
+    default:
+      return `"${value}"`;
+  }
+}
+
+// FIXME this approach could leave stranded values in SCSS that have been deleted from config
+const spinner = cli.spinner();
+const pathToScss = path.resolve(__dirname, '../src/config.scss');
+spinner.start(`Updating ${cli.colors.url(pathToScss)}`);
+if (config.ui?.site) {
+  fs.writeFileSync(
+    pathToScss,
+    Object.keys(config.ui.site || [])
+      .map(
+        (key) =>
+          `$${key}: ${quoted(
+            key,
+            config.ui!.site![key as keyof typeof config.ui.site]
+          )};`
+      )
+      .join('\n')
+  );
+}
+spinner.succeed(`Configuration synced to ${cli.colors.url(pathToScss)}`);

apps/ui/src/Constants.module.scss

@@ -1,8 +1,12 @@
 @use 'Constants';
 
 :export {
-  grotonred: #{Constants.$grotonRed};
   googleDocEmbed: #{Constants.$googleDocEmbed};
   prefix: #{Constants.$prefix};
   mobileCutoffWidthInPx: #{Constants.$mobileCutoffWidthInPx};
+
+  favicon: Constants.$favicon;
+  logo: Constants.$logo;
+  background: Constants.$background;
+  navbarColor: #{Constants.$navbarColor};
 }

apps/ui/src/Constants.scss

@@ -1,4 +1,10 @@
-$grotonRed: #a6093d;
+@use 'config';
+
 $googleDocEmbed: '#doc-content'; // TODO #directory ?
-$prefix: 'kb-';
+$prefix: 'ui-';
 $mobileCutoffWidthInPx: 576;
+
+$favicon: config.$favicon;
+$background: config.$background;
+$logo: config.$logo;
+$navbarColor: config.$navbarColor;

apps/ui/src/DOM/Navbar/index.ts

@@ -1,5 +1,5 @@
+import Constants from '../../Constants';
 import SiteTree from './SiteTree';
-import logo from './logo.png';
 import './styles.scss';
 
 // TODO config logo
@@ -12,7 +12,9 @@ export default function Navbar() {
   // TODO consolidate Search in one directory
   nav.innerHTML = `
       <div class="container-fluid align-items-middle">
-          <a class="navbar-brand" href="/tc"><img src="${logo}"></a>
+          <a class="navbar-brand" href="/tc">
+            <img src=${Constants.styles.logo}>
+          </a>
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>

apps/ui/src/DOM/Navbar/styles.scss

@@ -1,5 +1,7 @@
+@use '../../Constants';
+
 #nav.navbar {
-  background: var(--groton-red); // TODO config
+  background: Constants.$navbarColor; // TODO config
   color: white;
 
   .navbar-brand {

apps/ui/src/DOM/styles.scss

@@ -1,12 +1,11 @@
+@use '../Constants';
 @import 'bootstrap/dist/css/bootstrap.min.css';
 
 body {
-  --groton-red: #a6093d; // TODO config
-
   font-family: Arial, Roboto, Helvetica, sans-serif; // TODO config
 
   // TODO configure
-  background: url('./campus.jpg') no-repeat fixed; // TODO config
+  background: url(#{Constants.$background}) no-repeat fixed; // TODO config
   background-size: cover;
 
   #wrapper {

apps/ui/src/UI/LinkLabelByGroup/styles.scss

@@ -16,15 +16,16 @@
  * `text-color` (Optional) defaults to white
  * `border-color` (Optional) defaults to text-color, if present, or transparent
  */
+// TODO make configurable
 $groups: 'for-teachers/' 'Faculty',
-  'for-students/' 'Students' white Constants.$grotonRed, 'for-staff/' 'Staff',
+  'for-students/' 'Students' white Constants.$navbarColor, 'for-staff/' 'Staff',
   'for-employees/' 'Faculty & Staff', 'for-department-heads/' 'Dept. Heads',
   'for-it/' 'IT' gold black;
 
 @each $url, $label, $color, $text, $border in $groups {
   a[href$='#{$url}'] {
     .badge {
-      background: $color or Constants.$grotonRed;
+      background: $color or Constants.$navbarColor;
       border: solid 1px ($border or $text or transparent);
 
       .label::before {

apps/ui/webpack.config.js

@@ -1,15 +1,16 @@
 require('dotenv').config();
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const cfg = require('./var/config.json');
 
 const DEBUGGING = JSON.parse(process.env.DEBUGGING);
 if (DEBUGGING) {
   console.log('DEBUGGING enabled, compiling in development mode');
 }
 
-module.exports = require('@battis/webpack/ts/vanilla')({
+const config = require('@battis/webpack/ts/vanilla')({
   root: __dirname,
-  bundle: 'kb',
+  bundle: 'ui',
   filename: 'assets/[name]',
   mode: DEBUGGING ? 'development' : 'production',
   plugins: [
@@ -25,3 +26,18 @@ module.exports = require('@battis/webpack/ts/vanilla')({
   ],
   production: !DEBUGGING
 });
+
+// do not resolve unresolvable URLs!
+const rule = config.module.rules.findIndex((rule) => rule.test.test('.scss'));
+const loader = config.module.rules[rule].use.findIndex(
+  (use) => use.loader == 'css-loader'
+);
+config.module.rules[rule].use[loader].options.url = {
+  filter: (url) =>
+    cfg.ui.webpack.doNotResolve.reduce(
+      (resolve, dnr) => resolve && !url.startsWith(dnr),
+      true
+    )
+};
+
+module.exports = config;

packages/config/src/Config/UI.ts

@@ -2,7 +2,7 @@ import { PathString } from '@groton/knowledgebase.strings';
 
 type UI = {
   root?: PathString;
-  search?: { include?: string[]; exclude?: string[] };
+  search?: { include?: PathString[]; exclude?: PathString[] };
   site?: {
     logo?: PathString;
     favicon?: PathString;
@@ -17,6 +17,9 @@ type UI = {
       default?: PathString;
     };
   };
+  webpack?: {
+    doNotResolve?: PathString[];
+  };
 };
 
 export default UI;

packages/config/src/Config/sync.ts

@@ -1,3 +1,4 @@
+import Config from './Config';
 import createDefault from './createDefault';
 import cli from '@battis/qui-cli';
 import { JSONObject } from '@battis/typescript-tricks';
@@ -108,4 +109,6 @@ export default function sync(
 
   fs.writeFileSync(localConfigPath, JSON.stringify(dest));
   spinner.succeed(`Configuration synced to ${cli.colors.url(localConfigPath)}`);
+
+  return dest as Partial<Config>;
 }