@trimble-oss/modus-docs-hugo-theme 1.0.0-alpha1 → 1.0.0-alpha11

package/README.md

@@ -1,19 +1,19 @@
 # Modus Docs Hugo Theme (Experimental)
 
+[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/trimble-oss/modus-docs-hugo-theme/main/LICENSE)
+[![GitHub Super-Linter](https://github.com/trimble-oss/modus-docs-hugo-theme/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)
+[![npm Version](https://img.shields.io/npm/v/@trimble-oss/modus-docs-hugo-theme)](https://www.npmjs.com/package/@trimble-oss/modus-docs-hugo-theme)
+
 A documentation theme for Hugo.
 
-Status: Alpha. This theme is currently under development and is not yet ready for production use.
+**Status: Alpha. This theme is currently under development.**
 
 ## Installation
 
 1. Add this repo to your package.json as follows:
 
-```json
-{
-  "dependencies": {
-    "modus-docs-hugo-theme": "git+github.com:trimble-oss/modus-docs-hugo-theme.git"
-  }
-}
+```bash
+npm i @trimble-oss/modus-docs-hugo-theme --save-dev
 ```
 
 2. Add the following mounts to your Hugo config:

package/assets/{styles → css}/_article.scss

@@ -14,6 +14,11 @@ h5:hover .header-link {
   transition: 0.3s all;
 }
 
+.header-link:focus-visible {
+  opacity: 1;
+  pointer-events: visible;
+}
+
 // title of article shouldn't have margin-top
 main article h2.h1:first-of-type {
   margin-top: 0 !important;
@@ -28,17 +33,17 @@ header {
 // external links have an icon
 .menu-right a[href^="http"]::after,
 article a:not(.stretched-link)[href^="https"]::after {
-  content: "";
-  width: 12px;
-  height: 12px;
-  margin-left: 4px;
-  margin-bottom: -1px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.78 19.78H4.22V4.22h6.67c.61 0 1.11-.5 1.11-1.11C12 2.5 11.5 2 10.89 2H3c-.55 0-1 .45-1 1v18c0 .55.45 1 1 1h18c.55 0 1-.45 1-1v-7.89c0-.61-.5-1.11-1.11-1.11-.61 0-1.11.5-1.11 1.11v6.67ZM14.22 3.11c0 .61.5 1.11 1.11 1.11h2.88L8.07 14.36c-.43.43-.43 1.13 0 1.57.43.43 1.13.43 1.57 0L19.78 5.79v2.88c0 .61.5 1.11 1.11 1.11.61 0 1.11-.5 1.11-1.11V3c0-.55-.45-1-1-1h-5.67c-.61 0-1.11.5-1.11 1.11Z'/%3E%3C/svg%3E");
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: contain;
+  content: "";
   display: inline-block;
+  height: 12px;
+  margin-bottom: -1px;
+  margin-left: 4px;
   opacity: 0.7;
+  width: 12px;
 }
 
 main .sticky-offset {
@@ -48,20 +53,20 @@ main .sticky-offset {
 // offsets the anchors to adjust for the fixed navbar
 article h2:target::before,
 article h3:target::before {
-  display: block;
   content: " ";
+  display: block;
   height: 80px;
   margin-top: -80px;
   visibility: hidden;
 }
 
 #main::before {
-  display: block;
   content: " ";
+  display: block;
   height: 80px;
   margin-top: -80px;
-  visibility: hidden;
   top: 80px;
+  visibility: hidden;
 }
 
 // anchors # for deep links within docs
@@ -72,15 +77,19 @@ a.header-link {
 
 a.header-link::after {
   content: "#";
-  min-width: 20px;
   display: inline-block;
+  min-width: 20px;
+}
+
+#main {
+  max-width: 1090px;
 }
 
 .docs-callout {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
   border-left-width: 0.25rem !important;
   border-radius: 0.25rem;
+  margin-bottom: 1.25rem;
+  margin-top: 1.25rem;
 }
 
 .docs-callout-danger {
@@ -108,3 +117,7 @@ article .nav-tabs .nav-link::after {
   background-image: none !important;
   width: 0 !important;
 }
+
+article table {
+  width: 100%;
+}

package/assets/css/_navbar-search.scss

@@ -0,0 +1,54 @@
+.search-container {
+  left: -12px;
+  width: 40px;
+}
+
+.form-control-search {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.38 14.92-.66.05-.41-.41c2.44-2.81 2.28-7.1-.5-9.7S7.8 2.4 5.17 4.94a6.988 6.988 0 0 0-.08 9.98c2.61 2.61 6.77 2.72 9.52.34l.41.41-.05.65 3.89 3.89a.996.996 0 1 0 1.41-1.41l-3.88-3.88Zm-2.81-1.41a5.016 5.016 0 0 1-7.08 0c-1.95-1.95-1.95-5.13 0-7.08s5.13-1.95 7.08 0 1.95 5.13 0 7.08Z'/%3E%3C/svg%3E");
+  background-position: 5px center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  border-left: 0;
+  border-right: 0;
+  left: auto;
+  padding: 0;
+  right: 5px;
+  top: 10px;
+  transition: all 0.2s;
+  width: 0 !important;
+  z-index: 1210;
+}
+
+.form-control-search:focus {
+  max-width: calc(100vw - 200px);
+  padding: 0 4px 4px 16px;
+  text-indent: 18px;
+  visibility: visible;
+  width: 363px !important;
+}
+
+.form-control-search:focus + .btn-search {
+  background-color: transparent;
+  pointer-events: none !important;
+  transition: all 1s;
+}
+
+.form-control-search:focus + .btn-search img {
+  opacity: 0;
+}
+
+.btn-search {
+  top: 0;
+}
+
+.btn-search i {
+  margin-top: 18px;
+}
+
+[data-bs-theme="dark"] .form-control-search {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='m16.38 14.92-.66.05-.41-.41c2.44-2.81 2.28-7.1-.5-9.7S7.8 2.4 5.17 4.94a6.988 6.988 0 0 0-.08 9.98c2.61 2.61 6.77 2.72 9.52.34l.41.41-.05.65 3.89 3.89a.996.996 0 1 0 1.41-1.41l-3.88-3.88Zm-2.81-1.41a5.016 5.016 0 0 1-7.08 0c-1.95-1.95-1.95-5.13 0-7.08s5.13-1.95 7.08 0 1.95 5.13 0 7.08Z'/%3E%3C/svg%3E") !important;
+}
+
+[data-bs-theme="dark"] .btn-search img {
+  filter: invert(1);
+}

package/assets/{styles → css}/_navbar.scss

@@ -3,3 +3,7 @@ html[data-bs-theme="dark"] {
     filter: invert(1);
   }
 }
+
+.navbar-site-title {
+  margin-top: 12px;
+}

package/assets/{styles → css}/_skippy.scss

@@ -8,8 +8,8 @@
   outline: 1px dotted;
 }
 
-.sr-only-focusable:focus {
-  top: 0 !important;
+.visually-hidden-focusable:focus {
   margin-bottom: 30px;
+  top: 0 !important;
   z-index: 22222;
 }

package/assets/css/_tables.scss

@@ -0,0 +1,34 @@
+main table {
+  border: 1px solid rgba(133, 133, 133, 0.1);
+  margin-bottom: 1rem;
+  vertical-align: top;
+  width: 100%;
+
+  // border-color: var(--bs-table-border-color);
+}
+
+main table thead th {
+  border-bottom-width: 1px;
+  line-height: 1.25;
+  vertical-align: middle;
+}
+
+main table thead tr {
+  background-color: rgba(133, 133, 133, 0.1);
+}
+
+main table td {
+  font-size: 0.875rem;
+  vertical-align: middle;
+}
+
+.table-bordered > :not(caption) > * > * {
+  border-width: 0 var(--bs-border-width);
+}
+
+table > :not(caption) > * > * {
+  background-color: var(--bs-table-bg);
+  border-bottom-width: var(--bs-border-width);
+  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+  padding: 0.25rem 1rem;
+}

package/assets/{styles → css}/_was-this-page-helpful.scss

@@ -1,10 +1,10 @@
 .feedback {
-  border-color: #90939f !important;
+  border-color: #90939f;
 }
 
 .btn-feedback {
-  opacity: 0.7;
   min-width: 32px;
+  opacity: 0.7;
 }
 
 .btn-feedback svg {
@@ -16,8 +16,8 @@
 }
 
 .btn-feedback[disabled] {
-  opacity: 0.4;
   cursor: default;
+  opacity: 0.4;
   pointer-events: none;
 }
 

package/assets/js/theme-toggle.js

@@ -1,3 +1,4 @@
+// script adapted from Adam Argyle's tutorial: https://web.dev/building-a-theme-switch-component/
 (() => {
   'use strict';
 

package/assets/js/was-this-page-helpful.js

@@ -1,15 +1,22 @@
 $(function () {
-  $('.feedback').fadeIn('slow').addClass('d-block').removeClass('d-none');
+  $('.feedback').fadeIn('slow').addClass('d-block');
   $('.btn-feedback').click(function () {
     $('.btn-feedback').addClass('img-grayscale').attr('disabled', 'disabled');
     $('.feedback-thanks').fadeIn('slow').addClass('d-block');
   });
+
   $('.btn-feedback-helpful').click(function () {
     $('.feedback-helpful').fadeIn('slow').addClass('d-block');
-    $('.feedback-helpful').removeClass('d-none');
+    $('.icon-helpful-solid').addClass('d-block');
+    $('.icon-helpful-solid').removeClass('d-none');
+    $('.icon-helpful-outlined').removeClass('d-block');
+    $('.icon-helpful-outlined').addClass('d-none');
   });
   $('.btn-feedback-not-helpful').click(function () {
     $('.feedback-not-helpful').fadeIn('slow').addClass('d-block');
-    $('.feedback-not-helpful').removeClass('d-none');
+    $('.icon-not-helpful-solid').addClass('d-block');
+    $('.icon-not-helpful-solid').removeClass('d-none');
+    $('.icon-not-helpful-solid').removeClass('d-none');
+    $('.icon-not-helpful-outlined').addClass('d-none');
   });
 });

package/data/navbar_apps.yml

@@ -1,15 +1,19 @@
+- title: Modus Style Guide
+  icon: "/img/icons/trimble.svg"
+  url: "https://modus.trimble.com/"
+
 - title: Modus Web Components
-  icon: ""
+  icon: "/img/icons/web-components.svg"
   url: "https://modus-web-components.trimble.com/"
 
 - title: Modus Icons
-  icon: ""
+  icon: "/img/icons/check-circle-outlined.svg"
   url: "https://modus-icons.trimble.com"
 
 - title: Modus Bootstrap
-  icon: ""
+  icon: "/img/icons/code.svg"
   url: "https://modus-bootstrap.trimble.com/"
 
 - title: Modus on GitHub
-  icon: ""
+  icon: "/img/icons/github.svg"
   url: "https://github.com/trimble-oss/?q=modus&type=all&language=&sort=stargazers"

package/layouts/_default/_markup/render-link.html

@@ -1,4 +1,4 @@
-<a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
-  {{- end -}}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener" {{ end }}>
+<a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{- . -}}"
+  {{- end -}}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener" {{- end -}}>
   {{- .Text | safeHTML -}}
-</a>
+</a>

package/layouts/_default/baseof.html

@@ -1,5 +1,6 @@
 <!doctype html>
-<html lang="en-US" class="h-100 no-js {{ with .Page.Params.html_class }}{{ . -}}{{- end -}}">
+<html lang="{{ with .Site.LanguageCode }}{{- . -}}{{ else }}en-US{{- end -}}"
+  class="h-100 no-js {{ with .Page.Params.html_class }}{{ . -}}{{- end -}}">
 
 <head>
   {{ partial "meta" . }}
@@ -7,6 +8,7 @@
 
 <body data-url="{{ .RelPermalink }}" class="overflow-x-hidden {{ with .Page.Params.body_class -}}{{ . -}}{{- end -}}"
   {{ if not .Params.disableScrollSpy }}{{- end -}}>
+  {{ partial "skippy" . }}
   {{ if not .Params.NavbarFalse }}{{ partial "navbar" . }}{{ end }}
   {{ block "body" . }}{{ block "main" . }}
   {{- end -}}
@@ -36,6 +38,8 @@
     const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
     const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
   </script>
+
+  {{- if not .IsHome -}}
   <script>
     // Disable all links with #
     var links = document.querySelectorAll('a[href="#"]');
@@ -47,7 +51,6 @@
       });
     });
   </script>
-  {{- if not .IsHome -}}
   <script>
     // Change Submit buttons within docs examples to type=button
     var article = document.querySelector('article');
@@ -62,4 +65,4 @@
   {{- end -}}
 </body>
 
-</html>
+</html>

package/layouts/_default/redirect.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="{{ with .Site.LanguageCode }}{{- . -}}{{ else }}en-US{{- end -}}">
 
 <head>
   <meta charset="utf-8">

package/layouts/_default/single.html

@@ -17,7 +17,7 @@
 
       {{ partial "header" . }}
 
-      <main class="container mx-auto mt-5" style="max-width: 1090px;">
+      <main class="container mx-auto mt-5" id="main">
         <div class="row">
           <div class="col-12 col-xl-9">
             {{ if .Params.blog }}
@@ -26,9 +26,9 @@
             </h1>
             <div class="d-flex">
               <div class="mx-3">
-                <img src="/img/author/{{ .Params.author | urlize }}.jpg"
+                <img src="/img/author/{{- .Params.author | urlize -}}.jpg"
                   class="bg-light rounded-circle mx-auto text-center border" height="44" width="44"
-                  alt="{{ .Params.author }}">
+                  alt="{{- .Params.author -}}">
               </div>
               <div>
                 <div class="text-body fw-bold">
@@ -110,4 +110,4 @@
 
   </div>
 </div>
-{{ end }}
+{{ end }}

package/layouts/index.json

@@ -6,7 +6,7 @@
 {{- if and $index (gt $index 0) -}},{{- end }}
 {
   "uri": "{{- $page.Permalink -}}",
-  "title": "{{- htmlEscape $page.Title }} {{ if in .Params.tags "in-field" }}(In-Field){{end}}{{ if .Params.componentsWeb }}(Web){{end}}{{ if in .Params.tags "xr" }}(XR){{end}}{{ if in .Params.tags "mobile" }}(Mobile){{end}}",
+  "title": "{{- htmlEscape $page.Title -}}",
   "tags": [{{ range $tindex, $tag := $page.Params.tags }}{{ if $tindex }}, {{ end }}"{{ $tag| htmlEscape }}"{{ end }}],
   "description": "{{- htmlEscape .Description -}}",
   "content": {{- $page.Plain | jsonify -}}

package/layouts/partials/analytics.html

@@ -1,9 +1,12 @@
 {{- if not .Site.IsServer -}}
 
-<!--
-<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>
+{{ template "_internal/google_analytics.html" . }}
+
+{{- with .Site.Params.PlausibleAnalyticsDomain -}}
+<script defer data-domain="{{- . -}}" src="https://plausible.io/js/script.outbound-links.js"></script>
 <script>
   window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }
 </script>
--->
+{{- end -}}
+
 {{- end -}}

package/layouts/partials/blog-brief.html

@@ -2,7 +2,7 @@
 <div class="col-12 col-lg-6 col-xl-4 my-3">
   <div class="card card-blog-brief h-100">
     <div class="card-header top-rounded mb-0 pb-0 border-0"
-      style="background-image: url({{ .Params.Image | relURL }}); background-color: {{ .Params.headerBgColor }}">
+      style="background-image: url({{- .Params.Image | relURL -}}); background-color: {{- .Params.headerBgColor -}}">
     </div>
     <div class="card-body border-0 pb-0">
       <h3 class="card-title text-body px-2 ms-n2 name" {{ if .Params.TitleNoTranslate }}translate="no" {{- end -}}>
@@ -19,12 +19,12 @@
     <div class="card-footer bg-transparent border-0 py-0">
       <div class="d-flex mb-1">
         <div class="me-2">
-          <img src="/img/author/{{ .Params.author | urlize }}.jpg"
+          <img src="/img/author/{{- .Params.author | urlize -}}.jpg"
             class="bg-light rounded-circle mx-auto text-center img-fluid ms-2" height="40" width="40"
-            alt="{{ .Params.author }}">
+            alt="{{- .Params.author -}}">
         </div>
         <div>
-          <p class="text-muted small mb-0">{{ .Params.author }}</p>
+          <p class="text-muted small mb-0">{{- .Params.author -}}</p>
           <p class="text-muted small">{{- .Date.Format "Jan 2, 2006" }}</p>
         </div>
       </div>

package/layouts/partials/blog-share.html

@@ -4,34 +4,34 @@
       <a href="https://twitter.com/intent/tweet?via=TrimbleCorpNews&text={{- .Title -}}&url={{- .Permalink -}}"
         class="opacity-75" title="Share on X" data-bs-toggle="tooltip"
         onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
-        {{ partial "icons/brands/twitter-square.svg" (dict "class" "text-body" "width" "28" "height" "28") }}
-        <span class="sr-only visually-hidden">X</span></a>
+        {{ partial "icons/brands/square-x-twitter.svg" (dict "class" "text-body" "width" "28" "height" "28") }}
+        <span class="visually-hidden">X</span></a>
     </div> -->
     <div class="d-inline-block me-2">
       <a href="https://www.facebook.com/sharer.php?u={{- .Permalink -}}" class="opacity-75" title="Share on Facebook"
         data-bs-toggle="tooltip" data-bs-placement="top"
         onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
         {{- partial "icons/brands/facebook-square.svg" (dict "class" "text-body" "width" "28" "height" "28") -}}
-        <span class="sr-only visually-hidden">Facebook</span></a>
+        <span class="visually-hidden">Facebook</span></a>
     </div>
     <div class="d-inline-block me-2">
       <a href="https://www.linkedin.com/shareArticle?mini=true&url={{- .Permalink -}}&title={{- .Title -}}&summary={{- .Summary -}}"
         class="opacity-75" title="Share on LinkedIn" data-bs-toggle="tooltip" data-bs-placement="top"
         onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
         {{ partial "icons/brands/linkedin.svg" (dict "class" "text-body" "width" "28" "height" "28") }}
-        <span class="sr-only visually-hidden">LinkedIn</span></a>
+        <span class="visually-hidden">LinkedIn</span></a>
     </div>
     <!-- <div class="d-inline-block me-2">
       <a href="mailto:?subject={{- .Title -}}%20-%20Modus%20Style%20Guide&body=Check out this site: {{ .Permalink }}"
         class="opacity-75 bg-light" title="Share via Email" data-bs-toggle="tooltip" data-bs-placement="top"
         onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">
         {{ partial "icons/modus-solid/email.svg" (dict "class" "text-body" "width" "28" "height" "28") }}
-        <span class="sr-only visually-hidden">Email</span></a>
+        <span class="visually-hidden">Email</span></a>
     </div> -->
     <div class="d-inline-block me-2">
       <button class="opacity-75 border-0 bg-transparent btn-share-web-api p-0 d-none" title="Share"
         data-bs-toggle="tooltip" data-bs-placement="top">
-        <span class="sr-only visually-hidden">Share</span></button>
+        <span class="visually-hidden">Share</span></button>
     </div>
   </div>
 </div>

package/layouts/partials/btn-theme-toggle.html

@@ -1,5 +1,6 @@
-<button class="btn btn-lg btn-icon-only theme-toggle pt-0 border-0 mx-1" id="theme-toggle" title="Toggles light & dark"
-  aria-label="auto" aria-live="polite" type="button" data-bs-toggle="tooltip" data-bs-placement="right">
+<button class="btn btn-lg btn-icon-only btn-outline-secondary bg-transparent theme-toggle pt-0 border-0 mx-1"
+  id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite" type="button"
+  data-bs-toggle="tooltip" data-bs-placement="right">
   <svg class="sun-and-moon" aria-hidden="true" width="22" height="22" viewBox="0 0 24 24">
     <mask class="moon" id="moon-mask">
       <rect x="0" y="0" width="100%" height="100%" fill="#fff" />

package/layouts/partials/col-sidebar-menu.html

@@ -12,7 +12,7 @@
   }
 </script>
 
-<!-- https://github.com/twbs/bootstrap/blob/v5.3.0/site/layouts/partials/docs-sidebar.html -->
+<!-- https://github.com/twbs/bootstrap/blob/v5.3.2/site/layouts/partials/docs-sidebar.html -->
 <div class="">
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}

package/layouts/partials/col-sidebar.html

@@ -2,24 +2,27 @@
   class="list-group d-block border-0 text-center sticky-top sticky-offset d-flex flex-column align-items-start justify-content-between"
   style="height: calc(100dvh - 66px)">
 
-  <button class="list-group-item border-0 mt-2" type="button" data-bs-target="#sidebar" data-bs-toggle="collapse"
-    aria-label="Expand Menu">
-    <div class="ms-1 text-body">
-      <svg width="24" height="24" fill="currentColor">
-        <use xlink:href="/modus-icons.svg#user-guide" />
-      </svg>
-    </div>
-  </button>
+  <div class="text-center mx-auto w-100">
+    <button class="btn btn-lg btn-outline-secondary bg-transparent list-group-item border-0 mt-1" type="button"
+      data-bs-target="#sidebar" data-bs-toggle="collapse" aria-label="Expand Menu"
+      style="width:48px; margin-left: 6px;">
+      <div class="text-body text-center">
+        {{ partial "icons/modus-solid/user-guide.svg" (dict "class" "" "width" "24" "height" "24") }}
+      </div>
+    </button>
+  </div>
 
   <div>
     {{- with .Site.Params.GitHubRepo -}}
-    <a href="{{- . -}}" class="btn btn-lg btn-icon-only border-0 mx-1" target="_blank" rel="noopener"
-      data-bs-toggle="tooltip" title="GitHub">
+    <a href="{{- . -}}" class="btn btn-lg btn-outline-secondary text-body bg-transparent btn-icon-only border-0 mx-1"
+      target="_blank" rel="noopener" data-bs-toggle="tooltip" title="GitHub">
       {{ partial "icons/brands/github.svg" (dict "class" "mt-2" "width" "22" "height" "22") }}
     </a>
     {{ end }}
 
+    {{- if not .Site.Params.disableThemeToggle -}}
     {{ partial "btn-theme-toggle" . }}
+    {{ end }}
   </div>
 
 </div>

package/layouts/partials/header.html

@@ -7,8 +7,8 @@
       {{- .Title | title -}}
     </h1>
     <h2 class="ps-2 ps-sm-3 my-4 opacity-75">
-      {{- .Params.description -}}
+      {{- .Params.description | markdownify -}}
     </h2>
     {{ end }}
   </div>
-</header>
+</header>

package/layouts/partials/icons/brands/codepen.svg

@@ -1,2 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 26 26">
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 26 26">
 <path fill="currentColor" d="M13 25.2c-.2 0-.5-.1-.6-.2l-11-7.3-.3-.3v-.1c-.1-.2-.2-.4-.2-.6V9.3c0-.2.1-.4.2-.6l.3-.3 11-7.3c.4-.3.9-.3 1.3 0l11 7.3.3.3c.1.2.2.4.2.6v7.4c0 .2-.1.4-.2.6v.1l-.3.3-11 7.3c-.2.1-.5.2-.7.2zm1.2-8v4.6l7.8-5.2-3.5-2.3-4.3 2.9zm-10.1-.5l7.8 5.2v-4.6l-4.3-2.9-3.5 2.3zM9.6 13l3.4 2.3 3.4-2.3-3.4-2.3L9.6 13zm10.9 0l2.3 1.6v-3.1L20.5 13zM3.1 11.4v3.1L5.5 13l-2.4-1.6zm11.1-2.7l4.3 2.9L22 9.3l-7.8-5.2v4.6zm-10.1.6l3.5 2.3 4.3-2.9V4.1L4.1 9.3z"></path></svg>

package/layouts/partials/icons/brands/facebook-square.svg

@@ -1,2 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512">
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512">
 <path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>

package/layouts/partials/icons/brands/github-alt.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512"><path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512"><path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"/></svg>

package/layouts/partials/icons/brands/github.svg

@@ -1,2 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512">
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512">
 <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

package/layouts/partials/icons/brands/linkedin.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>

package/layouts/partials/icons/brands/vimeo-square.svg

@@ -1,2 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512">
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} viewBox="0 0 448 512">
 <path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-16.2 149.6c-1.4 31.1-23.2 73.8-65.3 127.9-43.5 56.5-80.3 84.8-110.4 84.8-18.7 0-34.4-17.2-47.3-51.6-25.2-92.3-35.9-146.4-56.7-146.4-2.4 0-10.8 5-25.1 15.1L64 192c36.9-32.4 72.1-68.4 94.1-70.4 24.9-2.4 40.2 14.6 46 51.1 20.5 129.6 29.6 149.2 66.8 90.5 13.4-21.2 20.6-37.2 21.5-48.3 3.4-32.8-25.6-30.6-45.2-22.2 15.7-51.5 45.8-76.5 90.1-75.1 32.9 1 48.4 22.4 46.5 64z"/></svg>

package/layouts/partials/icons/modus-outlined/accessibility-circle.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} fill="currentColor" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} fill="currentColor" viewBox="0 0 24 24">
   <path d="M12 8.25c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5Zm4.75.75h-9.5c-.41 0-.75.34-.75.75s.34.75.75.75H10V18c0 .41.34.75.75.75s.75-.34.75-.75v-3.75h1V18c0 .41.34.75.75.75s.75-.34.75-.75v-7.5h2.75c.41 0 .75-.34.75-.75S17.16 9 16.75 9ZM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.53 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"/>
 </svg>

package/layouts/partials/icons/modus-outlined/arrow-up.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} fill="currentColor" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} fill="currentColor" viewBox="0 0 24 24">
   <path d="m13.06 3.65 6.79 6.79A1.497 1.497 0 0 1 18.79 13H16v6.5c0 .83-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5V13H5.21c-.61 0-1.15-.36-1.39-.93s-.11-1.2.33-1.63l6.79-6.79c.29-.29.68-.44 1.06-.44s.77.15 1.06.44ZM10 11v8h4v-8h3.59L12 5.41 6.41 11H10Z"/>
 </svg>

package/layouts/partials/icons/modus-outlined/bar-graph-square.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} fill="currentColor" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} fill="currentColor" viewBox="0 0 24 24">
    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 16H5V5h14v14Zm-3-1c.55 0 1-.45 1-1v-6.25c0-.55-.45-1-1-1s-1 .45-1 1V17c0 .55.45 1 1 1Zm-4 0c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1v10c0 .55.45 1 1 1Zm-4 0c.55 0 1-.45 1-1v-3.25c0-.55-.45-1-1-1s-1 .45-1 1V17c0 .55.45 1 1 1Z"/>
 </svg>

package/layouts/partials/icons/modus-outlined/code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" {{ with .width }} width="{{- . -}}"{{ end }}{{ with .height }} height="{{- . -}}"{{ end }}{{ with .class }} class="{{- . -}}"{{ end }} fill="currentColor" viewBox="0 0 24 24">
+  <path d="M17.12 8.12a.996.996 0 0 1 1.41 0l3.18 3.18c.39.39.39 1.02 0 1.41l-3.18 3.18c-.38.38-1.02.38-1.41-.01a.996.996 0 0 1 0-1.41S19.59 12 19.59 12l-2.47-2.47a.996.996 0 0 1 0-1.41Zm-10.24 0a.996.996 0 0 0-1.41 0L2.29 11.3a.996.996 0 0 0 0 1.41s3.18 3.18 3.18 3.18c.38.38 1.02.38 1.41-.01a.996.996 0 0 0 0-1.41S4.41 12 4.41 12l2.47-2.47a.996.996 0 0 0 0-1.41Zm3.07 10.64 5.92-12.69c.23-.5.02-1.1-.48-1.33-.5-.23-1.1-.02-1.33.48L8.14 17.91c-.23.5-.02 1.1.48 1.33.14.06.28.09.42.09.38 0 .74-.21.91-.58Z"/>
+</svg>