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

package/assets/styles/_posts.scss

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

package/assets/styles/_print.scss

@@ -0,0 +1,5 @@
+@media only print {
+  .badge {
+    border: 0;
+  }
+}

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

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

package/assets/styles/_sidebar.scss

@@ -0,0 +1,65 @@
+.card-blog-brief {
+  transition: none;
+}
+
+#sidebar-menu {
+  max-height: calc(100vh - 66px);
+}
+
+@media (min-width: 768px) {
+  #sidebar-menu {
+    max-width: 250px;
+    min-width: 250px;
+  }
+}
+
+#sidebar a:hover {
+  color: #000 !important;
+}
+
+[data-bs-theme="dark"] {
+  #sidebar a:hover {
+    color: #fff !important;
+  }
+}
+
+#sidebar.collapsing .sticky-offset {
+  top: 0 !important;
+}
+
+#sidebar.collapsing.collapse-horizontal {
+  height: unset !important;
+}
+
+#sidebar.show {
+  min-width: 250px;
+}
+
+#sidebar.show .sticky-offset {
+  top: 65px !important;
+}
+
+.col-main {
+  max-width: calc(100vw - 81px);
+}
+
+.collapse-horizontal.collapse:not(.show) {
+  width: 0;
+}
+
+.row-main {
+  height: calc(100dvh - 66px);
+}
+
+#sidebar.collapsing {
+  transition: none;
+}
+
+#sidebar.collapsing + div,
+#sidebar.show + div {
+  max-width: calc(100vw - 332px);
+}
+
+.col-sidebar .sticky-offset {
+  top: 65px !important;
+}

package/assets/styles/_skippy.scss

@@ -0,0 +1,15 @@
+// Accessibility
+
+.skippy:focus {
+  outline: 0;
+}
+
+.skippy div {
+  outline: 1px dotted;
+}
+
+.sr-only-focusable:focus {
+  top: 0 !important;
+  margin-bottom: 30px;
+  z-index: 22222;
+}

package/assets/styles/_tables.scss

@@ -0,0 +1,5 @@
+main table {
+  width: 100%;
+  margin-bottom: 1rem;
+  vertical-align: top;
+}

package/assets/styles/_theme-dark.scss

@@ -0,0 +1,10 @@
+[data-bs-theme="dark"] {
+  .menu-right a[href^="http"]::after,
+  article a:not(.stretched-link)[href^="http"]::after {
+    filter: invert(1);
+  }
+
+  .card-blog-brief .card-header img {
+    filter: invert(1) brightness(111%);
+  }
+}

package/assets/styles/_theme-light.scss

@@ -0,0 +1,5 @@
+[data-bs-theme="light"] {
+  article a.btn-primary::after {
+    filter: invert(1);
+  }
+}

package/assets/styles/_theme-toggle.scss

@@ -0,0 +1,83 @@
+.sun-and-moon > :is(.moon, .sun, .sun-beams) {
+  transform-origin: center center;
+}
+
+.sun-and-moon > :is(.moon, .sun) {
+  fill: var(--icon-fill);
+}
+
+.sun-and-moon > .sun-beams {
+  stroke: var(--icon-fill);
+  stroke-width: 2px;
+}
+
+[data-bs-theme="dark"] .sun-and-moon > .sun {
+  transform: scale(1.75);
+}
+
+[data-bs-theme="dark"] .sun-and-moon > .sun-beams {
+  opacity: 0;
+}
+
+[data-bs-theme="dark"] .sun-and-moon > .moon > circle {
+  transform: translate(-7px);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sun-and-moon > .sun {
+    transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25);
+  }
+
+  .sun-and-moon > .sun-beams {
+    transition:
+      transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25),
+      opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1);
+  }
+
+  .sun-and-moon .moon > circle {
+    transition: transform 0.25s cubic-bezier(0, 0, 0, 1);
+  }
+
+  @supports (cx: 1) {
+    .sun-and-moon .moon > circle {
+      transition: cx 0.25s cubic-bezier(0, 0, 0, 1);
+    }
+  }
+
+  [data-bs-theme="dark"] .sun-and-moon > :is(.moon, .sun) {
+    fill: rgb(255, 255, 255);
+  }
+
+  [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;
+  }
+
+  [data-bs-theme="dark"] .sun-and-moon > .sun-beams {
+    transform: rotate(-25deg);
+    transition-duration: 0.15s;
+  }
+
+  [data-bs-theme="dark"] .sun-and-moon > .moon > circle {
+    transition-delay: 0.25s;
+    transition-duration: 0.5s;
+  }
+}
+
+.theme-toggle {
+  --icon-fill: rgb(0, 0, 0);
+
+  aspect-ratio: 1;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.theme-toggle > svg {
+  inline-size: 100%;
+  block-size: 100%;
+  max-height: 18px;
+  max-width: 18px;
+  stroke-linecap: round;
+}

package/assets/styles/_utilities.scss

@@ -0,0 +1,9 @@
+// Utility Classes
+
+.img-white {
+  filter: grayscale(100%) brightness(800%);
+}
+
+.img-grayscale {
+  filter: grayscale(100%);
+}

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

@@ -0,0 +1,28 @@
+.feedback {
+  border-color: #90939f !important;
+}
+
+.btn-feedback {
+  opacity: 0.7;
+  min-width: 32px;
+}
+
+.btn-feedback svg {
+  margin-top: -3px;
+}
+
+.btn-feedback:hover:enabled {
+  opacity: 1;
+}
+
+.btn-feedback[disabled] {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
+
+@media (min-width: 1200px) {
+  .feedback-center {
+    display: none;
+  }
+}

package/assets/styles/_xxl.scss

@@ -0,0 +1,18 @@
+/* XXL */
+@media (min-width: 1400px) {
+  nav button .menu-btn {
+    opacity: 0.1;
+  }
+
+  button[data-bs-target="#sidebar"] {
+    pointer-events: none !important;
+  }
+
+  #sidebar.show {
+    pointer-events: auto !important;
+  }
+
+  #sidebar {
+    width: 250px !important;
+  }
+}

package/assets/styles/styles.scss

@@ -0,0 +1,66 @@
+@import "theme-toggle";
+@import "theme-light";
+@import "theme-dark";
+@import "autocomplete"; // search autocomplete dropdown
+@import "article";
+@import "cards";
+@import "col-sidebar"; // 1st column
+@import "codefences"; // code syntax highlighting
+@import "codefences-dark"; // code syntax highlighting
+@import "javascript-disabled"; // display message at top if JS is disabled
+// @import "list-js";
+@import "sidebar";
+@import "menu-right"; // 'On this page' menu
+@import "mobile"; // optimizations for xxs mobile screens
+@import "navbar";
+@import "navbar-search";
+@import "news";
+@import "posts";
+@import "print";
+@import "scroll-to-top-btn";
+@import "skippy"; // skip to content accessibility
+@import "tables";
+@import "footer";
+@import "utilities";
+@import "was-this-page-helpful";
+
+// @import "xxl"; // extra extra large screens
+
+body {
+  overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+// underline links
+main a {
+  text-decoration: underline;
+}
+
+// don't underline links in buttons or navbar
+.menu-left a,
+.guide-example-block a,
+table a,
+nav a,
+.btn {
+  text-decoration: none;
+}
+
+.popover-body small {
+  line-height: 100%;
+}
+
+code {
+  font-size: inherit;
+}
+
+main {
+  min-height: calc(100vh - 418px);
+}

package/data/menu.yml

@@ -0,0 +1,19 @@
+- title: Get Started
+  prefix: ""
+  pages:
+    - title: Introduction
+
+- title: Customization
+  prefix: ""
+  pages:
+    - title: Adding Content
+    - title: Search
+    - title: Shortcodes
+    - title: Analytics
+    - title: Repository Links
+
+- title: Community
+  pages:
+    - title: GitHub Discussions
+      url: "https://github.com/orgs/trimble-oss/discussions"
+      external: true

package/data/navbar_apps.yml

@@ -0,0 +1,15 @@
+- title: Modus Web Components
+  icon: ""
+  url: "https://modus-web-components.trimble.com/"
+
+- title: Modus Icons
+  icon: ""
+  url: "https://modus-icons.trimble.com"
+
+- title: Modus Bootstrap
+  icon: ""
+  url: "https://modus-bootstrap.trimble.com/"
+
+- title: Modus on GitHub
+  icon: ""
+  url: "https://github.com/trimble-oss/?q=modus&type=all&language=&sort=stargazers"

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

@@ -0,0 +1,23 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}"
+  class="{{- if (eq .Level 2 ) }}
+  h1 mt-5 {{- end -}}
+ {{- if (eq .Level 3 ) }}
+  h2 mt-5 {{- end -}}
+  {{- if (eq .Level 4 ) }}h4 fw-bold mt-3{{- end -}}{{ if eq .Anchor "use-when" }} text-success{{- end -}}{{ if eq .Anchor "dont-use-when" }} text-danger{{- end -}}">
+  {{ if eq .Anchor "use-when" }}
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="mx-1 mb-1"
+    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 2Zm5.56 7.74-6.39 6.4a1 1 0 0 1-1.42-.01l-3.3-3.34-.01-.01a.993.993 0 0 1 .01-1.4.996.996 0 0 1 1.41 0l2.6 2.62 5.68-5.69a.996.996 0 0 1 1.41 0v.02h.01c.39.39.39 1.02 0 1.41Z" />
+  </svg>{{- end -}}
+  {{- if eq .Anchor "dont-use-when" -}}
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="mx-1 mb-1"
+    viewBox="0 0 24 24">
+    <path
+      d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41Z" />
+  </svg>{{- end -}}
+  {{- .Text | safeHTML -}}
+  {{ if and (ne .Anchor "use-when") (ne .Anchor "dont-use-when") }}
+  <a class="header-link text-light text-decoration-none fw-normal" href="#{{- .Anchor | safeURL -}}"
+    aria-label="anchor"></a>{{ end }}
+</h{{ .Level }}>

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

@@ -0,0 +1,4 @@
+<img src="{{- .Destination | safeURL -}}" class="img-fluid" alt="{{- .Text -}}" loading="lazy" decoding="async"
+  {{ if strings.HasPrefix .Destination "http" }}{{else}}{{ if strings.HasSuffix .Destination "png" }}
+  {{ with imageConfig ( printf "static/%s" .Destination ) }} width="{{- .Width -}}" height="{{- .Height -}}"
+  {{ end }}{{ end }}{{ end }}>

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

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

package/layouts/_default/baseof.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en-US" class="h-100 no-js {{ with .Page.Params.html_class }}{{ . -}}{{- end -}}">
+
+<head>
+  {{ partial "meta" . }}
+</head>
+
+<body data-url="{{ .RelPermalink }}" class="overflow-x-hidden {{ with .Page.Params.body_class -}}{{ . -}}{{- end -}}"
+  {{ if not .Params.disableScrollSpy }}{{- end -}}>
+  {{ if not .Params.NavbarFalse }}{{ partial "navbar" . }}{{ end }}
+  {{ block "body" . }}{{ block "main" . }}
+  {{- end -}}
+  {{- end -}}
+  <script>
+    // Initialize Bootstrap tooltips
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl, {
+        trigger: 'hover'
+      });
+    });
+  </script>
+  <script>
+    // Hide Bootstrap tooltips when user presses Escape
+    document.addEventListener('keyup', function (event) {
+      if (event.which === 27) {
+        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+          $(tooltipTriggerEl).tooltip('hide');
+        });
+      }
+    });
+  </script>
+  <script>
+    // Initialize Bootstrap popovers
+    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
+  </script>
+  <script>
+    // Disable all links with #
+    var links = document.querySelectorAll('a[href="#"]');
+    // Add event listener to each link
+    links.forEach(function (link) {
+      link.addEventListener('click', function (event) {
+        // Prevent default behavior
+        event.preventDefault();
+      });
+    });
+  </script>
+  {{- if not .IsHome -}}
+  <script>
+    // Change Submit buttons within docs examples to type=button
+    var article = document.querySelector('article');
+    var forms = article.querySelectorAll('form');
+    forms.forEach(function (form) {
+      var submitButtons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
+      submitButtons.forEach(function (submitButton) {
+        submitButton.type = 'button';
+      });
+    });
+  </script>
+  {{- end -}}
+</body>
+
+</html>

package/layouts/_default/home.html

@@ -0,0 +1,31 @@
+{{ define "main" }}
+
+<div class="container-fluid">
+  <div class="row row-main px-0">
+
+    <div class="col-1 col-sidebar px-0 bg-body shadow-sm">
+      {{ partial "col-sidebar" . }}
+    </div>
+
+    <div class="col col-auto px-0 collapse collapse-horizontal bg-dark bg-opacity-10" id="sidebar">
+      <div id="sidebar-menu" class="z-2 sticky-top sticky-offset shadow-sm overflow-auto w-100">
+        {{ partial "col-sidebar-menu" . }}
+      </div>
+    </div>
+
+    <div class="col col-auto col-12 col-main border-start p-0 overflow-x-hidden">
+
+      <main id="main" class="container">
+
+        {{ .Content }}
+
+      </main>
+
+      <footer class="p-2 footer py-4 bg-secondary bg-opacity-10">
+        {{ partial "footer" . }}
+      </footer>
+    </div>
+
+  </div>
+</div>
+{{- end -}}

package/layouts/_default/list.html

@@ -0,0 +1,41 @@
+{{ define "main" }}
+
+<div class="container-fluid">
+  <div class="row row-main px-0">
+
+    <div class="col-1 col-sidebar px-0 bg-body shadow-sm">
+      {{ partial "col-sidebar" . }}
+    </div>
+
+    <div class="col col-auto px-0 collapse collapse-horizontal bg-dark bg-opacity-10 show" id="sidebar">
+      <div id="sidebar-menu" class="sticky-top sticky-offset shadow-sm overflow-auto"
+        style="min-height: calc(100vh - 66px);max-height: calc(100vh - 66px);">
+        {{ partial "col-sidebar-menu" . }}
+      </div>
+    </div>
+
+    <div class="col col-auto col-12 col-main border-start p-0">
+      <div class="mx-auto mw-100">
+
+        {{ partial "header" . }}
+
+        <main class="my-5 container mx-auto h-100" style="max-width: 1090px;">
+          {{ .Content }}
+          <div class="container mb-5">
+            <div class="row">
+              {{ range first 99 (where .Pages.ByPublishDate.Reverse "Section" "news") }}
+              {{- partial "blog-brief.html" . -}}
+              {{- end -}}
+            </div>
+          </div>
+        </main>
+
+        <footer class="p-2 footer py-4 bg-dark bg-opacity-10">
+          {{ partial "footer" . }}
+        </footer>
+      </div>
+    </div>
+
+  </div>
+</div>
+{{- end -}}

package/layouts/_default/redirect.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="robots" content="noindex">
+  <!-- redirects to new URL and keeps the hash in place -->
+  <script>
+    var anchor = window.location.hash.substr(1)
+    location.href = '{{- .Page.Params.redirect | relURL -}}' +
+      (anchor ? '#' + anchor : '');
+  </script>
+  <!-- fallback redirect if JavaScript is not available-->
+  <meta http-equiv="refresh" content="0; url={{- .Page.Params.redirect | relURL -}}">
+  <title>{{- .Title -}}</title>
+</head>
+
+</html>