diff --git a/assets/css/pre.scss b/assets/css/pre.scss index 7d5cd81..bcdd9f8 100644 --- a/assets/css/pre.scss +++ b/assets/css/pre.scss @@ -90,14 +90,20 @@ a:hover { 2. Correct the odd `em` font sizing in all browsers. */ -code, + kbd, samp, -pre { +pre, +code { --default-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: var(--font-mono, --default-font-mono); } + +pre { + overflow-x: auto; +} + /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) diff --git a/assets/js/main.js b/assets/js/main.js index d17a258..ab59668 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,3 +1,6 @@ -import "./theme"; +import { setup_theme_switch } from "./theme" import "./style"; import "./selectable"; + + +setup_theme_switch('theme-switch') \ No newline at end of file diff --git a/assets/js/theme.js b/assets/js/theme.js index d6d13d9..662c7df 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,39 +1,68 @@ +const comment = '{{ .Site.Params.comment.provider }}' const icon_light = '{{ index .Site.Params.switch 1 }}' const icon_dark = '{{ index .Site.Params.switch 0 }}' -const comment = '{{ .Site.Params.comment }}' -const light = 'light', dark = 'dark' +const THEME_LIGHT = 'light' +const THEME_DARK = 'dark' -const themeSwitcher = document.getElementById('theme-switcher') +/** @type {HTMLElement} */ +let toggler +/** @type {HTMLIFrameElement} */ +let utterances +/** @type {HTMLIFrameElement} */ +let giscus -// set switcher -themeSwitcher.innerHTML = localStorage.theme === light ? icon_light : icon_dark - -themeSwitcher.addEventListener('click', function () { - const currentTheme = localStorage.theme - const newTheme = currentTheme === light ? dark : light - - // switch global theme - switchMinimaTheme(currentTheme, newTheme) - - // switch utterance theme if necessary - if (comment === 'utterances') - switchUtteranceTheme(`github-${newTheme}`) -}); - -function switchMinimaTheme(oldTheme, newTheme) { - const { classList } = document.documentElement - const text = newTheme === light ? icon_light : icon_dark; - - classList.remove(oldTheme); - classList.add(newTheme); - localStorage.theme = newTheme; - themeSwitcher.innerHTML = text; +/** @param {string} id */ +export function setup_theme_switch(id) { + if (!toggler) { + toggler = document.getElementById(id) + } + toggler.innerHTML = localStorage.theme === THEME_LIGHT ? icon_light : icon_dark + toggler.addEventListener('click', switch_theme); } -const utteranceClassName = '.utterances-frame' -let utterance; +function switch_theme() { + const current = localStorage.getItem('theme') + const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT -function switchUtteranceTheme(theme) { - if (!utterance) utterance = document.querySelector(utteranceClassName) - utterance.contentWindow.postMessage({type: 'set-theme', theme}, 'https://utteranc.es') -} \ No newline at end of file + switch_minima_theme(current, next) + + switch (comment) { + case 'utterances': + switch_utterances_theme(`github-${next}`) + break + case 'giscus': + switch_giscus_theme(next) + break + default: + } +} + +/** + * @param {string} current + * @param {string} next + */ +function switch_minima_theme(current, next) { + const { classList } = document.documentElement + const icon = next === THEME_LIGHT ? icon_light : icon_dark; + + classList.remove(current); + classList.add(next); + localStorage.setItem('theme', next); + toggler.innerHTML = icon; +} + +/** @param {string} theme */ +function switch_utterances_theme(theme) { + if (!utterances) { + utterances = document.querySelector('iframe.utterances-frame') + } + utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es') +} + +/** @param {string} theme */ +function switch_giscus_theme(theme) { + if (!giscus) { + giscus = document.querySelector('iframe.giscus-frame') + } + giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app') +} diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 83b72c3..10ad6a7 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -40,9 +40,6 @@ params: greet: Hello :) # subtitle speficies a subtitle displayed right after the site title. subtitle: - # comment specifies which comment plugin to be used. - # currently available ones: disqus, utterances, giscus. - comment: utterances # switch specifies two emojis to be used as the button toggling color themes. switch: ["🌚", "🌝"] # defaultTheme specifies a default theme to be used. @@ -59,35 +56,6 @@ params: # post pages. If enabled, those you don't want a comment plugin to work on just # set `comment` to false in their front matters. commentOnAllPosts: true - - # disqus specifies the configuration for Disqus. - disqus: - shortname: hugo-minima - - # utterances specifies the configuration for Utterances. - # Check out https://utteranc.es for the following three attributes. - utterances: - repo: mivinci/hugo-theme-minima - issueTerm: pathname - label: comment - - # giscus specifies the configuration for Giscus. - # Check out https://giscus.app for the following six attributes. - giscus: - repo: mivinci/hugo-theme-minima - repoId: MDEwOlJlcG9zaXRvcnkzODcxMjM2NDU= - category: Comments - categoryId: DIC_kwDOFxMJvc4CScQm - mapping: pathname - inputPostion: buttom - - # **DEPRECATED** - # ovo(https://ovo.js.org) is a comment plugin written by the author of Minima but - # is now deprecated out of security issues. - ovo: - server: "" - placeholder: "" - # social is an array containing as many as social accounts to be displayed # in the buttom of every page. social: @@ -100,16 +68,36 @@ params: - name: "rss" url: "/index.xml" + # comment specifies a comment plugin. + comment: + provider: giscus + # check out https://disqus.com/ + disqus: + shortname: hugo-minima + # check out https://utteranc.es + utterances: + repo: mivinci/hugo-theme-minima + issueTerm: pathname + label: comment + # check out https://giscus.app + giscus: + repo: mivinci/hugo-theme-minima + repoId: MDEwOlJlcG9zaXRvcnkzODcxMjM2NDU= + category: Comments + categoryId: DIC_kwDOFxMJvc4CScQm + mapping: pathname + inputPosition: buttom # bottom | top + reactions: true + metadata: false + # menu.main is an array containing what is used as the navigator. menu: main: - identifier: tags name: "Tags" - url: "/tags" weight: 2 - identifier: series name: "Series" - url: "/series" weight: 3 # taxonomies defines ways to classify yout posts. Below are some presets that diff --git a/exampleSite/content/math-typesetting.md b/exampleSite/content/math-typesetting.md index 1fbbc53..5b15fcb 100644 --- a/exampleSite/content/math-typesetting.md +++ b/exampleSite/content/math-typesetting.md @@ -4,7 +4,8 @@ title: Math Typesetting date: 2021-07-18T10:52:59+08:00 description: A brief guide to setup KaTeX. math: true -categories: ["Markdown", "KaTeX"] +tags: + - KaTex --- Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries. diff --git a/exampleSite/content/mermaid-diagrams.md b/exampleSite/content/mermaid-diagrams.md new file mode 100644 index 0000000..9e4d1c5 --- /dev/null +++ b/exampleSite/content/mermaid-diagrams.md @@ -0,0 +1,263 @@ +--- +author: Mermaid Team +title: Mermaid Diagrams +date: 2021-07-18T10:52:59+08:00 +description: A brief guide to Mermaid syntax. +mermaid: true +tags: + - markdown + - mermaid +--- + +## Examples + +The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [full syntax](http://mermaid-js.github.io/mermaid/). + + + +### Flowchart + +``` +flowchart LR + +A[Hard] -->|Text| B(Round) +B --> C{Decision} +C -->|One| D[Result 1] +C -->|Two| E[Result 2] +``` + +```mermaid +flowchart LR + +A[Hard] -->|Text| B(Round) +B --> C{Decision} +C -->|One| D[Result 1] +C -->|Two| E[Result 2] +``` + +### Sequence diagram + +``` +sequenceDiagram +Alice->>John: Hello John, how are you? +loop Healthcheck + John->>John: Fight against hypochondria +end +Note right of John: Rational thoughts! +John-->>Alice: Great! +John->>Bob: How about you? +Bob-->>John: Jolly good! +``` + +```mermaid +sequenceDiagram +Alice->>John: Hello John, how are you? +loop Healthcheck + John->>John: Fight against hypochondria +end +Note right of John: Rational thoughts! +John-->>Alice: Great! +John->>Bob: How about you? +Bob-->>John: Jolly good! +``` + +### Gantt chart + +``` +gantt + section Section + Completed :done, des1, 2014-01-06,2014-01-08 + Active :active, des2, 2014-01-07, 3d + Parallel 1 : des3, after des1, 1d + Parallel 2 : des4, after des1, 1d + Parallel 3 : des5, after des3, 1d + Parallel 4 : des6, after des4, 1d +``` + +```mermaid +gantt + section Section + Completed :done, des1, 2014-01-06,2014-01-08 + Active :active, des2, 2014-01-07, 3d + Parallel 1 : des3, after des1, 1d + Parallel 2 : des4, after des1, 1d + Parallel 3 : des5, after des3, 1d + Parallel 4 : des6, after des4, 1d +``` + +### Class diagram + +``` +classDiagram +Class01 <|-- AveryLongClass : Cool +<> Class01 +Class09 --> C2 : Where am I? +Class09 --* C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +class Class10 { + <> + int id + size() +} +``` + +```mermaid +classDiagram +Class01 <|-- AveryLongClass : Cool +<> Class01 +Class09 --> C2 : Where am I? +Class09 --* C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +class Class10 { + <> + int id + size() +} +``` + +### State diagram + +``` +stateDiagram-v2 +[*] --> Still +Still --> [*] +Still --> Moving +Moving --> Still +Moving --> Crash +Crash --> [*] +``` + +```mermaid +stateDiagram-v2 +[*] --> Still +Still --> [*] +Still --> Moving +Moving --> Still +Moving --> Crash +Crash --> [*] +``` + +### Pie chart + +``` +pie +"Dogs" : 386 +"Cats" : 85.9 +"Rats" : 15 +``` + +```mermaid +pie +"Dogs" : 386 +"Cats" : 85.9 +"Rats" : 15 +``` + + +### User Journey diagram + +``` + journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me +``` + +```mermaid + journey + title My working day + section Go to work + Make tea: 5: Me + Go upstairs: 3: Me + Do work: 1: Me, Cat + section Go home + Go downstairs: 5: Me + Sit down: 3: Me +``` + +### C4 diagram + +``` +C4Context +title System Context diagram for Internet Banking System + +Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") +Person(customerB, "Banking Customer B") +Person_Ext(customerC, "Banking Customer C") +System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") + +Enterprise_Boundary(b1, "BankBoundary") { + + SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + System_Boundary(b2, "BankBoundary2") { + System(SystemA, "Banking System A") + System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") + } + + System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") + SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") + + Boundary(b3, "BankBoundary3", "boundary") { + SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") + SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") + } +} + +BiRel(customerA, SystemAA, "Uses") +BiRel(SystemAA, SystemE, "Uses") +Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") +Rel(SystemC, customerA, "Sends e-mails to") +``` + +```mermaid +C4Context +title System Context diagram for Internet Banking System + +Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") +Person(customerB, "Banking Customer B") +Person_Ext(customerC, "Banking Customer C") +System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") + +Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") + +Enterprise_Boundary(b1, "BankBoundary") { + + SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") + + System_Boundary(b2, "BankBoundary2") { + System(SystemA, "Banking System A") + System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") + } + + System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") + SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") + + Boundary(b3, "BankBoundary3", "boundary") { + SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") + SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") + } +} + +BiRel(customerA, SystemAA, "Uses") +BiRel(SystemAA, SystemE, "Uses") +Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") +Rel(SystemC, customerA, "Sends e-mails to") +``` \ No newline at end of file diff --git a/exampleSite/content/mermaid-graphs.md b/exampleSite/content/mermaid-graphs.md deleted file mode 100644 index 59b5c61..0000000 --- a/exampleSite/content/mermaid-graphs.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -author: Hugo Authors -title: Mermaid Graphs -date: 2021-07-18T10:52:59+08:00 -description: A brief guide to setup Mermaid. -mermaid: true -draft: false -categories: ["Markdown", "Mermaid"] ---- - -Here's a simple mermaid flowchart. - -{{}} -graph LR - Start --> Stop -{{}} - -For more documentations on Mermaid, check out [mermaid](https://mermaid-js.github.io/mermaid). diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 1e49849..1720af9 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -14,8 +14,9 @@ {{ if .Params.tags }}
- {{ range .Params.tags }} - #{{ . }} + {{ range $tag := .Params.tags }} + {{ $url := printf "tags/%s" $tag | relLangURL }} + #{{ . }} {{ end }}
{{ end }} @@ -26,32 +27,6 @@ {{ .Content }} - {{ if or .Params.math .Site.Params.math }} - {{ partial "math.html" . }} - {{ end }} - - {{ if or .Params.mermaid .Site.Params.mermaid }} - {{ partial "mermaid.html" . }} - {{ end }} - - {{ if or .Params.comment (and .Site.Params.commentOnAllPosts (ne .Params.comment false)) }} - - {{ if eq .Site.Params.comment "disqus"}} - {{ partial "disqus.html" . }} - {{ end }} - - {{ if eq .Site.Params.comment "utterances"}} - {{ partial "utterances.html" . }} - {{ end }} - - {{ if eq .Site.Params.comment "giscus" }} - {{ partial "giscus.html" }} - {{ end }} - - {{ if eq .Site.Params.comment "ovo"}} - {{ partial "ovo.html" . }} - {{ end }} - - {{ end }} + {{ partial "plugin.html" . }} {{ end }} \ No newline at end of file diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 1e0b200..75ff2bf 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -5,7 +5,7 @@ {{ $data := .Data }} {{ range $key, $value := .Data.Terms.ByCount }}
- + {{ $value.Name }} {{ $value.Count }} diff --git a/layouts/partials/giscus.html b/layouts/partials/giscus.html index a32e484..68579ac 100644 --- a/layouts/partials/giscus.html +++ b/layouts/partials/giscus.html @@ -1,28 +1,18 @@ - \ No newline at end of file +{{ $giscus := .Site.Params.comment.giscus }} + diff --git a/layouts/partials/head.html b/layouts/partials/head.html index e2aabd4..14d454a 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -29,23 +29,12 @@ {{ end }} + \ No newline at end of file diff --git a/layouts/partials/ovo.html b/layouts/partials/ovo.html deleted file mode 100644 index 8870f5d..0000000 --- a/layouts/partials/ovo.html +++ /dev/null @@ -1,29 +0,0 @@ -
-
评论插件加载中 OvO
-
- - \ No newline at end of file diff --git a/layouts/partials/plugin.html b/layouts/partials/plugin.html new file mode 100644 index 0000000..846b11a --- /dev/null +++ b/layouts/partials/plugin.html @@ -0,0 +1,23 @@ +{{ if or .Params.math .Site.Params.math }} +{{ partial "math.html" . }} +{{ end }} + +{{ if or .Params.mermaid .Site.Params.mermaid }} +{{ partial "mermaid.html" . }} +{{ end }} + +{{ if or .Params.comment (and .Site.Params.commentOnAllPosts (ne .Params.comment false)) }} + +{{ if eq .Site.Params.comment.provider "disqus"}} +{{ partial "disqus.html" . }} +{{ end }} + +{{ if eq .Site.Params.comment.provider "giscus" }} +{{ partial "giscus.html" . }} +{{ end }} + +{{ if eq .Site.Params.comment.provider "utterances"}} +{{ partial "utterances.html" . }} +{{ end }} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/utterances.html b/layouts/partials/utterances.html index 9b05863..8a4325f 100644 --- a/layouts/partials/utterances.html +++ b/layouts/partials/utterances.html @@ -1,18 +1,8 @@ -