feat: setup themes (STADTKLN-88) (#3)

* feat: setup basic themes * fix: gh pages error? * fix: relative links to better preview on gh pages * fix: wrong stylesheet order import * fix: change gh actions stylesheet name * feat: post build script to fix stylesheets order
virtualidentityag · Aug 22, 2024 · dfccc34 · dfccc34
1 parent 5a1ab98
commit dfccc34
Show file tree

Hide file tree

Showing 11 changed files with 255 additions and 48 deletions.
diff --git a/.github/workflows/deploy-to-github-pages.yml b/.github/workflows/deploy-to-github-pages.yml
@@ -81,7 +81,6 @@ jobs:
       - name: Generate index file
         run: |
           branches=$(ls deployment/archives/*.tar | xargs -n 1 basename | sed 's/.tar//')
-          echo "branches=$branches" >> $GITHUB_ENV
           node scripts/build-preview.js $branches > deployment/index.html
           rm -rf src/pages/*
           cp deployment/index.html src/pages/preview.twig

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && node scripts/reorder-stylesheets.js",
     "preview": "vite preview",
     "format": "prettier . --write",
     "format:check": "prettier . --check",

diff --git a/scripts/reorder-stylesheets.js b/scripts/reorder-stylesheets.js
@@ -0,0 +1,78 @@
+/**
+ * This is necessary due to a bug in Vite build process.
+ * https://github.com/vitejs/vite/issues/3924
+ *
+ * When vite is building, it places the stylesheets with an incorrect order
+ * causing styles to break when order matters.
+ *
+ * As a workaround, whenever a build happens, this script must be executed
+ * to ensure that the stylesheets that start with certain prefix
+ * are always placed at the top
+ */
+
+import fs from 'fs'
+import path from 'path'
+
+const buildDirectory = './dist'
+const baseStylesheetPrefix = 'styles-'
+const headRegex = /(<head[\s\S]*?>)([\s\S]*?)(<\/head>)/i
+const stylesheetRegex =
+  /<link\s+rel=["']stylesheet["']\s+crossorigin\s+href=["'][^"']+["']\s*\/?>/gi
+
+const getOrderedStylesheets = (html) => {
+  const stylesheets = html.match(stylesheetRegex) || []
+
+  return stylesheets
+    .reduce(
+      (acc, stylesheet) => {
+        if (stylesheet.includes(baseStylesheetPrefix)) {
+          acc[0].push(stylesheet)
+        } else {
+          acc[1].push(stylesheet)
+        }
+        return acc
+      },
+      [[], []]
+    )
+    .join('\n\t\t')
+}
+
+const getNonStylesheetsContent = (html) => html.replace(stylesheetRegex, '')
+
+const processHtmlHead = (html) =>
+  html.replace(
+    headRegex,
+    (_, __, p2) =>
+      `<head>${getNonStylesheetsContent(p2)}\t${getOrderedStylesheets(p2)}\n\t</head>`
+  )
+
+const processHtmlFile = (pathname) => {
+  try {
+    const content = fs.readFileSync(pathname, 'utf-8')
+
+    const updated = processHtmlHead(content)
+
+    fs.writeFileSync(pathname, updated)
+    console.log(`File ${pathname} has been processed`)
+  } catch (err) {
+    console.error(`Error processing ${pathname}:`, err)
+  }
+}
+
+const processDirectory = async (directory) => {
+  try {
+    const files = fs.readdirSync(directory, { withFileTypes: true })
+
+    files.forEach((file) => {
+      const pathname = path.join(directory, file.name)
+
+      if (file.isDirectory()) {
+        processDirectory(pathname)
+      } else if (file.isFile() && path.extname(file.name) === '.html') {
+        processHtmlFile(pathname)
+      }
+    })
+  } catch {}
+}
+
+processDirectory(buildDirectory)
diff --git a/src/layouts/base.twig b/src/layouts/base.twig
@@ -2,7 +2,10 @@
 <html lang='de'>
   <head>
     <title>Stadt Koeln - Open Data</title>
+
     <link rel='stylesheet' href='/src/styles/styles.scss'>
+    {% set theme = theme is defined ? theme : 'light' %}
+    <link rel='stylesheet' href='/src/styles/themes/{{ theme }}.css'>
   </head>
   <body class='min-vh-100 d-flex flex-column'>
     {% include 'partials::header.twig' %}

diff --git a/src/pages/dark.twig b/src/pages/dark.twig
@@ -0,0 +1,7 @@
+{% extends 'layouts::base.twig' %}
+{% set theme = 'dark' %}
+
+{% block content %}
+  <h1>Startseite</h1>
+  <a href='./'>Light Mode</a>
+{% endblock %}
diff --git a/src/pages/index.twig b/src/pages/index.twig
@@ -2,4 +2,5 @@
 
 {% block content %}
   <h1>Startseite</h1>
+  <a href='./dark'>Dark Mode</a>
 {% endblock %}
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
@@ -0,0 +1,11 @@
+:root {
+  --link-color: var(--primary);
+  --link-color-rgb: rgba(var(--primary-rgb), 1);
+  --link-hover-color: var(--primary-text-emphasis);
+  --link-hover-color-rgb: var(--primary-text-emphasis-rgb);
+}
+
+.nav-pills {
+  --nav-pills-link-active-bg: var(--primary);
+  --nav-pills-link-active-color: var(--light);
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,42 +1,6 @@
-// Override Bootstrap's Sass default variables
-//
-// Nearly all variables in Bootstrap are written with the `!default` flag.
-// This allows you to override the default values of those variables before
-// you import Bootstrap's source Sass files.
-//
-// Overriding the default variable values is the best way to customize your
-// CSS without writing _new_ styles. For example, you can either change
-// `$body-color` or write more CSS that override's Bootstrap's CSS like so:
-// `body { color: red; }`.
-
-//
-// Bring in Bootstrap
-//
-
-// Option 1
-//
-// Import all of Bootstrap's CSS
-
-// @import "bootstrap/scss/bootstrap";
-
-// Option 2
-//
-// Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what.
-
-// Toggle global options
-// $enable-gradients: true;
-// $enable-shadows: true;
-
-// $offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
-
-// Include functions first
 @import 'bootstrap/scss/functions';
 
-// Customize some defaults
-// $body-color: #333;
-// $body-bg: #fff;
-// $border-radius: .4rem;
-// $success: #7952b3;
+$prefix: '';
 
 // Required
 @import 'bootstrap/scss/variables';
@@ -55,7 +19,7 @@
 // @import "bootstrap/scss/forms";
 @import 'bootstrap/scss/buttons';
 @import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
+// @import 'bootstrap/scss/dropdown';
 // @import "bootstrap/scss/button-group";
 @import 'bootstrap/scss/nav';
 @import 'bootstrap/scss/navbar'; // Requires nav
@@ -67,25 +31,22 @@
 // @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/progress";
 // @import "bootstrap/scss/list-group";
-@import 'bootstrap/scss/close';
+// @import 'bootstrap/scss/close';
 // @import "bootstrap/scss/toasts";
-@import 'bootstrap/scss/modal'; // Requires transitions
+// @import 'bootstrap/scss/modal'; // Requires transitions
 // @import "bootstrap/scss/tooltip";
-@import 'bootstrap/scss/popover';
+// @import 'bootstrap/scss/popover';
 // @import "bootstrap/scss/carousel";
 // @import "bootstrap/scss/spinners";
-@import 'bootstrap/scss/offcanvas'; // Requires transitions
+// @import 'bootstrap/scss/offcanvas'; // Requires transitions
 // @import "bootstrap/scss/placeholders";
 
 // Helpers
 // @import "bootstrap/scss/helpers";
 
-// Utilities
 @import 'bootstrap/scss/utilities/api';
 
-//
-// Custom styles
-//
+@import 'theme';
 
 body {
   padding: 0 0.5rem;

diff --git a/src/styles/themes/.gitignore b/src/styles/themes/.gitignore
@@ -0,0 +1 @@
++.css
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
@@ -0,0 +1,73 @@
+:root {
+  color-scheme: dark;
+
+  --primary: #ffffff;
+  --primary-rgb: 255, 255, 255;
+  --light: #212529;
+  --light-rgb: 33, 37, 41;
+  --dark: #f8f9fa;
+  --dark-rgb: 248, 249, 250;
+
+  --body-color: #dee2e6;
+  --body-color-rgb: 222, 226, 230;
+  --body-bg: #212529;
+  --body-bg-rgb: 33, 37, 41;
+
+  --emphasis-color: #fff;
+  --emphasis-color-rgb: 255, 255, 255;
+  --secondary-color: rgba(222, 226, 230, 0.75);
+  --secondary-color-rgb: 222, 226, 230;
+  --secondary-bg: #343a40;
+  --secondary-bg-rgb: 52, 58, 64;
+  --tertiary-color: rgba(222, 226, 230, 0.5);
+  --tertiary-color-rgb: 222, 226, 230;
+  --tertiary-bg: #2b3035;
+  --tertiary-bg-rgb: 43, 48, 53;
+
+  --primary-text-emphasis: #6ea8fe;
+  --primary-text-emphasis-rgb: 110, 168, 254;
+  --secondary-text-emphasis: #a7acb1;
+  --secondary-text-emphasis-rgb: 167, 172, 177;
+  --success-text-emphasis: #75b798;
+  --success-text-emphasis-rgb: 117, 183, 152;
+  --info-text-emphasis: #6edff6;
+  --info-text-emphasis-rgb: 110, 223, 246;
+  --warning-text-emphasis: #ffda6a;
+  --warning-text-emphasis-rgb: 255, 218, 106;
+  --danger-text-emphasis: #ea868f;
+  --danger-text-emphasis-rgb: 234, 134, 143;
+  --light-text-emphasis: #f8f9fa;
+  --light-text-emphasis-rgb: 248, 249, 250;
+  --dark-text-emphasis: #dee2e6;
+  --dark-text-emphasis-rgb: 222, 226, 230;
+
+  --primary-bg-subtle: #031633;
+  --secondary-bg-subtle: #161719;
+  --success-bg-subtle: #051b11;
+  --info-bg-subtle: #032830;
+  --warning-bg-subtle: #332701;
+  --danger-bg-subtle: #2c0b0e;
+  --light-bg-subtle: #343a40;
+  --dark-bg-subtle: #1a1d20;
+
+  --primary-border-subtle: #084298;
+  --secondary-border-subtle: #41464b;
+  --success-border-subtle: #0f5132;
+  --info-border-subtle: #087990;
+  --warning-border-subtle: #997404;
+  --danger-border-subtle: #842029;
+  --light-border-subtle: #495057;
+  --dark-border-subtle: #343a40;
+
+  --code-color: #e685b5;
+  --highlight-color: #dee2e6;
+  --highlight-bg: #664d03;
+
+  --border-color: #495057;
+  --border-color-translucent: rgba(255, 255, 255, 0.15);
+
+  --form-valid-color: #75b798;
+  --form-valid-border-color: #75b798;
+  --form-invalid-color: #ea868f;
+  --form-invalid-border-color: #ea868f;
+}
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
@@ -0,0 +1,73 @@
+:root {
+  color-scheme: light;
+
+  --primary: #000;
+  --primary-rgb: 0, 0, 0;
+  --light: #f8f9fa;
+  --light-rgb: 248, 249, 250;
+  --dark: #212529;
+  --dark-rgb: 33, 37, 41;
+
+  --body-color: #212529;
+  --body-color-rgb: 33, 37, 41;
+  --body-bg: #fff;
+  --body-bg-rgb: 255, 255, 255;
+
+  --emphasis-color: #000;
+  --emphasis-color-rgb: 0, 0, 0;
+  --secondary-color: rgba(33, 37, 41, 0.75);
+  --secondary-color-rgb: 33, 37, 41;
+  --secondary-bg: #e9ecef;
+  --secondary-bg-rgb: 233, 236, 239;
+  --tertiary-color: rgba(33, 37, 41, 0.5);
+  --tertiary-color-rgb: 33, 37, 41;
+  --tertiary-bg: #f8f9fa;
+  --tertiary-bg-rgb: 248, 249, 250;
+
+  --primary-text-emphasis: #052c65;
+  --primary-text-emphasis-rgb: 5, 44, 101;
+  --secondary-text-emphasis: #2b2f32;
+  --secondary-text-emphasis-rgb: 43, 47, 50;
+  --success-text-emphasis: #0a3622;
+  --success-text-emphasis-rgb: 10, 54, 34;
+  --info-text-emphasis: #055160;
+  --info-text-emphasis-rgb: 5, 81, 96;
+  --warning-text-emphasis: #664d03;
+  --warning-text-emphasis-rgb: 102, 77, 3;
+  --danger-text-emphasis: #58151c;
+  --danger-text-emphasis-rgb: 88, 21, 28;
+  --light-text-emphasis: #495057;
+  --light-text-emphasis-rgb: 73, 80, 87;
+  --dark-text-emphasis: #495057;
+  --dark-text-emphasis-rgb: 73, 80, 87;
+
+  --primary-bg-subtle: #cfe2ff;
+  --secondary-bg-subtle: #e2e3e5;
+  --success-bg-subtle: #d1e7dd;
+  --info-bg-subtle: #cff4fc;
+  --warning-bg-subtle: #fff3cd;
+  --danger-bg-subtle: #f8d7da;
+  --light-bg-subtle: #fcfcfd;
+  --dark-bg-subtle: #ced4da;
+
+  --primary-border-subtle: #9ec5fe;
+  --secondary-border-subtle: #c4c8cb;
+  --success-border-subtle: #a3cfbb;
+  --info-border-subtle: #9eeaf9;
+  --warning-border-subtle: #ffe69c;
+  --danger-border-subtle: #f1aeb5;
+  --light-border-subtle: #e9ecef;
+  --dark-border-subtle: #adb5bd;
+
+  --code-color: #d63384;
+  --highlight-color: #212529;
+  --highlight-bg: #fff3cd;
+
+  --border-color: #dee2e6;
+  --border-color-translucent: rgba(0, 0, 0, 0.175);
+
+  --form-valid-color: #198754;
+  --form-valid-border-color: #198754;
+  --form-invalid-color: #dc3545;
+  --form-invalid-border-color: #dc3545;
+}