• Georg Makowski
    • 1:45 pm

    The theme has been officially released to the public.

    The theme offers an outstanding typographic layout for Markdown content and many options to fit resources like images into its coherent grid.

    The following new features since the last beta release are notable:

    • Dark mode (follows OS settings)

    • Author pages and linked portraits referring to them

    • Fast and efficient full-text search with Pagefind

    • The layout is rich in detail and the pages are still very fast.

    • Georg Makowski
    • 0:02 am

    The theme offers a new possibility to store local parameters for resources. Data files allow to associate local meta-data with global or remote resources.

    Hugo offers to process arbitrary meta-data parameters associated with page resources. We can add a parameter list to local resources in the frontmatter of page bundles under params:

      - src: hebert-kostan-y6UEUCq2RHw-unsplash.jpg
        name: tiger
          caption: Local image resource
          width: small
          posh: left
    global tiger
    Image file from assets(Hebert Kostan/Unsplash)

    Depending on the content structure of your project, you may want to store some resources in the global assets folder or on a remote server. Hugo also can retrieve these resources, but there is (currently) no native mechanism to associate them with meta-data parameters.

    And this is where this module comes in handy. The tiger here is stored in the assets folder and gets referenced in a local data file. This way, we can re-use global assets repeatedly and store meta-data in a local file like global.yaml:

    src: img/tiger/hebert-kostan-y6UEUCq2RHw-unsplash.jpg
    caption: Image file from assets
    width: small
    posh: left
    Remote image
    Random image

    The extra parameter keys are the same as the ones above. There is no new name for the resource, we use the data file inside the usual Markdown image syntax like ![global tiger](global.yaml).

    We can also use TOML or JSON files, enter a remote URL as source, and call every image service with an HTTP API. The second image here is generated with this data file for example:

        "src": "https://picsum.photos/300/300",
        "caption": "Random image",
        "posh": "right",
        "width": "tiny"

    The module is available on GitHub.

    • Georg Makowski
    • 6:18 pm

    The theme is now prepared for Pagefind, a fast open-source full-text search engine for self-hosting.

    The Pagefind project is under active development, heading towards its first major version. Its capabilities are impressive, already. Indexing this site takes only a fraction of a second.

    To offer the search, we need to install the node package pagefind and let it process our HTML after every generation. For a short tutorial see Search with pagefind.

    • Georg Makowski
    • 0:21 am

    The theme offers a dark mode now. The colors follow the setting of the browser or operating system.

    The dark mode includes a dark page background and light text colors as usual. It also reduces the overall brightness and changes the color theme of the code highlighting.

    • Georg Makowski
    • 4:05 pm

    This Hugo module allows rendering mathematical and chemical formulas in Markdown.

    The popular Javascript library $\KaTeX$ is included for self-hosting.

    Inline LaTeX
    can get wrapped with the two Hugo shortcodes {{< math >}} and {{< chem >}}. They prevent distortions by the Markdown rendering. Already working LaTeX expressions surrounded by a $ or doubly escaped parenthesis are still fine, of course: $E = mc^2$.
    LaTeX blocks
    can be placed inside fenced code blocks with the identifiers math or chem. They also provide protection against distortions and have another advantage: We can use newlines in formulas as usual. Again, already working LaTeX expressions surrounded by two dollars or doubly escaped squared brackets are still fine.
    $$\begin{equation}E = mc^2\end{equation}$$

    The module is available on GitHub and includes a minimal Hugo example site for local rendering.