Misc on Zen demo site

Codeblocks

Mon, 01 Jan 0001 00:00:00 +0000

Copy code button on codeblocks

title: "Zen demo site"
baseURL: "https://zen-demo.xdeb.org/"
theme: "github.com/frjo/hugo-theme-zen/v5"
copyright: '<!--Creative Commons License-->This site is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0</a> licence.<!--/Creative Commons License-->'
languageCode: "en-GB"
defaultContentLanguage: "en"
pluralizelisttitles: false
removePathAccents: true
rssLimit: 20
pagination:
  pagerSize: 10
  path: page

markup:
  goldmark:
    parser:
      attribute:
        block: true
    renderer:
      unsafe: true

{{ .Page.Store.Set "codeblocks" true -}}
{{ $result := transform.HighlightCodeBlock . -}}
<div data-codeblock itemscope itemtype="https://schema.org/SoftwareSourceCode" {{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
<button data-codebutton class="codebutton" title="{{ i18n "copy_code" }}"><span>⧉</span></button>
<meta itemprop="codeSampleType" content="snippet">
<meta data-codetext itemprop="text" content="{{ .Inner | jsonify }}">
{{ if .Type -}}
<meta itemprop="programmingLanguage" content="{{ .Type }}">
<pre tabindex="0" class="chroma">
<code class="language-{{ .Type }}" data-lang="{{ .Type }}">{{ $result.Inner }}</code>
</pre>
{{ else -}}
{{ $result.Wrapped }}
{{ end -}}
</div>

Components

Mon, 01 Jan 0001 00:00:00 +0000

Table with the “zebra-table” and “responsive-table” components classes

SSG	Stars	Description	Lang	Licence
Next.js	97399	Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.	JavaScript	MIT
Hugo	64086	Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability.	Go	Apache-2.0
Gatsby	53896	Build blazing-fast, modern apps and websites with React	JavaScript	MIT
Jekyll	45696	Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.	Ruby	MIT
Nuxt	41678	An easy way to export your Vue.js Web Application into a static website.	JavaScript	MIT
Docusaurus	40245	Save time and focus on your project’s documentation.	JavaScript	MIT

Using the “box” components class

This is a box

Lorem ipsum dolor sit amet.

This is a box with highlight

Lorem ipsum dolor sit amet.

This is a inverted box

Lorem ipsum dolor sit amet.

Messages colour display

Info

Lorem ipsum dolor sit amet.

Success

Lorem ipsum dolor sit amet.

Warning

Lorem ipsum dolor sit amet.

Error

Lorem ipsum dolor sit amet.

Using the “cards” and “card” components classes

Cards in turn extends the “grid-group” component.

Card 1

Lorem ipsum dolor sit amet.

Card 2

Lorem ipsum dolor sit amet.

Card 3

Lorem ipsum dolor sit amet.

Card 4

Lorem ipsum dolor sit amet.

Card 5

Lorem ipsum dolor sit amet.

Card 6

Lorem ipsum dolor sit amet.

Card 7

Lorem ipsum dolor sit amet.

Card 8

Lorem ipsum dolor sit amet.

Layout with grid

Mon, 01 Jan 0001 00:00:00 +0000

Examples of using stretch and breakout classes.

Math

Mon, 01 Jan 0001 00:00:00 +0000

Math typesetting with KaTeX

I got a contribution that added math typesetting with KaTeX.

Something you either have little clue about or really need. But math is fun and it was easy to add.

Some math examples:

$$x^2 + y^2 = z^2$$

$$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$