Merge pull request #342 from gethinode/leaflet

Add support for core and optional modules

.gitignore

@@ -1,3 +1,4 @@
+/_vendor
 /public
 resources/
 node_modules/

README.md

@@ -11,6 +11,9 @@
     <a href="https://gohugo.io" alt="Hugo website">
         <img src="https://img.shields.io/badge/generator-hugo-brightgreen">
     </a>
+    <a href="https://gethinode.com" alt="Hinode theme">
+        <img src="https://img.shields.io/badge/theme-hinode-blue">
+    </a>
     <a href="https://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
         <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
     </a>

assets/js/flexsearch.js

@@ -1,164 +0,0 @@
-{{- $search := default true site.Params.navigation.search -}}
-{{- if $search -}}
-  var search = document.getElementById('search');
-  var suggestions = document.getElementById('suggestions');
-  var index = new FlexSearch.Document({
-    tokenize: "forward",
-    cache: 100,
-    document: {
-      id: "id",
-      tag: "tag",
-      store: ["href", "title", "description"],
-      index: ["title", "description", "content"]
-    }
-  });
-
-  /*
-  Source:
-    - https://github.com/nextapps-de/flexsearch#index-documents-field-search
-    - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-  */
-  function initIndex() {
-    // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-    // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language;
-    //       pages without a title (such as browserconfig.xml) are excluded
-    {{ $list := where (where site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
-    {{ $len := (len $list) -}}
-
-    index.add(
-      {{ range $index, $element := $list -}}
-        {
-          id: {{ $index }},
-          tag: "{{ .Lang }}",
-          href: "{{ .RelPermalink }}",
-          title: {{ .Title | jsonify }},
-          {{ with .Description -}}
-            description: {{ . | jsonify }},
-          {{ else -}}
-            description: {{ .Summary | plainify | jsonify }},
-          {{ end -}}
-          content: {{ .Plain | jsonify }}
-        })
-        {{ if ne (add $index 1) $len -}}
-          .add(
-        {{ end -}}
-      {{ end -}}
-    ;
-
-    search.addEventListener('input', showResults, true);
-  }
-   
-  function hideSuggestions(e) {
-    var isClickInsideElement = suggestions.contains(e.target);
-
-    if (!isClickInsideElement) {
-      suggestions.classList.add('d-none');
-    }
-  }
-
-  /*
-  Source:
-    - https://raw.githubusercontent.com/h-enk/doks/master/assets/js/index.js
-  */
-  function inputFocus(e) {
-    if (e.ctrlKey && e.key === '/' ) {
-      e.preventDefault();
-      search.focus();
-    }
-    if (e.key === 'Escape' ) {
-      search.blur();
-      suggestions.classList.add('d-none');
-    }
-  }
-
-  /*
-  Source:
-    - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
-  */
-  function suggestionFocus(e) {
-    const suggestionsHidden = suggestions.classList.contains('d-none');
-    if (suggestionsHidden) return;
-
-    const focusableSuggestions= [...suggestions.querySelectorAll('a')];
-    if (focusableSuggestions.length === 0) return;
-
-    const index = focusableSuggestions.indexOf(document.activeElement);
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      const nextIndex = index > 0 ? index - 1 : 0;
-      focusableSuggestions[nextIndex].focus();
-    }
-    else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
-      focusableSuggestions[nextIndex].focus();
-    }
-  }
-    
-  /*
-  Source:
-    - https://github.com/nextapps-de/flexsearch#index-documents-field-search
-    - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-  */
-  function showResults() {
-    const maxResult = 5;
-    var searchQuery = this.value;
-    // filter the results for the currently tagged language
-    const lang = document.documentElement.lang;
-    var results = index.search(searchQuery, { index: ['title', 'description', 'content'], limit: maxResult, tag: lang, enrich: true });
-
-    // flatten results since index.search() returns results for each indexed field
-    const flatResults = new Map(); // keyed by href to dedupe results
-    for (const result of results.flatMap(r => r.result)) {
-      if (flatResults.has(result.doc.href)) continue;
-      flatResults.set(result.doc.href, result.doc);
-    }
-
-    suggestions.innerHTML = "";
-    suggestions.classList.remove('d-none');
-
-    // inform user that no results were found
-    if (flatResults.size === 0 && searchQuery) {
-      const msg = suggestions.dataset.noResults;
-      const noResultsMessage = document.createElement('div')
-      noResultsMessage.innerHTML = `${msg} "<strong>${searchQuery}</strong>"`
-      noResultsMessage.classList.add("suggestion__no-results");
-      suggestions.appendChild(noResultsMessage);
-      return;
-    }
-
-    // construct a list of suggestions
-    for (const [href, doc] of flatResults) {
-      const entry = document.createElement('div');
-      suggestions.appendChild(entry);
-
-      const a = document.createElement('a');
-      a.href = href;
-      entry.appendChild(a);
-
-      const title = document.createElement('span');
-      title.classList.add('text-start');
-      title.textContent = doc.title;
-      title.classList.add("suggestion__title");
-      a.appendChild(title);
-
-      const description = document.createElement('span');
-      description.textContent = doc.description;
-      description.classList.add("suggestion__description");
-      a.appendChild(description);
-
-      suggestions.appendChild(entry);
-
-      if (suggestions.childElementCount == maxResult) break;
-    }
-  }
-    
-  if (search !== null && suggestions !== null) {
-    document.addEventListener('keydown', inputFocus);
-    document.addEventListener('keydown', suggestionFocus);  
-    document.addEventListener('click', hideSuggestions);
-    initIndex();
-  }
-
-{{- end -}}

assets/scss/app.scss

@@ -5,61 +5,11 @@
 @import "common/variables.scss";
 @import "common/icons.scss";
 
-// Import Bootstrap banner and functions
-@import "bootstrap/scss/mixins/banner";
-@include bsBanner("");
-@import "bootstrap/scss/functions";
+{{ if not (in site.Params.modules.core "bootstrap") }}
+    {{ errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" }}
+{{ end }}
 
-// Import Bootstrap configuration
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark.scss";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// Import Bootstrap layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
-
-// Import Bootstrap helpers
-@import "bootstrap/scss/helpers";
-
-// Import Font Awesome
-// scss-docs-start awesome
-@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "@fortawesome/fontawesome-free/scss/regular";
-@import "@fortawesome/fontawesome-free/scss/solid";
-@import "@fortawesome/fontawesome-free/scss/brands";
-// scss-docs-end awesome
+@import "bootstrap.scss";
 
 // Import Hinode theme styles
 @import "components/alert.scss";
@@ -76,7 +26,6 @@
 @import "components/pagination.scss";
 @import "components/persona.scss";
 @import "components/popover.scss";
-@import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
 @import "components/timeline.scss";
@@ -103,4 +52,4 @@
 @import "theme/theme.scss";
 
 // Import Bootstrap utilities API
-@import "bootstrap/scss/utilities/api";
+@import "modules/bootstrap/utilities/api";

assets/scss/components/_search.scss

@@ -1,117 +0,0 @@
-// Adapted from https://github.com/h-enk/doks
-
-@include media-breakpoint-up(md) {
-    .search {
-        max-width: 20rem;
-        margin-top: 0.125rem;
-        margin-bottom: 0.125rem;
-    }
-}
-
-.form-control.is-search {
-    padding-right: 4rem;
-    border: 1px solid transparent;
-    background: var(--bs-tertiary-bg);
-}
-
-.form-control.is-search:focus {
-    border: 1px solid $primary;
-}
-
-.search::after {
-    position: absolute;
-    top: 0.4625rem;
-    right: 0.5375rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-    padding-right: 0.3125rem;
-    padding-left: 0.3125rem;
-    font-size: $font-size-base * 0.75;
-    color: var(--bs-secondary-color);
-    content: "Ctrl + /";
-    border: 1px solid var(--bs-border-color);
-    border-radius: 0.25rem;
-}
-
-.navbar-form {
-    position: relative;
-}
-
-#suggestions {
-    position: absolute;
-    left: 0;
-    margin-top: 0.5rem;
-    width: calc(100vw - 3rem);
-    z-index: $zindex-dropdown;
-}
-
-#suggestions a,
-.suggestion__no-results {
-    padding: 0.75rem;
-    margin: 0 0.5rem;
-}
-
-#suggestions a {
-    display: block;
-    text-decoration: none;
-}
-
-#suggestions a:focus {
-    background-color: var(--bs-tertiary-bg);
-    outline: 0;
-}
-
-#suggestions div:not(:first-child) {
-    border-top: 1px dashed var(--bs-border-color);
-}
-
-#suggestions div:first-child {
-    margin-top: 0.5rem;
-}
-
-#suggestions div:last-child {
-    margin-bottom: 0.5rem;
-}
-
-#suggestions a:hover {
-    background-color: var(--bs-tertiary-bg);
-}
-
-#suggestions span {
-    display: flex;
-    font-size: $font-size-base;
-}
-
-.suggestion__title {
-    font-weight: $headings-font-weight;
-}
-
-.suggestion__description,
-.suggestion__no-results {
-    color: var(--bs-secondary-color);
-}
-
-@include media-breakpoint-up(sm) {
-    #suggestions {
-        width: 31.125rem;
-    }
-
-    #suggestions a {
-        display: flex;
-    }
-
-    .suggestion__title {
-        width: 9rem;
-        padding-right: 1rem;
-        border-right: 1px solid var(--bs-border-color);
-        display: inline-block;
-        text-align: right;
-    }
-
-    .suggestion__description {
-        width: 19rem;
-        padding-left: 1rem;
-    }
-}

assets/scss/components/_syntax.scss

@@ -1,5 +1,5 @@
 // stylelint-disable annotation-no-unknown
-@import "syntax-light";
+@import "components/syntax-light";
 
 .bg,
 .chroma,
@@ -13,12 +13,12 @@
 }
 
 .preview-background {
-    background-color: var(--bs-secondary-bg) if($enable-important-utilities, !important, null);
+    background-color: var(--bs-dark-bg-subtle) if($enable-important-utilities, !important, null);
 }
 
 @if $enable-dark-mode {
     [data-bs-theme="dark"] {
-        @import "syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
+        @import "components/syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
 
         .bg,
         .chroma,

assets/scss/components/_timeline.scss

@@ -6,14 +6,19 @@ $semi-circle-border: 0.2rem;
 :root {
     --timeline-highlight: var(--bs-primary);
     --timeline-icon-radius: #{$semi-circle-radius};
-    --timeline-offset: 50%
+    --timeline-offset: 50%;
+    --timeline-connector-bg: var(--bs-body-bg);
 }
 
 @each $state in map-keys($theme-colors) {
     .timeline-#{$state} {
       --timeline-highlight: var(--#{$prefix}#{$state});
     }
-}
+
+    .timeline-bg-#{$state} {
+        --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
+      }
+  }
 
 // scss-docs-end timeline
 
@@ -154,7 +159,7 @@ $semi-circle-border: 0.2rem;
     width: 2 * $connector-radius;
     height: 2 * $connector-radius;
     border-radius: 100%;
-    border: ($semi-circle-border * 1.5) solid var(--bs-body-bg);
+    border: ($semi-circle-border * 1.5) solid var(--timeline-connector-bg);
     color: var(--timeline-highlight);
     background: var(--timeline-highlight);
 }

config/_default/hugo.toml

@@ -96,16 +96,13 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "static/fonts"
     target = "static/fonts"
-# toml-docs-start javascript
-  [[module.mounts]]
-    source = "node_modules/bootstrap/dist/js"
-    target = "assets/js/vendor/bootstrap"
-    includeFiles = "*.bundle.js"
-  [[module.mounts]]
-    source = "node_modules/flexsearch/dist"
-    target = "assets/js/vendor/flexsearch"
-    includeFiles = "*.bundle.js"
-# toml-docs-end javascript
-  [[module.mounts]]
-    source = "node_modules/@fortawesome/fontawesome-free/webfonts"
-    target = "static/fonts"
+# toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/gethinode/mod-bootstrap"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-flexsearch"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-fontawesome"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-leaflet"
+# toml-docs-end modules

config/_default/params.toml

@@ -6,6 +6,13 @@
     modes = ["light", "dark"]
 # toml-docs-end main
 
+# toml-docs-start modules
+[modules]
+    core = ["bootstrap", "flexsearch", "fontawesome"]
+    optional = ["leaflet"]
+    excludeSCSS = ["bootstrap"]
+# toml-docs-end modules
+
 # toml-docs-start docs
 [docs]
     github = "https://github.com/gethinode/hinode"

config/_default/server.toml

@@ -16,7 +16,7 @@ for = '/**'
             https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
         frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
+        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
         manifest-src 'self'; \
         media-src 'self' \
         """

content/en/blog/bootstrap-elements.md

@@ -127,7 +127,7 @@ As an example, the following shortcode displays a button that, when clicked, tri
     Trigger panel
 {{</* /button */>}}
 
-{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+{{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
     Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
     revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
@@ -251,7 +251,7 @@ As an example, the following shortcode displays a timeline with the file `data/t
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* timeline data="timeline-en" */>}}
+{{</* timeline data="timeline-en" background="dark" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 

content/en/blog/components.md

@@ -0,0 +1,23 @@
+---
+author: Mark Dumay
+title: Components
+date: 2023-07-10
+description: Use shortcodes to add predefined components powered by external libraries.
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/puzzle.jpg
+photoCredits: <a href="https://unsplash.com/@ryoji__iwata">Ryoji Iwata</a>
+photoSource: <a href="https://unsplash.com/photos/5siQcvSxCP8">Unsplash</a>
+modules: ["leaflet"]
+---
+
+Hinode provides several shortcodes on top of the common [Bootstrap elements]({{< relref "bootstrap-elements" >}}). Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
+
+## Map
+
+As an example, the following shortcode displays an interactive map of the city of Amsterdam.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

content/nl/blog/components.md

@@ -0,0 +1,23 @@
+---
+author: Mark Dumay
+title: Componenten
+slug: componenten
+date: 2023-07-10
+description: Gebruik shortcodes om voorgedefiniëerde componenten toe te voegen die gebruikmaken van externe libraries.
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/puzzle.jpg
+photoCredits: <a href="https://unsplash.com/@ryoji__iwata">Ryoji Iwata</a>
+photoSource: <a href="https://unsplash.com/photos/5siQcvSxCP8">Unsplash</a>
+---
+
+Hinode biedt meerdere shortcodes aan bovenop de gebruikelijke [Bootstrap elementen]({{< relref "bootstrap-elements" >}}). Zie de [officiële documentatie]({{< param "links.hinode_docs" >}}) voor meer details.
+
+## Map
+
+De volgende shortcode toont een interactieve kaart van Amsterdam.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam CS" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

go.mod

@@ -0,0 +1,10 @@
+module github.com/gethinode/hinode
+
+go 1.19
+
+require (
+	github.com/gethinode/mod-bootstrap v1.1.0 // indirect
+	github.com/gethinode/mod-flexsearch v1.1.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.2.0 // indirect
+	github.com/gethinode/mod-leaflet v0.3.1 // indirect
+)

go.sum

@@ -0,0 +1,18 @@
+github.com/gethinode/mod-bootstrap v1.0.1 h1:NDZar+UEL42YHCvzzO+jVgqkZU5INA12BpjX3y6U4I4=
+github.com/gethinode/mod-bootstrap v1.0.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-bootstrap v1.1.0 h1:BbalsW8kmFhv+J+dcc41TGcjIlM/p69AB0h0oGhAXIU=
+github.com/gethinode/mod-bootstrap v1.1.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA=
+github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4=
+github.com/gethinode/mod-flexsearch v1.1.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
+github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
+github.com/gethinode/mod-fontawesome v1.1.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.2.0 h1:2nWYEjpUKu6IJ6kOh2WDlDUqRQ/dUGw6mJWIdMTA3O0=
+github.com/gethinode/mod-fontawesome v1.2.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-leaflet v0.2.3 h1:QQI4h+IH0jZ7fx4q0um2YIEiYBoW3OAfW8qHzbRCDPk=
+github.com/gethinode/mod-leaflet v0.2.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoSe+2Ykc=
+github.com/gethinode/mod-leaflet v0.3.1/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=

layouts/_default/baseof.html

@@ -79,6 +79,12 @@
         {{ end }}
 
         {{- partial "footer/toast-container.html" . -}}
-        {{- partialCached "footer/scripts.html" (dict "header" false "page" .) }}
+        {{- partialCached "footer/scripts.html" (dict "header" false "page" . "core" true) }}
+        {{- $modules := site.Params.modules.optional | intersect .Params.modules -}}
+        {{- range $index, $mod := $modules -}}
+            {{- $filename := printf "js/%s.bundle.js" $mod -}}
+            {{- $match := printf "js/modules/%s/**.js" $mod -}}
+            {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "page" .) }}
+        {{- end -}}
     </body>
 </html>

layouts/partials/assets/search-input.html

@@ -1,6 +0,0 @@
-<div class="d-flex ms-md-3">
-    <form class="search position-relative flex-grow-1 me-auto">
-        <input id="search" class="form-control is-search" type="search" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
-        <div id="suggestions" class="shadow bg-body rounded d-none" data-no-results="{{ T "ui_no_results" }}"></div>
-    </form>
-</div>

layouts/partials/footer/scripts.html

@@ -1,28 +1,27 @@
-{{ $filename := .filename | default "js/main.bundle.js" -}}
-{{ $match := .match | default "{js/*.js,js/vendor/**.js}" }}
-{{ $page := .page }}
-{{ $header := .header }}
+{{- $filename := .filename | default "js/main.bundle.js" -}}
+{{- $match := .match | default "{js/*.js,js/vendor/**.js}" -}}
+{{- $page := .page -}}
+{{- $header := .header -}}
+{{- $core := .core | default false -}}
 
-{{ $files := slice -}}
-{{ range $index, $file := resources.Match $match -}}
-    {{ $files = $files | append $file -}}
+{{- $modules := "" -}}
+{{ if $core }}
+    {{- $modules = site.Params.modules.core -}}
+{{- end -}}
+
+{{- $bundle := partial "utilities/bundle" (dict "match" $match "filename" $filename "modules" $modules "basepath" "js/modules" "all" true) -}}
+{{- $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
+
+{{- if and (not site.IsServer) $header -}}
+    {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
+    {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
+    {{- end }}
+{{- end -}}
+
+{{- if not hugo.IsProduction -}}
+    <script src="{{ $js.Permalink }}"></script>
+{{ else -}}
+    {{ $js = $js | minify | fingerprint -}}
+    <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
 {{ end -}}
-
-{{ if gt (len $files) 0 }}
-    {{ $bundle := $files | resources.Concat $filename -}}
-    {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
-
-    {{- if and (not site.IsServer) $header -}}
-        {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
-        {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
-            <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
-        {{- end }}
-    {{- end -}}
-    
-    {{- if not hugo.IsProduction -}}
-        <script src="{{ $js.Permalink }}"></script>
-    {{ else -}}
-        {{ $js = $js | minify | fingerprint -}}
-        <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
-    {{ end -}}
-{{ end -}}

layouts/partials/head/head.html

@@ -3,7 +3,18 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {{ hugo.Generator}}
-    {{ partial "head/stylesheet.html" . -}}
+    {{ partial "head/stylesheet.html" -}}
+    {{- $modules := site.Params.modules.optional | intersect .Page.Params.modules -}}
+    {{- range $index, $mod := $modules -}}
+        {{- $source := printf "scss/%s.scss" $mod -}}
+        {{- $target := printf "css/%s.css" $mod -}}
+        {{- partial "head/stylesheet.html" (dict "source" $source "target" $target "core" false "page" .) }}
+    {{- end -}}
+    {{- if hasPrefix (lower .Site.Params.style.themeFontPath) "http" -}}
+        <link rel="preconnect" href="https://fonts.googleapis.com"> 
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+        <link rel="stylesheet" href="{{ .Site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
+    {{- end -}}
     {{ partial "head/seo.html" . }}
     {{ partialCached "head/favicon.html" . -}}
     {{ if gt (len .Site.Languages) 1}}

layouts/partials/head/stylesheet.html

@@ -1,30 +1,52 @@
+{{- $source := .source | default "scss/app.scss" -}}
+{{- $target := .target | default "css/main.css" -}}
+{{- $page := .page -}}
+{{- $core := .core | default true -}}
+
+{{- $modules := "" -}}
+{{ if $core }}
+    {{- if reflect.IsSlice site.Params.modules.excludeSCSS -}}
+        {{- $modules = complement site.Params.modules.excludeSCSS site.Params.modules.core -}}
+    {{ else }}
+        {{- $modules = site.Params.modules.core -}}
+    {{ end }}
+{{- end -}}
+
 {{- $navbarOffset := "0em" -}}
-{{- if .Site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
+{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
 {{- $vars := dict 
-    "theme-font"              (default "Inter" .Site.Params.style.themeFont)
-    "primary"                 (default "#007bff" .Site.Params.style.primary)
-    "secondary"               (default "#6c757d" .Site.Params.style.secondary)
-    "success"                 (default "#198754" .Site.Params.style.success)
-    "info"                    (default "#0dcaf0" .Site.Params.style.info)
-    "warning"                 (default "#ffc107" .Site.Params.style.warning)
-    "danger"                  (default "#dc3545" .Site.Params.style.danger)
-    "light"                   (default "#f8f9fa" .Site.Params.style.light)
-    "dark"                    (default "#212529" .Site.Params.style.dark)
+    "theme-font"              (default "Inter" site.Params.style.themeFont)
+    "primary"                 (default "#007bff" site.Params.style.primary)
+    "secondary"               (default "#6c757d" site.Params.style.secondary)
+    "success"                 (default "#198754" site.Params.style.success)
+    "info"                    (default "#0dcaf0" site.Params.style.info)
+    "warning"                 (default "#ffc107" site.Params.style.warning)
+    "danger"                  (default "#dc3545" site.Params.style.danger)
+    "light"                   (default "#f8f9fa" site.Params.style.light)
+    "dark"                    (default "#212529" site.Params.style.dark)
     "navbar-offset"           $navbarOffset
-    "enable-dark-mode"        (printf "%t" ((default true .Site.Params.main.enableDarkMode)))
-    "import-fonts"            (printf "%t" (not (hasPrefix (lower .Site.Params.style.themeFontPath) "http")))
+    "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
+    "import-fonts"            (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))
 -}}
 
-{{- $options := (dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
-{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
-{{- if hugo.IsProduction -}}
-    {{- $options = merge $options (dict "outputStyle" "compressed") -}}
-{{- else -}}
-    {{- $options = merge $options (dict "outputStyle" "expanded") -}}
+<!-- TODO: remove debug statement -->
+{{ $match := "scss/**.scss" }}
+{{ $files := sort (resources.Match $match) "Key" "asc" }}
+{{ warnf "Processing pattern: %s" $match}}
+{{- range $index, $file := $files -}}
+    {{/*- warnf " - Processing file: %s" $file.Key */}}
 {{- end -}}
-{{- $css := resources.Get "scss/app.scss" | resources.ExecuteAsTemplate "style.app.scss" . | toCSS $options -}}
-{{- partial "head/icons.html" (dict "css" $css) -}}
-{{- if .Site.Params.style.purge -}}
+
+{{- $options := (dict "transpiler" "libsass" "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}}
+{{- $bundle := partial "utilities/bundle" (dict "match" $source "filename" (printf "scss/bundle-%d.scss" now.UnixNano) "modules" $modules "basepath" "scss") -}}
+{{/* warnf "Bundle: %s" $bundle.Content */}}
+
+{{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}}
+
+{{ if $core }}
+    {{- partial "head/icons.html" (dict "css" $css) -}}
+{{ end }}
+{{- if site.Params.style.purge -}}
     {{- $post_options := dict "config" "config" -}}
     {{- $css = $css | resources.PostCSS $post_options -}}
 {{- end -}}
@@ -34,9 +56,4 @@
 {{- else -}}
     {{- $css = $css | fingerprint | resources.PostProcess -}}
     <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
-{{- end -}}
-{{- if hasPrefix (lower .Site.Params.style.themeFontPath) "http" -}}
-    <link rel="preconnect" href="https://fonts.googleapis.com"> 
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-    <link rel="stylesheet" href="{{ .Site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
 {{- end -}}

layouts/partials/utilities/URLJoin.html

@@ -0,0 +1,16 @@
+{{- $base := .base -}}
+{{- if not $base }}
+    {{- errorf "partial [assets/utilities/URLJoin.html] - Expected param 'base'" -}}
+{{- end -}}
+
+{{- $path := .path -}}
+{{- if not $path }}
+    {{- errorf "partial [assets/utilities/URLJoin.html] - Expected param 'path'" -}}
+{{- end -}}
+
+{{- $url := $path -}}
+{{- if not (hasPrefix $path "http") -}}
+    {{- $url = printf "%s/%s" (strings.TrimSuffix "/" $base) $path -}}
+{{- end }}
+
+{{- return $url -}}

layouts/partials/utilities/bundle.html

@@ -0,0 +1,64 @@
+{{- $match := .match -}}
+{{- $filename := .filename -}}
+{{- if not (or $match $filename) -}}
+    {{- errorf "partial [assets/bundle.html] - Expected match and filename" -}}
+{{- end -}}
+
+{{- $order := .order | default "asc"}}
+{{- $supportedOrder := slice "asc" "desc" -}}
+{{- if not (in $supportedOrder $order) -}}
+    {{- errorf "partial [assets/bundle.html] - Invalid value for param 'order': %s" $order -}}
+{{- end -}}
+
+{{- $modules := .modules -}}
+{{- $all := .all }}
+{{- $basepath := strings.TrimSuffix "/" .basepath -}}
+{{- $ext := trim (path.Ext (trim $match "{}")) "." -}}
+{{- if not $ext -}}
+    {{- errorf "partial [assets/bundle.html] - Cannot derive file extension of match pattern: %s" $match -}}
+{{- end -}}
+
+{{- if $modules -}}
+    {{- $match = trim $match "{}" -}}
+    {{- $matches := slice $match -}}
+    {{- range $index, $mod := $modules -}}
+        {{- if $all }}
+            {{- $matches = $matches | append (printf "%s/%s/**.%s" $basepath $mod $ext) -}}
+        {{- else -}}
+            {{- $matches = $matches | append (printf "%s/%s.%s" $basepath $mod $ext) -}}
+        {{- end -}}
+    {{- end -}}
+    {{- $match = printf "{%s}" (delimit $matches ",") }}
+{{- end -}}
+
+<!-- TODO: concat by module, then sorted by filename -->
+
+{{ $matches := resources.Match $match }}
+{{ $files := slice }}
+{{ range $index, $file := $matches }}
+    {{ $add := (dict "name" (strings.TrimSuffix (printf ".%s" $ext) $file.Name) "resource" $file ) }}
+    {{ $files = $files | append $add }}
+{{ end }}
+
+{{ $sorted := slice }}
+{{ $files = sort $files "name" }}
+{{- range $index, $file := $files -}}
+    {{ $sorted = $sorted | append $file.resource }}
+{{- end -}}
+
+<!-- TODO: remove temp debug statement -->
+{{ warnf "Processing pattern: %s" $match}}
+{{- range $index, $file := $sorted -}}
+    {{- warnf " - Processing file: %s" $file }}
+{{- end -}}
+
+{{/* warnf "FILES: %s" $sorted */}}
+
+{{ $bundle := "" }}
+{{ if gt (len $sorted) 0 }}
+    {{ $bundle = $sorted | resources.Concat $filename -}}
+{{ else }}
+    {{ $bundle = resources.FromString $filename "" }}
+{{ end -}}
+
+{{- return $bundle -}}

layouts/shortcodes/release.html

@@ -58,7 +58,7 @@
     <div class="pb-3">
     {{- partial "assets/button.html" (dict 
         "title" $title
-        "href" (printf "%s/%s" (strings.TrimSuffix "/" site.Params.docs.release) $version)
+        "href" (partial "partials/utilities/URLJoin.html" (dict "base" site.Params.docs.release "path" $version))
         "size" "sm"
         "color" $color
         "outline" "true"

layouts/shortcodes/timeline.html

@@ -1,3 +1,4 @@
+<!-- Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE -->
 {{ $error := false }}
 
 {{- $data := .Get "data" -}}
@@ -12,6 +13,14 @@
     {{ $error = true }}
 {{ end -}}
 
+{{ $background := "" -}}
+{{ with .Get "background" }}{{ $background = . }}{{ end -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
+{{ if and $background (not (in $supportedColors $background)) -}}
+    {{ errorf "Invalid value for param 'background': %s" .Position -}}
+    {{ $error = true -}}
+{{ end -}}
+
 <!-- Inline partial to render icon -->
 {{- define "partials/timeline-icon.html" -}}
     {{- $col := default 6 .col -}}
@@ -33,42 +42,47 @@
     {{- $content := .content -}}
     {{- $color := .color -}}
     {{- $title := .title -}}
+    {{- $badge := .badge -}}
     {{- $url := .url -}}
     {{- $date := .date -}}
-    {{ if and $url (not (hasPrefix $url "http")) }}
-        {{ $url = path.Join site.Params.docs.release $url }}
-    {{ end }}
+    {{- if and $url (not (hasPrefix $url "http")) -}}
+        {{- $url = partial "partials/utilities/URLJoin.html" (dict "base" site.Params.docs.release "path" $url) }}
+    {{- end -}}
     {{- $direction := .direction -}}
 
     <div class="col-{{ $col }} d-flex align-items-center">
         <div class="d-flex h-100 w-100">
             <div class="timeline-panel-{{ $direction }}"></div>
             <div class="timeline-description-text-{{ $direction }} p-3 w-100">
-                {{ with $url }}
-                    <p class="mb-0"><a class="fs-4 fw-bold text-uppercase link-{{ $color }}" href="{{ . }}">{{ $title }}</a></p>
-                {{ else}}
-                    <p class="fs-4 fw-bold mb-0 text-uppercase text-{{ $color }}">{{ $title }}</p>
-                {{ end }}
+                <div>
+                    {{ with $url }}
+                        <a class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle" href="{{ . }}">{{ $title }}</a>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}<a class="link-bg-{{ $color }}" href="{{ . }}">{{ $badge }}</a>{{ end }}</span>
+                    {{ else}}
+                        <span class="fs-5 fw-bold text-uppercase text-{{ $color }} text-break align-middle">{{ $title }}</span>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}{{ $badge }}{{ end }}</span>
+                    {{ end }}
+                </div>
                 {{ if $date }}
                     {{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
                     <p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
                 {{ end }}
-                <p class="mt-3 mb-0">{{ $content }}</p>
+                <p class="mt-3 mb-0">{{ $content | markdownify }}</p>
             </div>
         </div>
     </div>    
 {{- end -}}
 
 <!-- Render default timeline -->
-<div class="container p-0 d-none d-md-block mb-5">
+<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}">
     {{ range $index, $item := $entries }}
         <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
             {{ if eq (mod $index 2) 1 }}
-                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "date" $item.date "url" $item.url "direction" "start") }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "start") }}
                 {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "start") }}
             {{ else }}
                 {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end") }}
-                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "date" $item.date "url" $item.url "direction" "end") }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end") }}
             {{ end }}
         </div>
         <div class="row timeline g-0 p-3"> </div>
@@ -76,11 +90,11 @@
 </div>
 
 <!-- Render timeline for smaller devices -->
-<div class="container p-0 d-block d-md-none">
+<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}">
     {{ range $index, $item := $entries }}
         <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
             {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}
-            {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "date" $item.date "url" $item.url "direction" "end" "col" 9) }}
+            {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end" "col" 9) }}
         </div>
         <div class="row timeline-sm g-0 p-3"> </div>
     {{ end }}

netlify.toml

@@ -37,7 +37,7 @@
             font-src 'self' https://*.netlify.app https://fonts.gstatic.com; \
             frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com \
                 app.netlify.com; \
-            img-src 'self' https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
+            img-src 'self' data: https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
             manifest-src 'self'; \
             media-src 'self' \
             """

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.15.3",
+  "version": "0.16.0-alpha",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -17,7 +17,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "prestart": "npm run clean",
+    "prestart": "npm run clean && npm run mod:vendor",
     "start": "hugo server --bind=0.0.0.0 --disableFastRender",
     "start:prod": "hugo server --bind=0.0.0.0 --disableFastRender -e production",
     "prebuild": "npm run clean",
@@ -31,6 +31,10 @@
     "lint:styles": "stylelint \"assets/scss/**/*.{css,sass,scss,sss,less}\"",
     "lint:markdown": "markdownlint-cli2 \"*.md\" \"content/**/*.md\"",
     "lint:markdown-fix": "markdownlint-cli2-fix \"*.md\" \"content/**/*.md\"",
+    "mod:init": "hugo mod init github.com/gethinode/hinode",
+    "mod:update": "hugo mod get -u ./... && npm run -s mod:vendor && npm run -s mod:tidy",
+    "mod:tidy": "hugo mod tidy",
+    "mod:vendor": "hugo mod vendor",
     "test": "npm run -s lint",
     "env": "hugo env",
     "precheck": "npm version",
@@ -54,7 +58,6 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.0",
     "cssnano": "^6.0.0",
     "cssnano-preset-advanced": "^6.0.0",
     "eslint": "^8.39.0",
@@ -62,7 +65,6 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "flexsearch": "^0.7.31",
     "hugo-bin": "^0.111.0",
     "markdownlint-cli2": "^0.8.1",
     "postcss-cli": "^10.1.0",