Support static assets and custom CSS (#7)

gbv · Jun 1, 2023 · 3813c36 · 3813c36
1 parent 5e8f07b
commit 3813c36
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,7 @@ A **configuration directory** can set with environment variable `CONFIG` (defaul
 
 - file `config.env` with configuration keys documented above
 - directory `views` with [EJS templates](https://ejs.co/) to override default templates in directory `views`
+- directory `public` with static assets to be served at URL path `_public/`. A CSS file `style.css` is automatically included if present.
 
 Directory `examples` contains configuration directories for some known terminology services. To try out one of these example, set nothing but `CONFIG`, e.g. `CONFIG=examples/rvk`.
 

diff --git a/examples/uri.gbv.de/public/hello.txt b/examples/uri.gbv.de/public/hello.txt
@@ -0,0 +1 @@
+hi
diff --git a/examples/uri.gbv.de/public/style.css b/examples/uri.gbv.de/public/style.css
@@ -0,0 +1,4 @@
+:root {
+  --bar-color: #577fbb;
+  --link-color: rgb(96, 143, 219);
+}
diff --git a/public/style.css b/public/style.css
@@ -1,6 +1,6 @@
 :root {
-  --bar-color: #577fbb;
-  --link-color: rgb(96, 143, 219);
+  --bar-color: #dacece;
+  --link-color: #b13f13;
 }
 
 /* page layout */

diff --git a/server.js b/server.js
@@ -1,5 +1,6 @@
 import express from "express"
 import ejs from "ejs"
+import serveStatic from "serve-static"
 import portfinder from "portfinder"
 import cookieParser from "cookie-parser"
 import { protocolless, uriPath, link } from "./lib/utils.js"
@@ -12,18 +13,18 @@ import config from "./lib/config.js"
 import jskos from "jskos-tools"
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const resolve = (p) => path.resolve(__dirname, p)
+const resolve = (...p) => path.resolve(__dirname, ...p)
 const isProduction = config.isProduction
 const { log, info, namespace, configDir } = config
 
 const app = express()
 async function init() {
 
   // configure template engine to look up views in config directory first
-  const views = [ path.resolve(configDir, "views"), "./views" ]
+  const views = [ resolve(configDir, "views"), "./views" ]
   const includer = (original) => {
     for (let view of views) {
-      const filename = path.resolve(view, original + ".ejs")
+      const filename = resolve(view, original + ".ejs")
       if (fs.existsSync(filename)) {
         return { filename }
       }
@@ -45,10 +46,7 @@ async function init() {
 
   let productionHeader
   if (isProduction) {
-    // serve static files from dist
-    app.use(namespace.pathname + "_vite/", (await import("serve-static")).default(resolve("dist"), {
-      index: false,
-    }))
+    app.use(namespace.pathname + "_vite/", serveStatic(resolve("dist"), { index: false }))
     productionHeader = fs.readFileSync(resolve("dist/index.html"), "utf-8").split("\n").map(line => line.trim()).filter(line => line.startsWith("<script type=\"module\"") || line.startsWith("<link rel=\"stylesheet\"")).map(line => line.replace("/", namespace.pathname + "_vite/")).join("\n")
   } else {
     // serve Vue application under subpath _vite
@@ -65,6 +63,11 @@ async function init() {
     app.use(namespace.pathname + "_vite/", vite.middlewares)
   }
 
+  // static assets
+  const assets = resolve(configDir, "public")
+  app.use(namespace.pathname + "_public/", serveStatic(assets))
+  config.customStyle = fs.existsSync(resolve(assets, "style.css"))
+
   // load backend
   const backend = await initBackend(config)
   app.set("backend", backend)

diff --git a/views/index.ejs b/views/index.ejs
@@ -14,6 +14,9 @@
       <script type="module" src="<%= namespace.pathname %>_vite/@vite/client"></script>
       <script type="module" src="<%= namespace.pathname %>_vite/src/main.js"></script>
     <% } %>
+    <% if (locals.customStyle) { %>
+      <link rel="stylesheet" href="<%= namespace.pathname %>_public/style.css">
+    <% } %>
   </head>
   <body data-namespace="<%= namespace %>" data-backend="<%= locals.backend %>">
     <%- include("header") %>