feat: proper main page

LICENSE

@@ -1,6 +1,10 @@
 The MIT License (MIT)
 
+Copyright (c) 2018 Track3
+Copyright (c) 2019 panr
+Copyright (c) 2019 Djordje Atlialp
 Copyright (c) 2023 Speyll Lyes
+Copyright (c) 2023 zaaarf
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,129 +0,0 @@
-# anemone
-
-Introducing "anemone," a minimalist [Zola](https://www.getzola.org) theme that prioritizes clean CSS and avoids heavy JavaScript. Enjoy a seamless user experience with lightning-fast load times. Let your content take center stage in a clutter-free, elegant design that enhances readability. Responsive and efficient, anemone brings focus to your ideas.
-
-You can browse the demo website [here](https://anemone.pages.dev/)
-I also use it on my own [website.](https://speyllsite.pages.dev/)
-
-Anemone is a versatile Zola theme that comes with both light and dark variants. You can easily switch between the light and dark themes to suit your preferences.
-
-![Anemone Light and Dark Theme](screenshot.png)
-
-### Installation
-
-To get started with Anemone, follow these simple steps:
-
-1. Download the theme to your `themes` directory:
-
-```bash
-cd themes
-git clone https://github.com/Speyll/anemone
-```
-
-2. Enable Anemone in your `config.toml`:
-
-```toml
-theme = "anemone"
-```
-
-### Options
-
-Anemone provides various options to customize your website:
-
-#### Default Taxonomies
-
-To use tags, add the following code to a page's metadata:
-
-```toml
-[taxonomies]
-tags = ["tag1", "tag2"]
-```
-
-#### Pages List in Homepage
-
-Enable listing of pages in the homepage by adding the following code to `config.toml`:
-
-```toml
-[extra]
-list_pages = true
-```
-
-#### Multilanguage
-
-The theme has a built-in feature that allows you to use multiple languages. For detailed instructions on how to use this feature, you can refer to the [Zola Multilingual documentation](https://www.getzola.org/documentation/content/multilingual/). This documentation provides additional information on how to make the most out of this multilingual capability.
-
-```toml
-[languages.fr]
-weight = 2
-title = "anemone"
-languageName = "Français"
-languageCode = "fr"
-```
-#### Multilanguage-Ready Navigation Bar
-
-Customize the header navigation links with the following code in the `extra` section of `config.toml`:
-
-```toml
-[extra]
-
-header_nav = [
-  { url = "/", name_en = "/home/", name_fr = "/accueil/" },
-  { url = "/about", name_en = "/about/", name_fr = "/concernant/" },
-  { url = "/journal", name_en = "/journal/", name_fr = "/journal/" },
-  { url = "/blog", name_en = "/blog/", name_fr = "/blog/" }
-]
-```
-
-#### Default Theme
-
-To configure the default theme, simply utilize the `default_theme` variable and set it to either `light` or `dark`:
-
-```toml
-[extra]
-default_theme = "light"
-```
-
-#### Display Author Name in Blog Posts
-
-Customize the display of the author's name in your blog posts by toggling the `display_author` variable to either `true` or `false`:
-
-```toml
-[extra]
-display_author = true
-```
-
-### Webrings
-
-Add a webring with a shortcode:
-
-```html
-{{ webring(prev="#", webring="#", webringName="Random Webring", next="#") }}
-```
-
-#### Add Table of Contents (TOC) to Pages
-
-In a page's frontmatter, set `extra.toc` to `true`:
-
-```toml
-[extra]
-toc = true
-```
-
-### Extra Data
-
-- Set the `author` in both the main config and in pages' metadata.
-- Use the `image` variable in pages to add an image to HTML `<meta>` tags.
-- Similarly, set `favicon` in the main config, and it will be used as the site icon.
-
-#### Disable Twitter Card
-
-Twitter metatags are generated by default. To disable them, set `extra.twitter_card` to `false` in `config.toml`:
-
-```toml
-[extra]
-twitter_card = true
-```
-
-### License
-
-The Anemone theme is available as open source under the terms of the [MIT License](LICENSE).

config.toml

@@ -1,10 +1,17 @@
+## Zola stuff
+## Customize these as you see fit, unless otherwise specified.
 base_url = "https://anemone.pages.dev"
 description = "A minimalist Zola theme that prioritizes clean CSS and avoids heavy JavaScript. Enjoy a seamless user experience with lightning-fast load times. Let your content take center stage in a clutter-free, elegant design that enhances readability. Responsive and efficient, anemone brings focus to your ideas."
 compile_sass = false
-minify_html = true
 generate_feed = true
 default_language = "en"
 
+# IMPORTANT! Keep this disabled: HTML minifying currently breaks our CSS!
+# We use CSS in <style> blocks to allow configuring colors from here.
+# Until https://github.com/getzola/zola/pull/2242 is merged, there likely
+# won't be a cleaner way to achieve this.
+minify_html = false
+
 taxonomies = [
     {name = "tags", feed = true},
 ]
@@ -18,8 +25,18 @@ languageCode = "fr"
 render_emoji = true
 external_links_target_blank = true
 smart_punctuation = true
-highlight_code = false
+highlight_code = true
-highlight_theme = "gruvbox-dark"
+
+# If you use CSS mode, make sure to add two themes - one for light mode,
+# one for dark mode. In particular, hl-dark.css and hl-light.css are the
+# default names. If you wish to use different names, set the properties
+# highlighting_css_dark and highlighting_css_light under extra.
+# TODO: move them under extra.colors.
+highlight_theme = "css"
+highlight_themes_css = [
+  { theme = "agola-dark", filename = "hl-dark.css" },
+  { theme = "idle", filename = "hl-light.css" }
+]
 
 [slugify]
 paths = "on"
@@ -30,19 +47,51 @@ anchors = "on"
 internal_level = "warn"
 
 [extra]
-author = "Speyll"
+# Stuff inherited from anemone
-display_author = true
+# TODO: ensure they still work properly, or remove.
-
 favicon = "favicon.ico"
-image = ""
-
-default_theme = "light"
 list_pages = false
 twitter_card = true
 
+# Default theme when people join the site. "dark" and "light" are the
+# only valid values. By default, it's dark.
+default_theme = "dark"
+
 header_nav = [
   { url = "/", name_en = "/home/", name_fr = "/accueil/" },
   { url = "/about", name_en = "/about/", name_fr = "/concernant/" },
   { url = "/journal", name_en = "/journal/", name_fr = "/journal/" },
   { url = "/blog", name_en = "/blog/", name_fr = "/blog/" }
 ]
+
+# Stuff inspired by hello-friend-ng, allows you to present a simple yet complete homepage
+# TODO: move this stuff under a separate tag
+home_title = "zaaarf"
+home_subtitle = "developer, software engineer"
+home_subtitle_suffixes = [
+	", this",
+	
+]
+
+# Social icons, list here: https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/layouts/partials/svg.html
+social_icons = [
+	{ name = "github", url = "https://github.com/zaaarf" },
+	{ name = "codeberg", url = "https://codeberg.org/zaaarf" },
+	{ name = "matrix", url = "https://matrix.to/#/@zaaarf:fantabos.co" },
+	{ name = "email", url = "mailto:me@zaaarf.foo" }
+]
+
+logo = { text = "> $ cd ~/zaaarf/" }
+
+# Valid keys are "post" and "list", one referring to individual blogposts,
+# the other referring to lists of posts in sections.
+# You may set "list" to whitespace(s) to disable displaying dates in sections.
+# Refer to https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html
+# for formatting instructions.
+[extra.date_format]
+
+[extra.colors.dark]
+meta_color = "#FF4D17"
+
+[extra.colors.light]
+meta_color = "#e08f67"

sass/logo.scss

@@ -0,0 +1,44 @@
+.logo {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-weight: bold;
+  font-display: auto;
+  font-family: monospace, monospace;
+
+  img {
+    height: 44px;
+  }
+
+  &__mark {
+    margin-right: 5px;
+  }
+
+  &__text {
+    white-space: nowrap;
+  }
+
+  &__cursor {
+    display: inline-block;
+    width: 10px;
+    height: 1.5rem;
+    background: var(--fgColor);
+    margin-left: 5px;
+    border-radius: 1px;
+    animation: cursor 1s infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__cursor {
+        animation: none;
+    }
+  }
+
+}
+
+@keyframes cursor {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+

templates/header.html

@@ -6,26 +6,25 @@
 {% endif %}
 {% if config.extra.header_nav %}
 <nav class="navBar">
+  {% include "logo.html" %}
+  <div class="themeSwitch">
+    {% if not config.extra.default_theme %}
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+    {% elif config.extra.default_theme and config.extra.default_theme == "light" %}
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+    {% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+    {% endif %}
+  </div>
+
   {% for nav_item in config.extra.header_nav %}
     <a href="{{ nav_item.url }}" class="{% if nav_item.url == current_url %}active{% endif %}">
       {% set language_key = 'name_' ~ current_lang %}
       {{ nav_item[language_key] }}
     </a>
   {% endfor %}
-
-  <div class="themeSwitch">
-    {% if not config.extra.default_theme %}
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
-
-    {% elif config.extra.default_theme and config.extra.default_theme == "light" %}
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
-
-    {% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
-    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
-    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
-    {% endif %}
-  </div>
 </nav>
 {% endif %}

templates/index.html

@@ -1,29 +1,13 @@
 {% extends "base.html" %}
 
 {% block content %}
-{{ section.content | safe }}
+<div class="home">
-
+    <h1>{{ config.title }}</h1>
-{% if config.extra.list_pages %}
+    {% if config.extra.home_subtitle %}
-
+        <p>{{ config.extra.home_subtitle }}</p>
-{% if paginator %}
+    {% elif config.description %}
-{% set pages = paginator.pages %}
+        <p>{{ config.description }}</p>
-{% else %}
-{% set pages = section.pages %}
-{% endif %}
-
-<ul class="titleList">
-{% for page in pages %}
-  <li>
-    <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
-    <br />
-    {{ page.description }}
-  </li>
-{% endfor %}
-</ul>
-
-{% if paginator %}
-<div class="metaData">{% if paginator.previous %}<a href="{{ paginator.first }}">⥶</a> &nbsp <a href="{{ paginator.previous }}"><</a>{% endif %} &nbsp {{ paginator.current_index }} / {{ paginator.number_pagers }} &nbsp {% if paginator.next %}<a href="{{ paginator.next }}">></a> &nbsp <a href="{{ paginator.last }}">⥸</a>{% endif %}</div>
-{% endif %}
-
     {% endif %}
+    {% include "svg.html" %}
+</div>
 {% endblock content %}

templates/logo.html

@@ -0,0 +1,30 @@
+<link rel="stylesheet" href="logo.css">
+<a href="{% if config.extra.logo.url %}{{ config.extra.logo.url }}{% else %}{{ config.base_url }}{% endif %}" style="text-decoration: none; float: left;">
+    <div class="logo">
+        {% if config.extra.logo.path %}
+            <img src="{{ config.extra.logo.path }}"
+            {% if config.extra.logo.alt %}
+                alt="{{ config.extra.logo.alt }}"
+            {% endif %}
+            />
+        {% else %}
+            <span class="logo__text">
+                {% if config.extra.logo.text %}{{ config.extra.logo.text }}{% else %}home{% endif %}
+            </span>
+            <span class="logo__cursor" style="
+                {% if config.extra.logo.cursor.enabled %}
+                    {% if config.extra.logo.cursor.enabled != true %}
+                        visibility: hidden;
+                    {% endif %}
+                {% endif %}
+                {% if config.extra.logo.cursor.color %}
+                    background-color: {{ config.extra.logo.cursor.color }};
+                {% endif %}
+                {% if config.extra.logo.cursor.animate %}
+                    animation-duration: {{ config.extra.logo.cursor.animate }};
+                {% endif %}
+            ">
+            </span>
+        {% endif %}
+    </div>
+</a>

templates/shortcodes/image.html

@@ -0,0 +1,8 @@
+{% if src %}
+  {# If the image's URL is internal to the site... #}
+  {% if src is not starting_with("http") %}
+    {# ... then prepend the site's base URL to the image's URL. #}
+    {% set src = config.base_url ~ src %}
+  {% endif %}
+  <center><img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %} class="{% if position %}{{ position }}{% else -%} center {%- endif %}" {%- if style %} style="border-radius: 8px; {{ style | safe }}" {%- endif %} /></center>
+{% endif %}

theme.toml

@@ -1,13 +1,13 @@
-name = "anemone"
+name = "friendenstein"
-description = "A minimalist Zola theme that prioritizes clean CSS and avoids heavy JavaScript. Enjoy a seamless user experience with lightning-fast load times. Let your content take center stage in a clutter-free, elegant design that enhances readability. Responsive and efficient, anemone brings focus to your ideas."
+description = "A somewhat minimalist Zola theme that strives to avoid JS as much as possible."
 license = "MIT"
-homepage = "https://github.com/Speyll/anemone"
+homepage = "https://git.fantabos.co/friendenstein.git"
 min_version = "0.4.0"
-demo = "https://anemone.pages.dev"
+# demo = "https://anemone.pages.dev"
 
 [extra]
 
 
 [author]
-name = "Speyll"
+name = "zaaaerf"
-homepage = "https://speyllsite.pages.dev/"
+homepage = "https://zaaarf.foo/"