external css support

src/site/_data/dynamics.js

@@ -1,6 +1,7 @@
 const fsFileTree = require("fs-file-tree");
 
 const BASE_PATH = "src/site/_includes/components/user"
+const STYLE_PATH = "src/site/styles/user"
 const NAMESPACES = ["index", "notes", "common"];
 const SLOTS = ["header", "afterContent", "footer"]
 
@@ -20,6 +21,17 @@ const generateComponentPaths = async (namespace) => {
     return data;
 }
 
+const generateStylesPaths = async () => {
+    try {
+        const tree = await fsFileTree(`${STYLE_PATH}`);
+        let comps = Object.keys(tree).map((p) => `/styles/user/${p}`);
+        comps.sort()
+        return comps
+    } catch {
+        return [];
+    }
+}
+
 
 module.exports = async () => {
     const data = {};
@@ -27,5 +39,6 @@ module.exports = async () => {
         const ns = NAMESPACES[index];
         data[ns] = await generateComponentPaths(ns);
     }
+    data['styles'] = await generateStylesPaths()
     return data;
 }

src/site/_includes/components/pageheader.njk

@@ -29,6 +29,9 @@
 {%endif%}
 
 <link href="/styles/custom-style.css" rel="stylesheet">
+{%- for style in dynamics.styles -%}
+<link href="{{style}}" rel="stylesheet">
+{%- endfor -%}
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>