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
nameandlinksvariables to theconfig.toml's[extra]section (linksis optional. So isnameif your name is John Doe) - adding the
rolesvariable to thecontent/_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.
namespeaks for itself.rolesis an array of strings. Each string is displayed on a separate line.linksis 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 isfa-solid fa-envelope. The pizza-slice icon's code isfa-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).
