fix mermaid

assets/css/atom.scss

@@ -36,6 +36,10 @@
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-baseline {
   align-items: baseline;
 }
@@ -78,6 +82,11 @@ $texts: (xs, 0.75), (sm, 0.875), (base, 1), (lg, 1.125), (xl, 1.25),
   white-space: nowrap;
 }
 
+.list-disc {
+  list-style-type: disc;
+  padding-inline-start: 22px;
+}
+
 /* interactivity */
 .cursor-pointer {
   cursor: pointer;

assets/css/syntax.scss

@@ -3,7 +3,7 @@
 }
 
 .chroma {
-  background-color: #292929;
+  background-color: #222222;
   margin: .5em 0;
 }
 

assets/js/main.js

@@ -1,6 +1,8 @@
 import { setup_theme_switch } from "./theme"
-import "./style";
-import "./selectable";
+import { fix_checkbox_list_style } from "./style"
+import { setup_selectable } from './selectable'
 
 
 setup_theme_switch('theme-switch')
+setup_selectable()
+fix_checkbox_list_style('.md ul')

assets/js/selectable.js

@@ -1,4 +1,6 @@
-const selectable = '{{ .Site.Params.selectable }}'
-if (selectable === 'false') {
+export function setup_selectable () {
+  const selectable = '{{ .Site.Params.selectable }}'
+  if (selectable === 'false') {
     document.documentElement.style = 'user-select:none'
+  }
 }

assets/js/style.js

@@ -1,11 +1,8 @@
-// fix style of checked/unchecked list items
-document.querySelectorAll('.md ul').forEach(v => {
+/** @param {string} selectors */
+export function fix_checkbox_list_style(selectors) {
+  document.querySelectorAll(selectors).forEach(v => {
     if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) {
-    console.log(v);
       v.classList.add('ul-checkbox');
     }
-});
-
-
-// // use custom font family
-// document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');
+  });
+}

assets/js/theme.js

@@ -53,16 +53,14 @@ function switch_minima_theme(current, next) {
 
 /** @param {string} theme  */
 function switch_utterances_theme(theme) {
-    if (!utterances) {
-        utterances = document.querySelector('iframe.utterances-frame')
-    }
+    utterances =utterances || document.querySelector('iframe.utterances-frame')
+    if (!utterances) return
     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 = giscus || document.querySelector('iframe.giscus-frame')
+    if (!giscus) return
     giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app')
 }

exampleSite/content/markdown-syntax.md

@@ -3,8 +3,9 @@ author: "Hugo Authors"
 title: "Markdown Syntax Guide"
 date: "2021-07-18T10:52:59+08:00"
 description: "Sample article showcasing basic Markdown syntax."
-categories: ["markdown"]
-tags: ["markdown"]
+categories:
+tags:
+  - markdown
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
@@ -100,7 +101,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 type Registry interface {
     Register(*Service, ...RegisterOption) error
     Deregister(*Service, ...DeregisterOption) error
-    GetService(string, ...GetOption) ([]*Service, error)
+    List(string, ...ListOption) ([]*Service, error)
 }
 ```
 

exampleSite/content/markdown-syntax.zh-cn.md

@@ -3,8 +3,9 @@ author: "Mivinci"
 title: "Markdown 语法指北"
 date: "2021-07-18T10:52:59+08:00"
 description: "一篇 Markdown 示例文章，翻译自官方示例。"
-categories: ["markdown"]
-tags: ["markdown"]
+categories:
+tags:
+  - markdown
 ---
 
 本文提供了一个可以在 Hugo 内容文件中使用的基本 Markdown 语法示例，还展示了基本 HTML 元素是否在 Hugo 主题中使用 CSS 进行修饰。
@@ -100,7 +101,7 @@ blockquote 元素表示从另一个来源引用的内容，可选地带有必须
 type Registry interface {
     Register(*Service, ...RegisterOption) error
     Deregister(*Service, ...DeregisterOption) error
-    GetService(string, ...GetOption) ([]*Service, error)
+    List(string, ...ListOption) ([]*Service, error)
 }
 ```
 

layouts/_default/single.html

@@ -21,7 +21,7 @@
     </div>
     {{ end }}
   </div>
-  <main>
+  <main class="mb-8">
     <p>{{ .Description | markdownify | safeHTML }}</p>
     <article class="md">
       {{ .Content }}

layouts/_default/terms.html

@@ -1,16 +1,15 @@
 {{ define "main" }}
 <main class="container mx-auto">
-  <h2 class="text-3xl font-bold">{{ .Title }}</h2>
-  <nav class="flex flex-col">
+  <h2 class="text-3xl font-bold mb-3">{{ .Title }}</h2>
+  <ul class="list-disc">
   {{ $data := .Data }}
-    {{ range $key, $value := .Data.Terms.ByCount }}
-    <div class="mb-5 flex justify-between">
-      <a class="self-start" href="{{ $data.Plural | relLangURL }}/{{ $value.Name }}">
-        {{ $value.Name }}
-      </a>
-      <span class="">{{ $value.Count }}</span>
-    </div>
+  {{ range $key, $value := $data.Terms.ByCount }}
+    <li>
+      <a class="text-lg" href="{{ $data.Plural | relLangURL }}/{{ $value.Name }}">{{ $value.Name }}</a>
+      <span class="text-sm font-semibold ml-1">{{ $value.Count }}</span>
+    </li>
   {{ end }}
+  </ul>
   </nav>
 </main>
 {{ end }}

layouts/partials/item.html

@@ -1,12 +1,12 @@
 <div>
-  <div class="flex justify-between">
+  <div class="flex justify-between items-start">
     {{ if .Page.Params.link }}
     <a class="text-lg font-bold" href="{{ .Page.Params.link }}">{{ .Title }}</a>
     {{ else }}
     <a class="text-lg font-bold" href="{{ .RelPermalink }}">{{ .Title }}</a>
     {{ end }}
     {{ if .Site.Params.displayDate }}
-    <div class="text-sm font-bold">{{ .Date | time.Format (T "timeformat") }}</div>
+    <div class="text-sm font-bold whitespace-nowrap">{{ .Date | time.Format (T "timeformat") }}</div>
     {{ end }}
   </div>
   {{ if .Site.Params.displayDescription }}

layouts/partials/mermaid.html

@@ -3,5 +3,5 @@
   crossorigin="anonymous">
 </script>
 <script>
-  mermaid.init({theme: 'dark'}, 'code.language-mermaid')
+  mermaid.init(undefined, 'code.language-mermaid')
 </script>

layouts/partials/plugin.html

@@ -1,5 +1,9 @@
+<script>
+  window.minima_theme = localStorage.getItem('theme')
+</script>
+
 {{ if or .Params.math .Site.Params.math }}
-{{ partial "math.html" . }}
+{{ partial "katex.html" . }}
 {{ end }}
 
 {{ if or .Params.mermaid .Site.Params.mermaid }}

layouts/shortcodes/mermaid.html

@@ -1 +0,0 @@
-<p class="mermaid">{{ safeHTML .Inner }}</p>