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

package/README.md

@@ -1,8 +1,12 @@
 # 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
 

package/assets/css/_article.scss

@@ -33,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 {
@@ -53,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
@@ -77,8 +77,8 @@ a.header-link {
 
 a.header-link::after {
   content: "#";
-  min-width: 20px;
   display: inline-block;
+  min-width: 20px;
 }
 
 #main {
@@ -86,10 +86,10 @@ a.header-link::after {
 }
 
 .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 {

package/assets/css/_autocomplete.scss

@@ -1,17 +1,17 @@
 /*! purgecss start ignore */
 .autocomplete-suggestions {
-  cursor: default;
+  background-color: #fff;
   border: 1px solid #cbcdd6;
   border-top: 0;
-  background-color: #fff;
   box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
-  position: absolute;
+  box-sizing: border-box;
+  cursor: default;
   display: none;
-  z-index: 33333; // higher than navbar
   max-height: 254px;
   overflow: hidden;
   overflow-y: auto;
-  box-sizing: border-box;
+  position: absolute;
+  z-index: 33333; // higher than navbar
 }
 
 [data-bs-theme="dark"] {
@@ -26,19 +26,19 @@
 }
 
 .autocomplete-suggestion {
-  position: relative;
+  color: #353a40;
   cursor: pointer;
-  padding: 7px;
   line-height: 23px;
-  white-space: nowrap;
   overflow: hidden;
+  padding: 7px;
+  position: relative;
   text-overflow: ellipsis;
-  color: #353a40;
+  white-space: nowrap;
 }
 
 .autocomplete-suggestion b {
-  font-weight: 400;
   color: #1f8dd6;
+  font-weight: 400;
 }
 
 .autocomplete-suggestion.selected {
@@ -52,8 +52,8 @@
 }
 
 .autocomplete-suggestion > .context {
-  font-size: 12px;
   color: #7d808d;
+  font-size: 12px;
 }
 
 .autocomplete-suggestion.selected > .context {

package/assets/css/_cards.scss

@@ -18,8 +18,8 @@
 }
 
 .card-post .card-header {
-  min-height: 89px;
-  background-size: cover;
-  background-position: center;
   aspect-ratio: 4 / 1;
+  background-position: center;
+  background-size: cover;
+  min-height: 89px;
 }

package/assets/css/_javascript-disabled.scss

@@ -1,7 +1,7 @@
 .no-js input,
 .no-js a[data-toggle] {
-  pointer-events: none !important;
   opacity: 0.65;
+  pointer-events: none !important;
 }
 
 .no-js nav.navbar {
@@ -9,12 +9,12 @@
 }
 
 .no-js body::before {
-  height: 32px;
   background-color: #e0e1e9;
-  text-align: center;
   content: "⚠️ JavaScript is disabled. This site requires JavaScript to be enabled ⚠️";
   display: block;
+  height: 32px;
   position: fixed;
+  text-align: center;
   top: 0;
   width: 100%;
   z-index: 1;

package/assets/css/_list-js.scss

@@ -1,13 +1,13 @@
 .list:empty::before {
+  background-color: rgba(133, 133, 133, 0.1);
+  border-radius: 0.5rem;
+  content: "Nothing found, try searching again.";
   display: block;
-  width: 100%;
-  padding: 100px 2rem;
-  margin-right: 15px;
   margin-left: 15px;
+  margin-right: 15px;
+  padding: 100px 2rem;
   text-align: center;
-  content: "Nothing found, try searching again.";
-  background-color: rgba(133, 133, 133, 0.1);
-  border-radius: 0.5rem;
+  width: 100%;
 }
 
 [data-bs-theme="dark"] {

package/assets/css/_menu-right.scss

@@ -12,15 +12,15 @@
 
 // right menu
 #TableOfContents li a {
-  padding-top: 0.3rem;
-  padding-bottom: 0.3rem;
-  font-size: 13px;
   border-left: 1px solid transparent;
+  font-size: 13px;
+  padding-bottom: 0.3rem;
+  padding-top: 0.3rem;
 }
 
 .menu-right a {
-  font-size: 13px;
   color: #171c1e;
+  font-size: 13px;
 }
 
 [data-bs-theme="dark"] {
@@ -50,6 +50,6 @@ hr {
 
 // scrollspy color
 .menu-right #TableOfContents li .active {
-  color: #000 !important;
   border-left: 1px solid #0d6aa8 !important;
+  color: #000 !important;
 }

package/assets/css/_mobile.scss

@@ -29,8 +29,8 @@
 /* SM */
 @media (max-width: 767px) {
   #sidebar.show {
-    width: calc(100% - 68px) !important;
     min-width: calc(100% - 68px) !important;
+    width: calc(100% - 68px) !important;
   }
 
   #sidebar.show + div {
@@ -46,7 +46,7 @@
 /* SM Only */
 @media (min-width: 575px) and (max-width: 767px) {
   #sidebar-menu .list-unstyled li {
-    width: 50%;
     display: inline-block;
+    width: 50%;
   }
 }

package/assets/css/_navbar-search.scss

@@ -1,6 +1,6 @@
 .search-container {
-  width: 40px;
   left: -12px;
+  width: 40px;
 }
 
 .form-control-search {
@@ -10,27 +10,27 @@
   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;
-  transition: all 0.2s;
-  left: auto;
-  top: 10px;
-  right: 5px;
 }
 
 .form-control-search:focus {
-  width: 363px !important;
   max-width: calc(100vw - 200px);
-  text-indent: 18px;
   padding: 0 4px 4px 16px;
+  text-indent: 18px;
   visibility: visible;
+  width: 363px !important;
 }
 
 .form-control-search:focus + .btn-search {
-  transition: all 1s;
   background-color: transparent;
   pointer-events: none !important;
+  transition: all 1s;
 }
 
 .form-control-search:focus + .btn-search img {

package/assets/css/_news.scss

@@ -1,6 +1,6 @@
 body[data-url^="/news/"] header {
   aspect-ratio: 4 / 1;
-  background-size: cover;
   background-position: center;
+  background-size: cover;
   min-height: 200px;
 }

package/assets/css/_onetrust-cookie-banner.scss

@@ -16,25 +16,25 @@
 #onetrust-accept-btn-handler {
   background-color: #0063a3 !important;
   border-color: #0063a3 !important;
-  padding: 0.1875rem 1rem !important;
   font-size: 0.8rem !important;
   font-weight: 600 !important;
-  user-select: none !important;
   line-height: 1.75 !important;
+  padding: 0.1875rem 1rem !important;
   text-transform: lowercase !important;
+  user-select: none !important;
 }
 
 /** 'Cookie Settings' button **/
 #onetrust-pc-btn-handler {
-  color: #0063a3 !important;
   border: 1px solid #0063a3 !important;
+  color: #0063a3 !important;
   font-size: 0.8rem !important;
   font-weight: 600 !important;
-  padding: 0.1875rem 1rem !important;
-  user-select: none !important;
   line-height: 1.75 !important;
+  padding: 0.1875rem 1rem !important;
   text-decoration: none !important;
   text-transform: lowercase !important;
+  user-select: none !important;
 }
 
 /** capitalize first letter of button **/
@@ -57,9 +57,9 @@
 
 /* stylelint-disable-next-line */
 #onetrust-banner-sdk.otFlat {
-  max-width: 998px;
   margin-left: auto !important;
   margin-right: auto !important;
+  max-width: 998px;
   overflow-y: hidden !important;
 }
 
@@ -87,8 +87,8 @@
 }
 
 .ot-table-header {
-  position: static !important;
   border-bottom-width: 2px !important;
+  position: static !important;
 }
 
 #ot-sdk-cookie-policy-v2 table,
@@ -140,17 +140,17 @@
 
 .ot-acc-txt,
 .ot-acc-txt p {
-  color: #252a2e !important;
   background-color: #f1f1f6 !important;
+  color: #252a2e !important;
 }
 
 #ot-sdk-btn {
   border-color: #0063a3 !important;
   font-size: 14px !important;
+  line-height: 1.75 !important;
   padding: 0.1875rem 1rem !important;
   text-transform: lowercase;
   user-select: none !important;
-  line-height: 1.75 !important;
 }
 
 #ot-sdk-btn::first-letter {

package/assets/css/_posts.scss

@@ -1,11 +1,11 @@
 // blog posts
 header.header-blog {
-  background-size: cover;
-  min-height: 90px;
   aspect-ratio: 21/9;
   background-position: center;
+  background-size: cover;
   border-radius: 8px;
   max-height: 600px;
+  min-height: 90px;
 }
 
 .share svg {

package/assets/css/_scroll-to-top-btn.scss

@@ -1,14 +1,14 @@
 .btn-to-top {
-  font-size: 18px;
-  line-height: 48px !important;
   background-color: #353a40 !important;
-  width: 48px;
   bottom: 20px;
-  right: 20px;
-  z-index: 6000;
+  font-size: 18px;
+  line-height: 48px !important;
   opacity: 0;
+  right: 20px;
   transform: translateY(100px);
   transition: all 1s ease;
+  width: 48px;
+  z-index: 6000;
 }
 
 .btn-to-top-show {

package/assets/css/_skippy.scss

@@ -9,7 +9,7 @@
 }
 
 .visually-hidden-focusable:focus {
-  top: 0 !important;
   margin-bottom: 30px;
+  top: 0 !important;
   z-index: 22222;
 }

package/assets/css/_tables.scss

@@ -1,16 +1,16 @@
 main table {
-  width: 100%;
-  margin-bottom: 1rem;
   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 {
-  vertical-align: middle;
-  line-height: 1.25;
   border-bottom-width: 1px;
+  line-height: 1.25;
+  vertical-align: middle;
 }
 
 main table thead tr {
@@ -27,8 +27,8 @@ main table td {
 }
 
 table > :not(caption) > * > * {
-  padding: 0.25rem 1rem;
   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/css/_theme-toggle.scss

@@ -50,8 +50,8 @@
 
   [data-bs-theme="dark"] .sun-and-moon > .sun {
     transform: scale(1.75);
-    transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
     transition-duration: 0.25s;
+    transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
   }
 
   [data-bs-theme="dark"] .sun-and-moon > .sun-beams {
@@ -70,13 +70,13 @@
 
   aspect-ratio: 1;
   cursor: pointer;
-  touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
 }
 
 .theme-toggle > svg {
-  inline-size: 100%;
   block-size: 100%;
+  inline-size: 100%;
   max-height: 18px;
   max-width: 18px;
   stroke-linecap: round;

package/assets/css/_was-this-page-helpful.scss

@@ -3,8 +3,8 @@
 }
 
 .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/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/layouts/_default/single.html

@@ -26,7 +26,7 @@
             </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 -}}">
               </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/modus-solid/thumbs-down.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 }} viewBox="0 0 24 24">
+  <path fill="currentColor" d="M4 15.02H3c-.55 0-1-.45-1-1v-9c0-.55.45-1 1-1h1c.55 0 1 .45 1 1v9c0 .55-.45 1-1 1Zm17.95-2.06c0 1.11-.9 2.01-2.01 2.01h-5.03c-.25 0-.48 0-.69.03h-.05c-.48.06-.82.19-.87.46.3 2.27 1.08 5.3-1.67 6.42-1.56.62-1.95-1.05-1.73-2.24.34-2.17-1.58-3.55-2.77-5.07-.13-.2-.12-.73-.12-.73V6.02c0-1.11.91-2.01 2.02-2.01h8.46c1.11 0 1.58.28 2.33 2.25 0 0 1.91 4.57 2.05 4.89s.09 1.82.09 1.82Z"/>
+</svg>

package/layouts/partials/icons/modus-solid/thumbs-up.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 }} viewBox="0 0 24 24">
+  <path fill="currentColor" d="M4 9H3c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1Zm17.95 2.06c0-1.11-.9-2.01-2.01-2.01h-5.03c-.25 0-.48 0-.69-.03h-.05c-.48-.06-.82-.19-.87-.46.3-2.27 1.08-5.3-1.67-6.42-1.56-.62-1.95 1.05-1.73 2.24.34 2.17-1.58 3.55-2.77 5.07-.13.2-.12.73-.12.73V18c0 1.11.91 2.01 2.02 2.01h8.46c1.11 0 1.58-.28 2.33-2.25 0 0 1.91-4.57 2.05-4.89s.09-1.82.09-1.82Z"/>
+</svg>

package/layouts/partials/meta.html

@@ -35,7 +35,7 @@
 <meta property="og:locale" content="en_US">
 {{ end }}
 
-<!-- no need to define additional Twitter card meta tags as fallback to Open Graph -->
+<!-- no need to define additional X (Twitter) card meta tags as fallback to Open Graph -->
 <!-- https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#twitter-cards-and-open-graph -->
 
 {{- if .Params.private -}}
@@ -49,14 +49,6 @@
 <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">
 <link rel="icon" type="image/svg+xml" href="{{- .Site.BaseURL -}}favicon.svg">
@@ -86,6 +78,14 @@
 <!-- Loads Bootstrap 5 JS from CDN -->
 <script src="{{- .Site.BaseURL -}}js/bootstrap.bundle.min.js"></script>
 
+{{- 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 }}
+
 {{ partial "analytics" . }}
 
 {{ partial "custom-header" . }}

package/layouts/partials/was-this-page-helpful.html

@@ -3,12 +3,14 @@
   <button type="button"
     class="btn btn-light btn-outline-secondary btn-feedback btn-feedback-helpful border rounded p-1 me-2"
     aria-label="Helpful">
-    {{- partial "icons/modus-outlined/thumbs-up.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary") -}}
+    {{- partial "icons/modus-solid/thumbs-up.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary d-none icon-helpful-solid") -}}
+    {{- partial "icons/modus-outlined/thumbs-up.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary icon-helpful-outlined") -}}
   </button>
   <button type="button"
     class="btn btn-light btn-outline-secondary btn-feedback btn-feedback-not-helpful border rounded p-1"
     aria-label="Not Helpful">
-    {{- partial "icons/modus-outlined/thumbs-down.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary") -}}
+    {{- partial "icons/modus-solid/thumbs-down.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary d-none icon-not-helpful-solid") -}}
+    {{- partial "icons/modus-outlined/thumbs-down.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary icon-not-helpful-outlined") -}}
   </button>
 </div>
 
@@ -18,4 +20,4 @@
 
 <div class="small ml-2 d-none feedback-not-helpful">
   <a href="" rel="nofollow" target="_blank">Please, provide feedback about how we can improve the page</a>. Thank you!
-</div>
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trimble-oss/modus-docs-hugo-theme",
-  "version": "1.0.0-alpha10",
+  "version": "1.0.0-alpha11",
   "description": "A Documentation theme for Hugo built by Trimble",
   "homepage": "https://github.com/trimble-oss/modus-docs-hugo-theme",
   "bugs": {
@@ -26,20 +26,21 @@
     "test": "npm run lint-css && npm run lint-html && npm run lint-js"
   },
   "dependencies": {
-    "@trimble-oss/modus-bootstrap": "2.0.0-alpha3",
-    "@trimble-oss/modus-icons": "1.5.1"
+    "@trimble-oss/modus-bootstrap": "2.0.0-alpha9",
+    "@trimble-oss/modus-icons": "1.7.0"
   },
   "devDependencies": {
     "autoprefixer": "10.4.16",
-    "eslint": "8.50.0",
+    "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
     "htmlhint": "1.1.4",
-    "hugo-bin": "0.114.2",
+    "hugo-bin": "0.115.0",
     "postcss": "8.4.31",
     "postcss-cli": "10.1.0",
     "prettier": "3.0.3",
-    "stylelint": "15.10.3",
-    "stylelint-config-standard-scss": "11.0.0"
+    "stylelint": "15.11.0",
+    "stylelint-config-standard-scss": "11.0.0",
+    "stylelint-order": "6.0.3"
   },
   "hugo-bin": {
     "buildTags": "extended"