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

package/README.md

@@ -8,12 +8,8 @@ Status: Alpha. This theme is currently under development and is not yet ready fo
 
 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/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/styles/_article.scss

@@ -108,3 +108,7 @@ article .nav-tabs .nav-link::after {
   background-image: none !important;
   width: 0 !important;
 }
+
+article table {
+  width: 100%;
+}

package/layouts/partials/navbar-dropdown.html

@@ -10,8 +10,10 @@
           {{ end }}
         </div>
         <div class="col-9 align-self-center">
-          {{- .title }} <img src="/img/icons/external-link.svg" class="filter-greyscale opacity-50" height="14"
-            width="14" alt="">
+          {{- .title }}
+          <svg class="filter-greyscale opacity-50" width="14" height="14" fill="currentColor">
+            <use xlink:href="/modus-solid-icons.svg#external-link" />
+          </svg>
         </div>
       </div>
     </a>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trimble-oss/modus-docs-hugo-theme",
-  "version": "1.0.0-alpha1",
-  "description": "A Documentation heme for Hugo built by Trimble",
+  "version": "1.0.0-alpha2",
+  "description": "A Documentation theme for Hugo built by Trimble",
   "homepage": "https://github.com/trimble-oss/modus-docs-hugo-theme",
   "bugs": {
     "url": "https://github.com/trimble-oss/modus-docs-hugo-theme/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc"
@@ -10,29 +10,33 @@
     "type": "git",
     "url": "https://github.com/trimble-oss/modus-docs-hugo-theme"
   },
-  "license": "private",
+  "license": "MIT",
   "author": "Trimble",
   "scripts": {
     "build": "npx hugo",
-    "lint": "npm run lint-css && npm run lint-html",
+    "lint": "npm run lint-css && npm run lint-html && npm run lint-js",
     "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-spellcheck": "npx cspell \"content/**/*.md\" --no-progress",
     "prettier": "prettier --write \"**/*.{json,js,md,svg}\"",
     "serve": "hugo serve --port 4000 --disableFastRender --navigateToChanged",
-    "test": "npm run lint-css && npm run lint-html"
+    "test": "npm run lint-css && npm run lint-html && npm run lint-js"
   },
   "dependencies": {
     "@trimble-oss/modus-icons": "1.4.0"
   },
   "devDependencies": {
     "autoprefixer": "10.4.15",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
     "htmlhint": "1.1.4",
     "hugo-bin": "0.113.0",
     "postcss": "8.4.28",
     "postcss-cli": "10.1.0",
     "prettier": "3.0.2",
-    "stylelint": "15.10.2",
+    "stylelint": "15.10.3",
     "stylelint-config-standard-scss": "10.0.0"
   },
   "hugo-bin": {

package/static/js/theme-toggle.js

@@ -10,10 +10,7 @@ const onClick = () => {
 
 const getColorPreference = () => {
   if (localStorage.getItem(storageKey)) return localStorage.getItem(storageKey);
-  else
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light';
+  else return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 };
 
 const setPreference = () => {
@@ -24,9 +21,7 @@ const setPreference = () => {
 const reflectPreference = () => {
   document.firstElementChild.setAttribute('data-bs-theme', theme.value);
 
-  document
-    .querySelector('#theme-toggle')
-    ?.setAttribute('aria-label', theme.value);
+  document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value);
 };
 
 const theme = {
@@ -40,9 +35,7 @@ window.onload = () => {
   document.querySelector('#theme-toggle').addEventListener('click', onClick);
 };
 
-window
-  .matchMedia('(prefers-color-scheme: dark)')
-  .addEventListener('change', ({ matches: isDark }) => {
-    theme.value = isDark ? 'dark' : 'light';
-    setPreference();
-  });
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
+  theme.value = isDark ? 'dark' : 'light';
+  setPreference();
+});