feat: add katex math typesetting shortcode (#157)

.dictionary

@@ -4,6 +4,7 @@ Shpak
 (S|s)hortcode[s]?
 hugo-book
 ToC
+ToC-Tree
 toc
 macOS
 SVG
@@ -24,3 +25,5 @@ prebuilt
 whitespace
 relref
 href
+KaTeX
+katex

.drone.yml

@@ -25,7 +25,7 @@ steps:
 - name: html-validation
   image: thegeeklab/vnu
   commands:
-  - vnu --skip-non-html --also-check-css --errors-only exampleSite/public
+  - vnu --skip-non-html --also-check-css --errors-only --filterfile .vnuignore exampleSite/public
 
 - name: link-validation
   image: thegeeklab/link-validator
@@ -275,6 +275,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: f50ce7eb9ad9db8f6813bad0af73022fa67d8d2b4e263629eeadcede12108c41
+hmac: eab38beb69658699f03b9ce6ad2c70c5040f6fd028af08fcdaf27384cc61ab45
 
 ...

.gitignore

@@ -16,6 +16,7 @@ static/*.min.css.map
 static/js/
 static/favicon/
 static/fonts/GeekdocIcons.*
+static/fonts/KaTeX_*
 resources/
 exampleSite/resources/
 exampleSite/data/sprites/

.vnuignore

@@ -0,0 +1 @@
+.*border-content.*

exampleSite/content/features/icon-sets.md

@@ -39,7 +39,7 @@ my_projcet/
 │   ├── ...
 ```
 
-That's it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons e.g. in the [bundle menu](/usage/menus/#bundle-menu), you need to lookup the id of the icon. An example would be `thumbs-up` {{< icon "thumbs-up" >}}. There is also a [shortcode](/shortcodes/icon/) available.
+That's it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons e.g. in the [bundle menu](/usage/menus/#bundle-menu), you need to lookup the id of the icon. An example would be `thumbs-up` {{< icon "thumbs-up" >}}. There is also a [shortcode](/shortcodes/icons/) available.
 
 ## Build-in icons
 

exampleSite/content/shortcodes/buttons.md

@@ -1,3 +1,7 @@
+---
+title: Buttons
+---
+
 Buttons are styled links that can lead to local page or external link.
 
 ```tpl

exampleSite/content/shortcodes/columns.md

@@ -1,3 +1,7 @@
+---
+title: Columns
+---
+
 The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
 
 ```html

exampleSite/content/shortcodes/expand.md

@@ -1,3 +1,7 @@
+---
+title: Expand
+---
+
 Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.
 
 ## Example

exampleSite/content/shortcodes/hints.md

@@ -1,3 +1,7 @@
+---
+title: Hints
+---
+
 Hint shortcode can be used as hint/alerts/notification block.
 There are four colors to choose: `info`, `ok`, `warning` and `danger`.
 

exampleSite/content/shortcodes/icons.md

@@ -1,3 +1,7 @@
+---
+title: Icons
+---
+
 Simple shortcode to include icons from SVG sprites outside of menus.
 
 ```tpl

exampleSite/content/shortcodes/images/_index.md

@@ -1,4 +1,5 @@
 ---
+title: Images
 resources:
   - name: forest-1
     src: "forest-1.jpg"

exampleSite/content/shortcodes/includes.md

@@ -1,6 +1,5 @@
 ---
-# Empty front matter as shortcodes could not be includes
-# as first line of a file.
+title: Includes
 ---
 
 {{< toc >}}

exampleSite/content/shortcodes/katex.md

@@ -0,0 +1,39 @@
+---
+title: KaTeX
+---
+
+[KaTeX](https://katex.org/) shortcode let you render math typesetting in markdown document.
+
+## Example
+
+{{< columns >}}
+
+```latex
+{{</* katex [display] [class="text-center"] */>}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{</* /katex */>}}
+```
+
+<--->
+
+<!-- spellchecker-disable -->
+<!-- prettier-ignore -->
+{{< katex display >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+
+<!-- spellchecker-enable -->
+
+{{< /columns >}}
+
+KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with a `display` setting. for example `display: block`:
+
+<!-- spellchecker-disable -->
+<!-- prettier-ignore -->
+{{< katex display >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+
+<!-- spellchecker-enable -->
+
+Text continues here.

exampleSite/content/shortcodes/mermaid.md

@@ -1,3 +1,7 @@
+---
+title: Mermaid
+---
+
 [Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
 
 ## Example

exampleSite/content/shortcodes/tabs.md

@@ -1,3 +1,7 @@
+---
+title: Tabs
+---
+
 Tabs let you organize content by context, for example installation instructions for each supported platform.
 
 ```tpl
@@ -13,7 +17,7 @@ Tabs let you organize content by context, for example installation instructions
 {{< tabs "uniqueid" >}}
 {{< tab "macOS" >}}
 
-# macOS
+## macOS
 
 This is tab **macOS** content.
 
@@ -25,7 +29,7 @@ fastidious copious quo ad. Stet probates in duo.
 
 {{< tab "Linux" >}}
 
-# Linux
+## Linux
 
 This is tab **Linux** content.
 
@@ -37,7 +41,7 @@ fastidious copious quo ad. Stet probates in duo.
 
 {{< tab "Windows" >}}
 
-# Windows
+## Windows
 
 This is tab **Windows** content.
 

exampleSite/content/shortcodes/toc-tree.md

@@ -1,3 +1,7 @@
+---
+title: ToC-Tree
+---
+
 The `toc-tree` shortcode will generate a Table of Content from a section file tree of your content directory. The root of the resulting ToC will be the page on which you define the shortcode.
 
 ```tpl

exampleSite/content/shortcodes/toc.md

@@ -1,3 +1,7 @@
+---
+title: ToC
+---
+
 Simple wrapper to generate a page Table of Content from a shortcode.
 
 ```tpl

exampleSite/content/toc-tree/_index.md

@@ -1,5 +1,5 @@
 ---
-title: ToC Tree
+title: ToC-Tree
 geekdocFlatSection: true
 ---
 

gulpfile.js

@@ -24,6 +24,7 @@ const through = require("through2");
 var BUILD = "build";
 var CSS_BUILD = BUILD + "/assets";
 var JS_BUILD = BUILD + "/assets/js";
+var FONTS = "static/fonts";
 var FAVICON_DATA_FILE = BUILD + "/faviconData.json";
 var TIMESTAMP = Math.round(Date.now() / 1000);
 
@@ -207,7 +208,7 @@ gulp.task("iconfont", function () {
         timestamp: TIMESTAMP,
       })
     )
-    .pipe(gulp.dest("static/fonts/"));
+    .pipe(gulp.dest(FONTS));
 });
 
 gulp.task("js", function () {
@@ -220,12 +221,14 @@ gulp.task("js", function () {
     .pipe(gulp.dest(JS_BUILD));
 });
 
-gulp.task("asset-sync", function () {
+gulp.task("asset-sync-js", function () {
   return gulp
     .src([
       "node_modules/clipboard/dist/clipboard.min.js",
       "node_modules/flexsearch/dist/flexsearch.compact.js",
       "node_modules/mermaid/dist/mermaid.min.js",
+      "node_modules/katex/dist/katex.min.js",
+      "node_modules/katex/dist/contrib/auto-render.min.js",
     ])
     .pipe(replace(/\/\/# sourceMappingURL=.+$/, ""))
     .pipe(
@@ -236,6 +239,24 @@ gulp.task("asset-sync", function () {
     .pipe(gulp.dest(JS_BUILD));
 });
 
+gulp.task("asset-sync-css", function () {
+  return gulp
+    .src(["node_modules/katex/dist/katex.min.css"])
+    .pipe(replace(/\/\/# sourceMappingURL=.+$/, ""))
+    .pipe(
+      rename(function (path) {
+        path.basename = path.basename.replace(/compact/, "min");
+      })
+    )
+    .pipe(gulp.dest(CSS_BUILD));
+});
+
+gulp.task("asset-sync-font", function () {
+  return gulp
+    .src(["node_modules/katex/dist/fonts/KaTeX_*"])
+    .pipe(gulp.dest(FONTS));
+});
+
 gulp.task("asset-rev", function () {
   return gulp
     .src(
@@ -283,7 +304,10 @@ gulp.task("clean", function () {
 
 /* Task series */
 
-gulp.task("asset", gulp.series("asset-sync", "asset-rev"));
+gulp.task(
+  "asset",
+  gulp.series("asset-sync-font", "asset-sync-css", "asset-sync-js", "asset-rev")
+);
 
 gulp.task("svg", gulp.series("svg-sprite"));
 

layouts/shortcodes/katex.html

@@ -0,0 +1,14 @@
+{{ if not (.Page.Scratch.Get "katex") }}
+<!-- Include katext only first time -->
+<link rel="stylesheet" href="{{ index .Site.Data.assets "katex.min.css" | relURL }}" />
+<script defer src="{{ index .Site.Data.assets "js/katex.min.js" | relURL }}"></script>
+<script defer src="{{ index .Site.Data.assets "js/auto-render.min.js" | relURL }}"></script>
+<script defer src="{{ index .Site.Data.assets "js/katex-loader.min.js" | relURL }}"></script>
+{{ .Page.Scratch.Set "katex" true }}
+{{ end }}
+
+<span class="gdoc-katex katex{{ with .Get "class" }} {{ . }}{{ end }}">
+  {{ cond (in .Params "display") "\\[" "\\(" -}}
+  {{- trim .Inner "\n" -}}
+  {{- cond (in .Params "display") "\\]" "\\)" }}
+</span>

package-lock.json

@@ -4393,6 +4393,21 @@
       "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==",
       "dev": true
     },
+    "katex": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.13.11.tgz",
+      "integrity": "sha512-yJBHVIgwlAaapzlbvTpVF/ZOs8UkTj/sd46Fl8+qAf2/UiituPYVeapVD8ADZtqyRg/qNWUKt7gJoyYVWLrcXw==",
+      "requires": {
+        "commander": "^6.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
+        }
+      }
+    },
     "kew": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "clipboard": "2.0.8",
     "flexsearch": "0.7.1",
+    "katex": "0.13.11",
     "mermaid": "8.10.2"
   },
   "devDependencies": {

src/js/katex-loader.js

@@ -0,0 +1,3 @@
+document.addEventListener("DOMContentLoaded", function () {
+  renderMathInElement(document.body);
+});

src/js/mermaid-loader.js

@@ -4,8 +4,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
   let primaryColor = "#ececff";
   let darkMode = false;
 
-  console.log(currentMode);
-
   if (
     currentMode === DARK_MODE ||
     (currentMode === AUTO_MODE && darkModeQuery.matches)