From ca22b6115b45931187ecc5e3001eb252ade169f3 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Thu, 9 Jun 2022 21:57:10 -0700 Subject: Add Theme Switcher --- content/overview-abridge.md | 2 +- content/overview-code-blocks.md | 8 +-- content/overview-math.md | 112 +++++++++++++++++++++++++++++++++++++ content/overview-math/index.md | 121 ---------------------------------------- content/overview-math/katex.png | Bin 67960 -> 0 bytes 5 files changed, 117 insertions(+), 126 deletions(-) create mode 100644 content/overview-math.md delete mode 100644 content/overview-math/index.md delete mode 100644 content/overview-math/katex.png (limited to 'content') diff --git a/content/overview-abridge.md b/content/overview-abridge.md index 408e500..147740c 100644 --- a/content/overview-abridge.md +++ b/content/overview-abridge.md @@ -7,7 +7,7 @@ categories = ["Features"] tags = ["config"] +++ -Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons, no mandatory JS, and perfect [Lighthouse](https://web.dev/measure/?url=https%3A%2F%2Fabridge.netlify.app) and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. +Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before svg icons and syntax highlighting, no mandatory JS, and perfect [Lighthouse](https://web.dev/measure/?url=https%3A%2F%2Fabridge.netlify.app) and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. For quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used. diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md index 7a9c835..16c3409 100644 --- a/content/overview-code-blocks.md +++ b/content/overview-code-blocks.md @@ -120,12 +120,12 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); { "name": "Abridge Zola Theme", "short_name": "Abridge", - "start_url": "https://abridge.netlify.app/", "description": "Fast & Lightweight Zola Theme", + "start_url": "/index.html", "scope": "/", - "display": "standalone", - "theme_color": "#222222", "background_color": "#111111", + "theme_color": "#222222", + "display": "standalone", "icons": [ { "src": "/android-chrome-192x192.png", @@ -138,7 +138,7 @@ $_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); "type": "image/png" }, { - "src": "/android-chrome-192x192x128m.png", + "src": "/android-chrome-192x192m.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" diff --git a/content/overview-math.md b/content/overview-math.md new file mode 100644 index 0000000..2e704da --- /dev/null +++ b/content/overview-math.md @@ -0,0 +1,112 @@ ++++ +title = "Mathematical Notations" +description = "Sample article showcasing the display of Mathematical Notations, made possible by the KaTeX library." +date = 2021-05-05 +updated = 2022-01-01 +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","Mathematics"] +[extra] +math = true +math_auto_render = true +keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation" ++++ + +You can use [KaTeX](https://katex.org) to render mathematical notations. + +You can enable the $\KaTeX$ support globally, per-section or per-page basis. + + +## Enable Globally + +To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml` +at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true` +and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). + +```toml +[extra] +math = true +math_auto_render = false +``` + +## Per-section Basis + +To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. +Now the katex shortcode will be rendered, you can also add `math_auto_render = true` +and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). + +```toml ++++ +[extra] +math = true ++++ +``` + +## Per-page Basis + +To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's +frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true` +and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). + +```toml ++++ +[extra] +math = true +math_auto_render = true ++++ +``` + +It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the +required files on that particular page, without affecting the page load speed of other pages. +If your site is not math-heavy, please do NOT enable this feature globally or per-section basis. + +## Usage + +Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline +Mathematics and `$$...$$` for block Mathematics. + +### Inline Mathematics + +This is the most beautiful equation I've ever seen: + +### Usage +```rs +{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%} +``` +### Output +```html +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} +``` +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} + +### Block Mathematics + +Some Mathematics in display mode is fair enough: + +### Usage +```rs +{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%} +``` +### Output +```html +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} +``` +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} + +### Auto Render Inline Example +``` +$ e^{i\pi}+1=0 $ +``` + +$ e^{i\pi}+1=0 $ + +### Auto Render Block Example +``` +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ +``` + +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ diff --git a/content/overview-math/index.md b/content/overview-math/index.md deleted file mode 100644 index 88f5df4..0000000 --- a/content/overview-math/index.md +++ /dev/null @@ -1,121 +0,0 @@ -+++ -title = "Mathematical Notations" -description = "Sample article showcasing the display of Mathematical Notations, made possible by the KaTeX library." -date = 2021-05-05 -updated = 2022-01-01 -[taxonomies] -categories = ["Features"] -tags = ["shortcodes","Mathematics"] -[extra] -math = true -math_auto_render = true -keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation" -+++ - -You can use [KaTeX](https://katex.org) to render mathematical notations. - -You can enable the $\KaTeX$ support globally, per-section or per-page basis. - -# CSP Note - -KaTeX unfortunately requires `script-src 'unsafe-inline'` in the Content Security Policy. This is a security vulnerability, so this page will not render KaTeX correctly because this demo site uses best security practices. I have taken a picture below to show you what some of these formulas look like should you enable KaTeX. - -KaTeX js is designed to work even with dynamic content, but because Zola is a SSG it seems to me the best solution is to avoid using this javascript all-together, process our markdown files similar to how KaTeX autorender does, but do it during zola build. insert some `` ...etc so that we basically render it during the build process. If complex mathematics were part of my daily life then I might be motivated to write such code for Zola. - -You will also see this page rendered correctly if you git clone this repo and use `zola serve` because then there will be no Content Security Policy in place. - -{{ img(src="katex.png" alt="KaTeX" w=568 h=1014) }} - -## Enable Globally - -To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml` -at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true` -and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). - -```toml -[extra] -math = true -math_auto_render = false -``` - -## Per-section Basis - -To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. -Now the katex shortcode will be rendered, you can also add `math_auto_render = true` -and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). - -```toml -+++ -[extra] -math = true -+++ -``` - -## Per-page Basis - -To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's -frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true` -and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). - -```toml -+++ -[extra] -math = true -math_auto_render = true -+++ -``` - -It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the -required files on that particular page, without affecting the page load speed of other pages. -If your site is not math-heavy, please do NOT enable this feature globally or per-section basis. - -## Usage - -Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline -Mathematics and `$$...$$` for block Mathematics. - -### Inline Mathematics - -This is the most beautiful equation I've ever seen: - -### Usage -```rs -{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%} -``` -### Output -```html -{% katex(block=false) %} e^{i\pi}+1=0 {% end %} -``` -{% katex(block=false) %} e^{i\pi}+1=0 {% end %} - -### Block Mathematics - -Some Mathematics in display mode is fair enough: - -### Usage -```rs -{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%} -``` -### Output -```html -{% katex(block=true) %} \int_0^1 x^2 dx {% end %} -``` -{% katex(block=true) %} \int_0^1 x^2 dx {% end %} - -### Auto Render Inline Example -``` -$ e^{i\pi}+1=0 $ -``` - -$ e^{i\pi}+1=0 $ - -### Auto Render Block Example -``` -$$ -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -$$ -``` - -$$ -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -$$ diff --git a/content/overview-math/katex.png b/content/overview-math/katex.png deleted file mode 100644 index acfb6ac..0000000 Binary files a/content/overview-math/katex.png and /dev/null differ -- cgit v1.3.1