|
| 1 | + |
| 2 | ++++ |
| 3 | +title = "HayFlow" |
| 4 | +description = "HayFlow is a minimal and completely modular Zola theme for anyone wishing to have their own landing page." |
| 5 | +template = "theme.html" |
| 6 | +date = 2023-04-16T21:40:29+02:00 |
| 7 | + |
| 8 | +[extra] |
| 9 | +created = 2023-04-16T21:40:29+02:00 |
| 10 | +updated = 2023-04-16T21:40:29+02:00 |
| 11 | +repository = "https://gitlab.com/cyril-marpaud/hayflow.git" |
| 12 | +homepage = "https://gitlab.com/cyril-marpaud/hayflow" |
| 13 | +minimum_version = "0.4.0" |
| 14 | +license = "CC-BY-SA 4.0" |
| 15 | +demo = "https://cyril-marpaud.gitlab.io" |
| 16 | + |
| 17 | +[extra.author] |
| 18 | +name = "Cyril Marpaud" |
| 19 | +homepage = "https://cyril-marpaud.gitlab.io" |
| 20 | ++++ |
| 21 | + |
| 22 | +# HayFlow - Modular Zola Theme |
| 23 | + |
| 24 | +## About |
| 25 | + |
| 26 | +<div align="center"> |
| 27 | + |
| 28 | +</div> |
| 29 | + |
| 30 | +[HayFlow](https://gitlab.com/cyril-marpaud/hayflow) is a modular landing page made as a theme for [Zola](https://www.getzola.org), a static site generator written in [Rust](https://www.rust-lang.org). 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](https://www.linkedin.com/in/cyrilmarpaud)). |
| 31 | + |
| 32 | +It has been designed to require only [Markdown](https://www.markdownguide.org) editing (no HTML/CSS), but feel free to do so if you need to. I'll be glad to review a [Merge Request](https://gitlab.com/cyril-marpaud/hayflow/-/merge_requests) if you implement a new card type ! |
| 33 | + |
| 34 | +[[_TOC_]] |
| 35 | + |
| 36 | +## Live demo |
| 37 | + |
| 38 | +See [my personal website](https://cyril-marpaud.gitlab.io) 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](https://gitlab.com/cyril-marpaud/cyril-marpaud.gitlab.io). |
| 39 | + |
| 40 | +## Built with |
| 41 | + |
| 42 | +- [Zola](https://www.getzola.org) |
| 43 | +- [Particles.js](https://vincentgarreau.com/particles.js/) |
| 44 | +- [Font Awesome](https://fontawesome.com) |
| 45 | +- [Modern Normalize](https://github.com/sindresorhus/modern-normalize) |
| 46 | +- Inspiration came from [particle-zola](https://github.com/svavs/particle-zola), another theme. |
| 47 | + |
| 48 | +## Quick start |
| 49 | + |
| 50 | +Initialize a Zola website and install HayFlow: |
| 51 | +```bash |
| 52 | +zola init mywebsite |
| 53 | +cd mywebsite |
| 54 | +git clone [email protected]:cyril-marpaud/hayflow.git themes/hayflow |
| 55 | +``` |
| 56 | + |
| 57 | +Add `theme = "hayflow"` at the top of your `config.toml` file to tell Zola to use HayFlow (as described in [the documentation](https://www.getzola.org/documentation/themes/installing-and-using-themes/)). |
| 58 | + |
| 59 | +Finally, run... |
| 60 | + |
| 61 | +```bash |
| 62 | +zola serve |
| 63 | +``` |
| 64 | +...and go to [http://localhost:1111](http://localhost:1111) to see your landing page in action with the default name displayed (John Doe). |
| 65 | + |
| 66 | +## Landing page customization |
| 67 | + |
| 68 | +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). |
| 69 | + |
| 70 | +- `name` speaks for itself. |
| 71 | +- `roles` is an array of strings. Each string is displayed on a separate line. |
| 72 | +- `links` is an array of `{icon, url}` objects. You can use any **free** icon from [Font Awesome](https://fontawesome.com/search?o=r&m=free) here, all you need is the icon's code. The [enveloppe icon](https://fontawesome.com/icons/envelope?s=solid&f=classic)'s code is `fa-solid fa-envelope`. The [pizza-slice icon](https://fontawesome.com/icons/pizza-slice?s=solid&f=classic)'s code is `fa-solid fa-pizza-slice`. |
| 73 | + |
| 74 | +```TOML |
| 75 | +[extra] |
| 76 | +name = { first = "ninja", last = "turtle" } |
| 77 | + |
| 78 | +roles = ["Green 🟢", "Turtle 🐢", "Pizza enthusiast 🍕"] |
| 79 | + |
| 80 | +links = [ |
| 81 | + { icon = "fa-solid fa-envelope", url = "mailto:[email protected]" }, |
| 82 | + { icon = "fa-solid fa-pizza-slice", url = "https://en.wikipedia.org/wiki/Pizza" }, |
| 83 | +] |
| 84 | +``` |
| 85 | + |
| 86 | +## Adding a section |
| 87 | + |
| 88 | +Inside the `content` directory, create a `pizza` folder and place this `_index.md` file inside: |
| 89 | + |
| 90 | +```TOML |
| 91 | ++++ |
| 92 | +title = "Pizza" |
| 93 | ++++ |
| 94 | + |
| 95 | +What a mouthful ! |
| 96 | +``` |
| 97 | + |
| 98 | +Then, add this `sections` variable (an array of strings) to your `config.toml`'s `[extra]` section: |
| 99 | + |
| 100 | +```TOML |
| 101 | +[extra] |
| 102 | +sections = ["pizza"] |
| 103 | +``` |
| 104 | + |
| 105 | +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. |
| 106 | + |
| 107 | +## Customizing sections |
| 108 | + |
| 109 | +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](https://www.getzola.org/documentation/content/section/#front-matter)'s `[extra]` section: |
| 110 | + |
| 111 | +```TOML |
| 112 | ++++ |
| 113 | +title = "Pizza" |
| 114 | + |
| 115 | +[extra] |
| 116 | +card_type = "simple" |
| 117 | ++++ |
| 118 | + |
| 119 | +What a mouthful ! |
| 120 | +``` |
| 121 | + |
| 122 | +### Columns card |
| 123 | + |
| 124 | +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`: |
| 125 | + |
| 126 | +```TOML |
| 127 | ++++ |
| 128 | +title = "Tomato" |
| 129 | + |
| 130 | +[extra] |
| 131 | +icons = ["fa-solid fa-tomato"] |
| 132 | ++++ |
| 133 | + |
| 134 | +The basis of any self-respecting pizza. It is the edible berry of the plant Solanum lycopersicum. |
| 135 | +``` |
| 136 | + |
| 137 | +The `icons` variable is optional. |
| 138 | + |
| 139 | +### List card |
| 140 | + |
| 141 | +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`: |
| 142 | + |
| 143 | +```TOML |
| 144 | ++++ |
| 145 | +title = "Margherita" |
| 146 | + |
| 147 | +[extra] |
| 148 | +link = "https://en.wikipedia.org/wiki/Pizza_Margherita" |
| 149 | ++++ |
| 150 | + |
| 151 | +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. |
| 152 | +``` |
| 153 | + |
| 154 | +The `link` variable is optional. |
| 155 | + |
| 156 | + |
0 commit comments