Merge pull request #268 from gethinode/develop

Social media

.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/clipboard.js

@@ -36,3 +36,10 @@ const addCopyButtons = (clipboard) => {
 if (navigator && navigator.clipboard) {
   addCopyButtons(navigator.clipboard)
 }
+
+document.querySelectorAll('[data-clipboard]').forEach(trigger => {
+  const text = trigger.getAttribute('data-clipboard')
+  trigger.addEventListener('click', () => {
+    navigator.clipboard.writeText(text)
+  })
+})

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/js/toast.js

@@ -1,10 +1,37 @@
-// Bootstrap toast example: https://getbootstrap.com/docs/5.2/components/toasts/
-const toastTrigger = document.getElementById('toastButton')
-const toastLiveExample = document.getElementById('toastMessage')
-if (toastTrigger) {
-  toastTrigger.addEventListener('click', () => {
-    // eslint-disable-next-line no-undef
-    const toast = new bootstrap.Toast(toastLiveExample)
-    toast.show()
-  })
+// Script to move all embedded toast messages into a container. The container ensures multiple toast messages are
+// stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures the click event
+// of the origin is linked as well.
+
+// create a HTML fragment
+function createFragment (htmlStr) {
+  const fragment = document.createDocumentFragment()
+  const temp = document.createElement('div')
+  temp.innerHTML = htmlStr
+  while (temp.firstChild) {
+    fragment.appendChild(temp.firstChild)
+  }
+  return fragment
 }
+
+// insert a toast container in the DOM
+const container = '<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>'
+document.body.appendChild(createFragment(container))
+const parent = document.getElementById('toast-container')
+
+// process all data-toast-target elements
+document.querySelectorAll('[data-toast-target]').forEach(trigger => {
+  const target = document.getElementById(trigger.getAttribute('data-toast-target'))
+  if (target !== null) {
+    // move the element to the toast containr
+    parent.appendChild(target)
+
+    // eslint-disable-next-line no-undef
+    const toast = bootstrap.Toast.getOrCreateInstance(target)
+    if (toast !== null) {
+      // associate the click event of the origin with the toast element
+      trigger.addEventListener('click', () => {
+        toast.show()
+      })
+    }
+  }
+})

assets/scss/components/_buttons.scss

@@ -6,3 +6,22 @@
 .open > .dropdown-toggle.btn-primary {
     color: #fff if($enable-important-utilities, !important, null);
 }
+
+.btn-social {
+    --bs-btn-bg: transparent;
+    --bs-btn-border-width: none;
+    --bs-btn-color: var(--bs-secondary);
+    --bs-btn-border-color: none;
+    --bs-btn-hover-bg: none;
+    --bs-btn-hover-border-color: none;
+    --bs-btn-active-bg: none;
+    --bs-btn-active-border-color: none;
+}
+
+.btn-social:hover,
+.btn-social:focus,
+.btn-social:active,
+.btn-social.active,
+.open > .dropdown-toggle.btn-primary {
+    color: var(--bs-primary) if($enable-important-utilities, !important, null);
+}

assets/scss/components/_toc.scss

@@ -1,8 +1,8 @@
 //
-// Table of contents sidebar
+// Table of contents sidebar & drop-down panel
 //
 // scss-docs-start toc
-.toc {
+.toc-sidebar {
     grid-area: toc;
     right: 0;
     z-index: 2;
@@ -15,6 +15,7 @@
 
 .toc nav {
     font-size: 0.875rem;
+    margin-bottom: -0.875rem;
 }
 
 .toc nav ul {
@@ -33,6 +34,10 @@
 
 .toc nav a {
     color: inherit;
+
+    &:hover {
+        color: var(--bs-primary);
+    }
 }
 
 .toc nav a:not(:hover) {
@@ -42,3 +47,21 @@
 .toc nav a code {
     font: inherit;
 }
+
+.toc-button {
+    --bs-btn-hover-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-body-bg);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: var(--bs-primary);
+    --bs-btn-active-bg: var(--bs-body-bg);
+    --bs-btn-active-border-color: var(--bs-primary);
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
+        outline: none;
+    }
+}

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
@@ -34,12 +36,51 @@
     sidebar = true
 # toml-docs-end navigation
 
+# toml-docs-start sharing
+[sharing]
+    enabled = true
+    sort = "weight"
+    reverse = false
+
+[[sharing.providers]]
+    name = "LinkedIn"
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
+    icon = "fab linkedin"
+    weight = 10
+
+[[sharing.providers]]
+    name = "Twitter"
+    url = "https://twitter.com/home?status={url}"
+    icon = "fab twitter"
+    weight = 20
+
+[[sharing.providers]]
+    name = "Facebook"
+    url = "https://www.facebook.com/sharer.php?u={url}"
+    icon = "fab facebook"
+    weight = 30
+
+[[sharing.providers]]
+    name = "WhatsApp"
+    url = "whatsapp://send?text={title}%20{url}"
+    icon = "fab whatsapp"
+    weight = 40
+
+[[sharing.providers]]
+    name = "email"
+    url = "{url}"
+    icon = "fas link"
+    weight = 50
+    clipboard = true
+# toml-docs-end sharing
+
 # toml-docs-start sections
 [sections]
     [sections.blog]
         title = "Blog"
         sort = "date"
         reverse = true
+        nested = true
         cols = 3
         color = ""
         padding = "0"
@@ -53,8 +94,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.
@@ -241,12 +251,20 @@ As an example, the following shortcode displays a button that, when clicked, tri
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Show toast
+{{</* button toast="toast-example-1" */>}}
+    Show toast 1
 {{</* /button */>}}
 
-{{</* toast header="Custom title" */>}}
-    This is a toast message.
+{{</* button toast="toast-example-2" */>}}
+    Show toast 2
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="First title" */>}}
+    This is the first toast message.
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Second title" */>}}
+    This is the second toast message.
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -257,8 +275,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.
@@ -241,12 +252,20 @@ De volgende shortcode toont een knop die een bericht laat verschijnen op het sch
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Toon bericht
+{{</* button toast="toast-example-1" */>}}
+    Toon bericht 1
 {{</* /button */>}}
 
-{{</* toast header="Titel" */>}}
-    Dit is een bericht.
+{{</* button toast="toast-example-2" */>}}
+    Toon bericht 2
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="Eerste titel" */>}}
+    Dit is het eerste bericht.
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Tweede titel" */>}}
+    Dit is het tweede bericht.
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -257,8 +276,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,14 @@
   translation: "Toggle main navigation"
 - id: demo
   translation: "Demo"
+- id: addedFeature
+  translation: "Added in"
+- id: deprecatedFeature
+  translation: "Deprecated in"
+- id: shareLink
+  translation: "Share via"
+- id: copiedToClipboard
+  translation: "Copied to clipboard"
 
 # 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,14 @@
   translation: "Automatisch"
 - id: toggleMainNav
   translation: "Toon of verberg hoofdnavigatie"
+- id: addedFeature
+  translation: "Toegevoegd in"
+- id: deprecatedFeature
+  translation: "Verouderd in"
+- id: shareLink
+  translation: "Delen via"
+- id: copiedToClipboard
+  translation: "Gekopieerd naar clipboard"
 
 # 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

@@ -2,6 +2,8 @@
     {{ if site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
     {{ if in (slice "docs" "minimal") .Layout }}
         {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+        {{ partial "assets/sharing.html" . }}
+        <p class="lead mb-5">{{ .Description }}</p>
     {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
         {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
@@ -13,37 +15,41 @@
             {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
         </small>
 
-        <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>
-                    &nbsp;
-                {{ end -}}
+        {{- if gt (len (.GetTerms "tags")) 0 -}}
+            <div class="mt-3">
+                <div class="d-none-dark">
+                    {{ range (.GetTerms "tags") -}}
+                        <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) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
+                        &nbsp;
+                    {{ end -}}
+                </div>
             </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>
-                    &nbsp;
-                {{ end -}}
-            </div>
-        </div>
+        {{- end -}}
+        {{ partial "assets/sharing.html" . }}
+        <p class="lead mb-5 mt-3">{{ .Description }}</p>
     {{ end }}
 {{ end -}}
 
 {{ define "partials/body.html" -}}
-    {{ if in (slice "docs" "minimal") .Layout }}
-        <p class="lead mb-5">{{ .Description }}</p>
-        {{ .Content }}
-    {{ else }}
-        <p class="lead mb-5 mt-3">{{ .Description }}</p>
+    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+        <div class="d-md-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
+    {{- end -}}
+
+    {{ if not (in (slice "docs" "minimal") .Layout) }}
         {{ if .Params.thumbnail -}}
             {{- $credits := "" -}}
             {{- if .Params.photoCredits }}{{ if .Params.PhotoSource }}{{ $credits = printf "%s %s %s %s" (T "photoBy") .Params.photoCredits (T "photoOn") .Params.PhotoSource }}{{ end }}{{ end -}}
             {{- partial "assets/image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
         {{ end -}}
-        {{ .Content }}
-{{ end }}
+    {{ end }}
+    {{ .Content }}
 {{ end -}}
 
 {{ define "partials/footer.html" -}}
@@ -82,7 +88,7 @@
     {{- $version := .Scratch.Get "version" -}}
     {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
     {{ if and $menu $sidebar -}}
-        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper .Section }}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

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

@@ -1,6 +1,6 @@
 <!-- 
     Displays a button. The shortcode supports the following arguments:
-    "title"         Required title of the button.
+    "title"         Title of the button, required unless icon is set.
     "href"          Optional address for the button or hyperlink.
     "id"            Optional id of the button, to be used in the DOM.
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
@@ -15,91 +15,126 @@
     "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
     "type"          Optional type of the element, either "link" or "button" (default).
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
+    "class"         Optional class attribute of the button element, e.g. “toc-button”.
+    "icon"          Font Awesome icon class attribute, required unless title is set. An example value is "fas sort".
+    "order"         Optional order of the icon, either "first" or "last" (default).
+    "justify"       Optional justification of the button title and icon, either "start", "end", "center" (default),
+                    "between", "around", or "evenly".
+    "toast"         Optional id of the toast to display when the button is clicked.
+    "clipboard"     Optional text to be copied to the clipboard when the button is clicked.
 -->
 
-{{ $title := trim .title " \r\n" -}}
-{{ if not $title -}}
-    {{ errorf "partial [assets/button.html] - Missing element title" -}}
-{{ end -}}
+{{- $title := trim .title " \r\n" -}}
+{{- $icon := .icon }}
+{{- if not (or $title $icon) -}}
+    {{- errorf "partial [assets/button.html] - Missing element title or icon" -}}
+{{- end -}}
 
-{{ $id := .id }}
+{{- $id := .id }}
 
-{{ $state := "enabled" -}}
-{{ with .state }}{{ $state = . }}{{ end -}}
-{{ $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
-{{ if not (in $supportedStates $state) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'state': %s" $state -}}
-{{ end -}}
+{{- $state := "enabled" -}}
+{{- with .state }}{{ $state = . }}{{ end -}}
+{{- $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
+{{- if not (in $supportedStates $state) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'state': %s" $state -}}
+{{- end -}}
 
-{{ $size := "md" -}}
-{{ with .size }}{{ $size = . }}{{ end -}}
-{{ $supportedSizes := slice "sm" "md" "lg" -}}
-{{ if not (in $supportedSizes $size) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'size': %s" $size -}}
-{{ end -}}
+{{- $size := "md" -}}
+{{- with .size }}{{ $size = . }}{{ end -}}
+{{- $supportedSizes := slice "sm" "md" "lg" -}}
+{{- if not (in $supportedSizes $size) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'size': %s" $size -}}
+{{- end -}}
 
-{{ $color := "primary" -}}
-{{ with .color }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
-{{ if not (in $supportedColors $color) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'color': %s" $color -}}
-{{ end -}}
+{{- $color := "primary" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{- if not (in $supportedColors $color) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'color': %s" $color -}}
+{{- end -}}
 
-{{ $outline := false -}}
-{{ with .outline }}{{ $outline = . }}{{ end -}}
+{{- $outline := false -}}
+{{- with .outline }}{{ $outline = . }}{{ end -}}
 
-{{ $badge := "" -}}
-{{ with .badge }}{{ $badge = . }}{{ end -}}
+{{- $badge := "" -}}
+{{- with .badge }}{{ $badge = . }}{{ end -}}
 
-{{ $label := "" -}}
-{{ with .label }}{{ $label = . }}{{ end -}}
+{{- $label := "" -}}
+{{- with .label }}{{ $label = . }}{{ end -}}
 
-{{ $tooltip := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .tooltip }}{{ $tooltip = . }}{{ end -}}
-{{ end -}}
+{{- $tooltip := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .tooltip }}{{ $tooltip = . }}{{ end -}}
+{{- end -}}
 
-{{ $href := .href -}}
+{{- $href := .href -}}
 
-{{ $collapse := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
-{{ end -}}
+{{- $collapse := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
+{{- end -}}
 
-{{ if $tooltip -}}
-    {{ if $collapse -}}
-        {{ errorf "partial [assets/button.html] - Cannot use tooltip and collapse at the same time" -}}
-    {{ end -}}
-{{ end -}}
+{{- if $tooltip -}}
+    {{- if $collapse -}}
+        {{- errorf "partial [assets/button.html] - Cannot use tooltip and collapse at the same time" -}}
+    {{- end -}}
+{{- end -}}
 
-{{ $type := "button" -}}
-{{ with .type }}{{ $type = . }}{{ end -}}
-{{ $supportedTypes := slice "button" "link" -}}
-{{ if not (in $supportedTypes $type) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'type': %s" $type -}}
-{{ end -}}
+{{- $type := "button" -}}
+{{- with .type }}{{ $type = . }}{{ end -}}
+{{- $supportedTypes := slice "button" "link" -}}
+{{- if not (in $supportedTypes $type) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'type': %s" $type -}}
+{{- end -}}
 
-{{ $placement := "top" -}}
-{{ with .placement }}{{ $placement = . }}{{ end -}}
-{{ $supportedPlacements := slice "top" "bottom" "left" "right" -}}
-{{ if not (in $supportedPlacements $placement) -}}
-    {{ errorf "partial [assets/button.html] - Invalid value for param 'placement': %s" $placement -}}
-{{ end -}}
+{{- $placement := "top" -}}
+{{- with .placement }}{{ $placement = . }}{{ end -}}
+{{- $supportedPlacements := slice "top" "bottom" "left" "right" -}}
+{{- if not (in $supportedPlacements $placement) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'placement': %s" $placement -}}
+{{- end -}}
 
-<a {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
+{{- $class := .class }}
+
+{{- $order := "last" -}}
+{{- with .order }}{{ $order = . }}{{ end -}}
+{{- $supportedOrders := slice "first" "last" -}}
+{{- if not (in $supportedOrders $order) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'order': %s" $order -}}
+{{- end -}}
+
+{{- $justify := "center" -}}
+{{- with .justify }}{{ $justify = . }}{{ end -}}
+{{- $supportedJustify := slice "start" "end" "center" "between" "around" "evenly" -}}
+{{- if not (in $supportedJustify $justify) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'justify': %s" $justify -}}
+{{- end -}}
+
+{{- $toast := .toast -}}
+{{- $clipboard := .clipboard -}}
+
+<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 }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
-    {{ else }}class="link-{{ $color }} position-relative"{{ end }}
+    {{ with $toast }}data-toast-target="{{ $toast }}"{{ end }}
+    {{ with $clipboard }}data-clipboard="{{ $clipboard }}"{{ 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 }}
     >
-    {{ $title -}}
-    {{ with $badge }}
+
+    <div class="d-flex justify-content-{{ $justify }}">
+        <div>{{ $title }}</div>
+        {{- with $icon }}<div class="align-self-center{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon) }}</div>{{ end }}
+    </div>
+
+    {{- with $badge }}
         <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
             {{ . }}
             {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
         </span>
-    {{ end }}  
+    {{- end -}}  
 </a>

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/assets/sharing.html

@@ -0,0 +1,28 @@
+{{- if .Site.Params.sharing.enabled -}}
+    {{- if or .Params.sharing (not (isset .Params "sharing")) -}}
+        {{- $page := . -}}
+        {{- $order := "asc" -}}
+        {{- $list := .Site.Params.sharing.providers -}}
+        {{- if .Site.Params.sharing.reverse }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
+        {{- $sort := .Site.Params.sharing.sort | default "weight" -}}
+        {{- $list = sort $list $sort $order -}}
+        <div class="py-3 text-body-secondary">
+            {{ T "shareLink" }}
+            {{- range $index, $item := $list -}}
+                {{- $url := $item.url -}}
+                {{- $url = replace $url "{url}" $page.Permalink -}}
+                {{- $url = replace $url "{title}" (urlquery $page.Title) -}}
+                {{- $url = $url | safeURL -}}
+                {{- $target := "" -}}
+                {{- $clipboard := "" -}}
+                {{- if .clipboard -}}
+                    {{- $target = (printf "toast-message-%s-%d" (anchorize $item.name) $index ) -}}
+                    {{- $clipboard = $url -}}
+                    {{- $url = "#!" -}}
+                    {{- partial "assets/toast.html" (dict "id" $target "message" (T "copiedToClipboard")) -}}
+                {{- end -}}
+                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" $item.icon "class" "btn-social px-1" )}}
+            {{- end -}}
+        </div>
+    {{- end -}}
+{{- end -}}

layouts/partials/assets/toast.html

@@ -0,0 +1,28 @@
+<!-- 
+    Prepares a toast message. Use a trigger to display the message. The shortcode supports the following arguments:
+    "id"            Optional id of the toast message, defaults to "toast-message-0".
+    "header":       Optional header of the toast message.
+    "message":      Required toast message.
+-->
+
+{{- $id := printf "toast-message-%d" 0 -}}
+{{ with .id }}
+    {{ $id = . }}
+{{ end }}
+
+{{ $header := .header -}}
+{{ if not $header -}}
+    {{ $header = site.Title -}}
+{{ end -}}
+{{- $message := .message -}}
+{{ if not $message -}}
+    {{- errorf "partial [assets/toast.html] - Missing message text" -}}
+{{ end -}}
+
+<div id="{{ $id }}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+        {{ with $header }}<strong class="me-auto">{{ . }}</strong>{{ end }}
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">{{ $message }}</div>
+</div>

layouts/partials/assets/toc-dropdown.html

@@ -0,0 +1,23 @@
+{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
+{{ if (gt $items 1) -}}
+    <div class="d-grid gap-2 mx-auto">
+        {{ partial "assets/button.html" (dict 
+            "title" (T "toc") 
+            "color" "secondary" 
+            "outline" "true" 
+            "class" "toc-button" 
+            "icon" "fas sort"
+            "justify" "between"
+            "collapse" "toc-collapse"
+            "order" "last") 
+        -}}
+    </div>
+
+    <p>
+        <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+            <div class="toc toc-panel text-body-secondary p-2">
+                <small>{{ .TableOfContents }}</small>
+            </div>
+        </div>
+    </p>
+{{ end -}}

layouts/partials/assets/toc.html

@@ -1,6 +1,6 @@
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
 {{ if (gt $items 1) -}}
-    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+    <div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
         <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
         {{ .TableOfContents }}
     </div>

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/button.html

@@ -14,6 +14,7 @@
                     inactive buttons.
     "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
+    "toast"         Optional id of the toast to display when the button is clicked.
 -->
 
 {{ $error := false }}
@@ -77,6 +78,8 @@
     {{ $error = true }}
 {{ end -}}
 
+{{- $toast := .Get "toast" -}}
+
 {{ if not $error }}
     {{- partial "assets/button.html" (dict 
         "type" $type
@@ -91,6 +94,7 @@
         "href" $href
         "id" $id
         "state" $state
-        "placement" $placement)
+        "placement" $placement
+        "toast" $toast)
     -}} 
 {{ 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/toast.html

@@ -1,24 +1,16 @@
 <!-- 
     Prepares a toast message. Use a trigger to display the message. The shortcode supports the following arguments:
+    "id"            Optional id of the toast message, defaults to "toast-message-n" with sequence n.
     "header":       Optional header of the toast message. Uses the site title by default.
 -->
 
+{{- $id := printf "toast-message-%d" .Ordinal -}}
+{{- with .Get "id" }}{{ $id = . }}{{ end -}}
 {{ $header := .Get "header" -}}
-{{ if not $header -}}
-    {{ $header = site.Title -}}
-{{ end -}}
-
 {{ $message := trim .Inner " \r\n" -}}
+
 {{ if not $message -}}
     {{ errorf "Missing inner element text: %s" .Position -}}
+{{ else }}
+    {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message) }}
 {{ end -}}
-
-<div class="toast-container position-fixed bottom-0 end-0 p-3">
-    <div id="toastMessage" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="toast-header">
-            <strong class="me-auto">{{ $header }}</strong>
-            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-        </div>
-        <div class="toast-body">{{ $message }}</div>
-    </div>
-</div>

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.0",
+  "version": "0.14.3",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -63,7 +63,7 @@
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "flexsearch": "^0.7.31",
-    "hugo-bin": "^0.102.0",
+    "hugo-bin": "^0.103.0",
     "markdownlint-cli2": "^0.7.0",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",

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