zola/docs/content/themes/HayFlow/index.md

+++ title = "HayFlow" description = "HayFlow is a minimal and completely modular Zola theme for anyone wishing to have their own landing page." template = "theme.html" date = 2024-09-02T05:58:27Z

[extra] created = 2024-09-02T05:58:27Z updated = 2024-09-02T05:58:27Z repository = "https://gitlab.com/cyril-marpaud/hayflow.git" homepage = "https://gitlab.com/cyril-marpaud/hayflow" minimum_version = "0.4.0" license = "CC-BY-SA 4.0" demo = "https://cyril-marpaud.gitlab.io"

[extra.author] name = "Cyril Marpaud" homepage = "https://cyril-marpaud.gitlab.io" +++

HayFlow - Modular Zola Theme

About


HayFlow is a modular landing page made as a theme for Zola, a static site generator written in Rust. It features a dark theme with a particles background, vertical arrows for navigation and a few card types which you are free to include to best suit your needs. Nearly all UI elements are subtly animated to convey a professional look (although I'm no designer 🤷 merely an embedded systems engineer).

It has been designed to require only Markdown editing (no HTML/CSS), but feel free to do so if you need to. I'll be glad to review a Merge Request if you implement a new card type !

[[TOC]]

Live demo

See my personal website for an example of what can be accomplished in a few minutes with this theme. Its source code is also available as an example in my Gitlab website repository.

Built with

• Zola
• Particles.js
• Font Awesome
• Modern Normalize
• Inspiration came from particle-zola, another theme.

Quick start

Initialize a Zola website and install HayFlow:

zola init mywebsite
cd mywebsite
git clone git@gitlab.com:cyril-marpaud/hayflow.git themes/hayflow

Add theme = "hayflow" at the top of config.toml file to tell Zola to use HayFlow (as described in the documentation).

Finally, run...

zola serve

...and go to http://localhost:1111 to see the landing page in action with the default name displayed (John Doe).

Landing page customization

Customizing the landing page boils down to two things:

• adding the name and links variables to the config.toml's [extra] section (links is optional. So is name if your name is John Doe)
• adding the roles variable to the content/_index.md's [extra] section (also optional)

The difference comes from the fact that you might need to translate the roles into other languages. For that to be possible, they must be placed in a MarkDown file. See multilingual support for more info.

• name speaks for itself.
• roles is an array of strings. Each string is displayed on a separate line.
• links is an array of {icon, url} objects. You can use any free icon from Font Awesome here, all you need is the icon's code. The enveloppe icon's code is fa-solid fa-envelope. The pizza-slice icon's code is fa-solid fa-pizza-slice.

This is what the config.toml's [extra] section might look like after customization:

[extra]
name = { first = "ninja", last = "turtle" }

links = [
   { icon = "fa-solid fa-envelope", url = "mailto:slice@pizza.it" },
   { icon = "fa-solid fa-pizza-slice", url = "https://en.wikipedia.org/wiki/Pizza" },
]

And here's a customized version of content/_index.md:

+++
[extra]
roles = ["Green 🟢", "Turtle 🐢", "Pizza enthusiast 🍕"]
+++

Adding a section

Inside the content directory, create a pizza folder and place this _index.md file inside:

+++
title = "Pizza"
+++

What a mouthful !

Then, add this sections variable (an array of strings) to the config.toml's [extra] section:

[extra]
sections = ["pizza"]

A new internal link pointing to that section will appear on the landing page. Click it and see what happens ! This is called a "simple card" section.

Customizing sections

HayFlow currently supports three card types : simple, columns and list. If left unspecified, the type will default to simple. To change it, add a card_type variable to the _index.md's [extra] section:

+++
title = "Pizza"

[extra]
card_type = "simple"
+++

What a mouthful !

Columns card

Add a new section and set its card type to columns. Then, alongside the _index.md file, create three other files: one.md, two.md and three.md. These will be the ingredients of your new pizza. Their content is similar to _index.md:

+++
title = "Tomato"

[extra]
icons = ["fa-solid fa-tomato"]
+++

The basis of any self-respecting pizza. It is the edible berry of the plant Solanum lycopersicum.

The icons variable is optional.

List card

Add a new section and set its card type to list. Then, alongside the _index.md file, create three other files: one.md, two.md and three.md. These will be your favourite pizzas. Their content is similar to _index.md:

+++
title = "Margherita"

[extra]
link = "https://en.wikipedia.org/wiki/Pizza_Margherita"
+++

Margherita pizza is a typical [Neapolitan pizza](https://en.wikipedia.org/wiki/Neapolitan_pizza), made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.

The link variable is optional.

Multilingual support

HayFlow supports multilingual websites out of the box.

Declare more languages

In config.toml, add the languages you want to support like so:

default_language = "fr"
[translations]
flag = "🇫🇷"

[languages.en]
[languages.en.translations]
flag = "🇬🇧"

[languages.italian]
[languages.italian.translations]
flag = "🇮🇹"

This will make the language-select block in the top-right corner visible. It consists of clickable links to the translated versions of your website. The flag variable is optional and you can use simple text instead of an emoji flag. If left unspecified, it will default to the country code you chose for that language (fr, en and italian in this example).

Translate the content

Each .md file in the content folder now needs to be translated into every additional language previously declared in config.toml.

Following the above example (three languages, french, english and italian) and given this initial filetree:

content/
   _index.md
   pizzas/
      _index.md
      margherita.md
      capricciosa.md

The final filetree should look like this for the translation to be complete:

content/
   _index.md
   _index.en.md
   _index.italian.md
   pizzas/
      _index.md
      _index.en.md
      _index.italian.md
      margherita.md
      margherita.en.md
      margherita.italian.md
      capricciosa.md
      capricciosa.en.md
      capricciosa.italian.md

List cards

Additionally, if your website includes any "list card" sections, you might want to specify a discover variable in their [extra] sections like so:

+++
title = "List Card Section"

[extra]
card_type = "list"
discover = "Découvrir"
+++

Whoami

My name is Cyril Marpaud, I'm an embedded systems freelance engineer and a Rust enthusiast 🦀 I have nearly 10 years experience and am currently living in Lyon (France).