feat: Upgrade Bootstrap to version 5 and support dark mode

assets/js/base.js

@@ -19,8 +19,8 @@ limitations under the License.
     'use strict';
 
     $(function() {
-        $('[data-toggle="tooltip"]').tooltip();
-        $('[data-toggle="popover"]').popover();
+        $('[data-bs-toggle="tooltip"]').tooltip();
+        $('[data-bs-toggle="popover"]').popover();
 
         $('.popover-dismiss').popover({
             trigger: 'focus'

assets/js/click-to-copy.js

@@ -0,0 +1,98 @@
+let codeListings = document.querySelectorAll('.highlight > pre');
+
+for (let index = 0; index < codeListings.length; index++) {
+  const codeSample = codeListings[index].querySelector('code');
+  if (!codeSample) {
+    continue;
+  }
+
+  const copyButton = document.createElement('button');
+  const buttonAttributes = {
+    type: 'button',
+    title: 'Copy to clipboard',
+    'data-bs-toggle': 'tooltip',
+    'data-bs-placement': 'top',
+    'data-bs-container': 'body',
+  };
+
+  Object.keys(buttonAttributes).forEach((key) => {
+    copyButton.setAttribute(key, buttonAttributes[key]);
+  });
+
+  copyButton.classList.add(
+    'fas',
+    'fa-copy',
+    'btn',
+    'btn-sm',
+    'td-click-to-copy'
+  );
+  const tooltip = new bootstrap.Tooltip(copyButton);
+
+  copyButton.onclick = () => {
+    copyCode(codeSample, copyButton, tooltip);
+  };
+
+  copyButton.onmouseout = () => {
+    copyButton.setAttribute('data-bs-original-title', 'Copy to clipboard');
+    tooltip.hide();
+  };
+
+  const buttonDiv = document.createElement('div');
+  buttonDiv.classList.add('click-to-copy');
+  buttonDiv.append(copyButton);
+  codeListings[index].insertBefore(buttonDiv, codeSample);
+}
+
+const copyCode = (codeSample, copyButton, tooltip) => {
+  if (!codeSample) {
+    return;
+  }
+
+  const isConsoleBlock = codeSample.matches(
+    "code[data-lang='console'], code.language-console"
+  );
+  let text;
+
+  if (isConsoleBlock) {
+    const clone = codeSample.cloneNode(true);
+    pruneUnselectableElements(codeSample, clone);
+    text = clone.textContent;
+    // For each command, strip the space after the prompt and before the
+    // command:
+    text = text.replace(/^ /gm, '');
+  } else {
+    text = codeSample.textContent;
+  }
+  text = text ? text.trim() : '';
+
+  if (!navigator.clipboard) {
+    console.warn('Clipboard API not available (requires HTTPS or localhost)');
+    return;
+  }
+
+  navigator.clipboard.writeText(text + '\n').then(() => {
+    copyButton.setAttribute('data-bs-original-title', 'Copied!');
+    tooltip.show();
+  }).catch(error => {
+    console.warn('Failed to copy text to clipboard:', error);
+  });
+};
+
+const pruneUnselectableElements = (sourceNode, cloneNode) => {
+  const sourceChildren = sourceNode.children;
+  const cloneChildren = cloneNode.children;
+
+  for (let i = sourceChildren.length - 1; i >= 0; i--) {
+    const sourceChild = sourceChildren[i];
+    const cloneChild = cloneChildren[i];
+    const style = window.getComputedStyle(sourceChild);
+    const unselectable = style.userSelect === 'none';
+
+    if (unselectable) {
+      cloneChild.remove();
+      continue;
+    }
+
+    pruneUnselectableElements(sourceChild, cloneChild);
+  }
+};

assets/js/dark-mode.js

@@ -0,0 +1,92 @@
+/*!
+ * This is a Docsy-adapted version of https://github.com/twbs/examples/blob/main/color-modes/js/color-modes.js.
+ *
+ * Original header:
+ *
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const themeKey = 'td-color-theme'
+  const getStoredTheme = () => localStorage.getItem(themeKey)
+  const setStoredTheme = theme => localStorage.setItem(themeKey, theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  document.documentElement.removeAttribute('data-theme-init')
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    if (!btnToActive) {
+      return
+    }
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    if (themeSwitcherText) {
+      const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+      themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+    }
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()

assets/js/offline-search.js

@@ -162,7 +162,7 @@
                     const $entry = $('<div>').addClass('mt-4');
 
                     $entry.append(
-                        $('<small>').addClass('d-block text-muted').text(r.ref)
+                        $('<small>').addClass('d-block text-body-secondary').text(r.ref)
                     );
 
                     $entry.append(

assets/scss/_alerts.scss

@@ -2,7 +2,7 @@
 
 .alert {
     font-weight: $font-weight-medium;
-    background: $white;
+    background: var(--bs-body-bg);
     color: inherit;
     border-radius: 0;
 

assets/scss/_boxes.scss

@@ -3,8 +3,9 @@
 
 // box-variant creates the main style for a colored section used on the site.
 @mixin box-variant($parent, $color-name, $color-value) {
-    $text-color: color-yiq($color-value);
-    $link-color: mix($blue, $text-color, lightness($color-value));
+  @if type-of($color-value) == 'color' {
+    $text-color: color-contrast($color-value);
+    $link-color: mix($blue, $text-color);
     $link-hover-color: rgba($link-color, 0.5) !default;
 
     #{$parent} {
@@ -27,15 +28,24 @@
                     content: "";
                 }
             }
+
+            p > a {
+                color: $link-color;
+
+                &:hover,
+                &:focus {
+                    color: $link-hover-color;
+                }
+            }
         }
     }
 
-    // Improve contrast for the links in paragraphs.
-    @include link-variant("#{$parent}--#{$color-name} p > a", $link-color, $link-hover-color, false);
-
     @if $enable-gradients {
         @include bg-gradient-variant("#{$parent}--1#{$color-name}#{$parent}--gradient", $color-value,true);
     }
+  } @else {
+    @warn "box-variant: #{$color-value} is not a color, skipping #{$parent}--#{$color-name}";
+  }
 }
 
 // Common min-height modifiers used for boxes.

assets/scss/_chroma-dark.scss

@@ -0,0 +1,79 @@
+/* Generated using: hugo gen chromastyles --style=github-dark */
+
+/* Background */ .bg { color:#e6edf3;background-color:#0d1117; }
+/* PreWrapper */ .chroma { color:#e6edf3;background-color:#0d1117;-webkit-text-size-adjust:none; }
+/* Error */ .chroma .err { color:#f85149 }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+/* LineHighlight */ .chroma .hl { background-color:#6e7681 }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#ff7b72 }
+/* KeywordConstant */ .chroma .kc { color:#79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color:#ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color:#ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color:#79c0ff }
+/* KeywordReserved */ .chroma .kr { color:#ff7b72 }
+/* KeywordType */ .chroma .kt { color:#ff7b72 }
+/* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold }
+/* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold }
+/* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold }
+/* NameEntity */ .chroma .ni { color:#ffa657 }
+/* NameException */ .chroma .ne { color:#f0883e;font-weight:bold }
+/* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold }
+/* NameNamespace */ .chroma .nn { color:#ff7b72 }
+/* NameProperty */ .chroma .py { color:#79c0ff }
+/* NameTag */ .chroma .nt { color:#7ee787 }
+/* NameVariable */ .chroma .nv { color:#79c0ff }
+/* NameVariableClass */ .chroma .vc { color:#79c0ff }
+/* NameVariableGlobal */ .chroma .vg { color:#79c0ff }
+/* NameVariableInstance */ .chroma .vi { color:#79c0ff }
+/* NameVariableMagic */ .chroma .vm { color:#79c0ff }
+/* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold }
+/* NameFunctionMagic */ .chroma .fm { color:#d2a8ff;font-weight:bold }
+/* Literal */ .chroma .l { color:#a5d6ff }
+/* LiteralDate */ .chroma .ld { color:#79c0ff }
+/* LiteralString */ .chroma .s { color:#a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color:#79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color:#a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color:#a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color:#79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color:#a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color:#a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color:#79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff }
+/* LiteralNumber */ .chroma .m { color:#a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color:#a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color:#a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color:#a5d6ff }
+/* Operator */ .chroma .o { color:#ff7b72;font-weight:bold }
+/* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold }
+/* Comment */ .chroma .c { color:#8b949e;font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic }
+/* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic }
+/* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic }
+/* GenericDeleted */ .chroma .gd { color:#ffa198;background-color:#490202 }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:#ffa198 }
+/* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold }
+/* GenericInserted */ .chroma .gi { color:#56d364;background-color:#0f5323 }
+/* GenericOutput */ .chroma .go { color:#8b949e }
+/* GenericPrompt */ .chroma .gp { color:#8b949e }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:#79c0ff }
+/* GenericTraceback */ .chroma .gt { color:#ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w { color:#6e7681 }