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]]
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.
- Zola
- Particles.js
- Font Awesome
- Modern Normalize
- Inspiration came from particle-zola, another theme.
Initialize a Zola website and install HayFlow:
zola init mywebsite
cd mywebsite
git clone [email protected]: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:https://localhost:1111 to see the landing page in action with the default name displayed (John Doe).
Customizing the landing page boils down to two things:
- adding the
name
andlinks
variables to theconfig.toml
's[extra]
section (links
is optional. So isname
if your name is John Doe) - adding the
roles
variable 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.
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 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:[email protected]" },
{ 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 🍕"]
+++
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.
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 !
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.
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.
HayFlow supports multilingual websites out of the box.
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).
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
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"
+++
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).