Merge pull request #263 from gethinode/develop

Fixes

.eslintignore

@@ -1,3 +1,4 @@
+assets/js/analytics.js
 assets/js/color.js
 assets/js/flexsearch.js
 assets/js/vendor

README.md

@@ -116,7 +116,7 @@ Hinode is inspired by the following themes:
 
 ## Donate
 
-<a href="https://www.buymeacoffee.com/markdumay" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
 
 ## License
 

assets/js/analytics.js

@@ -0,0 +1,69 @@
+// Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
+
+{{- define "__ga_js_set_doNotTrack" -}}{{/* This is also used in the async version. */}}
+    {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+    {{- if not $pc.RespectDoNotTrack -}}
+        var doNotTrack = false;
+    {{- else -}}
+        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+        var doNotTrack = (dnt == "1" || dnt == "yes");
+    {{- end -}}
+{{- end -}}
+
+{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+{{- if (and (not .Site.IsServer) (not $pc.Disable)) -}}
+    {{ with .Site.GoogleAnalytics -}}
+        {{ if hasPrefix . "G-"}}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                window.dataLayer = window.dataLayer || [];
+
+                function gtag() {
+                    dataLayer.push(arguments);
+                }
+                
+                gtag('js', new Date());
+                gtag('config', '{{ . }}', { 'anonymize_ip': {{- $pc.AnonymizeIP -}} });
+            }
+
+        {{ else if hasPrefix . "UA-" }}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                (function(i, s, o, g, r, a, m) {
+                    i['GoogleAnalyticsObject'] = r;
+                    i[r] = i[r] || function() {
+                        (i[r].q = i[r].q || []).push(arguments)
+                    }, i[r].l = 1 * new Date();
+                    a = s.createElement(o),
+                        m = s.getElementsByTagName(o)[0];
+                    a.async = 1;
+                    a.src = g;
+                    m.parentNode.insertBefore(a, m)
+                })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+                
+                {{- if $pc.UseSessionStorage }}
+                    if (window.sessionStorage) {
+                        var GA_SESSION_STORAGE_KEY = 'ga:clientId';
+                        ga('create', '{{ . }}', {
+                            'storage': 'none',
+                            'clientId': sessionStorage.getItem(GA_SESSION_STORAGE_KEY)
+                        });
+                    
+                        ga(function(tracker) {
+                            sessionStorage.setItem(GA_SESSION_STORAGE_KEY, tracker.get('clientId'));
+                        });
+                    }
+                {{ else }}
+                    ga('create', '{{ . }}', 'auto');
+                {{ end -}}
+                {{ if $pc.AnonymizeIP }}
+                    ga('set', 'anonymizeIp', true);
+                {{ end }}
+                
+                ga('send', 'pageview');
+            }
+        {{- end }}
+    {{ end -}}
+{{- end }}

assets/js/flexsearch.js

@@ -1,89 +1,30 @@
-/*
-Source:
-  - https://raw.githubusercontent.com/h-enk/doks/master/assets/js/index.js
-*/
+{{- $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"]
+    }
+  });
 
-var suggestions = document.getElementById('suggestions');
-var search = document.getElementById('search');
-
-if (search !== null) {
-  document.addEventListener('keydown', inputFocus);
-}
-
-function inputFocus(e) {
-  if (e.ctrlKey && e.key === '/' ) {
-    e.preventDefault();
-    search.focus();
-  }
-  if (e.key === 'Escape' ) {
-    search.blur();
-    suggestions.classList.add('d-none');
-  }
-}
-
-document.addEventListener('click', function(event) {
-
-  var isClickInsideElement = suggestions.contains(event.target);
-
-  if (!isClickInsideElement) {
-    suggestions.classList.add('d-none');
-  }
-
-});
-
-/*
-Source:
-  - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
-*/
-
-document.addEventListener('keydown',suggestionFocus);
-
-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(){
-
-    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
+    // 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 -}}
         {
@@ -103,59 +44,121 @@ Source:
         {{ end -}}
       {{ end -}}
     ;
-  
-    search.addEventListener('input', show_results, true);
-  
-    function show_results(){
-      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 noResultsMessage = document.createElement('div')
-        noResultsMessage.innerHTML = `{{ T "ui_no_results" }} "<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;
-      }
+
+    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/js/menu.js

@@ -0,0 +1,20 @@
+const url = new URL(window.location.href)
+const menu = url.searchParams.get('menu')
+const child = url.searchParams.get('child')
+const menuItems = document.querySelectorAll('[data-nav="main"]')
+
+if (menu !== null) {
+  menuItems.forEach(element => {
+    element.classList.remove('active')
+  })
+
+  const targetMainItems = document.querySelectorAll(`[data-nav-main="${menu}"]:not([data-nav-child])`)
+  targetMainItems.forEach(element => {
+    element.classList.add('active')
+  })
+
+  const targetChildItems = document.querySelectorAll(`[data-nav-main="${menu}"][data-nav-child="${child}"]`)
+  targetChildItems.forEach(element => {
+    element.classList.add('active')
+  })
+}

assets/js/navbar.js

@@ -2,23 +2,25 @@ const navbar = document.querySelector('.navbar')
 const toggler = document.getElementById('main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 
-// set the navbar background color to opaque when scrolling past a breakpoint
-window.onscroll = () => {
-  if (window.scrollY > 75) {
-    navbar.classList.add('nav-active')
-  } else {
-    navbar.classList.remove('nav-active')
-  }
-}
-
-// set the navbar background color to opaque when expanded
-toggler.onclick = () => {
-  navbar.classList.toggle('navbar-expanded')
-}
-
-// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
-for (let i = 0; i < modeSelectors.length; ++i) {
-  modeSelectors[i].onclick = () => {
-    toggler.click()
+if (navbar !== null && toggler !== null) {
+  // set the navbar background color to opaque when scrolling past a breakpoint
+  window.onscroll = () => {
+    if (window.scrollY > 75) {
+      navbar.classList.add('nav-active')
+    } else {
+      navbar.classList.remove('nav-active')
+    }
+  }
+
+  // set the navbar background color to opaque when expanded
+  toggler.onclick = () => {
+    navbar.classList.toggle('navbar-expanded')
+  }
+
+  // invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+  for (let i = 0; i < modeSelectors.length; ++i) {
+    modeSelectors[i].onclick = () => {
+      toggler.click()
+    }
   }
 }

assets/scss/components/_toc.scss

@@ -30,20 +30,12 @@
 
 .toc nav li {
     margin-bottom: 0.25rem;
-
-    &:hover {
-        color: var(--bs-primary);
-    }
 }
 
 .toc nav a {
     color: inherit;
-}
 
-.toc-panel nav a {
-    &.active,
-    &:hover,
-    &:focus {
+    &:hover {
         color: var(--bs-primary);
     }
 }

config/_default/config.toml

@@ -6,6 +6,7 @@ enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
+googleAnalytics = "G-T85PPZ36GN"
 baseURL = "https://demo.gethinode.com/"
 canonifyURLs = false
 enableEmoji = true

config/_default/languages.toml

@@ -8,10 +8,10 @@
     [en.params.head]
         tagline = "A Hugo Theme"
     [en.params.feature]
-        link = "/en/about"
+        link = "about"
         caption = "About"
     [en.params.footer]
-        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
+        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
         socialTitle = "Follow me"
         socialCaption = "I work on everything coding and tweet developer memes"
 # toml-docs-end lang-param
@@ -23,9 +23,9 @@
     [nl.params.head]
         tagline = "Een Hugo Thema"
     [nl.params.feature]
-        link = "/nl/over-mij"
+        link = "over-mij"
         caption = "Over mij"
     [nl.params.footer]
-        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
+        license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
         socialTitle = "Volg mij"
         socialCaption = "Ik doe aan programmeren en tweet memes"

config/_default/menus/menus.en.toml

@@ -1,33 +1,33 @@
 [[main]]
   name = "About"
-  url = "/about/"
+  pageRef = "/about/"
   weight = 10
 
 [[main]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 20
 
 [[main]]
   name = "Projects"
-  url = "/projects/"
+  pageRef = "/projects/"
   weight = 30
 
 [[main]]
   name = "Sample project"
-  url = "/en/projects/sample-project/"
+  pageRef = "/projects/sample-project/"
   parent = "Projects"
   weight = 1
 
 [[main]]
   name = "Another project"
-  url = "/en/projects/another-project/"
+  pageRef = "/projects/another-project/"
   parent = "Projects"
   weight = 2
 
 [[main]]
   name = "Tags"
-  url = "/tags/"
+  pageRef = "/tags/"
   weight = 40
 
 [[social]]
@@ -51,23 +51,23 @@
 # toml-docs-start sample-navigation
 [[sample]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 10
 
 [[sample]]
   name = "Projects"
-  url = "/projects/"
+  pageRef = "/projects/"
   weight = 20
 
 [[sample]]
   name = "Sample project"
-  url = "/en/projects/sample-project/"
+  pageRef = "/projects/sample-project/"
   parent = "Projects"
   weight = 1
 
 [[sample]]
   name = "Another project"
-  url = "/en/projects/another-project/"
+  pageRef = "/projects/another-project/"
   parent = "Projects"
   weight = 2
 # toml-docs-end sample-navigation

config/_default/menus/menus.nl.toml

@@ -1,33 +1,33 @@
 [[main]]
   name = "Over mij"
-  url = "/over-mij/"
+  pageRef = "/over-mij/"
   weight = 10
 
 [[main]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 20
 
 [[main]]
   name = "Projecten"
-  url = "/projecten/"
+  pageRef = "/projecten/"
   weight = 30
 
 [[main]]
   name = "Voorbeeldproject"
-  url = "/nl/projecten/voorbeeldproject/"
+  pageRef = "/projecten/voorbeeldproject/"
   parent = "Projecten"
   weight = 1
 
 [[main]]
   name = "Ander project"
-  url = "/nl/projecten/ander-project/"
+  pageRef = "/projecten/ander-project/"
   parent = "Projecten"
   weight = 2
 
 [[main]]
   name = "Tags"
-  url = "/tags/"
+  pageRef = "/tags/"
   weight = 40
 
 [[social]]
@@ -51,23 +51,23 @@
 # toml-docs-start sample-navigation
 [[sample]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 10
 
 [[sample]]
   name = "Projecten"
-  url = "/projecten/"
+  pageRef = "/projecten/"
   weight = 20
 
 [[sample]]
   name = "Voorbeeldproject"
-  url = "/nl/projecten/voorbeeldproject/"
+  pageRef = "/projecten/voorbeeldproject/"
   parent = "Projecten"
   weight = 1
 
 [[sample]]
   name = "Ander project"
-  url = "/nl/projecten/ander-project/"
+  pageRef = "/projecten/ander-project/"
   parent = "Projecten"
   weight = 2
 # toml-docs-end sample-navigation

config/_default/params.toml

@@ -10,6 +10,8 @@
 [docs]
     version = "0.8"
     basePath = ""
+    github = "https://github.com/gethinode/hinode"
+    release = "https://github.com/gethinode/hinode/releases/tag/"
 # toml-docs-end docs
 
 # toml-docs-start home
@@ -40,6 +42,7 @@
         title = "Blog"
         sort = "date"
         reverse = true
+        nested = true
         cols = 3
         color = ""
         padding = "0"
@@ -53,8 +56,10 @@
         title = "Projects"
         sort = "title"
         reverse = false
+        nested = true
         cols = 1
-        color = "body-tertiary"
+        background = "body-tertiary"
+        color = "body"
         padding = "3"
         header = "none"
         footer = "tags"

config/_default/server.toml

@@ -8,14 +8,15 @@ for = '/**'
     Content-Security-Policy = """\
         default-src 'self'; \
         script-src 'self' \
-            https://utteranc.es/client.js; \
+            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
         style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
-        connect-src 'self'; \
+        connect-src 'self'
+            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; \
+        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
         manifest-src 'self'; \
         media-src 'self' \
         """

content/en/blog/_index.md

@@ -1,4 +1,5 @@
 ---
 author: Mark Dumay
 title: Blog
+nested: true
 ---

content/en/blog/bootstrap-elements.md

@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Bootstrap elements
-date: 2023-02-17
+date: 2023-05-20
 description: Use shortcodes to add common Bootstrap elements with ease.
 tags: ["bootstrap", "shortcode"]
 thumbnail: img/boots.jpg
@@ -223,6 +223,16 @@ As an example, the following shortcode displays a light navigation header.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Release
+
+As an example, the following shortcode displays a default release button.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* release version="v0.14.1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Spinner
 
 As an example, the following shortcode displays a centered spinner.
@@ -257,8 +267,6 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
-    Tooltip demonstration
-{{</* /tooltip */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

content/nl/blog/bootstrap-elements.md

@@ -1,6 +1,7 @@
 ---
 author: Mark Dumay
 title: Bootstrap elementen
+slug: bootstrap-elementen
 date: 2023-02-17
 description: Gebruik shortcodes om eenvoudig Bootstrap elementen toe te voegen.
 tags: ["bootstrap", "shortcode"]
@@ -223,6 +224,16 @@ De volgende shortcode toont een navigatiemenu.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Release
+
+De volgende shortcode toont een knop voor een nieuwe release.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* release version="v0.14.1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Spinner
 
 De volgende shortcode toont een ronddraaiende cirkel.
@@ -257,8 +268,6 @@ De volgende shortcode toont een uitleg voor een gekleurde link.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
-    Tooltip demonstration
-{{</* /tooltip */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstratie
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

content/nl/blog/first-post.md

@@ -1,6 +1,7 @@
 ---
 author: Mark Dumay
 title: Eerste artikel
+slug: eerste-artikel
 date: 2022-10-01
 description: Dit is mijn eerste artikel.
 tags: ["blog"]

content/nl/blog/fourth-post.md

@@ -1,6 +1,7 @@
 ---
 author: Mark Dumay
 title: Vierde artikel
+slug: vierde-artikel
 date: 2023-01-01
 description: Dit is mijn vierde artikel.
 tags: ["blog"]

content/nl/blog/second-post.md

@@ -1,6 +1,7 @@
 ---
 author: Mark Dumay
 title: Tweede artikel
+slug: tweede-artikel
 date: 2022-11-01
 description: Dit is mijn tweede artikel.
 tags: ["blog"]

content/nl/blog/third-post.md

@@ -1,6 +1,7 @@
 ---
 author: Mark Dumay
 title: Derde artikel
+slug: derde-artikel
 date: 2022-12-01
 description: Dit is mijn derde artikel.
 tags: ["blog"]

i18n/en.yaml

@@ -31,6 +31,8 @@
   translation: "More Features"
 - id: moreGuides
   translation: "More Guides"
+- id: moreOpensource
+  translation: "More Features"
 - id: moreProjects
   translation: "More Projects"
 - id: moreUsers
@@ -62,7 +64,7 @@
 - id: toggleSidebar
   translation: "Toggle sidebar navigation"
 - id: colorMode
-  translation: "Color mode"
+  translation: "Toggle theme"
 - id: colorLight
   translation: "Light"
 - id: colorDark
@@ -73,6 +75,10 @@
   translation: "Toggle main navigation"
 - id: demo
   translation: "Demo"
+- id: addedFeature
+  translation: "Added in"
+- id: deprecatedFeature
+  translation: "Deprecated in"
 
 # 404 page
 - id: pageNotFound

i18n/nl.yaml

@@ -56,7 +56,7 @@
 - id: toggleSidebar
   translation: "Toon of verberg navigatie"
 - id: colorMode
-  translation: "Modus"
+  translation: "Pas modus aan"
 - id: colorLight
   translation: "Licht"
 - id: colorDark
@@ -65,6 +65,10 @@
   translation: "Automatisch"
 - id: toggleMainNav
   translation: "Toon of verberg hoofdnavigatie"
+- id: addedFeature
+  translation: "Toegevoegd in"
+- id: deprecatedFeature
+  translation: "Verouderd in"
 
 # 404 page
 - id: pageNotFound

layouts/404.html

@@ -6,7 +6,7 @@
                 <p class="display-1 mt-3 fw-bold">404</p>
                 <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
             </span>
-            <p>{{ T "pageNotFound" }} <a href="{{ "/" | relURL }}">{{ T "pageNotFoundHome" }}</a>.</p>
+            <p>{{ T "pageNotFound" }} <a href="{{ "/" | relLangURL }}">{{ T "pageNotFoundHome" }}</a>.</p>
         </div>
     </div>
 {{ end }}

layouts/_default/baseof.html

@@ -10,7 +10,7 @@
 
     <body>
         {{- if site.Params.main.enableDarkMode -}}
-            {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "page" .) -}}
+            {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
         {{- end -}}
         <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
             <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
@@ -33,19 +33,23 @@
                     <div class="d-flex flex-column flex-fill">
                         {{ block "main" . }}{{ end -}}
                     </div>
-                    <div class="">
-                        {{- partial "footer/social.html" . -}}
-                        {{- partial "footer/footer.html" . -}}
-                    </div>
+                    {{ if not .Site.Params.main.footerBelowFold }}
+                        <div class="">
+                            {{- partial "footer/social.html" . -}}
+                            {{- partial "footer/footer.html" . -}}
+                        </div>
+                    {{ end }}
                 {{ end -}}
             {{ else -}}
                 <div class="d-flex flex-column flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
                     {{ block "main" . }}{{ end -}}
                 </div>
-                <div class="">
-                    {{- partial "footer/social.html" . -}}
-                    {{- partial "footer/footer.html" . -}}
-                </div>
+                {{ if not .Site.Params.main.footerBelowFold }}
+                    <div class="">
+                        {{- partial "footer/social.html" . -}}
+                        {{- partial "footer/footer.html" . -}}
+                    </div>
+                {{ end }}
             {{ end -}}
         </div>
 
@@ -53,10 +57,17 @@
             <div class="">
                 {{ block "main" . }}{{ end -}}
             </div>
-            {{- partial "footer/social.html" . -}}
-            {{- partial "footer/footer.html" . -}}
-        {{ end -}}
+            <div class="">
+                {{- partial "footer/social.html" . -}}
+                {{- partial "footer/footer.html" . -}}
+            </div>
+        {{ else if .Site.Params.main.footerBelowFold }}
+            <div class="">
+                {{- partial "footer/social.html" . -}}
+                {{- partial "footer/footer.html" . -}}
+            </div>
+        {{ end }}
 
-        {{- partialCached "footer/scripts.html" (dict "page" .) }}
+        {{- partialCached "footer/scripts.html" (dict "header" false "page" .) }}
     </body>
 </html>

layouts/_default/list.html

@@ -1,9 +1,12 @@
 {{- define "main" -}}
     {{- partial "assets/section-list.html" (dict 
         "page" .
-        "section" .Section
+        "section" .Type
         "home" false
+        "nested" .Params.Nested
         "title" .Title
+        "description" .Description
+        "content" .Content
         "paginate" true)
     -}}
 {{- end -}}

layouts/_default/single.html

@@ -17,14 +17,14 @@
         <div class="mt-3">
             <div class="d-none-dark">
                 {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>
+                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
                     &nbsp;
                 {{ end -}}
             </div>
             
             <div class="d-none-light">
                 {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>
+                    <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
                     &nbsp;
                 {{ end -}}
             </div>

layouts/alias.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html{{ with site.LanguageCode | default site.Language.Lang }} lang="{{ . }}"{{ end }}>
+  <head>
+    <title>{{ .Permalink }}</title>
+    <link rel="canonical" href="{{ .Permalink }}">
+    <meta name="robots" content="noindex">
+    <meta charset="utf-8">
+    <noscript><meta http-equiv="refresh" content="0; url={{ .Permalink }}"></noscript>
+    <script src="/js/alias.js"></script>
+  </head>
+</html>

layouts/docs/list.html

@@ -1,10 +0,0 @@
-<!-- Hugo considers all first-level directories to be a root section. As such, as "/en/docs/" is considered to be a
-     branch bundle, despite it not having an "_index.md" page. Being a branch bundle, Hugo uses a list template to
-    render the "/en/docs/" page. This overwrites the alias defined in "/en/docs/<ver>/getting-started/introduction/". 
-    
-    This empty list template is deliberately added to the "/layouts/docs/" directory to prevent Hugo from generating 
-    a list page for "/en/docs/" (all other nested sections). This enables the alias defined in 
-    "/en/docs/<version>/getting-started/introduction/".
-
-    See https://gohugo.io/content-management/sections/ for more details.
-    -->

layouts/index.html

@@ -6,11 +6,13 @@
     {{- $page := . -}}
 
     {{- range $index, $section := site.Params.home.sections -}}
-        {{- $pages := where site.RegularPages "Type" "in" $section -}}
-        {{- $sectionURL := "" -}}
-        {{- range $p := first 1 $pages -}}
-            {{- $sectionURL = $p.Parent.RelPermalink -}}
-        {{- end -}}
+        {{- $sectionPage := site.GetPage "section" $section -}}
+        {{- $sectionURL := $sectionPage.RelPermalink -}}
+        {{- $title := $sectionPage.Title -}}
+        {{- $thumbnail := $sectionPage.Params.Thumbnail -}}
+        {{- $icon := $sectionPage.Params.Icon -}}
+        {{- $description := $sectionPage.Description -}}
+        {{- $content := $sectionPage.Content -}}
 
         {{- $moreTitle := (T (printf "more%s" (strings.FirstUpper $section))) -}}
 
@@ -18,6 +20,10 @@
             "page" $page 
             "section" $section 
             "home" true 
+            "nested" true 
+            "thumbnail" $thumbnail
+            "icon" $icon
+            "content" $content
             "moreTitle" $moreTitle
             "sectionURL" $sectionURL)
         -}}

layouts/partials/assets/breadcrumb.html

@@ -1,7 +1,14 @@
 <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
-        {{- range .Page.Ancestors.Reverse -}}
-            <li class="breadcrumb-item"><a href="{{ .Permalink }}">{{ if not .IsHome }}{{ .Title }}{{ else }}{{ T "home" }}{{ end }}</a></li>
+        {{- range $index, $item := .Page.Ancestors.Reverse -}}
+            {{- $title := .Title -}}
+            {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
+            {{- $address := or .Permalink (.Params.Redirect | absLangURL) -}}
+            {{ if $address }}
+                <li class="breadcrumb-item"><a href="{{ $address }}">{{ $title }}</a></li>
+            {{ else }}
+                <li class="breadcrumb-item">{{ $title }}</li>
+            {{ end }}
         {{- end -}}
         <li class="breadcrumb-item active" aria-current="page">{{ .Page.Title }}</li>
     </ol>

layouts/partials/assets/button.html

@@ -108,14 +108,15 @@
     {{- errorf "partial [assets/button.html] - Invalid value for param 'justify': %s" $justify -}}
 {{- end -}}
 
-<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
-    {{- with $id }}id="{{ . }}"{{ end -}}
-    {{- if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
-    {{- else }}class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
-    {{- with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
-    {{- with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
-    {{- if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end -}}
-    {{- if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end -}}
+<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
+    {{ with $id }}id="{{ . }}"{{ end }}
+    {{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}"
+    role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
+    {{ else }} class="link-{{ $color }} position-relative {{ $class }}"{{ end }}
+    {{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
+    {{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
+    {{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
+    {{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
     >
 
     <div class="d-flex justify-content-{{ $justify }}">

layouts/partials/assets/card-group.html

@@ -58,8 +58,6 @@
 {{- else if eq $cols 4 }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" -}}
 {{- else if eq $cols 5 }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ end -}}
 
-{{- $title := .title -}}
-
 {{- $paginate := false -}}
 {{- with .paginate -}}
     {{- if ne (printf "%T" .) "bool" -}}
@@ -90,7 +88,6 @@
 {{- $orientation := .orientation -}}
 
 <div class="container-fluid p-4 px-xxl-0">
-    {{ with $title }}<p class="display-4 mt-3{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
     {{ $paginator := "" }}
     {{ if $paginate }}
         {{ $paginator = $page.Paginate $list }}
@@ -107,13 +104,14 @@
                 "footer" $footer
                 "orientation" $orientation
             ) -}}
-            {{- if $element.IsPage -}}
+            
+            {{- if $element.Permalink -}}
                 {{- $params = merge $params (dict "path" $element.File.Path) -}}
             {{- else -}}
                 {{- $params = merge $params (dict
                     "title" $element.Title
-                    "href" (or $element.Permalink "#!")
-                    "description" $element.Description
+                    "href" $element.Permalink
+                    "description" (or $element.Description $element.Content)
                     "thumbnail" $element.Params.thumbnail
                     "icon" $element.Params.icon
                 ) -}}

layouts/partials/assets/card.html

@@ -5,7 +5,7 @@
     The shortcode supports the following arguments:
     "path"          Optional path of the page, override with other parameters.
     "title"         Required title of the card.
-    "href"          Required address for the button or hyperlink.
+    "href"          Optional address for the button or hyperlink.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
                     "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
@@ -28,10 +28,17 @@
     {{- $color := .color -}}
     {{- $description := .description -}}
     
-    <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
+    {{- if $href -}}
+        <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
+                <p class="card-title fs-5 fw-bold">{{ $title }}</p>
+            {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
+        </a>
+    {{- else -}}
+        <div>
             <p class="card-title fs-5 fw-bold">{{ $title }}</p>
-        {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
-    </a>
+            {{ with $description }}<p class="card-text mb-4 {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . }}</p>{{ end -}}
+        </div>
+    {{- end -}}
 {{- end -}}
 
 <!-- Inline partial to render the card's header or footer -->
@@ -60,7 +67,7 @@
 
         {{- range $index, $tag := first $maxTags ($page.GetTerms "tags") -}}
             {{- if gt $index 0 }}&nbsp;&bull;&nbsp;{{ end -}}
-            <a href="{{ (path.Join $tag.Page.RelPermalink) | relURL }}" class="{{ $link }} tag-link" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
+            <a href="{{ (path.Join $tag.Page.RelPermalink) | relLangURL }}" class="{{ $link }} tag-link" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
         {{- end -}}
     </small></p>
 {{- end -}}
@@ -109,10 +116,6 @@
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
 {{- end -}}
 
-{{- if not $href -}}
-    {{- errorf "partial [assets/card.html] - Missing value for param 'href'" -}}
-{{- end -}}
-
 {{- $class := .class -}}
 
 {{- $padding := "auto" -}}
@@ -132,7 +135,7 @@
 
 {{- if eq $orientation "horizontal" -}}
     <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-        <div class="row g-0">
+        <div class="row g-0 row-cols-1">
             <div class="col-4">
                 {{- if $thumbnail -}}
                     {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
@@ -141,7 +144,7 @@
                         {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
                     </div>
                 {{- end -}}
-                </div>
+            </div>
             <div class="col-8">
                 <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}

layouts/partials/assets/list.html

@@ -53,10 +53,6 @@
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
         <div class="container ratio-section d-flex flex-column">
-            {{ if eq $index 0 }}
-                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
-            {{ end }}
-
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-6{{ if $odd }} order-last{{ end }}">
                     {{- $style := "reveal fade-bottom" -}}
@@ -78,9 +74,6 @@
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
         <div class="container d-flex flex-column">
-            {{ if eq $index 0 }}
-                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
-            {{ end }}
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-12 text-center">
                     {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail "mode" $item.Params.colormode) }}

layouts/partials/assets/nav.html

@@ -76,7 +76,6 @@
     {{ end -}}
 {{ end -}}
 
-{{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
 <div class="{{ if eq $width 50 }}col-sm-12 col-md-10 col-lg-8 col-xl-6{{ else }}col-12{{ end }} mx-auto pt-5 pb-5">
     {{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
     <div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>

layouts/partials/assets/navbar-item.html

@@ -0,0 +1,46 @@
+{{- $menu := .menu -}}
+{{- $parent := .parent -}}
+{{- $page := .page -}}
+{{- $class := .class -}}
+{{- $anchorClass := "" -}}
+
+{{- $menuURL := (or $menu.PageRef $menu.URL) | relLangURL -}}
+{{- $pageURL := $page.RelPermalink | relLangURL -}}
+{{- $isActive := hasPrefix $pageURL $menuURL -}}
+{{- $isAlias := $menu.Params.alias -}}
+
+{{- $url := urls.Parse $menuURL -}}
+{{- $baseURL := urls.Parse $.Site.Params.Baseurl -}}
+{{- $isExternal := ne $url.Host $baseURL.Host -}}
+{{- $externalHref := "" }}
+{{- if $isExternal }}{{ $externalHref = "target=\"_blank\" rel=\"noopener noreferrer\"" }}{{ end -}}
+
+{{- $mainNav := urlize (lower $menu.Name) -}}
+{{- $childNav := "" -}}
+
+{{- $button := "" -}}
+{{- if $parent -}}
+    {{- $mainNav = urlize (lower $parent.Name) -}}
+    {{- $childNav = urlize (lower $menu.Name) -}}
+    {{- $anchorClass = "dropdown-item" -}}
+{{- else if $menu.HasChildren -}}
+    {{- $anchorClass = "nav-link dropdown-toggle" -}}
+    {{- $button = " role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"" -}}
+{{- else -}}
+    {{- $anchorClass = "nav-link" -}}
+{{- end -}}
+{{- $params := "" -}}
+{{- if and $isAlias (not $isExternal) -}}
+    {{- $params = printf "?menu=%s" $mainNav -}}
+    {{- with $childNav }}{{ $params = printf "%s&child=%s" $params . }}{{ end -}}
+{{- end -}}
+
+<a class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{. }}{{ end }}" 
+    data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
+    href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
+    
+    {{- with $menu.Pre }}{{ . }}{{ end -}}
+    <span {{ if $isActive }} class="active"{{ end }}>{{ $menu.Name }}</span>
+    {{- with $menu.Post }}{{ . }}{{ end -}}
+    {{- if $isExternal }} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
+</a>

layouts/partials/assets/navbar.html

@@ -1,12 +1,13 @@
 <!-- 
     Displays a navigation header with a toggler. The partial supports the following arguments:
+    "id"            Optional id of the navbar toggler, defaults to "navbar-collapse-0".
     "page"          Required object reference to the current page.
     "menus"         Optional name of the menu configuration, defaults to "main".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
-                    default color is none.
+                    "danger", "warning", "info", "white", "black", "body", or "body-tertiary". The default color is
+                    none.
     "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
@@ -16,7 +17,6 @@
 
 <!-- Inline partial to render the color mode switcher -->
 {{- define "partials/navbar-mode.html" -}}
-    {{- $id := .id -}}
     {{- $size := .size -}}
     {{- $collapsed := .collapsed -}}
 
@@ -50,8 +50,10 @@
 
 {{- $supportedFlags := slice "true" "false" -}}
 
-{{- $id := 0 -}}
-{{- with .id }}{{ $id = . }}{{ end -}}
+{{- $id := printf "navbar-collapse-%d" 0 -}}
+{{ with .id }}
+    {{ $id = . }}
+{{ end }}
 
 {{- $page := .page -}}
 {{- if not $page -}}
@@ -84,7 +86,7 @@
 {{- $color := "" -}}
 {{- with .color -}}
     {{- $color = . -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "white" "black" "body" "body-tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
         {{- errorf "partial [assets/navbar.html] - Invalid value for param 'color': %s" $color -}}
     {{- end -}}
@@ -124,7 +126,11 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
+{{- $theme := "" -}}
+{{- if eq $color "black" }}{{ $theme = "dark" }}{{ end -}}
+{{- if eq $color "white" }}{{ $theme = "light" }}{{ end -}}
+
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
 	<div class="container-xxl p-0">
         <!-- Insert sidebar toggler when applicable -->
         <div class="d-flex">
@@ -151,54 +157,34 @@
 
         <!-- Insert main navigation toggler -->
         <div class="d-flex fw-30">
-            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
+                aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
                 <span class="toggler-icon top-bar emphasis"></span>
                 <span class="toggler-icon middle-bar emphasis"></span>
                 <span class="toggler-icon bottom-bar emphasis"></span>
             </button>
         </div>
 
-        <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
+        <div class="navbar-collapse collapse" id="{{ $id }}">
             <!-- Insert search input -->
             {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
             
             <!-- Render top-menu items (maximum depth of 2) -->
             <ul class="navbar-nav ms-auto">
                 {{- range $menu := $menus -}}
-                    {{- $menu_item_url := $menu.URL | relLangURL -}}
-                    {{- $page_url:= $page.RelPermalink | relLangURL -}}
-                    {{- $active := hasPrefix $page_url $menu_item_url -}}
-                    
-                    {{- $url := urls.Parse .URL -}}
-                    {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
-                    {{- if .HasChildren -}}
-                        <li class="nav-item dropdown">
-                            <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ if $active }}<span class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
-                            </a>
+                    <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+                        {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
+                        {{- if .HasChildren -}}
                             <ul class="dropdown-menu dropdown-menu-end">
                                 {{- range .Children -}}
-                                    {{- $child_active := eq $page_url .URL -}}
-                                    <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a></li>
+                                    {{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
                                 {{- end -}}
                             </ul>
-                        </li>
-                    {{- else -}}
-                        <li class="nav-item">
-                            {{- $external := ne $url.Host $baseurl.Host -}}
-                            <a class="nav-link {{ if $active }}active{{ end }}"
-                                href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if $external }}target="_blank" {{ end }}>
-                                {{- with $pre}}{{ . }}{{ end -}}
-                                <span {{if $active }} class="active"{{end}}>{{ .Name }}</span>
-                                {{- with $post}}{{ . }}{{ end -}}
-                                {{- if $external }} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
-                            </a>
-                        </li>
-                    {{- end -}}
+                        {{- end -}}
+                    </li>
                 {{- end -}}
 
-
+                <!-- Insert divider if applicable -->
                 {{- if or $enableLanguage $enableDarkMode -}}
                     <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
                         <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
@@ -232,8 +218,8 @@
                               
                 <!-- Insert color mode switcher -->
                 {{- if $enableDarkMode -}}
-                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" true) -}}
-                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" false) -}}
+                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
+                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
                 {{- end -}}
             </ul>
         </div>

layouts/partials/assets/search-input.html

@@ -1,6 +1,6 @@
 <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"></div>
+        <div id="suggestions" class="shadow bg-body rounded d-none" data-no-results="{{ T "ui_no_results" }}"></div>
     </form>
 </div>

layouts/partials/assets/section-header.html

@@ -0,0 +1,46 @@
+{{- $title := .title -}}
+{{- $thumbnail := .thumbnail -}}
+{{- $icon := .icon -}}
+{{- $sectionHeader := .sectionHeader -}}
+{{- $description := .description -}}
+{{- $content := .content -}}
+
+{{- define "partials/section-header-img.html" -}}
+    {{- $title := .title -}}
+    {{- $thumbnail := .thumbnail -}}
+    {{- $icon := .icon -}}
+    {{ $padding := 5 }}
+
+    {{- if $thumbnail -}}
+        {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
+    {{- else if $icon -}}
+        <div class="text-secondary fw-bold">
+            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-10x" $icon)) -}}
+        </div>
+    {{- end -}}
+{{- end -}}
+
+<div class="container-fluid p-4 px-xxl-0">
+    {{ with $title }}<p class="display-4 mt-3{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+    {{ with $description }} <p class="lead mb-5">{{ . }}</p>{{ end }}
+    {{- if $content -}}
+        <div class="row row-cols-1 row-cols-lg-3 pt-5">
+            <div class="col col-lg-3 d-none d-lg-block"></div>
+            <div class="col col-sm-12 col-lg-6 text-center">
+                <div class="row row-cols-1{{ if ne $sectionHeader "justify-content-center" }} row-cols-sm-2{{ end }} row-gap-5 p-0 align-items-center flex-fill">
+                    {{- if eq $sectionHeader "justify-content-center" -}}
+                        <div class="col p-0 w-50 mx-auto pb-5">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
+                        <div class="col fs-md-5 fs-6">{{ $content }}</div>
+                    {{- else if eq $sectionHeader "justify-content-end" -}}
+                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
+                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
+                    {{- else -}}
+                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
+                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
+                    {{- end -}}
+                </div>
+            </div>
+            <div class="col col-lg-3 d-none d-lg-block"></div>
+        </div>
+    {{- end -}}
+</div>

layouts/partials/assets/section-list.html

@@ -6,9 +6,14 @@
     {{ errorf "partial [assets/section-list.html] - Invalid value for param 'home'"}}
 {{ end }}
 {{- $title := .title -}}
+{{- $icon := .icon -}}
+{{- $thumbnail := .thumbnail -}}
+{{- $sectionHeader := .sectionHeader -}}
+{{- $description := .description -}}
+{{- $content := .content -}}
 {{- $moreTitle := .moreTitle -}}
 {{- $sectionURL := .sectionURL -}}
-
+{{- $nested := .nested | default true -}}
 {{- $paginate := true -}}
 {{- $sort := "date" -}}
 {{- $order := "desc" -}}
@@ -30,8 +35,10 @@
 
 {{- with (index site.Params.sections $section) -}}
     {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
+    {{- with index . "sectionHeader" }}{{ $sectionHeader = . }}{{ end -}}
     {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
     {{- if (index . "reverse") }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
+    {{- if $home }}{{- if (isset . "nested") }}{{ $nested = (index . "nested") }}{{ end -}}{{ end -}}
     {{- if (index . "separator") }}{{ $separator = true }}{{ else }}{{ $separator = false }}{{ end -}}
     {{- with index . "orientation" }}{{ $orientation = . }}{{ end -}}
     {{- with index . "cols" }}{{ $cols = . }}{{ end -}}
@@ -48,8 +55,20 @@
     {{- with index . "vertical" }}{{ $vertical = . }}{{ end -}}
     {{- with index . "width" }}{{ $width = . }}{{ end -}}
 {{- end -}}
+{{ if ne (printf "%T" $nested) "bool" }}
+    {{ errorf "partial [assets/section-list.html] - Invalid value for param 'nested'"}}
+{{ end }}
+
+{{ $list := "" }}
+{{ if $nested }}
+    {{ $list = where site.RegularPages "Type" "in" $section }}
+{{ else if $home }}
+    {{ $sectionPage := site.GetPage "section" $section }}
+    {{ $list = $sectionPage.RegularPages }}
+{{ else }}
+    {{ $list = $page.RegularPages }}
+{{ end }}
 
-{{ $list := where site.RegularPages "Type" "in" $section }}
 {{ $max := (len $list) -}}
 {{ if eq $max 0 }}
     {{- $bundle := site.GetPage $section -}}
@@ -74,6 +93,11 @@
         "page" $page
         "list" $list
         "title" $title
+        "icon" $icon
+        "thumbnail" $thumbnail
+        "sectionHeader" $sectionHeader
+        "description" $description
+        "content" $content
         "class" $style
         "color" $color
         )
@@ -82,6 +106,8 @@
 
     <div class="container-fluid {{ with $background }} bg-{{ . }}{{  end }}">
         <div class="container-xxl flex-fill p-0">
+            {{- partial "assets/section-header.html" $params -}}
+            
             {{ if eq $layout "card" }}
                 {{- $partial = "assets/card-group.html" -}}
                 {{- $params = merge $params (dict 

layouts/partials/footer/scripts.html

@@ -1,6 +1,7 @@
 {{ $filename := .filename | default "js/main.bundle.js" -}}
 {{ $match := .match | default "{js/*.js,js/vendor/**.js}" }}
 {{ $page := .page }}
+{{ $header := .header }}
 
 {{ $files := slice -}}
 {{ range $index, $file := resources.Match $match -}}
@@ -11,6 +12,13 @@
     {{ $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.RelPermalink }}"></script>
     {{ else -}}

layouts/partials/footer/social.html

@@ -7,7 +7,7 @@
         </div>
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}
-                <a href="{{ .URL | relURL }}" target="_blank" rel="noopener" aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
+                <a href="{{ .URL | relLangURL }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
                     {{ .Pre | safeHTML }}
                 </a>
             {{ end -}}

layouts/partials/head/stylesheet.html

@@ -30,7 +30,7 @@
 {{- end -}}
 
 {{- if not hugo.IsProduction -}}
-    <link rel="stylesheet" href="{{ $css.Permalink | relURL }}">
+    <link rel="stylesheet" href="{{ $css.Permalink }}">
 {{- else -}}
     {{- $css = $css | fingerprint | resources.PostProcess -}}
     <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">

layouts/partials/head/twitter_cards.html

@@ -1,7 +1,7 @@
 <!-- Copied from doks -->
 <meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:site" content="{{ .Site.Params.twitterSite }}">
-<meta name="twitter:creator" content="{{ .Site.Params.twitterCreator }}">
+{{ with .Site.Params.twitterSite }}<meta name="twitter:site" content="{{ . }}">{{ end }}
+{{ with .Site.Params.twitterCreator }}<meta name="twitter:creator" content="{{ . }}">{{ end }}
 <meta name="twitter:title" content="{{ $.Scratch.Get "title" }}">
 <meta name="twitter:description" content="{{ $.Scratch.Get "description" }}">
 <meta name="twitter:image" content="{{ $.Scratch.Get "thumbnail" }}">

layouts/partials/utilities/GetMenu.html

@@ -1 +1,6 @@
-{{ return index .Site.Data .Section }}
+{{- $menu := "" -}}
+{{- if .IsPage -}}
+    {{- $menu = index .Site.Data .Section -}}
+{{- end -}}
+
+{{- return $menu -}}

layouts/partials/utilities/git.html

@@ -1,5 +1,5 @@
 {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
 Last updated: {{ $lastmodstr }}
 {{ with .GitInfo }}
-&bull;&nbsp;<a href="{{ site.Params.schema.gitHub }}/commit/{{ .Hash }}">{{ .Subject }} ({{ .AbbreviatedHash }})</a>
+&bull;&nbsp;<a href="{{ site.Params.docs.github | default site.Params.schema.github }}/commit/{{ .Hash }}">{{ .Subject }} ({{ .AbbreviatedHash }})</a>
 {{ end -}}

layouts/shortcodes/accordion-item.html

@@ -5,6 +5,12 @@
     "show"          Optional flag to indicate an item should be shown as collapsed.
 -->
 
+{{- $id := .Ordinal -}}
+{{- $parent := printf "accordion-%d" .Parent.Ordinal -}}
+{{- with (.Parent.Get "id") -}}
+    {{- $parent = . -}}
+{{- end -}}
+
 {{- $id := .Ordinal -}}
 {{ $header := .Get "header" -}}
 {{ if not $header -}}
@@ -35,8 +41,6 @@
     {{ errorf "Invalid value for param 'show': %s" $showParam -}}
 {{ end -}}
 
-{{- $parent := printf "accordion-%d" .Parent.Ordinal -}}
-
 <div class="accordion-item">
     {{- with $header -}}
     <h2 class="accordion-header m-0" id="{{ $parent }}-heading-{{ $id }}">

layouts/shortcodes/accordion.html

@@ -1,12 +1,34 @@
 <!-- 
     Displays a group of vertically collapsing and expanding items. Add accordion-item inner elements for each accordion
     item. The shortcode supports the following arguments:
+    "id":           Optional id of the accordion, defaults to "accordion-" with a sequential number.
+    "always-open":  Optional flag to make accordion items stay open when another item is opened.
     "class":        Optional class attribute of the accordion element, e.g. “w-50”.
 -->
 
-{{- $id := .Ordinal -}}
+{{- $id := printf "accordion-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 {{- $class := .Get "class" -}}
 
-<div id="accordion-{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }}">
-    {{- .Inner -}}
+{{- $openParam := "false" -}}
+{{- $open := false -}}
+{{- with .Get "always-open" }}{{ $openParam = . }}{{ end -}}
+{{- $supportedFlags := slice "true" "false" -}}
+{{- if in $supportedFlags $openParam -}}
+    {{- if eq $openParam "true" }}{{ $open = true }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'always-open': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $body := .Inner -}}
+{{- if $open -}}
+    {{- $pattern := printf "data-bs-parent=\"#%s\"" $id -}}
+    {{- $body = (replace .Inner $pattern "") | markdownify | safeHTML }}
+{{- end -}}
+
+<div id="{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }}">
+    {{- $body -}}
 </div>

layouts/shortcodes/alert.html

@@ -6,15 +6,19 @@
     "icon"          Optional class and name of a Font Awesome icon to include.
 -->
 
+{{- $error := false -}}
 {{ $color := "primary" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
 {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" .Position -}}
-    {{ $color = "primary" -}}
+    {{ $error = true -}}
 {{ end -}}
 
-{{ $icon := .Get "icon" }}
+{{ $icon := "" }}
+{{ with .Get "icon" }}
+    {{ $icon = partial "assets/icon.html" (dict "icon" (printf "%s fa-2x fa-pull-left" .)) }}
+{{ end }}
 
 {{ $dismissibleParam := "false" -}}
 {{ $dismissible := false -}}
@@ -24,10 +28,13 @@
     {{ if eq $dismissibleParam "true" }}{{ $dismissible = true }}{{ end -}}
 {{ else -}}
     {{ errorf "Invalid value for param 'dismissible': %s" .Position -}}
+    {{ $error = true -}}
 {{ end -}}
 
-<div class="alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
-    {{ with $icon }}<i class="{{ . }} fa-2x fa-pull-left"></i>{{ end }}
-    {{ trim .Inner " \r\n" | markdownify | safeHTML -}}
-    {{ if $dismissible }}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>{{ end }}
-</div>
+{{- if not $error -}}
+    <div class="alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
+        {{ with $icon }}{{ . }}{{ end }}
+        {{ trim .Inner " \r\n" | markdownify | safeHTML -}}
+        {{ if $dismissible }}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>{{ end }}
+    </div>
+{{- end -}}

layouts/shortcodes/carousel.html

@@ -1,18 +1,23 @@
 <!-- 
     Displays a carousel of several responsive images (see the image shortcode for more details). Add inner <img> 
     elements to define individual image slides. The shortcode supports the following arguments:
+    "id":           Optional id of the carousel, defaults to "carousel-" with a sequential number.
     "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
                     Instead, the original aspect ratio of the image is preserved.
     "class":        Optional class attribute of the carousel element, e.g. “w-75”.
 -->
 
+{{- $id := printf "carousel-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
+
 {{ $ratio := .Get "ratio" -}}
 {{ $class := .Get "class" -}}
-{{ $id := .Ordinal -}}
 {{ $images := .Inner -}}
 {{ $items := len (findRE "carousel-item" $images) -}}
 
-<div id="carousel-{{ $id }}" class="carousel slide mb-3{{ with $class }} {{ . }}{{ end }}" data-bs-ride="true">
+<div id="{{ $id }}" class="carousel slide mb-3{{ with $class }} {{ . }}{{ end }}" data-bs-ride="true">
     <div class="carousel-indicators">
         {{ range $index := (seq $items) -}}
             <button type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide-to="{{ sub $index 1 }}" {{ if eq $index 1 }}class="active"{{ end }} aria-current="true" aria-label="Slide {{ $index }}"></button>
@@ -21,11 +26,11 @@
     <div class="carousel-inner">
         {{ $images }}
     </div>
-    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide="prev">
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </button>
-    <button class="carousel-control-next" type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide="next">
+    <button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </button>

layouts/shortcodes/navbar.html

@@ -2,13 +2,15 @@
     Displays a navigation header with a toggler. The menu items are derived from the site's configuration. Nested items
     are supported at one-level depth. The navigation bar includes a search area and a language switcher if applicable.
     The shortcode supports the following arguments:
+    "id"            Optional id of the navbar toggler, defaults to "navbar-collapse-n" with a sequential number n
+                    starting at 1.
     "path"          Required path of the active page.
     "menus"         Optional name of the menu configuration, defaults to "main".
     "size"          Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl".
     "style"         Optional style of the navbar, either "light" (default) or "dark".
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
-                    default color is none.
+                    "danger", "warning", "info", "white", "black", "body", or "body-tertiary". The default color is
+                    none.
     "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
@@ -16,10 +18,13 @@
 -->
 
 {{ $error := false }}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body" "body-tertiary" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "white" "black" "body" "body" "body-tertiary" -}}
 {{ $supportedFlags := slice "true" "false" -}}
 
-{{ $id := add .Ordinal 1 }}
+{{- $id := printf "navbar-collapse-%d" (add .Ordinal 1) -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
 {{ $path := .Get "path" }}
 {{ $page := .Site.GetPage $path }}

layouts/shortcodes/release.html

@@ -0,0 +1,68 @@
+<!-- 
+    Displays a release button that links to a specific release. Use the optional state to indicate if it is a new or
+    deprecated feature.
+    "version":      Required version string, expects semver notation with a "v" prefix.
+    "state":        Optional state, either "new" or "deprecated".
+    "short":        Optional flag to indicate the release button should use short notation.
+-->
+
+{{- $error := false -}}
+{{- $version := .Get "version" -}}
+{{- $inline := false -}}
+
+{{- $state := "new" -}}
+{{- with .Get "state" }}{{ $state = . }}{{ end -}}
+{{- $supportedStates := slice "new" "deprecated" -}}
+{{- if not (in $supportedStates $state) -}}
+    {{- errorf "Invalid value for param 'state': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $shortParam := "false" -}}
+{{- $short := false -}}
+{{- with .Get "short" }}{{ $shortParam = . }}{{ end -}}
+{{- $supportedFlags := slice "true" "false" -}}
+{{- if in $supportedFlags $shortParam -}}
+    {{- if eq $shortParam "true" }}{{ $short = true }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'short': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $inlineParam := "false" -}}
+{{- $inline := false -}}
+{{- with .Get "inline" }}{{ $inlineParam = . }}{{ end -}}
+{{- $supportedFlags := slice "true" "false" -}}
+{{- if in $supportedFlags $inlineParam -}}
+    {{- if eq $inlineParam "true" }}{{ $inline = true }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'inline': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $title := $version -}}
+{{- $color := "success" -}}
+{{- if eq $state "deprecated" -}}
+    {{- $color = "secondary" -}}
+{{- end -}}
+
+{{- if not $short -}}
+    {{- if eq $state "deprecated" -}}
+        {{- $title = (printf "Deprecated in %s" $version) -}}
+    {{- else -}}
+        {{- $title = (printf "Added in %s" $version) -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if not $error -}}
+    <div class="pb-3">
+    {{- partial "assets/button.html" (dict 
+        "title" $title
+        "href" (printf "%s/%s" (strings.TrimSuffix "/" site.Params.docs.release) $version)
+        "size" "sm"
+        "color" $color
+        "outline" "true"
+        "class" "rounded-2 fw-semibold")
+    -}} 
+    </div>
+{{- end -}}

layouts/shortcodes/table.html

@@ -1,9 +1,21 @@
-{{ $input := .Inner | markdownify }}
-{{ $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" }}
-{{ $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" }}
-{{ $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" }}
-{{ $class := .Get 0 | default "" }}
-{{ $old := "<table>" }}
-{{ $new := printf "<table class=\"table %s\">" $class }}
-{{ $input := replace $input $old $new }}
-{{ $input | safeHTML }}
+{{- $responsiveVals := slice "table-responsive" "table-responsive-none" "table-responsive-sm" "table-responsive-md" "table-responsive-lg" "table-responsive-xl" "table-responsive-xxl" -}}
+{{- $responsive := intersect .Params $responsiveVals -}}
+{{- $main := complement $responsive .Params -}}
+
+{{- if in $responsive "table-responsive-none" -}}
+    {{- $responsive = "" -}}
+{{- else if not $responsive -}}
+    {{ $responsive = (slice "table-responsive") -}}
+{{- end -}}
+
+{{- $input := .Inner | markdownify }}
+{{- $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" -}}
+{{- $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" -}}
+{{- $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" -}}
+{{- $class := delimit $main " " -}}
+{{- $old := "<table>" -}}
+{{- $new := printf "<table class=\"table %s\">" $class -}}
+{{ $input := replace $input $old $new -}}
+{{- with $responsive }}<div class="{{ delimit . " " }}">{{ end -}}
+{{ $input | safeHTML }}
+{{- with $responsive }}</div>{{ end -}}

layouts/shortcodes/tooltip.html

@@ -1,7 +1,7 @@
 <!-- 
     Displays a tooltip for a link. The shortcode supports the following arguments:
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white", or "black".
+                    "danger", "warning", "info", "light", or "dark".
     "title"         Required text to display in the tooltip.
     "href"          Required address for the button or hyperlink.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
@@ -18,7 +18,7 @@
 
 {{ $color := "primary" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" .Position -}}
     {{ $error = true }}
@@ -41,5 +41,5 @@
 {{ end -}}
 
 {{ if not $error }}
-    {{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}} 
+    <div class="d-inline-flex">{{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}}</div>
 {{ end }}

layouts/tags/list.html

@@ -13,7 +13,7 @@
                                 {{ .Count }} {{ if gt .Count 1 }} {{ T "articles" }} {{ else }} {{ T "article" }} {{ end }}
                             </div>
                             <div class="col">
-                                <a href="{{ (path.Join .Page.RelPermalink) | relURL }}">{{ .Name | markdownify }}</a>
+                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ .Name | markdownify }}</a>
                             </div>
                         </div>
                     {{ end }}
@@ -32,7 +32,7 @@
                                     <p class="text-body-secondary mt-5">{{ $year }}</p>
                                     {{ $.Scratch.Set "lastYear" $year }}
                                 {{ end }}
-                                <a href="{{ .Permalink | relURL }}">{{ if .Draft }}{{ T "draft" | upper }}: {{end}}{{ .Title | markdownify }}</a>
+                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ if .Draft }}{{ T "draft" | upper }}: {{end}}{{ .Title | markdownify }}</a>
                             </div>
                         </div>
                     {{ end }}

netlify.toml

@@ -24,15 +24,20 @@
         X-XSS-Protection = "1; mode=block"
         Content-Security-Policy = """\
             default-src 'self'; \
+            child-src 'self' app.netlify.com; \
             script-src 'self' \
-                https://utteranc.es/client.js; \
-            style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
+                app.netlify.com netlify-cdp-loader.netlify.app \
+                https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
+            style-src 'self' \
+                netlify.app https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
             object-src 'none'; \
             base-uri 'self'; \
-            connect-src 'self'; \
+            connect-src 'self'
+                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; \
+            frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com \
+                app.netlify.com; \
+            img-src 'self' https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
             manifest-src 'self'; \
             media-src 'self' \
             """

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.12.1",
+  "version": "0.14.2",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",

static/js/alias.js

@@ -0,0 +1,3 @@
+const alias = document.querySelector("link[rel='canonical']").getAttribute('href')
+const params = window.location.search + window.location.hash
+window.location = alias + params