Implement site redesign with dark mode

package.json

@@ -18,9 +18,6 @@
     "build-site-for-staging": "PRODUCTION=false eleventy",
     "build-site-for-production": "PRODUCTION=true OPTIMIZE=true eleventy"
   },
-  "dependencies": {
-    "bootstrap-scss": "^4.6.2"
-  },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.20",
     "firebase-tools": "^13.20.0",
@@ -36,6 +33,6 @@
     "markdown-it-deflist": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
     "sass": "^1.79.3",
-    "shiki": "^1.19.0"
+    "shiki": "^1.20.0"
   }
 }

src/_11ty/plugins/highlight.js

@@ -1,4 +1,5 @@
 import {getSingletonHighlighter} from 'shiki';
+import dashDarkTheme from '../syntax/dash-dark.js';
 import dashLightTheme from '../syntax/dash-light.js';
 
 const _terminalLanguages = {
@@ -49,7 +50,7 @@ export async function configureHighlighting(markdown) {
       'csharp',
       'cmake',
     ],
-    themes: [dashLightTheme],
+    themes: [dashLightTheme, dashDarkTheme],
   });
 
   markdown.renderer.rules.fence = function (tokens, index) {
@@ -167,7 +168,10 @@ function _highlight(
 
   return highlighter.codeToHtml(content, {
     lang: language,
-    theme: 'dash-light',
+    themes: {
+      light: 'dash-light',
+      dark: 'dash-dark',
+    },
     transformers: [
       {
         pre(preElement) {

src/_11ty/plugins/markdown.js

@@ -25,7 +25,7 @@ export const markdown = (() => {
         assistiveText: title => `Link to '${title}' section`,
         symbol: '#',
         class: 'heading-link',
-        wrapper: ['<div class="header-wrapper">', '</div>']
+        wrapper: ['<div class="heading-wrapper">', '</div>']
       }),
     });
 
@@ -67,15 +67,19 @@ function _registerAside(markdown, id, defaultTitle, icon, style) {
     render: function (tokens, index) {
       if (tokens[index].nesting === 1) {
         const parsedArgs = /\s+(.*)/.exec(tokens[index].info);
-
         const title = parsedArgs?.[1] ?? defaultTitle;
-        return `<aside class="alert ${style}">
-<div class="alert-header">
-${icon !== null ? `<i class="material-symbols" aria-hidden="true">${icon}</i>` : ''}
-<span>${title ?? ''}</span>
-</div>
-<div class="alert-content">
-`;
+
+        let aside = `<aside class="alert ${style}">`;
+        if (title !== null) {
+          aside += `<div class="alert-header">
+            ${icon !== null ? `<i class="material-symbols" aria-hidden="true">${icon}</i>` : ''}
+            <span>${title}</span>
+          </div>`;
+        }
+
+        aside += `<div class="alert-content">`;
+
+        return aside;
       } else {
         return '</div></aside>\n';
       }

src/_11ty/shortcodes.js

@@ -10,7 +10,7 @@ function _setupMedia(eleventyConfig) {
     let embedMarkup = `<iframe ${fullWidth ? 'class="full-width"' : 'width="560" height="315"'} 
         src="https://www.youtube.com/embed/${id}" title="${title}" frameborder="0" 
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-        allowfullscreen loading="lazy"></iframe><br>`;
+        allowfullscreen loading="lazy"></iframe>`;
 
     if (!skipAlternativeLink) {
       embedMarkup += `<p><a href="https://www.youtube.com/watch/${id}" target="_blank" rel="noopener" title="Open '${title}' video in new tab">${title}</a></p>`;