Enable convenience features in MkDocs Material

- better navigation
- search
- comments via GitHub Discussions

mkdocs.yml

@@ -6,10 +6,18 @@ edit_uri: edit/main/docs/
 
 theme:
   name: material
+  custom_dir: overrides
   features:
+    - navigation.instant
+    - navigation.tracking
     - navigation.tabs
+    - navigation.sections
+    - navigation.top
     - content.action.view
     - content.action.edit
+    - search.suggest
+    - search.highlight
+    - content.code.copy
   icon:
     repo: fontawesome/brands/github
 
@@ -18,11 +26,23 @@ plugins:
       tags_file: tags.md
   - git-revision-date-localized:
       enable_creation_date: true
+  - search
+  - awesome-pages
+  - minify:
+      minify_html: true
+      minify_css: true
+      minify_js: true
+      htmlmin_opts:
+        remove_comments: true
+      cache_safe: true
 
 markdown_extensions:
   - admonition
 
 nav:
   - Start: index.md
-  - Snipplets: snipplets/index.md
+  - ... | regex=^(?!need_love\.md|bash4\.md|wishes\.md|tags\.md)
   - tags.md
+
+watch:
+  - overrides

overrides/partials/comments.html

@@ -0,0 +1,48 @@
+  <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+  <!-- Insert generated snippet here -->
+  <script src="https://giscus.app/client.js"
+    data-repo="flokoe/bash-hackers-wiki"
+    data-repo-id="R_kgDOJ3Nr6Q"
+    data-category="Giscus Page Comments"
+    data-category-id="DIC_kwDOJ3Nr6c4CXq9t"
+    data-mapping="pathname"
+    data-strict="1"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="top"
+    data-theme="preferred_color_scheme"
+    data-lang="en"
+    data-loading="lazy"
+    crossorigin="anonymous"
+    async>
+  </script>
+
+  <!-- Synchronize Giscus theme with palette -->
+  <script>
+    var giscus = document.querySelector("script[src*=giscus]")
+
+    /* Set palette on initial load */
+    var palette = __md_get("__palette")
+    if (palette && typeof palette.color === "object") {
+      var theme = palette.color.scheme === "slate" ? "dark" : "light"
+      giscus.setAttribute("data-theme", theme)
+    }
+
+    /* Register event handlers after documented loaded */
+    document.addEventListener("DOMContentLoaded", function() {
+      var ref = document.querySelector("[data-md-component=palette]")
+      ref.addEventListener("change", function() {
+        var palette = __md_get("__palette")
+        if (palette && typeof palette.color === "object") {
+          var theme = palette.color.scheme === "slate" ? "dark" : "light"
+
+          /* Instruct Giscus to change theme */
+          var frame = document.querySelector(".giscus-frame")
+          frame.contentWindow.postMessage(
+            { giscus: { setConfig: { theme } } },
+            "https://giscus.app"
+          )
+        }
+      })
+    })
+  </script>