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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/data/navbar_apps.yml +8 -4
  2. package/layouts/_default/redirect.html +1 -1
  3. package/layouts/_default/single.html +2 -2
  4. package/layouts/index.json +1 -1
  5. package/layouts/partials/blog-brief.html +4 -4
  6. package/layouts/partials/meta.html +10 -5
  7. package/layouts/partials/navbar-search.html +3 -3
  8. package/layouts/partials/skippy.html +3 -3
  9. package/package.json +6 -4
  10. package/static/img/icons/check-circle-outlined.svg +1 -0
  11. package/static/img/icons/code.svg +1 -0
  12. package/static/img/icons/github.svg +1 -0
  13. package/static/img/icons/trimble.svg +1 -0
  14. package/static/img/icons/web-components.svg +1 -0
  15. package/layouts/index.rss.xml +0 -49
  16. package/static/js/theme-toggle.js +0 -41
package/data/navbar_apps.yml CHANGED
@@ -1,15 +1,19 @@
1
+ - title: Modus Style Guide
2
+ icon: "/img/icons/trimble.svg"
3
+ url: "https://modus.trimble.com/"
4
+
1
5
  - title: Modus Web Components
2
- icon: ""
6
+ icon: "/img/icons/web-components.svg"
3
7
  url: "https://modus-web-components.trimble.com/"
4
8
 
5
9
  - title: Modus Icons
6
- icon: ""
10
+ icon: "/img/icons/check-circle-outlined.svg"
7
11
  url: "https://modus-icons.trimble.com"
8
12
 
9
13
  - title: Modus Bootstrap
10
- icon: ""
14
+ icon: "/img/icons/code.svg"
11
15
  url: "https://modus-bootstrap.trimble.com/"
12
16
 
13
17
  - title: Modus on GitHub
14
- icon: ""
18
+ icon: "/img/icons/github.svg"
15
19
  url: "https://github.com/trimble-oss/?q=modus&type=all&language=&sort=stargazers"
package/layouts/_default/redirect.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!doctype html>
2
- <html lang="en">
2
+ <html lang="{{ with .Site.LanguageCode }}{{- . -}}{{ else }}en-US{{- end -}}">
3
3
 
4
4
  <head>
5
5
  <meta charset="utf-8">
package/layouts/_default/single.html CHANGED
@@ -28,7 +28,7 @@
28
28
  <div class="mx-3">
29
29
  <img src="/img/author/{{ .Params.author | urlize }}.jpg"
30
30
  class="bg-light rounded-circle mx-auto text-center border" height="44" width="44"
31
- alt="{{ .Params.author }}">
31
+ alt="{{- .Params.author -}}">
32
32
  </div>
33
33
  <div>
34
34
  <div class="text-body fw-bold">
@@ -110,4 +110,4 @@
110
110
 
111
111
  </div>
112
112
  </div>
113
- {{ end }}
113
+ {{ end }}
package/layouts/index.json CHANGED
@@ -6,7 +6,7 @@
6
6
  {{- if and $index (gt $index 0) -}},{{- end }}
7
7
  {
8
8
  "uri": "{{- $page.Permalink -}}",
9
- "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}}",
9
+ "title": "{{- htmlEscape $page.Title -}}",
10
10
  "tags": [{{ range $tindex, $tag := $page.Params.tags }}{{ if $tindex }}, {{ end }}"{{ $tag| htmlEscape }}"{{ end }}],
11
11
  "description": "{{- htmlEscape .Description -}}",
12
12
  "content": {{- $page.Plain | jsonify -}}
package/layouts/partials/blog-brief.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="col-12 col-lg-6 col-xl-4 my-3">
3
3
  <div class="card card-blog-brief h-100">
4
4
  <div class="card-header top-rounded mb-0 pb-0 border-0"
5
- style="background-image: url({{ .Params.Image | relURL }}); background-color: {{ .Params.headerBgColor }}">
5
+ style="background-image: url({{- .Params.Image | relURL -}}); background-color: {{- .Params.headerBgColor -}}">
6
6
  </div>
7
7
  <div class="card-body border-0 pb-0">
8
8
  <h3 class="card-title text-body px-2 ms-n2 name" {{ if .Params.TitleNoTranslate }}translate="no" {{- end -}}>
@@ -19,12 +19,12 @@
19
19
  <div class="card-footer bg-transparent border-0 py-0">
20
20
  <div class="d-flex mb-1">
21
21
  <div class="me-2">
22
- <img src="/img/author/{{ .Params.author | urlize }}.jpg"
22
+ <img src="/img/author/{{- .Params.author | urlize -}}.jpg"
23
23
  class="bg-light rounded-circle mx-auto text-center img-fluid ms-2" height="40" width="40"
24
- alt="{{ .Params.author }}">
24
+ alt="{{- .Params.author -}}">
25
25
  </div>
26
26
  <div>
27
- <p class="text-muted small mb-0">{{ .Params.author }}</p>
27
+ <p class="text-muted small mb-0">{{- .Params.author -}}</p>
28
28
  <p class="text-muted small">{{- .Date.Format "Jan 2, 2006" }}</p>
29
29
  </div>
30
30
  </div>
package/layouts/partials/meta.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <script>document.documentElement.classList.remove('no-js');</script>
7
7
 
8
8
  <!-- Load Modus Bootstrap CSS from CDN -->
9
- <link rel="stylesheet" href="https://modus-bootstrap.netlify.app/docs/v2/dist/css/modus-bootstrap.min.css">
9
+ <link rel="stylesheet" href="{{- .Site.BaseURL -}}css/modus-bootstrap.min.css">
10
10
 
11
11
  <!-- Compiles and minifies the sites Sass files from /assets/css/ -->
12
12
  {{- $sassOptions := (dict "enableSourceMap" true) -}}
@@ -19,7 +19,9 @@
19
19
  <link rel="stylesheet" href="{{- .Site.BaseURL -}}fonts/modus-icons.css">
20
20
 
21
21
  <!-- Loads Dark Mode Toggle JS -->
22
- <script src="{{- .Site.BaseURL -}}js/theme-toggle.js"></script>
22
+
23
+ {{ $ThemeToggleJS := resources.Get "js/theme-toggle.js" | minify }}
24
+ <script src="{{- .Site.BaseURL -}}{{ $ThemeToggleJS.RelPermalink }}"></script>
23
25
 
24
26
  <meta name="description"
25
27
  content="{{ with .Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{- end -}}{{- end -}}">
@@ -31,10 +33,11 @@
31
33
  {{ end }}
32
34
 
33
35
  <!-- no need to define additional Twitter card meta tags as fallback to Open Graph -->
34
- <!-- https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#twitter-cards-and-open-graph -->
36
+ <!-- https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#twitter-cards-and-open-graph -->
35
37
 
36
38
  {{- if .Params.private -}}
37
39
  <meta name="robots" content="noindex, nofollow">
40
+ <meta name="referrer" content="none">
38
41
  {{ end }}
39
42
 
40
43
  {{- with .Site.Params.themeColor -}}
@@ -43,11 +46,13 @@
43
46
  <meta name="theme-color" content="{{- . | default "#005f9e" -}}">
44
47
  {{ end }}
45
48
 
49
+ {{- if .IsHome -}}
46
50
  {{- with .Site.Params.googleSiteVerification -}}
47
51
  <!-- Google Site Verification -->
48
52
  <!-- https://support.google.com/webmasters/answer/9008080?hl=en -->
49
53
  <meta name="google-site-verification" content="{{- . -}}">
50
54
  {{ end }}
55
+ {{ end }}
51
56
 
52
57
  <!-- Loads the Trimble favicon and the SVG icon -->
53
58
  <link rel="alternate icon" type="image/x-icon" href="{{- .Site.BaseURL -}}favicon.ico">
@@ -57,7 +62,7 @@
57
62
  <script nomodule crossorigin="anonymous"
58
63
  src="https://polyfill.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"></script>
59
64
  <script
60
- nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.1/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');</script>
65
+ nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script>');</script>
61
66
 
62
67
  {{- if not .Params.hideSearch -}}
63
68
  <script>
@@ -76,7 +81,7 @@
76
81
  {{ end }}
77
82
 
78
83
  <!-- Loads Bootstrap 5 JS from CDN -->
79
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
84
+ <script src="{{- .Site.BaseURL -}}js/bootstrap.bundle.min.js"></script>
80
85
 
81
86
  {{ partial "analytics" . }}
82
87
 
package/layouts/partials/navbar-search.html CHANGED
@@ -1,10 +1,10 @@
1
- <div class="search-container d-inline-block position-relative">
1
+ <search class="search-container d-inline-block position-relative" role="search">
2
2
  <input class="form-control form-control-search position-absolute" aria-label="Search" id="search-by" type="search"
3
3
  name="q" placeholder="Search..." autocomplete="off" title="" required>
4
4
  <label class="btn btn-lg btn-icon-only border-0 btn-search position-absolute px-1" for="search-by">
5
5
  <i class="modus-icons notranslate text-white" aria-hidden="true">search</i>
6
6
  </label>
7
- </div>
7
+ </search>
8
8
 
9
9
  <script>
10
10
  // Lose Focus on Input when user presses Escape only if no input
@@ -16,4 +16,4 @@
16
16
  }
17
17
  }
18
18
  });
19
- </script>
19
+ </script>
package/layouts/partials/skippy.html CHANGED
@@ -1,10 +1,10 @@
1
1
  <div class="skippy visually-hidden-focusable overflow-hidden">
2
- <div class="text-center w-100">
3
- <a class="visually-hidden btn btn-primary rounded p-1 m-2" href="#main">Skip to
2
+ <div class="text-center container-fluid">
3
+ <a class="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="visually-hidden d-none d-md-inline-flex p-1 mb-1" href="#bd-docs-nav">Skip to docs
7
+ <a class="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>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trimble-oss/modus-docs-hugo-theme",
3
- "version": "1.0.0-alpha5",
3
+ "version": "1.0.0-alpha7",
4
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": {
@@ -18,22 +18,24 @@
18
18
  "lint-css": "stylelint \"assets/styles/*.*\" --fix",
19
19
  "lint-html": "htmlhint \"build/**/index.html\"",
20
20
  "lint-js": "eslint assets/js/*.js --fix",
21
- "lint-links": "npx linkinator content/ --recurse --silent --skip \"^(?!http://localhost)\"",
21
+ "lint-links": "npx linkinator ./",
22
+ "lint-markdown": "npx markdownlint-cli content/**/*.md --fix",
22
23
  "lint-spellcheck": "npx cspell \"content/**/*.md\" --no-progress",
23
24
  "prettier": "prettier --write \"**/*.{json,js,md,svg}\"",
24
25
  "serve": "hugo serve --port 4000 --disableFastRender --navigateToChanged",
25
26
  "test": "npm run lint-css && npm run lint-html && npm run lint-js"
26
27
  },
27
28
  "dependencies": {
29
+ "@trimble-oss/modus-bootstrap": "2.0.0-alpha1",
28
30
  "@trimble-oss/modus-icons": "1.4.0"
29
31
  },
30
32
  "devDependencies": {
31
- "autoprefixer": "10.4.15",
33
+ "autoprefixer": "10.4.16",
32
34
  "eslint": "8.49.0",
33
35
  "eslint-config-prettier": "9.0.0",
34
36
  "htmlhint": "1.1.4",
35
37
  "hugo-bin": "0.114.2",
36
- "postcss": "8.4.29",
38
+ "postcss": "8.4.30",
37
39
  "postcss-cli": "10.1.0",
38
40
  "prettier": "3.0.3",
39
41
  "stylelint": "15.10.3",
package/static/img/icons/check-circle-outlined.svg ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1 @@
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 DELETED
@@ -1,49 +0,0 @@
1
- <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
2
- <channel>
3
- <title>{{- .Site.Title -}}</title>
4
- <link>{{- .Site.BaseURL -}}</link>
5
- <description>Recent content for {{ .Site.Title }}</description>
6
- <icon>{{- .Site.BaseURL -}}icon.png</icon>
7
- <copyright>Copyright {{ now.Format "2006" }}, {{ .Site.Params.copyrightHolder }}</copyright>
8
- {{- with .Site.LanguageCode }}
9
- <language>{{.}}</language>
10
- {{- end}}
11
- {{- with .Site.Params.copyrightHolderEmail }}
12
- <managingEditor>{{.}} ({{- $.Site.Params.copyrightHolder -}})</managingEditor>
13
- {{- end}}
14
- {{- with .Site.Params.copyrightHolderEmail }}
15
- <webMaster>{{.}} ({{- $.Site.Params.copyrightHolder -}})</webMaster>
16
- {{- end}}
17
- {{- with .Site.Params.docsUrlForRssV2}}
18
- <docs>{{- . -}}</docs>
19
- {{- end }}
20
- {{- if not .Date.IsZero }}
21
- <lastBuildDate>{{- .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML -}}</lastBuildDate>
22
- {{- end }}
23
- {{ with .OutputFormats.Get "RSS" }}
24
- {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
25
- {{ end }}
26
- {{ range first 7 (where .Site.RegularPages.ByPublishDate.Reverse ".Section" "not in" "addons") }}
27
- <item>
28
- <title>{{- .Title -}}</title>
29
- <link>{{- .Permalink -}}</link>
30
- <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
31
- {{ with $.Site.Params.copyrightHolderEmail }}<author>{{.}} ({{ with $.Site.Params.copyrightHolder }}{{.}}){{end}}</author>{{end}}
32
- <guid isPermaLink="true">{{ .Permalink }}</guid>
33
- {{- range .Params.tags }}
34
- <category>{{- . | urlize -}}</category>
35
- {{- end }}
36
- <description>
37
- {{- with .Params.headline }}&lt;h2&gt;{{ . }}&lt;/h2&gt;{{- end }}
38
- {{- $img := (.Resources.ByType "image").GetMatch "*featured*" }}
39
- {{- with $img }}
40
- {{- $img := .Resize "640x" }}
41
- {{- printf "<![CDATA[<img src=\"%s\" width=\"%d\" height=\"%d\"/>]]>" $img.Permalink $img.Width $img.Height | safeHTML }}
42
- {{- end }}
43
- {{ .Content | html }}
44
- </description>
45
- <source url="{{- .Site.BaseURL -}}index.xml">{{- .Site.Title -}}</source>
46
- </item>
47
- {{ end }}
48
- </channel>
49
- </rss>
package/static/js/theme-toggle.js DELETED
@@ -1,41 +0,0 @@
1
- // script adapted from Adam Argyle's tutorial: https://web.dev/building-a-theme-switch-component/
2
-
3
- const storageKey = 'theme-preference';
4
-
5
- const onClick = () => {
6
- theme.value = theme.value === 'light' ? 'dark' : 'light';
7
-
8
- setPreference();
9
- };
10
-
11
- const getColorPreference = () => {
12
- if (localStorage.getItem(storageKey)) return localStorage.getItem(storageKey);
13
- else return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
14
- };
15
-
16
- const setPreference = () => {
17
- localStorage.setItem(storageKey, theme.value);
18
- reflectPreference();
19
- };
20
-
21
- const reflectPreference = () => {
22
- document.firstElementChild.setAttribute('data-bs-theme', theme.value);
23
-
24
- document.querySelector('#theme-toggle')?.setAttribute('aria-label', theme.value);
25
- };
26
-
27
- const theme = {
28
- value: getColorPreference(),
29
- };
30
-
31
- reflectPreference();
32
-
33
- window.onload = () => {
34
- reflectPreference();
35
- document.querySelector('#theme-toggle').addEventListener('click', onClick);
36
- };
37
-
38
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
39
- theme.value = isDark ? 'dark' : 'light';
40
- setPreference();
41
- });