HayFlow - Modular Zola Theme

About

![Preview screenshot](https://gitlab.com/cyril-marpaud/hayflow/-/raw/main/screenshot.png "Preview screenshot")

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 your 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 your landing page in action with the default name displayed (John Doe).

Landing page customization

Customizing the landing page boils down to adding variables to your config.toml's [extra] section. There are three variables one can use to do so: name, roles and links (they are all optional).

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.

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

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

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

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 your 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 your _index.md's front matter'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.

5.1 KiB Raw Blame History