@trimble-oss/modus-docs-hugo-theme 1.0.0-alpha5 → 1.0.0-alpha6

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

@@ -28,7 +28,7 @@
               <div class="mx-3">
                 <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/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/meta.html

@@ -19,7 +19,9 @@
 <link rel="stylesheet" href="{{- .Site.BaseURL -}}fonts/modus-icons.css">
 
 <!-- Loads Dark Mode Toggle JS -->
-<script src="{{- .Site.BaseURL -}}js/theme-toggle.js"></script>
+
+{{ $ThemeToggleJS := resources.Get "js/theme-toggle.js" | minify }}
+<script src="{{- .Site.BaseURL -}}{{ $ThemeToggleJS.RelPermalink }}"></script>
 
 <meta name="description"
   content="{{ with .Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{- end -}}{{- end -}}">
@@ -31,10 +33,11 @@
 {{ end }}
 
 <!-- no need to define additional Twitter card meta tags as fallback to Open Graph -->
-<!-- https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#twitter-cards-and-open-graph -->
+<!-- https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#twitter-cards-and-open-graph -->
 
 {{- if .Params.private -}}
 <meta name="robots" content="noindex, nofollow">
+<meta name="referrer" content="none">
 {{ end }}
 
 {{- with .Site.Params.themeColor -}}
@@ -43,11 +46,13 @@
 <meta name="theme-color" content="{{- . | default "#005f9e" -}}">
 {{ end }}
 
+{{- if .IsHome -}}
 {{- with .Site.Params.googleSiteVerification -}}
 <!-- Google Site Verification -->
 <!-- https://support.google.com/webmasters/answer/9008080?hl=en -->
 <meta name="google-site-verification" content="{{- . -}}">
 {{ end }}
+{{ end }}
 
 <!-- Loads the Trimble favicon and the SVG icon -->
 <link rel="alternate icon" type="image/x-icon" href="{{- .Site.BaseURL -}}favicon.ico">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trimble-oss/modus-docs-hugo-theme",
-  "version": "1.0.0-alpha5",
+  "version": "1.0.0-alpha6",
   "description": "A Documentation theme for Hugo built by Trimble",
   "homepage": "https://github.com/trimble-oss/modus-docs-hugo-theme",
   "bugs": {
@@ -18,7 +18,8 @@
     "lint-css": "stylelint \"assets/styles/*.*\" --fix",
     "lint-html": "htmlhint \"build/**/index.html\"",
     "lint-js": "eslint assets/js/*.js --fix",
-    "lint-links": "npx linkinator content/ --recurse --silent --skip \"^(?!http://localhost)\"",
+    "lint-links": "npx linkinator ./",
+    "lint-markdown": "npx markdownlint-cli content/**/*.md",
     "lint-spellcheck": "npx cspell \"content/**/*.md\" --no-progress",
     "prettier": "prettier --write \"**/*.{json,js,md,svg}\"",
     "serve": "hugo serve --port 4000 --disableFastRender --navigateToChanged",

package/static/img/icons/check-circle-outlined.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-outline mi-check-circle-outlined" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 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 8Zm5.04-11.28V8.7c-.4-.39-1.03-.39-1.42 0L10.33 14l-2.6-2.62a.996.996 0 0 0-1.41 0 .984.984 0 0 0-.01 1.4l.01.01 3.3 3.34a1 1 0 0 0 1.42.01l6-6.01a.996.996 0 0 0 0-1.41Z"/></svg>

package/static/img/icons/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512"><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>

package/static/img/icons/github.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

package/static/img/icons/trimble.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 732 789"><path d="M543.59 674.86a54.34 54.34 0 0154.9-54.9c30.76 0 54.43 23.9 54.43 54.67 0 73.17-109.33 73.15-109.33.23zm99.86 0c0-60.79-90.16-61.1-90.16-.23s90.16 61.53 90.16.23zm-66.26-31.23c22 0 45-3.33 45 18.46 0 9.7-4.73 14.67-11.83 17l13 24.62h-12.57l-12.07-23h-9.46v23h-12.07zm33.13 19.17c0-10-10.71-8.52-21.06-8.52v17.27c10.51 0 21.06 1.68 21.06-8.75zM48.86 602.72v186.13l161.81-93.42a308.1 308.1 0 01-161.81-92.71zM209.49 92.58L48.86 0v185a310.2 310.2 0 01160.63-92.42zM732 394.43L570.25 301a309.33 309.33 0 01-.48 187.08zM155.4 141.39c23.23-5.16 71.39-.27 96.87 7 20.38-16.21 51.17-25.6 81.82-27.15-70.46-12.72-135.64 2.05-178.69 20.15zM463.74 479.92a416.8 416.8 0 00-25.28-103.53c-55.43 25-124 8.88-169.86-30.79-33.41 34.15-65.75 76.68-90.16 114.49 77.71 63.35 205.56 79.99 285.3 19.83zM135.94 466.1C67.43 396 43.55 293.61 65.49 215a276 276 0 0016.16 374.43c11.21-42.43 31.97-85.72 54.29-123.33zM425.64 346.65a372.77 372.77 0 00-55.49-85.1 635.36 635.36 0 00-78.09 61.34c41.29 34.45 95.61 41.21 133.58 23.76zM374.48 218.63c17.78-12.93 42.42-26.76 60.09-33.32-43.84-44.38-114.38-43.2-145-23.94a293.6 293.6 0 0184.91 57.26z"/><path d="M160.91 488.67c-34.09 58.94-46.53 102.19-51.06 125.2a276 276 0 00340.58-6.21c10.24-24.74 15.47-55.53 15.45-89.38-93.99 55.94-223.99 34.43-304.97-29.61zM452.81 327c30.17-31.7 24.12-85.56 1.17-116.62-14.14 4.78-43.57 21.94-56.26 33A413.64 413.64 0 01452.81 327zM505 259.11c4.65 40.7-10.79 75.93-38.17 99.35A448.73 448.73 0 01493 451.19c41.36-53.81 40.1-130.56 12-192.08zM269.45 299a672.54 672.54 0 0177.22-61.49 262 262 0 00-85.35-52C236.05 220 243.94 264.52 269.45 299zM497.94 494.52c1.4 23.09-.72 49.29-3.42 70 47.34-60.32 63.34-135 57.75-193.22-5.67 49.03-23.62 90.05-54.33 123.22zM229.55 175.76c-34.94-8.54-75.63-8.91-109.67.72-54.33 77-29.1 189.94 34.2 260.64C178.13 400.5 213 354.9 246 321.75c-32.23-39.94-45-101.75-16.45-145.99z"/></svg>

package/static/img/icons/web-components.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.731 2.225l-.01.016H5.618L0 11.979l5.618 9.736h12.8l.04.06 2.134-3.735.518-.893h-.008l.008-.014-.626-.75h.895l.006-.01.008.01L24 11.994l-2.607-4.39-.003.005-.011-.02h-.945l.63-.763-2.606-4.57-.006.01-.024-.04H11.73zM9.107 6.824h6.19l-.53.764h-.023l2.398 4.015h.875l-.277.328.357.435h-.956l-2.398 4.015h.027l.523.764H9.074l-2.99-5.168 3.022-5.155z"/></svg>

package/layouts/index.rss.xml

@@ -1,49 +0,0 @@
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-  <channel>
-    <title>{{- .Site.Title -}}</title>
-    <link>{{- .Site.BaseURL -}}</link>
-    <description>Recent content for {{ .Site.Title }}</description>
-    <icon>{{- .Site.BaseURL -}}icon.png</icon>
-    <copyright>Copyright {{ now.Format "2006" }}, {{ .Site.Params.copyrightHolder }}</copyright>
-    {{- with .Site.LanguageCode }}
-      <language>{{.}}</language>
-    {{- end}}
-    {{- with .Site.Params.copyrightHolderEmail }}
-      <managingEditor>{{.}} ({{- $.Site.Params.copyrightHolder -}})</managingEditor>
-    {{- end}}
-    {{- with .Site.Params.copyrightHolderEmail }}
-      <webMaster>{{.}} ({{- $.Site.Params.copyrightHolder -}})</webMaster>
-    {{- end}}
-    {{- with .Site.Params.docsUrlForRssV2}}
-      <docs>{{- . -}}</docs>
-    {{- end }}
-    {{- if not .Date.IsZero }}
-      <lastBuildDate>{{- .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML -}}</lastBuildDate>
-    {{- end }}
-    {{ with .OutputFormats.Get "RSS" }}
-    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
-    {{ end }}
-    {{ range first 7 (where .Site.RegularPages.ByPublishDate.Reverse ".Section" "not in" "addons") }}
-     <item>
-      <title>{{- .Title -}}</title>
-      <link>{{- .Permalink -}}</link>
-      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-      {{ with $.Site.Params.copyrightHolderEmail }}<author>{{.}} ({{ with $.Site.Params.copyrightHolder }}{{.}}){{end}}</author>{{end}}
-      <guid isPermaLink="true">{{ .Permalink }}</guid>
-      {{- range .Params.tags }}
-        <category>{{- . | urlize -}}</category>
-      {{- end }}
-      <description>
-        {{- with .Params.headline }}&lt;h2&gt;{{ . }}&lt;/h2&gt;{{- end }}
-        {{- $img := (.Resources.ByType "image").GetMatch "*featured*" }}
-        {{- with $img }}
-        {{- $img := .Resize "640x" }}
-        {{- printf "<![CDATA[<img src=\"%s\" width=\"%d\" height=\"%d\"/>]]>" $img.Permalink $img.Width $img.Height | safeHTML }}
-        {{- end }}
-        {{ .Content | html }}
-      </description>
-      <source url="{{- .Site.BaseURL -}}index.xml">{{- .Site.Title -}}</source>
-    </item>
-    {{ end }}
-  </channel>
-</rss>

package/static/js/theme-toggle.js

@@ -1,41 +0,0 @@
-// script adapted from Adam Argyle's tutorial: https://web.dev/building-a-theme-switch-component/
-
-const storageKey = 'theme-preference';
-
-const onClick = () => {
-  theme.value = theme.value === 'light' ? 'dark' : 'light';
-
-  setPreference();
-};
-
-const getColorPreference = () => {
-  if (localStorage.getItem(storageKey)) return localStorage.getItem(storageKey);
-  else return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-};
-
-const setPreference = () => {
-  localStorage.setItem(storageKey, theme.value);
-  reflectPreference();
-};
-
-const reflectPreference = () => {
-  document.firstElementChild.setAttribute('data-bs-theme', theme.value);
-
-  document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value);
-};
-
-const theme = {
-  value: getColorPreference(),
-};
-
-reflectPreference();
-
-window.onload = () => {
-  reflectPreference();
-  document.querySelector('#theme-toggle').addEventListener('click', onClick);
-};
-
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
-  theme.value = isDark ? 'dark' : 'light';
-  setPreference();
-});