mermaid support

Makefile

@@ -4,7 +4,8 @@ themeDir=../..
 .PHONY: dev, build, clean
 
 dev:
-	hugo server -D -s $(source) --themesDir $(themeDir)
+	rm -r exampleSite/resources
+	hugo server -D -s $(source) --themesDir $(themeDir) --disableFastRender
 
 build:
 	hugo -D --gc --minify -s $(source) --themesDir $(themeDir)

README.md

@@ -9,6 +9,7 @@ A Clean and minimal Hugo theme porting from Minima on Hexo. [Click me](https://h
 - [x] light/dark mode
 - [x] Code Hightlight
 - [x] KaTeX
+- [x] Mermaid
 - [x] Google analytics
 - [x] Disqus/OvO comments
 - [x] Optional ToC 
@@ -46,13 +47,15 @@ Follow [exampleSite/config.toml](https://github.com/Mivinci/hugo-theme-minima/bl
 | title       | string | Title of the post, will be rendered in a `h1` tag      |
 | description | string | Description of the post, will be rendered in a `p` tag |
 | date        | string | Datetime that the post is written                      |
-| math        | bool   | True if the post needs to render math formulas         |
-| comment     | bool   | True if the post allows people to make comments        |
-| draft       | bool   | True if the post isn't already to production           |
-| toc         | bool   | True if the post needs a ToC                           |
 | categories  | array  | Array of categories the posts belongs to               |
 | series      | array  | Array of series the post belongs to                    |
 | tags        | array  | Array of tags the posts is related to                  |
+| math        | bool   | True if the post needs to render math formulas         |
+| mermaid     | bool   | True if the post needs to render mermaid graphs        |
+| comment     | bool   | True if the post allows people to make comments        |
+| draft       | bool   | True if the post isn't already to production           |
+| toc         | bool   | True if the post needs a ToC                           |
+
 
 
 ### Feedback

exampleSite/config.toml

@@ -25,6 +25,8 @@ subtitle = ""
 # Comment decides the comment plugin used on your blog site, 
 # available plugins: disqus, ovo.
 comment = "disqus"
+# timeformat 
+timeformat = "Jan 2, 2006"
 
 
 # OvO is a comment plugin written by the author of Minima. 

exampleSite/content/about.md

@@ -1,7 +1,7 @@
 ---
 title: "About"
-date: 2021-07-18T11:24:06+08:00
+date: 2021-07-16T11:24:06+08:00
-draft: true
+draft: false
 type: about
 ---
 

exampleSite/content/an_empty_file.md

@@ -1,7 +0,0 @@
----
-author: Hugo Authors
-title: An Empty File
-date: 2021-06-18T10:52:59+08:00
-description: This is an empty file.
-math: true
----

exampleSite/content/emoji-support.md

@@ -1,46 +0,0 @@
-+++
-author = "Hugo Authors"
-title = "Emoji Support"
-date = "2021-07-18T10:52:59+08:00"
-description = "Guide to emoji usage in Hugo"
-comment = true
-+++
-
-`THERE ARE SOMETHING`
-
-Emoji can be enabled in a Hugo project in a number of ways. 
-<!--more-->
-The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 
-
-To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
-
-<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
-<br>
-
-The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
-
-***
-
-**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
-
-{{< highlight html >}}
-.emoji {
-  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-}
-{{< /highlight >}}
-
-{{< css.inline >}}
-<style>
-.emojify {
-	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-	font-size: 2rem;
-	vertical-align: middle;
-}
-@media screen and (max-width:650px) {
-  .nowrap {
-    display: block;
-    margin: 25px 0;
-  }
-}
-</style>
-{{< /css.inline >}}

exampleSite/content/instruction.md

@@ -0,0 +1,67 @@
+---
+author: Hugo Authors
+title: Instruction
+date: 2021-07-19T10:52:59+08:00
+description: A Clean and minimal Hugo theme porting from Minima on Hexo. [Click me](https://h.xjj.pub/) to take a look at the demo site.
+math: true
+---
+
+
+
+## Features
+
+- [x] Light/dark mode
+- [x] Code Hightlight
+- [x] KaTeX
+- [x] Mermaid
+- [x] Google analytics
+- [x] Disqus/OvO comments
+- [x] Optional ToC 
+
+## Usage
+
+Before using Minima, make sure you've got Hugo(v0.41.0 or higher) installed on your device.
+
+### Installation
+
+Suppose `blog` is where you place your sources.
+
+```bash
+cd blog
+git init
+git submodule add --depth 1 https://github.com/mivinci/hugo-theme-minima.git themes/minima
+```
+
+Or  `clone` directly if you don't wanna use the Git submodule.
+
+```bash
+git clone https://github.com/mivinci/hugo-theme-minima.git themes/minima
+```
+
+Anyways, you just need to put Minima under the `blog/themes` directory.
+
+### Configuration
+
+Follow [exampleSite/config.toml](https://github.com/Mivinci/hugo-theme-minima/blob/main/exampleSite/config.toml) and edit your own `blog/config.toml` file.
+
+### Supported Front Matters
+
+| Field       | Type   | Explanation                                            |
+| :---------- | :----- | :----------------------------------------------------- |
+| title       | string | Title of the post, will be rendered in a `h1` tag      |
+| description | string | Description of the post, will be rendered in a `p` tag |
+| date        | string | Datetime that the post is written                      |
+| categories  | array  | Array of categories the posts belongs to               |
+| series      | array  | Array of series the post belongs to                    |
+| tags        | array  | Array of tags the posts is related to                  |
+| math        | bool   | True if the post needs to render math formulas         |
+| mermaid     | bool   | True if the post needs to render mermaid graphs        |
+| comment     | bool   | True if the post allows people to make comments        |
+| draft       | bool   | True if the post isn't already to production           |
+| toc         | bool   | True if the post needs a ToC                           |
+
+
+
+### Feedback
+
+Feedbacks are welcome [here](https://github.com/Mivinci/hugo-theme-minima/issues).

exampleSite/content/markdown-syntax.md

@@ -1,21 +1,11 @@
-+++
+---
-author = "Hugo Authors"
+author: "Hugo Authors"
-title = "Markdown Syntax Guide"
+title: "Markdown Syntax Guide"
-date = "2021-07-18T10:52:59+08:00"
+date: "2021-07-18T10:52:59+08:00"
-description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
-tags = [
+toc: true
-    "markdown",
+categories: ["Markdown"]
-    "css",
+---
-    "html",
-]
-categories = [
-    "themes",
-    "syntax",
-]
-series = ["Themes Guide"]
-aliases = ["migrate-from-jekyl"]
-toc = true
-+++
 
 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.
 <!--more-->
@@ -120,7 +110,8 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 2. Second item
 3. Third item
 
-- [x] xxx
+- [x] checked
+- [ ] not checked
 
 #### Unordered List
 
@@ -138,14 +129,3 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
   * Milk
   * Cheese
 
-## Other Elements — abbr, sub, sup, kbd, mark
-
-<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
-
-H<sub>2</sub>O
-
-X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
-
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

exampleSite/content/math-typesetting.md

@@ -4,6 +4,7 @@ title: Math Typesetting
 date: 2021-07-18T10:52:59+08:00
 description: A brief guide to setup KaTeX
 math: true
+categories: ["Markdown", "KaTeX"]
 ---
 
 Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

exampleSite/content/mermaid-graphs.md

@@ -0,0 +1,18 @@
+---
+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.
+
+{{<mermaid>}}
+graph LR
+    Start --> Stop
+{{</mermaid>}}
+
+For more documentations on Mermaid, view [mermaid](https://mermaid-js.github.io/mermaid).

exampleSite/content/placeholder-text.md

@@ -3,11 +3,8 @@ author = "Hugo Authors"
 title = "Placeholder Text"
 date = "2021-07-18T10:52:59+08:00"
 description = "Lorem Ipsum Dolor Si Amet"
-tags = [
-    "markdown",
-    "text",
-]
 toc = true
+categories = ["Markdown"]
 +++
 
 Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.

exampleSite/resources/_gen/assets/scss/sass/main.scss_39bf35e71bb037755f66ddebdcd2b350.content

@@ -1,3 +0,0 @@
-:root{--pm: #0fa0ce;--bd: #e1e1e1;--bg: #fff;--ft: #222;--tag: #333;--w-mobile: 640px}html.dark{--bg: #262d33;--ft: #c5c4c4;--bd: #555;--tag: #999;--ovo-ft: var(--ft);--ovo-bdr: var(--bd);--ovo-bg: var(--bg);--ovo-bg-hvr: #555;--ovo-tag: #30363d}body{font-family:Helvetica, sans-serif;max-width:var(--w-mobile);margin:50px auto 0;font-size:16px;font-weight:400;color:var(--ft);background-color:var(--bg);transition-property:background-color, border-color, color;transition-duration:.5s}h1,h2,h3,h4,h5{font-family:'Noto Serif SC', 'Times New Roman', sans-serif;font-weight:700;line-height:1.5}p{margin-top:0;line-height:1.5;text-align:left}hr{margin:30px 0;border-width:0;border-top:1px solid var(--bd)}pre,code{font-family:Menlo, Monaco, Consolas, "Courier New", monospace;font-size:13px}p code{background-color:var(--bd);padding:.2em .4em}a{text-decoration:none}a:not(.icon){color:inherit;text-decoration:underline;text-decoration-color:var(--pm);background-image:linear-gradient(to bottom, rgba(0,0,0,0) 50%, var(--pm) 50%);background-size:100% 200%;transition:background-position .2s ease-in-out}a:not(.icon):hover,a:not(.icon):focus{background-position:0 100%;color:#fff}a.icon:hover{transform:translateY(-5px);transition:transform .3s ease-in-out}main{animation:showup 0.7s}.row{display:flex;align-items:center}.col{display:flex;flex-direction:column}.jc-bt{justify-content:space-between}.as-s{align-self:start}.ai-c{align-items:center}.gap-0_5{gap:.8rem}.gap-1{gap:1rem;row-gap:1rem}.gap-2{gap:2rem;row-gap:2rem}.gap-3{gap:3rem;row-gap:3rem}.lg-1{font-size:1.2em}.sm-1{font-size:.8em}.mtb-1{margin:1em 0}.mtb-2{margin:2em 0}.mb-1{margin-bottom:1em}.mb-0{margin-bottom:0}.mt-2{margin-top:2em}.ml-1{margin-left:1em}.ml-2{margin-left:2em}.mr-2{margin-right:2em}.mw-6{min-width:6em}.c-tag{color:var(--tag)}.btn{cursor:pointer}.hidden{display:none}.tag-pm{font-size:.7em;font-weight:bold;line-height:1;color:#fff;background-color:var(--pm);border-radius:20px;padding:2px 8px}details.toc ul{list-style-type:none;padding-inline-start:1em;margin:0}details.toc ul>li{margin:1em 0}.nowrap{white-space:nowrap;overflow:auto}@keyframes showup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media (max-width: 640px){body{margin:1em 2em}.row-mob{flex-direction:column;align-items:flex-start;gap:0;row-gap:0}.al-c-mob{align-items:center}.col-rev-mob{flex-direction:column-reverse}.sm-2-mob{font-size:.9em}.mb-0_5-mob{margin-bottom:.5em}.mb-1_5-mob{margin-bottom:1.5em}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.7)}::-webkit-scrollbar-thumb:window-inactive{background:rgba(128,128,128,0.2)}::-webkit-scrollbar-thumb:active{background-color:gray}.nowrap::-webkit-scrollbar{display:none;width:0}.md blockquote{font-family:'Inter';background-color:rgba(148,148,149,0.08);margin:1.5em 0px;padding:1.1em 20px 1px 20px;border-left:8px solid var(--pm);font-style:italic}.md table{border-collapse:collapse;border-spacing:0;display:block;max-width:100%;width:100%;margin:1em 0;overflow:auto}.md table th{background-color:var(--bg)}.md table th,table td{padding:10px 20px;border:1px solid var(--bd)}.md img{width:100%;max-width:100%}.md li{margin-top:.5em}.md .katex{overflow:auto hidden}pre[class*="language-"],code[class*="language-"]{color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Courier New", monospace;line-height:1.5;color:#d4d4d4}.chroma{background-color:#292929;margin:.5em 0}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .lnt{color:#999;display:block;padding-left:.5em;padding-right:1em;text-align:right;line-height:1.5;font-size:13px}.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr,.chroma .kt,.chroma .k,.chroma .si{color:#569cd6}.chroma .na{color:#9cdcfe}.chroma .n,.chroma .nb,.chroma .bp,.chroma .nc,.chroma .no,.chroma .nd,.chroma .ni,.chroma .ne,.chroma .nf,.chroma .fm,.chroma .nl,.chroma .nn{color:#3f4c50}.chroma .py,.chroma .nt,.chroma .nv,.chroma .vc,.chroma .vg,.chroma .vi,.chroma .vm{color:#569cd6}.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,.chroma .s2,.chroma .se,.chroma .sh,.chroma .sx,.chroma .sr,.chroma .s1,.chroma .ss{color:#ce9178}.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .il,.chroma .mo{color:#b5cea8}.chroma .c,.chroma .ch,.chroma .cm,.chroma .c1,.chroma .cs{color:#517043}
-
-/*# sourceMappingURL=minima.1629301135.css.map */

exampleSite/resources/_gen/assets/scss/sass/main.scss_39bf35e71bb037755f66ddebdcd2b350.json

@@ -1 +0,0 @@
-{"Target":"minima.1629301135.css","MediaType":"text/css","Data":{}}

layouts/_default/single.html

@@ -5,14 +5,14 @@
 <main>
 	<h1>{{ .Title }}</h1>
 	<div class="sm-1 mtb-1">
-		Posted at &mdash; {{ dateFormat "Jan 2, 2006" .Date }}
+		Posted at &mdash; {{ dateFormat .Site.Params.timeformat .Date }}
 		{{ if .Draft }}
 		<span class="tag ml-1">
 			DRAFT
 		</span>
 		{{ end }}
 	</div>
-	<p>{{ .Description }}</p>
+	<p>{{ .Description | markdownify | safeHTML }}</p>
 	<article class="md">
 		{{ .Content }}
 	</article>
@@ -21,6 +21,10 @@
 {{ partial "math.html" . }}
 {{ end }}
 
+{{ if or .Params.mermaid .Site.Params.mermaid }}
+{{ partial "mermaid.html" . }}
+{{ end }}
+
 {{ if and .Params.comment (eq .Site.Params.comment "disqus")}}
 {{ partial "disqus.html" . }}
 {{ end }}

layouts/index.html

@@ -12,7 +12,7 @@
 			{{ $paginator := .Paginate (where .Site.RegularPages "Kind" "page") }}
 			{{ range $paginator.Pages }}
 				<div class="row row-mob mb-1 mb-1_5-mob gap-3">
-					<div class="sm-2-mob mb-0_5-mob mw-6">{{ dateFormat "Jan 2, 2006" .Date }}</div>
+					<div class="sm-2-mob mb-0_5-mob mw-6">{{ dateFormat .Site.Params.timeformat .Date }}</div>
 					<a href="{{ .RelPermalink }}">{{ .Title }}</a>
 				</div>
 			{{ end }}

layouts/partials/head.html

@@ -19,13 +19,14 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap"
     rel="stylesheet">
-  <link rel="stylesheet" href="https://unpkg.com/normalize.css">
   {{ $hash := now.Unix }}
   {{ $options := (dict "targetPath" (printf `minima.%d.css` $hash) "outputStyle" "compressed" "enableSourceMap" true) }}
   {{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
 
-  <script src="/js/main.js"></script>
+  {{ $options := (dict "targetPath" (printf `minima.%d.js` $hash) "minify" true) }}
+  {{ $js := resources.Get "js/main.js" | js.Build $options }}
+  <script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script>
 </head>
 <script>
   try {

layouts/partials/mermaid.html

@@ -0,0 +1,4 @@
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
+  mermaid.initialize({ startOnLoad: true });
+</script>

layouts/shortcodes/mermaid.html

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

static/js/main.js

@@ -1,21 +0,0 @@
-window.addEventListener('DOMContentLoaded', function () {
-  const light = '🌝', dark = '🌚';
-  const LIGHT = 'light', DARK = 'dark';
-  const themeSwitcher = document.getElementById('theme-switcher');
-
-  themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark;
-
-  themeSwitcher.addEventListener('click', function () {
-    const currentTheme = localStorage.theme,
-      newTheme = currentTheme === LIGHT ? DARK : LIGHT,
-      { classList } = document.querySelector('html'),
-      text = newTheme === LIGHT ? light : dark;
-    classList.remove(currentTheme);
-    classList.add(newTheme);
-    localStorage.theme = newTheme;
-    themeSwitcher.innerHTML = text;
-  });
-
-
-  
-});