jekyll-ham 0.3.1 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f39da1492ade7da78cd6e948bb5d35d9bcfa88b53b32056d384fd3ed2f56d880
-  data.tar.gz: b8017ac2f62c87fa9412e385b350789b11ced1bf42f39ee23f0d20b057c14b44
+  metadata.gz: 21d9bce136793f181a7227a0bd17ef8d2191e3bf834aa80a48d1f509feb7a7cd
+  data.tar.gz: cf3a60ab44ce32017302ffd28fee2b91dcbb213c31fd7528d68efbf12ce35d71
 SHA512:
-  metadata.gz: 89f5c4597c9686272e9547d67912b71304319706c2f03226b8a31b2686778254c42140560d7edaafa3e62821280bfd44fdfe0c2b4bb7e6ad27e70f7b2a26bdf7
-  data.tar.gz: c529c06a6d050d3e65f2024fae47398e536d9fddef50e7e6d5211557053ef44ded0091ee103b8a523b114f15a6c1ea1f510e8051d17aedc63e035e522f2ce7d6
+  metadata.gz: 9d06d7430743e1ee12b58bf02fbf9ed8b5676f1a05abc29571cd4be206e4be32726d7be2d5b6c1e9fcbb9cfa15d2709a7bc426325a02a5511c59046d99084a3c
+  data.tar.gz: 5c584f8a2bc52bb734839d5e8137002980bb277fa5cd36edaafda4fb8b2b57f91dda198c79a768ff8f1927347e93755ffe5f514a8be0433273d3877c1efb98f6

data/README.md

@@ -29,6 +29,11 @@ external_links:
 ---
 
 # HAM 🥩
+
+> [!IMPORTANT]
+> 
+> **BREAKING CHANGE:** HAM is currently being upgraded to Halfmoon 2.0, which introduce visual breaking changes. See <https://github.com/reinhart1010/HAM/issues/6>.
+
 HAM is a Jekyll-based boilerplate template for generating better, static wiki-style websites. HAM can be instantly used to build static wiki pages. But the best of all, the default theme of HAM can be easily customized to create more personalized wiki pages, unlike those from MediaWiki, for example.
 
 This project is built to replace the current, MediaWiki installation at <hackapedia.reinhart1010.id> after I found out difficult to create custom styles for it, while other, Git-based alternatives such as GitHub Wiki sucks (no, really) and may not support self-hosting on shared hosting providers.
@@ -41,6 +46,11 @@ HAM is short for:
 + [Halfmoon] and Markdown
 + && i++ (can we get more pull requests to add more stuff into this list?)
 
+## Why does HAM look boring?
+HAM ships the default [Halfmoon] theme by default, which might be considered boring by some. But that's the beauty of it, because **HAM supports Halfmoon's CSS variables to play with!**
+
+We believe that everyone should be able to theme HAM websites according to their brand and preferences, [including us over @reinhart1010 and @1010bots](https://github.com/reinhart1010/dotfiles/blob/main/halfmoon.css).
+
 ## Features
 ### What HAM is
 - [x] A static-site wiki generator
@@ -56,6 +66,9 @@ HAM is short for:
 
 ### What HAM would be
 - [ ] Supporting Forem (DEV.to) liquid tags (YouTube embeds, Twitter posts, etc.)
+  - Actually, we are starting to support some of them with privacy-preserving options, like this YouTube embed below (we promised this would not be another rickroll).
+
+{% youtube 0FKaIiRhUME %}
 
 ## Usage
 ### For [GitHub Pages](https://pages.github.com)
@@ -81,7 +94,7 @@ gem "minima"
 on your `Gemfile` with
 
 ```gemspec
-gem "jekyll-ham", "~> 0.2.3"
+gem "jekyll-ham", "~> 0.3.3"
 ```
 
 Also don't forget to change the `theme` configuration on your `_config.yml` to `jekyll-ham` instead of `minima`.
@@ -112,12 +125,39 @@ ham:
       content: BBBBBB
   contributing: # Additional metadata for "Contribute to This Page" section on sidebar
     discuss: # For "Discuss" (or "Talk page" on MediaWiki)
-      type: url | custom | facebook | giscus | telegram | utterances
+      type: url | custom | commentbox.io | disqus | facebook | giscus | telegram | utterances
       url: https://github.com/reinhart1010/HAM/discussions/
     view_source_base_url: https://github.com/reinhart1010/HAM/blob/main/ # The base URL to publicly view the original (Markdown) source code
     issue_url: https://github.com/reinhart1010/HAM/issues/ # The URL to report an issue related to site or content
 ```
 
+Note: You can also override the whole favicon settings (either to entirely remove, or adding mobile or browser-specific icon formats) by overriding `_includes/favicon.html`.
+
+### Navigation
+HAM currently provides two navigation areas: the **navigation bar** and the **index** (as on the sidebar).
+
+#### Navigation Bar
+You can freely add items in the navigation bar by modifying `_includes/navbar.html`, including placing additional nested menus, dialogs/modals, and other HTML tags.
+
+#### Sidebar
+Just like the "On This Page" section, you can add custom sections into the sidebar. Note that the configuration is stored **outside** the `ham` section of `_config.yml` (see below example).
+
+```yaml
+ham:
+  # Other HAM configuration here
+data:
+  index:
+    - name: "Customise Me"
+      id: "customize-me"
+      children:
+        - name: "Sample Menu 1"
+          url: "#"
+        - name: "Sample Menu 2"
+          url: "#"
+        - name: "Sample Menu 3"
+          url: "#"
+```
+
 ### Comments
 HAM provides built-in support for Facebook, Giscus, Telegram, and Utteranc.es widgets plugins. However, you can also add your own widgets or links by following these instructions.
 
@@ -133,7 +173,7 @@ ham:
 ```
 
 #### Custom Comments Widget (HTML code)
-You can use an custom-made comments widget (e.g. JavaScript-based or `<iframe>` element) into HAM by placing the code under `_includes/custom-comments.html`. You can also use Jekyll-specific variables and attributes including `{{ site.url }}` to render custom widget code.
+You can use an custom-made comments widget (e.g. JavaScript-based or `<iframe>` element) into HAM by placing the code under `_includes/custom-comments.html`. You can also use Jekyll-specific variables and attributes including `site.title`, `site.ham.contributing.issue_url` and `page.tags` to render custom widget code.
 
 ```yaml
 ham:
@@ -142,6 +182,28 @@ ham:
       type: custom
 ```
 
+#### CommentBox.io
+To set up CommentBox.io for HAM, [follow their installation instructions](https://commentbox.io), and modify the `_config.yml` according to the values obtained from the generated HTML snippet.
+
+```yaml
+ham:
+  contributing:
+    discuss:
+      type: commentbox.io
+      project_id: CommentBox.io Project ID
+```
+
+#### Disqus
+To set up Disqus for HAM, [follow their installation instructions](https://commentbox.io), and modify the `_config.yml` according to the values obtained from the generated HTML snippet.
+
+```yaml
+ham:
+  contributing:
+    discuss:
+      type: disqus
+      forum_shortname: example-forum # Disqus forum shortname, such as `example-forum` from `https://example-forum.disqus.com`.
+```
+
 #### Facebook
 HAM includes an external JavaScript from Facebook in order to render the Facebook Comments Widget. You are also required to register your website as an app on Facebook, [switch from Development Mode to Live/Public Mode](https://developers.facebook.com/docs/development/build-and-test/app-modes), and insert your App ID and preferred language into the configuration below.
 
@@ -176,7 +238,7 @@ ham:
 #### Telegram (@DiscussBot)
 HAM supports for Telegram's [@DiscussBot](https://t.me/DiscussBot) web comments widget. **This widget may not sync with comments on Telegram channels set up via [discussion groups](https://telegram.org/blog/privacy-discussions-web-bots).**
 
-To set up the widget, follow the instructions provided on https://comments.app under your Telegram account, and modify the `_config.yml` according to the values obtained from the generated HTML snippet.
+To set up the widget, follow the instructions provided on <https://comments.app> under your Telegram account, and modify the `_config.yml` according to the values obtained from the generated HTML snippet.
 
 ```yaml
 ham:
@@ -184,6 +246,11 @@ ham:
     discuss:
       type: telegram
       telegram_discussion: data-telegram-discussion
+      comments_limit: data-comments-limit # Optional, default: 5
+      height: data-height # Optional
+      color: data-color # Optional
+      dark_color: data-dark-color # Optional 
+      dark: data-dark # Optional, default: 0
 ```
 
 #### Utterances

data/_config.yml

@@ -6,6 +6,8 @@ defaults:
 ham:
   site_icon: https://raw.githubusercontent.com/googlefonts/noto-emoji/main/svg/emoji_u1f969.svg
 highlighter: rouge
+include:
+  - _embed
 kramdown:
   input: GFM
   syntax_highlighter: rouge

data/_includes/comments.html

@@ -1,50 +1,4 @@
-{% if page.contributing != null || site.ham.contributing != null %}
-  {% if page.contributing.discuss.type != 'url' || site.ham.contributing.discuss.type != 'url' %}
-    <h5 id="discuss" class="sidebar-title">Discuss this page</h5>
-    <div class="sidebar-title">
-      {% if page.contributing.discuss.type != null %}
-        {% case page.contributing.discuss.type %}
-          {% when 'custom' %}
-            {% include custom-comments.html %}
-          {% when 'facebook' %}
-            {% if page.contributing.discuss.facebook_app_id != null %}
-              <div id="fb-root"></div>
-              <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ page.contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ page.contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
-              <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
-            {% endif %}
-          {% when 'giscus' %}
-            <script src="https://giscus.app/client.js" data-repo="{{ page.contributing.discuss.repo }}" data-repo-id="{{ page.contributing.discuss.repo_id }}" data-category="{{ page.contributing.discuss.category }}" data-category-id="{{ page.contributing.discuss.category_id }}" data-mapping="{{ page.contributing.discuss.mapping }}" data-reactions-enabled="{{ page.contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ page.contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ page.contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ page.contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
-          {% when 'telegram' %}
-            <script src="https://telegram.org/js/telegram-widget.js?15" {% if page.contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ page.contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ page.contributing.discuss.comments_limit | default: '5' }}" {% if page.contributing.discuss.height != null %} data-height="{{ page.contributing.discuss.height }}" {% endif %} data-color="{{ page.contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ page.contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ page.contributing.discuss.colorful | default: 0 }}" data-dark="{{ page.contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
-          {% when 'utterances' %}
-            <script src="https://utteranc.es/client.js" repo="{{ page.contributing.discuss.repo }}" issue-term="{{ page.contributing.discuss.issue_term }}"
-            {% if page.contributing.discuss.label != null %}
-              label="{{ page.contributing.discuss.label }}"
-            {% endif %}
-              theme="{{ page.contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
-        {% endcase %}
-      {% else %}
-        {% case site.ham.contributing.discuss.type %}
-          {% when 'custom' %}
-            {% include custom-comments.html %}
-          {% when 'facebook' %}
-            {% if site.ham.contributing.discuss.facebook_app_id != null %}
-              <div id="fb-root"></div>
-              <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ site.ham.contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ site.ham.contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
-              <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
-            {% endif %}
-          {% when 'giscus' %}
-            <script src="https://giscus.app/client.js" data-repo="{{ site.ham.contributing.discuss.repo }}" data-repo-id="{{ site.ham.contributing.discuss.repo_id }}" data-category="{{ site.ham.contributing.discuss.category }}" data-category-id="{{ site.ham.contributing.discuss.category_id }}" data-mapping="{{ site.ham.contributing.discuss.mapping }}" data-reactions-enabled="{{ site.ham.contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ site.ham.contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ site.ham.contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ site.ham.contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
-          {% when 'telegram' %}
-            <script src="https://telegram.org/js/telegram-widget.js?15" {% if site.ham.contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ site.ham.contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ site.ham.contributing.discuss.comments_limit | default: '5' }}" {% if site.ham.contributing.discuss.height != null %} data-height="{{ site.ham.contributing.discuss.height }}" {% endif %} data-color="{{ site.ham.contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ site.ham.contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ site.ham.contributing.discuss.colorful | default: 0 }}" data-dark="{{ site.ham.contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
-          {% when 'utterances' %}
-            <script src="https://utteranc.es/client.js" repo="{{ site.ham.contributing.discuss.repo }}" issue-term="{{ site.ham.contributing.discuss.issue_term }}"
-            {% if site.ham.contributing.discuss.label != null %}
-              label="{{ site.ham.contributing.discuss.label }}"
-            {% endif %}
-              theme="{{ site.ham.contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
-        {% endcase %}
-      {% endif %}
-    </div>
-  {% endif %}
-{% endif %}
+<div class="alert alert-danger" role="alert">
+  <h4 class="alert-heading">Error: Custom comment widget is not set up.</h4>
+  Make sure that the custom comment widget code is placed under <code>/_includes/custom-comments.html</code>, then recompile.
+</div>

data/_includes/favicon.html

@@ -0,0 +1,3 @@
+<!-- Default favicon template. To override, create your own `_includes/favicon.html` file. -->
+<!-- You may want to use a favicon generator such as https://www.websiteplanet.com/webtools/favicon-generator/ -->
+<link rel="icon" href="{{ site.ham.site_favicon | default: site.ham.site_icon }}">

data/_includes/ham/comments.html

@@ -0,0 +1,49 @@
+{% assign contributing = page.contributing | default: site.ham.contributing %}
+{% if contributing != null %}
+  {% if contributing.discuss.type != 'url' %}
+    <h5 id="discuss" class="sidebar-title">Discuss this page</h5>
+    <div class="sidebar-title">
+      {% case contributing.discuss.type %}
+        {% when 'custom' %}
+          {% include comments.html %}
+        {% when 'commentbox.io %}
+          <div class="commentbox"></div>
+          <script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
+          <script>commentBox("{{ page.project_id }}")</script>
+        {% when 'disqus' %}
+          <div id="disqus_thread"></div>
+          <script>
+            var disqus_config = function () {
+              this.page.url = "{{ page.url }}";
+              this.page.identifier = "{{ page.url }}"; 
+            };
+            (function() { 
+              var d = document, s = d.createElement('script');
+              s.src = 'https://{{ contributing.discuss.forum_shortname }}.disqus.com/embed.js';
+              s.setAttribute('data-timestamp', +new Date());
+              (d.head || d.body).appendChild(s);
+            })();
+          </script>
+        {% when 'facebook' %}
+          {% if contributing.discuss.facebook_app_id != null %}
+            <div id="fb-root"></div>
+            <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
+            <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
+          {% endif %}
+        {% when 'giscus' %}
+          <script src="https://giscus.app/client.js" data-repo="{{ contributing.discuss.repo }}" data-repo-id="{{ contributing.discuss.repo_id }}" data-category="{{ contributing.discuss.category }}" data-category-id="{{ contributing.discuss.category_id }}" data-mapping="{{ contributing.discuss.mapping }}" data-reactions-enabled="{{ contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
+        {% when 'telegram' %}
+          <script src="https://telegram.org/js/telegram-widget.js?15" {% if contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ contributing.discuss.comments_limit | default: '5' }}" {% if contributing.discuss.height != null %} data-height="{{ contributing.discuss.height }}" {% endif %} data-color="{{ contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ contributing.discuss.colorful | default: 0 }}" data-dark="{{ contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
+        {% when 'utterances' %}
+          <script src="https://utteranc.es/client.js" repo="{{ contributing.discuss.repo }}" issue-term="{{ contributing.discuss.issue_term }}"
+          {% if contributing.discuss.label != null %}
+            label="{{ contributing.discuss.label }}"
+          {% endif %}
+            theme="{{ contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
+      {% endcase %}
+      <noscript>
+        Please enable JavaScript to view comments and discussions
+      </noscript>
+    </div>
+  {% endif %}
+{% endif %}

data/_includes/{external-link.html → ham/external-link.html}

@@ -1,4 +1,4 @@
-<a href="{{ link.url }}" class="sidebar-link sidebar-link-with-icon" target="{{ link.target }}">
+<a href="{{ link.url }}" class="list-group-item list-group-item-action" target="{{ link.target }}">
   <span class="sidebar-icon">
     <i class="{{ link.icon | default: 'bi bi-file-text' }}" aria-hidden="true"></i>
   </span>

data/_includes/ham/navbar.html

@@ -0,0 +1,25 @@
+<nav class="navbar navbar-expand-lg sticky-top" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
+  <div class="container-fluid">
+    <div class="d-md-none" role="group">
+      <button type="button" data-bs-toggle="offcanvas" data-bs-target="#_ham_sidebar" aria-controls="_ham_sidebar" aria-description="Open sidebar" class="btn btn-secondary btn-square">
+        <i class="bi bi-list-nested" aria-hidden="true"></i>
+      </button>
+    </div>
+    <a class="navbar-brand" href="#">
+      {% if site.ham.site_icon != null %}
+        <img src="{{ site.ham.site_icon }}" alt="{{ site.title }}" width="24" height="24" class="d-inline-block align-text-top">
+      {% endif %}{{ site.title }}
+    </a>
+    <div class="d-md-none" role="group">
+      <button type="button" data-bs-toggle="collapse" data-bs-target="#_ham_settings" aria-controls="_ham_settings" aria-description="Open navigation menu" class="btn btn-secondary btn-square">
+        <i class="bi bi-three-dots" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="collapse navbar-collapse" id="_ham_settings">
+      {% if site.tagline != null %}
+        <span>{{ site.tagline }}</span>
+      {% endif %}
+      {% include navbar.html %}
+    </div>
+  </div>
+</nav>

data/_includes/{search-modal.html → ham/search-modal.html}

@@ -5,7 +5,7 @@
         <span aria-hidden="true">&times;</span>
       </a>
       <input id="search-input" type="text" class="form-control" placeholder="Keyword">
-      <ul id="results-container" class="my-10"></ul>
+      <ul id="_ham_search_results_container" class="my-10"></ul>
       <span>Search articles on this site...</span>
     </div>
   </div>

data/_includes/ham/sidebar.html

@@ -0,0 +1,39 @@
+<nav class="sidebar offcanvas-start offcanvas-md" tabindex="-1" id="_ham_sidebar">
+  <div class="offcanvas-header d-md-none border-bottom border-secondary border-opacity-25">
+    <a href="/" class="sidebar-brand">
+      {% if site.ham.site_icon != null %}
+        <img src="{{ site.ham.site_icon }}" alt="{{ site.title }}">
+      {% endif %}{{ site.title }}
+    </a>
+    <button type="button" class="btn-close d-md-none" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#_ham_sidebar">
+      <i class="bi bi-x-lg" aria-description="Close sidebar"></i>
+    </button>
+  </div>
+  <div class="offcanvas-body">
+    <div class="mb-3">
+      <h5 id="on-this-page" class="sidebar-title">Search</h5>
+      <input type="text" class="form-control" id="_ham_search_input" placeholder="Search...">
+      <div id="_ham_search_results_container" class="list-group"></div>
+    </div>
+    {% if site.data.index %}
+      <div class="mb-3">
+        {% for section in site.data.index %}
+          <h5 class="sidebar-title" id="{{ section.id }}">
+            {{ section.name }}
+          </h5>
+          <ul class="list-group">
+            {% for child in section.children %}
+              <a href="{{ child.url }}" class="list-group-item">
+                <span class="name">{{ child.name }}</span>
+              </a>
+            {% endfor %}
+          </ul>
+        {% endfor %}
+      </div>
+    {% endif %}
+    <div class="mb-3">
+      <h5 id="on-this-page" class="sidebar-title">On This Page</h5>
+      <div id="_ham_on_this_page_ul"></div>
+    </div>
+  </div>
+</nav>

data/_includes/navbar.html

@@ -1,27 +1,3 @@
-<nav class="navbar">
-  <div class="navbar-content">
-    <button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
-      <i class="bi bi-list ham-menu-button-icon-open" aria-hidden="true"></i>
-      <i class="bi bi-x-lg ham-menu-button-icon-close" aria-hidden="true"></i>
-      <span class="sr-only">Toggle sidebar</span>
-    </button>
-  </div>
-  <a href="/" class="navbar-brand">
-    {% if site.ham.site_icon != null %}
-      <img src="{{ site.ham.site_icon }}" alt="{{ site.title }}">
-    {% endif %}{{ site.title }}
-  </a>
-  {% if site.tagline != null %}
-    <span class="navbar-text d-none d-sm-block">{{ site.tagline }}</span> <!-- text-monospace = font-family shifted to monospace -->
-  {% endif %}
-  <div class="ml-auto">
-    <button onClick="halfmoon.toggleDarkMode()" class="btn btn-action bg-dark-lm bg-white-dm text-white-lm text-dark-dm">
-      <i class="bi bi-moon-stars" aria-hidden="true"></i>
-      <span class="sr-only">Toggle Dark Mode</span>
-    </button>
-    <a href="#search" class="btn btn-action btn-primary" onClick="document.getElementById('search-input').focus()">
-      <i class="bi bi-search" aria-hidden="true"></i>
-      <span class="sr-only">Search</span>
-    </a>
-  </div>
-</nav>
+<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
+  <!-- See also https://www.gethalfmoon.com/docs/navbar/ to customize the navbar content -->
+</ul>

data/_layouts/default.html

@@ -9,8 +9,10 @@
     <meta name="{{ meta.name }}" content="{{ meta.content }}" />
   {% endfor %}
 
-  <!-- Favicon and title -->
-  <link rel="icon" href="{{ site.ham.site_favicon | default: site.ham.site_icon }}">
+  <!-- Favicon -->
+  {% include favicon.html %}
+
+  <!-- Title -->
   <title>{{ page.title }} - {{ site.title }}</title>
 
   <!-- Halfmoon CSS -->
@@ -31,30 +33,43 @@
     <link href="{{ link }}" rel="me" />
   {% endfor %}
 </head>
-<body class="with-custom-webkit-scrollbars with-custom-css-scrollbars" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true" data-set-preferred-mode-onload="true">
-  {% include search-modal.html %}
+<body class="ps-md-sbwidth" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true" data-set-preferred-mode-onload="true">
   <div class="page-wrapper with-navbar with-sidebar">
     <div class="sticky-alerts"></div>
-    {% include navbar.html %}
-    {% include sidebar.html %}
+    {% include ham/navbar.html %}
+    {% include ham/sidebar.html %}
     <div class="content-wrapper">
       <div class="container-fluid">
         {{ content }}
       </div>
     </div>
-    {% include footer.html %}
+    {% include ham/footer.html %}
   </div>
 
   <!-- Simple Jekyll Search JS -->
   <script src="{{ site.url }}/assets/simple-jekyll-search.min.js"></script>
   <script>
     var sjs = SimpleJekyllSearch({
-      searchInput: document.getElementById('search-input'),
-      resultsContainer: document.getElementById('results-container'),
-      json: '{{ site.url }}/assets/search.json'
-    })
+      searchInput: document.getElementById('_ham_search_input'),
+      resultsContainer: document.getElementById('_ham_search_results_container'),
+      searchResultTemplate: '<a href="{{ site.url }}{url}" class="list-group-item"><span class="fw-semibold">{title}</span><br><small>{url}</small></a>',
+      limit: 20,
+      noResultsText: 'No results...',
+      json: '{{ site.url }}/assets/search.json',
+    });
+    function updateSearchResultsVisibility (event) {
+      if (event.srcElement.value.length == 0) {
+        document.getElementById('_ham_search_results_container').classList.remove('mt-2');
+      } else {
+        document.getElementById('_ham_search_results_container').classList.add('mt-2');
+      }
+    }
+    document.getElementById('_ham_search_input').addEventListener('change', updateSearchResultsVisibility);
+    document.getElementById('_ham_search_input').addEventListener('input', updateSearchResultsVisibility);
   </script>
   <!-- Halfmoon JS -->
   <script src="{{ site.url }}/assets/halfmoon.min.js"></script>
+  <!-- Bootstrap JS for color modes -->
+  <script src="{{ site.url }}/assets/bootstrap-color-modes.js"></script>
 </body>
 </html>

data/_layouts/page.html

@@ -1,33 +1,84 @@
 ---
 layout: default
 ---
-<article class="row">
-  <div class="col-xl-8 p-20 collapse-group article-wrapper" id="_ham_content">
+<article class="row px-1 py-3">
+  <div class="col-xl-8 collapse-group article-wrapper" id="_ham_content">
     {{ content }}
   </div>
-  <div class="col-xl-4 pt-xl-20 pb-20">
+  <div class="col-xl-4">
     {% if page.related_topics != null %}
-      <h5 id="related-topics" class="sidebar-title">Related Topics</h5>
-      <div class="sidebar-divider"></div>
-      {% for link in page.related_topics %}
-        {% include external-link.html %}
-      {% endfor %}
+      <div class="mb-3">
+        <h5 id="related-topics" class="sidebar-title">Related Topics</h5>
+        <div class="list-group">
+          {% for link in page.related_topics %}
+            {% include ham/external-link.html %}
+          {% endfor %}
+        </div>
+      </div>
     {% endif %}
     {% if page.further_reading != null %}
-      <h5 id="further-reading" class="sidebar-title">Further Reading</h5>
-      <div class="sidebar-divider"></div>
-      {% for link in page.further_reading %}
-        {% include external-link.html %}
-      {% endfor %}
+      <div class="mb-3">
+        <h5 id="further-reading" class="sidebar-title">Further Reading</h5>
+        <div class="list-group">
+          {% for link in page.further_reading %}
+            {% include ham/external-link.html %}
+          {% endfor %}
+        </div>
+      </div>
     {% endif %}
     {% if page.external_links != null %}
-      <h5 id="external-links" class="sidebar-title">External Links</h5>
-      <div class="sidebar-divider"></div>
-      {% for link in page.external_links %}
-        {% include external-link.html %}
-      {% endfor %}
+      <div class="mb-3">
+        <h5 id="external-links" class="sidebar-title">External Links</h5>
+        <div class="list-group">
+          {% for link in page.external_links %}
+            {% include ham/external-link.html %}
+          {% endfor %}
+        </div>
+      </div>
     {% endif %}
-    {% include comments.html %}
+    {% if page.contributing != null or site.ham.contributing != null %}
+      <div class="mb-3">
+        <h5 id="contribute" class="sidebar-title">Contribute to This Page</h5>
+        <div class="list-group">
+          {% if page.contributing.discuss.type != null or site.ham.contributing.discuss.type != null %}
+            <a 
+              {% if page.contributing.discuss.type == 'url' or site.ham.contributing.discuss.type == 'url' %}
+                href="{{ page.contributing.discuss.url | default: site.ham.contributing.discuss.url }}"
+              {% else %}
+                #discuss
+              {% endif %} class="list-group-item">
+              <span class="sidebar-icon">
+                <i class="bi bi-chat-dots" aria-hidden="true"></i>
+              </span>
+              Discuss
+            </a>
+          {% endif %}
+          {% if page.contributing.issue_url != null or site.ham.contributing.issue_url != null %}
+            <a href="{{ page.contributing.issue_url | default: site.ham.contributing.issue_url }}" class="list-group-item">
+              <span class="sidebar-icon">
+                <i class="bi bi-bug" aria-hidden="true"></i>
+              </span>
+              Report New Issue
+            </a>
+          {% endif %}
+          {% if page.contributing.view_source_url != null or site.ham.contributing.view_source_base_url != null %}
+            <a
+              {% if page.contributing.issue_url != null %}
+                href="{{ page.contributing.view_source_url }}"
+              {% else %}
+                href="{{ site.ham.contributing.view_source_base_url }}{{ page.path }}"
+              {% endif %}
+              class="list-group-item">
+              <span class="sidebar-icon">
+                <i class="bi bi-code-slash" aria-hidden="true"></i>
+              </span>
+              View Source
+            </a>
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+    {% include ham/comments.html %}
   </div>
 </div>