Merge pull request #380 from gethinode/develop

Refine icon support

.eslintignore

@@ -1,5 +1,6 @@
 assets/js/critical/color.js
 assets/js/analytics.js
 assets/js/flexsearch.js
+assets/js/sharing.js
 assets/js/vendor
 node_modules

assets/js/critical/color.js

@@ -33,7 +33,7 @@
     const activeSelectors = document.querySelectorAll('.theme-icon-active')
     const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
     if (activeButtons.length > 0) {
-      const activeIcon = activeButtons[0].querySelector('i')
+      const activeIcon = activeButtons[0].querySelector('span')
 
       document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
         element.classList.remove('active')

assets/js/sharing.js

@@ -0,0 +1,36 @@
+{{- if site.Params.sharing.webshare -}}
+
+// Adapted from: https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g
+
+// function for Web Share API
+function webShareAPI (title, description, link) {
+  navigator
+    .share({
+      title,
+      text: description,
+      url: link
+    })
+    .then(() => console.log('Successful share'))
+    .catch((error) => console.log('Error sharing', error))
+}
+
+const shareBtn = document.getElementById('btn-webshare')
+
+if (shareBtn !== null) {
+  if (navigator.share) {
+    const title = shareBtn.getAttribute('data-sharing-title')
+    const description = shareBtn.getAttribute('data-sharing-description')
+    const url = shareBtn.getAttribute('data-sharing-url')
+
+    // show button if it supports webShareAPI
+    shareBtn.style.display = 'block'
+    shareBtn.addEventListener('click', () =>
+      webShareAPI(title, description, url)
+    )
+  } else {
+    // hide button if host does not support Web Share API
+    shareBtn.style.display = 'none'
+  }
+}
+
+{{- end -}}

assets/scss/common/_icons.scss

@@ -23,19 +23,3 @@ $btn-toggle:                                    url("/icons/btn-toggle.svg") !de
 $btn-toggle-dark:                               url("/icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons
-
-.fa-wrapper {
-    container: wrapper / inline-size;
-}
-
-// define fallback size for browsers not supporting containers
-.fa-fluid {
-    font-size: 5rem;
-}
-
-// set size based on container width
-@container (min-width: 0) {
-    .fa-wrapper .fa-fluid {
-        font-size: 60cqi;
-    }
-}

config/_default/menus/menus.en.toml

@@ -32,19 +32,19 @@
 
 [[social]]
   name = "LinkedIn"
-  pre = "<i class=\"fab fa-linkedin fa-2x\"></i>"
+  pre = "fab linkedin"
   url = "https://linkedin.com/"
   weight = 10
 
 [[social]]
   name = "GitHub"
-  pre = "<i class=\"fab fa-github fa-2x\"></i>"
+  pre = "fab fa-github"
   url = "https://github.com/"
   weight = 20
 
 [[social]]
   name = "Medium"
-  pre = "<i class=\"fab fa-medium fa-2x\"></i>"
+  pre = "fab medium"
   url = "https://medium.com/"
   weight = 30
 

config/_default/menus/menus.nl.toml

@@ -32,19 +32,19 @@
 
 [[social]]
   name = "LinkedIn"
-  pre = "<i class=\"fab fa-linkedin fa-2x\"></i>"
+  pre = "fab linkedin"
   url = "https://linkedin.com/"
   weight = 10
 
 [[social]]
   name = "GitHub"
-  pre = "<i class=\"fab fa-github fa-2x\"></i>"
+  pre = "fab github"
   url = "https://github.com/"
   weight = 20
 
 [[social]]
   name = "Medium"
-  pre = "<i class=\"fab fa-medium fa-2x\"></i>"
+  pre = "fab medium"
   url = "https://medium.com/"
   weight = 30
 

config/_default/params.toml

@@ -16,6 +16,10 @@
     optional = ["leaflet", "katex"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
+    [modules.fontawesome]
+        inline = true
+        debug = true
+        skipMissing = false
 # toml-docs-end modules
 
 # toml-docs-start debugging
@@ -63,6 +67,7 @@
     enabled = true
     sort = "weight"
     reverse = false
+    webshare = true
 
 [[sharing.providers]]
     name = "LinkedIn"

content/en/about.md

@@ -2,7 +2,7 @@
 title: About
 description: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
 date: 2022-04-11
-updated: 2023-06-26
+updated: 2023-08-02
 showComments: false
 ---
 
@@ -12,17 +12,17 @@ showComments: false
     <div class="container-fluid">
         <div class="row justify-content-center text-center">
             <div class="col-lg-4">
-                <i class="fa-brands fa-bootstrap fa-2xl"></i>
+                {{< icon fab bootstrap fa-2xl >}}
                 <h2 class="h4">Bootstrap framework</h2>
                 <p>Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.</p>
             </div>
             <div class="col-lg-4">
-                <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
+                {{< icon fas magnifying-glass fa-2xl >}}
                 <h2 class="h4">Full text search</h2>
                 <p>Search your site with FlexSearch, a full-text search library with zero dependencies.</p>
             </div>
             <div class="col-lg-4">
-                <i class="fa-solid fa-code fa-2xl"></i>
+                {{< icon fas code fa-2xl >}}
                 <h2 class="h4">Development tools</h2>
                 <p>Use Node Package Manager to automate the build process and to keep track of dependencies.</p>
             </div>

content/nl/about.md

@@ -3,7 +3,7 @@ slug: over-mij
 title: Over mij
 description: Een blog en documentatie thema voor Hugo gebaseerd op Bootstrap 5.
 date: 2023-02-17
-updated: 2023-06-26
+updated: 2023-08-02
 showComments: false
 ---
 
@@ -14,17 +14,17 @@ showComments: false
     <div class="row justify-content-center text-center">
     <div class="row justify-content-center text-center">
       <div class="col-lg-4">
-        <i class="fa-brands fa-bootstrap fa-2xl"></i>
+        {{< icon fab bootstrap fa-2xl >}}
         <h2 class="h4">Bootstrap raamwerk</h2>
         <p>Bouw snelle websites geschikt voor mobiele en desktop schermen met Bootstrap 5. Pas de site eenvoudig aan met bronbestanden in Sass.</p>
       </div>
       <div class="col-lg-4">
-        <i class="fa-solid fa-magnifying-glass fa-2xl"></i>
+        {{< icon fas magnifying-glass fa-2xl >}}
         <h2 class="h4">Volledig doorzoekbaar</h2>
         <p>Doorzoek je site met FlexSearch, een software bibliotheek zonder afhankelijkheden.</p>
       </div>
       <div class="col-lg-4">
-      <i class="fa-solid fa-code fa-2xl"></i>
+        {{< icon fas code fa-2xl >}}
         <h2 class="h4">Ontwikkelgereedschap</h2>
         <p>Gebruik Node Package Manager om het bouwproces inclusief versiebeheer volledig te automatiseren.</p>
       </div>

go.mod

@@ -5,7 +5,7 @@ go 1.19
 require (
 	github.com/gethinode/mod-bootstrap v1.1.1 // indirect
 	github.com/gethinode/mod-flexsearch v1.1.4 // indirect
-	github.com/gethinode/mod-fontawesome v1.2.1 // indirect
+	github.com/gethinode/mod-fontawesome v1.2.3 // indirect
 	github.com/gethinode/mod-katex v1.0.2 // indirect
 	github.com/gethinode/mod-leaflet v0.3.3 // indirect
 )

go.sum

@@ -24,6 +24,10 @@ github.com/gethinode/mod-fontawesome v1.2.0 h1:2nWYEjpUKu6IJ6kOh2WDlDUqRQ/dUGw6m
 github.com/gethinode/mod-fontawesome v1.2.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.2.1 h1:k7z5ZRsNxCohZjlZm8jVAzmTPk17c6xMYBAjAXHs13I=
 github.com/gethinode/mod-fontawesome v1.2.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.2.2 h1:rA9EtuE/LeFQmKSA7ampfUknxsR1mu7hpi4wpA89gX8=
+github.com/gethinode/mod-fontawesome v1.2.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.2.3 h1:RHWd+E72+m29xaC45m/3CF35C201jehw0dcozVBdPrI=
+github.com/gethinode/mod-fontawesome v1.2.3/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=

layouts/404.html

@@ -2,7 +2,7 @@
     <div class="container-xxl flex-fill d-flex align-content-center flex-wrap">
         <div class="w-100 text-center">
             <span class="text-secondary fw-bold">
-                <i class="fa-regular fa-face-frown fa-10x"></i>
+                {{ partial "assets/icon.html" (dict "icon" "fa face-frown fa-10x") }}
                 <p class="display-1 mt-3 fw-bold">404</p>
                 <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
             </span>

layouts/_default/_markup/render-heading.html

@@ -1,5 +1,5 @@
 {{ if site.Params.navigation.anchor }}
-<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}"><i class="fa-solid fa-link anchor"></i></a></h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">{{- partial "assets/icon.html" (dict "icon" "fas link anchor") }}</a></h{{ .Level }}>
 {{ else }}
 <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
 {{ end }}

layouts/_default/single.html

@@ -67,7 +67,8 @@
                 {{ with .NextInSection -}}
                     {{ $next := . -}}
                     {{ with .OutputFormats.Get "html" -}}
-                        <a class="next" href="{{ $next.RelPermalink }}"><i class="fas fa-arrow-left"></i> {{ $next.Title }}</a>
+                        <a class="next" href="{{ $next.RelPermalink }}">
+                            {{- partial "assets/icon.html" (dict "icon" "fas arrow-left") }}&nbsp;{{ $next.Title }}</a>
                     {{- end -}}
                 {{ end -}}
             </div>
@@ -75,7 +76,7 @@
                 {{ with .PrevInSection -}}
                     {{ $prev := . -}}
                     {{ with .OutputFormats.Get "html" -}}
-                        <a class="previous" href="{{ $prev.RelPermalink }}">{{ $prev.Title }} <i class="fas fa-arrow-right"></i></a>
+                        <a class="previous" href="{{ $prev.RelPermalink }}">{{ $prev.Title }}&nbsp;{{- partial "assets/icon.html" (dict "icon" "fas arrow-right") }}</a>
                     {{- end -}}
                 {{ end -}}
             </div>

layouts/partials/assets/button.html

@@ -26,6 +26,7 @@
                     "main.externalLinks.cue" in the site's parameters.
     "tab"           Optional flag to indicate if an external link should open in a new tab, defaults to setting
                     "main.externalLinks.tab" in the site's parameters.
+    "attributes"    Optional dictionary of key-value pairs added as custom attributes to the button element ('<a>').
 -->
 
 {{- $title := trim .title " \r\n" -}}
@@ -136,6 +137,8 @@
     {{- end -}}
 {{- end -}}
 
+{{- $attributes := .attributes -}}
+
 <a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
     {{ with $id }}id="{{ . }}"{{ end }}
     {{ with $target }}target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}
@@ -148,6 +151,9 @@
     {{ 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 }}
+    {{ range $key, $val := $attributes }}
+        {{ print $key | safeHTMLAttr }}="{{ $val }}"
+    {{ end }}
     >
 
     <div class="d-flex justify-content-{{ $justify }}">

layouts/partials/assets/navbar-item.html

@@ -52,8 +52,13 @@
     {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ 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 -}}
+    {{- with $menu.Pre }}
+        {{ if hasPrefix . "<i" }}
+            {{ . | safeHTML }}
+        {{ else }}
+            {{ partial "assets/icon.html" (dict "icon" . )}}
+        {{ end }}
+    {{ end -}}
     <span {{ if $isActive }} class="active"{{ end }}>{{ if not $isIcon }}{{ $menu.Name }}{{ end }}</span>
     {{- with $menu.Post }}{{ . }}{{ end -}}
     {{- if not $isIcon }} {{ $suffix }}{{ end -}}

layouts/partials/assets/navbar.html

@@ -22,25 +22,25 @@
 
     <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
         <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme{{ if $collapsed }}-collapsed{{ end }}">
-            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }} {{ if $collapsed }} {{ T "colorMode" }} {{ end }}
+            <span class="theme-icon-active">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }} {{ if $collapsed }} {{ T "colorMode" }} {{ end }}</span>
             <span class="d-md-none"></span>
         </a>
         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme{{ if $collapsed }}-collapsed{{ end }}">
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
-                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>&nbsp;
                     {{ T "colorLight" }}
                 </a>
             </li>
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
-                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw") }}</span>&nbsp;
                     {{ T "colorDark" }}
                 </a>
             </li>
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
-                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke fa-fw" ) }}</span>&nbsp;
                     {{ T "colorAuto" }}
                 </a>
             </li>
@@ -73,7 +73,7 @@
                         <a class="pe-5 dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}{{ if $active }} active{{ end }}{{ if $disabled }} disabled{{ end }}" href="{{ $url }}">{{ $item.label }}
                             {{ if $item.latest }} ({{ T "latest" }}){{ end }}
                             {{ if $active }}
-                                <span class="position-absolute end-0 me-3">{{- partial "assets/icon.html" (dict "icon" "fas check") }}</span>
+                                <span class="position-absolute end-0 me-3">{{- partial "assets/icon.html" (dict "icon" "fas check fa-fw") }}</span>
                             {{ end }}
                         </a>
                     </li>
@@ -193,12 +193,12 @@
             <div class="d-flex">
                 {{- if $page.Scratch.Get "sidebar" -}}
                     <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
                     </button>
                 {{- else -}}
                     <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
                     <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
-                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
                     </button>
                 {{- end -}}
             </div>
@@ -254,10 +254,10 @@
                         {{- $currentLang := $page.Language.Lang -}}
                         <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw") }} {{ T "languageSwitcherLabel" }}
                             </a>
                             <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw") }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end ">
                                 {{- if $page.IsTranslated -}}

layouts/partials/assets/pagination.html

@@ -41,22 +41,22 @@
     {{- with .First }}
       {{- if ne $currentPageNumber .PageNumber }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-left") }}</span></a>
       </li>
       {{- else }}
       <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-left") }}</span></a>
       </li>
       {{- end }}
     {{- end }}
 
     {{- with .Prev }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-left"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-left") }}</span></a>
       </li>
     {{- else }}
       <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true"><i class="fas fa-angle-left"></i></span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-left") }}</span></a>
       </li>
     {{- end }}
 
@@ -81,22 +81,22 @@
 
     {{- with .Next }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-right"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right") }}</span></a>
       </li>
     {{- else }}
       <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationNext" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true"><i class="fas fa-angle-right"></i></span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationNext" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right") }}</span></a>
       </li>
     {{- end }}
 
     {{- with .Last }}
       {{- if ne $currentPageNumber .PageNumber }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-double-right"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right") }}</span></a>
       </li>
       {{- else }}
       <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationLast" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true"><i class="fas fa-angle-double-right"></i></span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationLast" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right") }}</span></a>
       </li>
       {{- end }}
     {{- end }}
@@ -112,14 +112,14 @@
     {{- with .First }}
       {{- if ne $currentPageNumber .PageNumber }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-left") }}</span></a>
       </li>
       {{- end }}
     {{- end }}
 
     {{- with .Prev }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-left"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-left") }}</span></a>
       </li>
     {{- end }}
 
@@ -144,14 +144,14 @@
 
     {{- with .Next }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-right"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right") }}</span></a>
       </li>
     {{- end }}
 
     {{- with .Last }}
       {{- if ne $currentPageNumber .PageNumber }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-double-right"></i></span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right") }}</span></a>
       </li>
       {{- end }}
     {{- end }}

layouts/partials/assets/sharing.html

@@ -23,6 +23,10 @@
                 {{- end -}}
                 {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" (printf "%s fa-fw" $item.icon) "class" "btn-social p-0" )}}
             {{- end -}}
+            {{ if .Site.Params.sharing.webshare }}
+                {{ $attr := dict "data-sharing-title" .Title "data-sharing-description" .Description "data-sharing-url" .Permalink }}
+                {{ partial "assets/button.html" (dict "href" "#!" "icon" "fas share-nodes fa-fw" "id" "btn-webshare" "class" "btn-social p-0" "attributes" $attr )}}
+            {{- end -}}
         </div>
     {{- end -}}
 {{- end -}}

layouts/partials/footer/social.html

@@ -9,7 +9,11 @@
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}
                 <a href="{{ .URL }}" {{ if $tab }} target="_blank" rel="noopener noreferrer"{{ end }} aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
-                    {{ .Pre | safeHTML }}
+                    {{ if hasPrefix .Pre "<i" }}
+                        {{ .Pre | safeHTML }}
+                    {{ else }}
+                        {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2x" .Pre) )}}
+                    {{ end }}
                 </a>
             {{ end -}}
         </div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.16.8",
+  "version": "0.17.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.16.8",
+      "version": "0.17.1",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",
@@ -19,7 +19,7 @@
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-n": "^16.0.0",
         "eslint-plugin-promise": "^6.1.1",
-        "hugo-bin": "^0.111.0",
+        "hugo-bin": "^0.112.0",
         "markdownlint-cli2": "^0.8.1",
         "postcss-cli": "^10.1.0",
         "purgecss-whitelister": "^2.4.0",
@@ -241,18 +241,18 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.2.tgz",
+      "integrity": "sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
-      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
+      "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -273,9 +273,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.44.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
-      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
+      "version": "8.46.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
+      "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -678,9 +678,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
-      "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -1970,27 +1970,27 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.45.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz",
-      "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==",
+      "version": "8.46.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz",
+      "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.1.0",
-        "@eslint/js": "8.44.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.1",
+        "@eslint/js": "^8.46.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
+        "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
-        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.6.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.2",
+        "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -2217,9 +2217,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -2233,9 +2233,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
+      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2245,9 +2245,9 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.0.tgz",
-      "integrity": "sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.9.0",
@@ -3281,9 +3281,9 @@
       }
     },
     "node_modules/hugo-bin": {
-      "version": "0.111.4",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.111.4.tgz",
-      "integrity": "sha512-4JzcarbSM3hsyWnmevnoamd7O4oMU07f5WNUgnqYJQs7CwvCcSOwqvTNQiZzW9vqiBqZyStD8Oim9LdtPsBG7Q==",
+      "version": "0.112.1",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.112.1.tgz",
+      "integrity": "sha512-Iguqted2G4zE5ZCH3onkhp9jPxZqxjbnQXxoYgo4RdVQhvRD16E3AzzUfbEiQM9yDM+fKhHCr2ajl9t8JTw/pA==",
       "dev": true,
       "funding": [
         {
@@ -7470,15 +7470,15 @@
       }
     },
     "@eslint-community/regexpp": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.2.tgz",
+      "integrity": "sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==",
       "dev": true
     },
     "@eslint/eslintrc": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
-      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
+      "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
@@ -7493,9 +7493,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.44.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
-      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
+      "version": "8.46.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
+      "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
       "dev": true
     },
     "@fortawesome/fontawesome-free": {
@@ -7796,9 +7796,9 @@
       }
     },
     "acorn": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz",
-      "integrity": "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true
     },
     "acorn-jsx": {
@@ -8684,27 +8684,27 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.45.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz",
-      "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==",
+      "version": "8.46.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz",
+      "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.1.0",
-        "@eslint/js": "8.44.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.1",
+        "@eslint/js": "^8.46.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
+        "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
-        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.6.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.2",
+        "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -8863,9 +8863,9 @@
       "requires": {}
     },
     "eslint-scope": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
@@ -8873,15 +8873,15 @@
       }
     },
     "eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
+      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
       "dev": true
     },
     "espree": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.0.tgz",
-      "integrity": "sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "requires": {
         "acorn": "^8.9.0",
@@ -9636,9 +9636,9 @@
       }
     },
     "hugo-bin": {
-      "version": "0.111.4",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.111.4.tgz",
-      "integrity": "sha512-4JzcarbSM3hsyWnmevnoamd7O4oMU07f5WNUgnqYJQs7CwvCcSOwqvTNQiZzW9vqiBqZyStD8Oim9LdtPsBG7Q==",
+      "version": "0.112.1",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.112.1.tgz",
+      "integrity": "sha512-Iguqted2G4zE5ZCH3onkhp9jPxZqxjbnQXxoYgo4RdVQhvRD16E3AzzUfbEiQM9yDM+fKhHCr2ajl9t8JTw/pA==",
       "dev": true,
       "requires": {
         "@xhmikosr/bin-wrapper": "^11.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.16.8",
+  "version": "0.17.1",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -67,7 +67,7 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.111.0",
+    "hugo-bin": "^0.112.0",
     "markdownlint-cli2": "^0.8.1",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",