From 550745e727084ceda8608cf9d03706281d494e12 Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Thu, 1 Jul 2021 09:05:26 +0200 Subject: [PATCH] feat: add katex math typesetting shortcode (#157) --- .dictionary | 3 ++ .drone.yml | 4 +- .gitignore | 1 + .vnuignore | 1 + exampleSite/content/features/icon-sets.md | 2 +- exampleSite/content/shortcodes/buttons.md | 4 ++ exampleSite/content/shortcodes/columns.md | 4 ++ exampleSite/content/shortcodes/expand.md | 4 ++ exampleSite/content/shortcodes/hints.md | 4 ++ .../content/shortcodes/{icon.md => icons.md} | 4 ++ .../content/shortcodes/images/_index.md | 1 + exampleSite/content/shortcodes/includes.md | 3 +- exampleSite/content/shortcodes/katex.md | 39 +++++++++++++++++++ exampleSite/content/shortcodes/mermaid.md | 4 ++ exampleSite/content/shortcodes/tabs.md | 10 +++-- exampleSite/content/shortcodes/toc-tree.md | 4 ++ exampleSite/content/shortcodes/toc.md | 4 ++ exampleSite/content/toc-tree/_index.md | 2 +- gulpfile.js | 30 ++++++++++++-- layouts/shortcodes/katex.html | 14 +++++++ package-lock.json | 15 +++++++ package.json | 1 + src/js/katex-loader.js | 3 ++ src/js/mermaid-loader.js | 2 - 24 files changed, 149 insertions(+), 14 deletions(-) create mode 100644 .vnuignore rename exampleSite/content/shortcodes/{icon.md => icons.md} (96%) create mode 100644 exampleSite/content/shortcodes/katex.md create mode 100644 layouts/shortcodes/katex.html create mode 100644 src/js/katex-loader.js diff --git a/.dictionary b/.dictionary index c0b0826..079d263 100644 --- a/.dictionary +++ b/.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 diff --git a/.drone.yml b/.drone.yml index 1e01370..545b45a 100644 --- a/.drone.yml +++ b/.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 ... diff --git a/.gitignore b/.gitignore index 88eaa76..022e3b5 100644 --- a/.gitignore +++ b/.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/ diff --git a/.vnuignore b/.vnuignore new file mode 100644 index 0000000..6c7a7cf --- /dev/null +++ b/.vnuignore @@ -0,0 +1 @@ +.*border-content.* diff --git a/exampleSite/content/features/icon-sets.md b/exampleSite/content/features/icon-sets.md index f7c6b61..6f84b74 100644 --- a/exampleSite/content/features/icon-sets.md +++ b/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 diff --git a/exampleSite/content/shortcodes/buttons.md b/exampleSite/content/shortcodes/buttons.md index 322545c..3367373 100644 --- a/exampleSite/content/shortcodes/buttons.md +++ b/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 diff --git a/exampleSite/content/shortcodes/columns.md b/exampleSite/content/shortcodes/columns.md index 52fdf0d..46a5b22 100644 --- a/exampleSite/content/shortcodes/columns.md +++ b/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 diff --git a/exampleSite/content/shortcodes/expand.md b/exampleSite/content/shortcodes/expand.md index 8945037..4412c9f 100644 --- a/exampleSite/content/shortcodes/expand.md +++ b/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 diff --git a/exampleSite/content/shortcodes/hints.md b/exampleSite/content/shortcodes/hints.md index a44d2c3..c9b2d53 100644 --- a/exampleSite/content/shortcodes/hints.md +++ b/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`. diff --git a/exampleSite/content/shortcodes/icon.md b/exampleSite/content/shortcodes/icons.md similarity index 96% rename from exampleSite/content/shortcodes/icon.md rename to exampleSite/content/shortcodes/icons.md index 6db31b3..a12cd8b 100644 --- a/exampleSite/content/shortcodes/icon.md +++ b/exampleSite/content/shortcodes/icons.md @@ -1,3 +1,7 @@ +--- +title: Icons +--- + Simple shortcode to include icons from SVG sprites outside of menus. ```tpl diff --git a/exampleSite/content/shortcodes/images/_index.md b/exampleSite/content/shortcodes/images/_index.md index 9f4d310..0ad7b6f 100644 --- a/exampleSite/content/shortcodes/images/_index.md +++ b/exampleSite/content/shortcodes/images/_index.md @@ -1,4 +1,5 @@ --- +title: Images resources: - name: forest-1 src: "forest-1.jpg" diff --git a/exampleSite/content/shortcodes/includes.md b/exampleSite/content/shortcodes/includes.md index b54b262..76e5913 100644 --- a/exampleSite/content/shortcodes/includes.md +++ b/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 >}} diff --git a/exampleSite/content/shortcodes/katex.md b/exampleSite/content/shortcodes/katex.md new file mode 100644 index 0000000..d9d7392 --- /dev/null +++ b/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 +{{}} +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +{{}} +``` + +<---> + + + +{{< katex display >}} +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +{{< /katex >}} + + + +{{< /columns >}} + +KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with a `display` setting. for example `display: block`: + + + +{{< katex display >}} +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +{{< /katex >}} + + + +Text continues here. diff --git a/exampleSite/content/shortcodes/mermaid.md b/exampleSite/content/shortcodes/mermaid.md index 1bb743e..5ef14b9 100644 --- a/exampleSite/content/shortcodes/mermaid.md +++ b/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 diff --git a/exampleSite/content/shortcodes/tabs.md b/exampleSite/content/shortcodes/tabs.md index e396ce0..7a16a44 100644 --- a/exampleSite/content/shortcodes/tabs.md +++ b/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. diff --git a/exampleSite/content/shortcodes/toc-tree.md b/exampleSite/content/shortcodes/toc-tree.md index 5528f22..14808be 100644 --- a/exampleSite/content/shortcodes/toc-tree.md +++ b/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 diff --git a/exampleSite/content/shortcodes/toc.md b/exampleSite/content/shortcodes/toc.md index 4911001..c2bd847 100644 --- a/exampleSite/content/shortcodes/toc.md +++ b/exampleSite/content/shortcodes/toc.md @@ -1,3 +1,7 @@ +--- +title: ToC +--- + Simple wrapper to generate a page Table of Content from a shortcode. ```tpl diff --git a/exampleSite/content/toc-tree/_index.md b/exampleSite/content/toc-tree/_index.md index fc69826..f09adda 100644 --- a/exampleSite/content/toc-tree/_index.md +++ b/exampleSite/content/toc-tree/_index.md @@ -1,5 +1,5 @@ --- -title: ToC Tree +title: ToC-Tree geekdocFlatSection: true --- diff --git a/gulpfile.js b/gulpfile.js index 05c194d..349f16b 100644 --- a/gulpfile.js +++ b/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")); diff --git a/layouts/shortcodes/katex.html b/layouts/shortcodes/katex.html new file mode 100644 index 0000000..47698e8 --- /dev/null +++ b/layouts/shortcodes/katex.html @@ -0,0 +1,14 @@ +{{ if not (.Page.Scratch.Get "katex") }} + + + + + +{{ .Page.Scratch.Set "katex" true }} +{{ end }} + + + {{ cond (in .Params "display") "\\[" "\\(" -}} + {{- trim .Inner "\n" -}} + {{- cond (in .Params "display") "\\]" "\\)" }} + diff --git a/package-lock.json b/package-lock.json index df118c8..e9cbd63 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d045937..7f9dd19 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "clipboard": "2.0.8", "flexsearch": "0.7.1", + "katex": "0.13.11", "mermaid": "8.10.2" }, "devDependencies": { diff --git a/src/js/katex-loader.js b/src/js/katex-loader.js new file mode 100644 index 0000000..18931f8 --- /dev/null +++ b/src/js/katex-loader.js @@ -0,0 +1,3 @@ +document.addEventListener("DOMContentLoaded", function () { + renderMathInElement(document.body); +}); diff --git a/src/js/mermaid-loader.js b/src/js/mermaid-loader.js index ee00577..ef2beab 100644 --- a/src/js/mermaid-loader.js +++ b/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)