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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/README.md +2 -6
  2. package/assets/js/theme-toggle.js +1 -0
  3. package/assets/styles/_article.scss +9 -0
  4. package/layouts/_default/baseof.html +1 -0
  5. package/layouts/partials/btn-theme-toggle.html +3 -2
  6. package/layouts/partials/col-sidebar.html +14 -11
  7. package/layouts/partials/navbar-dropdown.html +4 -2
  8. package/layouts/partials/navbar.html +4 -4
  9. package/layouts/partials/skippy.html +5 -5
  10. package/layouts/partials/was-this-page-helpful.html +5 -3
  11. package/package.json +10 -6
  12. package/static/js/theme-toggle.js +6 -13
package/README.md CHANGED
@@ -8,12 +8,8 @@ Status: Alpha. This theme is currently under development and is not yet ready fo
8
8
 
9
9
  1. Add this repo to your package.json as follows:
10
10
 
11
- ```json
12
- {
13
- "dependencies": {
14
- "modus-docs-hugo-theme": "git+github.com:trimble-oss/modus-docs-hugo-theme.git"
15
- }
16
- }
11
+ ```bash
12
+ npm i @trimble-oss/modus-docs-hugo-theme --save-dev
17
13
  ```
18
14
 
19
15
  2. Add the following mounts to your Hugo config:
package/assets/js/theme-toggle.js CHANGED
@@ -1,3 +1,4 @@
1
+ // script adapted from Adam Argyle's tutorial: https://web.dev/building-a-theme-switch-component/
1
2
  (() => {
2
3
  'use strict';
3
4
 
package/assets/styles/_article.scss CHANGED
@@ -14,6 +14,11 @@ h5:hover .header-link {
14
14
  transition: 0.3s all;
15
15
  }
16
16
 
17
+ .header-link:focus-visible {
18
+ opacity: 1;
19
+ pointer-events: visible;
20
+ }
21
+
17
22
  // title of article shouldn't have margin-top
18
23
  main article h2.h1:first-of-type {
19
24
  margin-top: 0 !important;
@@ -108,3 +113,7 @@ article .nav-tabs .nav-link::after {
108
113
  background-image: none !important;
109
114
  width: 0 !important;
110
115
  }
116
+
117
+ article table {
118
+ width: 100%;
119
+ }
package/layouts/_default/baseof.html CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  <body data-url="{{ .RelPermalink }}" class="overflow-x-hidden {{ with .Page.Params.body_class -}}{{ . -}}{{- end -}}"
9
9
  {{ if not .Params.disableScrollSpy }}{{- end -}}>
10
+ {{ partial "skippy" . }}
10
11
  {{ if not .Params.NavbarFalse }}{{ partial "navbar" . }}{{ end }}
11
12
  {{ block "body" . }}{{ block "main" . }}
12
13
  {{- end -}}
package/layouts/partials/btn-theme-toggle.html CHANGED
@@ -1,5 +1,6 @@
1
- <button class="btn btn-lg btn-icon-only theme-toggle pt-0 border-0 mx-1" id="theme-toggle" title="Toggles light & dark"
2
- aria-label="auto" aria-live="polite" type="button" data-bs-toggle="tooltip" data-bs-placement="right">
1
+ <button class="btn btn-lg btn-icon-only btn-outline-secondary bg-transparent theme-toggle pt-0 border-0 mx-1"
2
+ id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite" type="button"
3
+ data-bs-toggle="tooltip" data-bs-placement="right">
3
4
  <svg class="sun-and-moon" aria-hidden="true" width="22" height="22" viewBox="0 0 24 24">
4
5
  <mask class="moon" id="moon-mask">
5
6
  <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
package/layouts/partials/col-sidebar.html CHANGED
@@ -2,19 +2,22 @@
2
2
  class="list-group d-block border-0 text-center sticky-top sticky-offset d-flex flex-column align-items-start justify-content-between"
3
3
  style="height: calc(100dvh - 66px)">
4
4
 
5
- <button class="list-group-item border-0 mt-2" type="button" data-bs-target="#sidebar" data-bs-toggle="collapse"
6
- aria-label="Expand Menu">
7
- <div class="ms-1 text-body">
8
- <svg width="24" height="24" fill="currentColor">
9
- <use xlink:href="/modus-icons.svg#user-guide" />
10
- </svg>
11
- </div>
12
- </button>
5
+ <div class="text-center mx-auto w-100">
6
+ <button class="btn btn-lg btn-outline-secondary bg-transparent list-group-item border-0 mt-1" type="button"
7
+ data-bs-target="#sidebar" data-bs-toggle="collapse" aria-label="Expand Menu"
8
+ style="width:48px; margin-left: 6px;">
9
+ <div class="text-body text-center">
10
+ <svg width="24" height="24" fill="currentColor">
11
+ <use xlink:href="/modus-icons.svg#user-guide" />
12
+ </svg>
13
+ </div>
14
+ </button>
15
+ </div>
13
16
 
14
17
  <div>
15
18
  {{- with .Site.Params.GitHubRepo -}}
16
- <a href="{{- . -}}" class="btn btn-lg btn-icon-only border-0 mx-1" target="_blank" rel="noopener"
17
- data-bs-toggle="tooltip" title="GitHub">
19
+ <a href="{{- . -}}" class="btn btn-lg btn-outline-secondary bg-transparent btn-icon-only border-0 mx-1"
20
+ target="_blank" rel="noopener" data-bs-toggle="tooltip" title="GitHub">
18
21
  {{ partial "icons/brands/github.svg" (dict "class" "mt-2" "width" "22" "height" "22") }}
19
22
  </a>
20
23
  {{ end }}
@@ -22,4 +25,4 @@
22
25
  {{ partial "btn-theme-toggle" . }}
23
26
  </div>
24
27
 
25
- </div>
28
+ </div>
package/layouts/partials/navbar-dropdown.html CHANGED
@@ -10,8 +10,10 @@
10
10
  {{ end }}
11
11
  </div>
12
12
  <div class="col-9 align-self-center">
13
- {{- .title }} <img src="/img/icons/external-link.svg" class="filter-greyscale opacity-50" height="14"
14
- width="14" alt="">
13
+ {{- .title }}
14
+ <svg class="filter-greyscale opacity-50" width="14" height="14" fill="currentColor">
15
+ <use xlink:href="/modus-solid-icons.svg#external-link" />
16
+ </svg>
15
17
  </div>
16
18
  </div>
17
19
  </a>
package/layouts/partials/navbar.html CHANGED
@@ -1,8 +1,8 @@
1
1
  <nav class="navbar shadow-sm navbar-blue sticky-top" aria-label="Main Navigation">
2
2
  <div class="container-fluid">
3
3
  <div>
4
- <button class="btn btn-lg btn-icon-only d-inline-block border-0" type="button" aria-label="Menu"
5
- data-bs-target="#sidebar" data-bs-toggle="collapse">
4
+ <button class="btn btn-lg btn-primary btn-icon-only bg-transparent d-inline-block border-0" type="button"
5
+ aria-label="Menu" data-bs-target="#sidebar" data-bs-toggle="collapse">
6
6
  <i class="modus-icons menu-btn notranslate mt-1 text-white" aria-hidden="true">menu</i>
7
7
  </button>
8
8
  <a class="navbar-brand text-primary" href="/">
@@ -18,8 +18,8 @@
18
18
  {{ partial "navbar-search" . }}
19
19
 
20
20
  <div class="dropdown">
21
- <button type="button" class="btn btn-lg btn-icon-only border-0" data-bs-toggle="dropdown" aria-expanded="false"
22
- aria-label="Menu">
21
+ <button type="button" class="btn btn-lg btn-primary bg-transparent btn-icon-only border-0"
22
+ data-bs-toggle="dropdown" aria-expanded="false" aria-label="Menu">
23
23
  <i class="modus-icons notranslate mt-2 text-white" aria-hidden="true">apps</i>
24
24
  </button>
25
25
 
package/layouts/partials/skippy.html CHANGED
@@ -1,11 +1,11 @@
1
- <div class="skippy overflow-hidden">
2
- <div class="text-center w-100" >
3
- <a class="sr-only sr-only-focusable btn btn-primary rounded p-1 m-2" href="#main">Skip to
1
+ <div class="skippy visually-hidden-focusable overflow-hidden">
2
+ <div class="text-center w-100">
3
+ <a class="sr-only btn btn-primary rounded p-1 m-2" href="#main">Skip to
4
4
  main content</a>
5
5
 
6
6
  {{ if (eq .Page.Layout "docs") }}
7
- <a class="sr-only sr-only-focusable d-none d-md-inline-flex p-1 mb-1" href="#bd-docs-nav">Skip to docs
7
+ <a class="sr-only d-none d-md-inline-flex p-1 mb-1" href="#bd-docs-nav">Skip to docs
8
8
  navigation</a>
9
9
  {{- end }}
10
10
  </div>
11
- </div>
11
+ </div>
package/layouts/partials/was-this-page-helpful.html CHANGED
@@ -1,10 +1,12 @@
1
1
  <div class="d-none small p-2 feedback mt-2">
2
2
  <div class="mt-2 mb-1">Was this page helpful?</div>
3
- <button type="button" class="btn btn-light btn-outline btn-feedback btn-feedback-helpful border rounded p-1 me-2"
3
+ <button type="button"
4
+ class="btn btn-light btn-outline-secondary btn-feedback btn-feedback-helpful border rounded p-1 me-2"
4
5
  aria-label="Helpful">
5
6
  {{- partial "icons/modus-outlined/thumbs-up.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary") -}}
6
7
  </button>
7
- <button type="button" class="btn btn-light btn-outline btn-feedback btn-feedback-not-helpful border rounded p-1"
8
+ <button type="button"
9
+ class="btn btn-light btn-outline-secondary btn-feedback btn-feedback-not-helpful border rounded p-1"
8
10
  aria-label="Not Helpful">
9
11
  {{- partial "icons/modus-outlined/thumbs-down.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary") -}}
10
12
  </button>
@@ -16,4 +18,4 @@
16
18
 
17
19
  <div class="small ml-2 d-none feedback-not-helpful">
18
20
  <a href="" rel="nofollow" target="_blank">Please, provide feedback about how we can improve the page</a>. Thank you!
19
- </div>
21
+ </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@trimble-oss/modus-docs-hugo-theme",
3
- "version": "1.0.0-alpha1",
4
- "description": "A Documentation heme for Hugo built by Trimble",
3
+ "version": "1.0.0-alpha3",
4
+ "description": "A Documentation theme for Hugo built by Trimble",
5
5
  "homepage": "https://github.com/trimble-oss/modus-docs-hugo-theme",
6
6
  "bugs": {
7
7
  "url": "https://github.com/trimble-oss/modus-docs-hugo-theme/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc"
@@ -10,29 +10,33 @@
10
10
  "type": "git",
11
11
  "url": "https://github.com/trimble-oss/modus-docs-hugo-theme"
12
12
  },
13
- "license": "private",
13
+ "license": "MIT",
14
14
  "author": "Trimble",
15
15
  "scripts": {
16
16
  "build": "npx hugo",
17
- "lint": "npm run lint-css && npm run lint-html",
17
+ "lint": "npm run lint-css && npm run lint-html && npm run lint-js",
18
18
  "lint-css": "stylelint \"assets/styles/*.*\" --fix",
19
19
  "lint-html": "htmlhint \"build/**/index.html\"",
20
+ "lint-js": "eslint assets/js/*.js --fix",
21
+ "lint-links": "npx linkinator content/ --recurse --silent --skip \"^(?!http://localhost)\"",
20
22
  "lint-spellcheck": "npx cspell \"content/**/*.md\" --no-progress",
21
23
  "prettier": "prettier --write \"**/*.{json,js,md,svg}\"",
22
24
  "serve": "hugo serve --port 4000 --disableFastRender --navigateToChanged",
23
- "test": "npm run lint-css && npm run lint-html"
25
+ "test": "npm run lint-css && npm run lint-html && npm run lint-js"
24
26
  },
25
27
  "dependencies": {
26
28
  "@trimble-oss/modus-icons": "1.4.0"
27
29
  },
28
30
  "devDependencies": {
29
31
  "autoprefixer": "10.4.15",
32
+ "eslint": "^8.48.0",
33
+ "eslint-config-prettier": "^9.0.0",
30
34
  "htmlhint": "1.1.4",
31
35
  "hugo-bin": "0.113.0",
32
36
  "postcss": "8.4.28",
33
37
  "postcss-cli": "10.1.0",
34
38
  "prettier": "3.0.2",
35
- "stylelint": "15.10.2",
39
+ "stylelint": "15.10.3",
36
40
  "stylelint-config-standard-scss": "10.0.0"
37
41
  },
38
42
  "hugo-bin": {
package/static/js/theme-toggle.js CHANGED
@@ -10,10 +10,7 @@ const onClick = () => {
10
10
 
11
11
  const getColorPreference = () => {
12
12
  if (localStorage.getItem(storageKey)) return localStorage.getItem(storageKey);
13
- else
14
- return window.matchMedia('(prefers-color-scheme: dark)').matches
15
- ? 'dark'
16
- : 'light';
13
+ else return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
17
14
  };
18
15
 
19
16
  const setPreference = () => {
@@ -24,9 +21,7 @@ const setPreference = () => {
24
21
  const reflectPreference = () => {
25
22
  document.firstElementChild.setAttribute('data-bs-theme', theme.value);
26
23
 
27
- document
28
- .querySelector('#theme-toggle')
29
- ?.setAttribute('aria-label', theme.value);
24
+ document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value);
30
25
  };
31
26
 
32
27
  const theme = {
@@ -40,9 +35,7 @@ window.onload = () => {
40
35
  document.querySelector('#theme-toggle').addEventListener('click', onClick);
41
36
  };
42
37
 
43
- window
44
- .matchMedia('(prefers-color-scheme: dark)')
45
- .addEventListener('change', ({ matches: isDark }) => {
46
- theme.value = isDark ? 'dark' : 'light';
47
- setPreference();
48
- });
38
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
39
+ theme.value = isDark ? 'dark' : 'light';
40
+ setPreference();
41
+ });