feat: proper main page

This commit is contained in:
zaaarf 2023-12-22 00:42:32 +01:00
parent d8d1db19bf
commit 1da4a393a4
No known key found for this signature in database
GPG key ID: 102E445F4C3F829B
11 changed files with 363 additions and 180 deletions

View file

@ -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

129
README.md
View file

@ -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).

View file

@ -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_theme = "gruvbox-dark"
highlight_code = true
# 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"
display_author = true
# Stuff inherited from anemone
# 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"

44
sass/logo.scss Normal file
View file

@ -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; }
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

View file

@ -5,27 +5,26 @@
{% set current_lang = section.lang %}
{% endif %}
{% if config.extra.header_nav %}
<nav class="navBar">
<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 %}

View file

@ -1,29 +1,13 @@
{% extends "base.html" %}
{% block content %}
{{ section.content | safe }}
{% if config.extra.list_pages %}
{% if paginator %}
{% set pages = paginator.pages %}
{% 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 %}
<div class="home">
<h1>{{ config.title }}</h1>
{% if config.extra.home_subtitle %}
<p>{{ config.extra.home_subtitle }}</p>
{% elif config.description %}
<p>{{ config.description }}</p>
{% endif %}
{% include "svg.html" %}
</div>
{% endblock content %}

30
templates/logo.html Normal file
View file

@ -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>

View file

@ -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 %}

194
templates/svg.html Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,13 +1,13 @@
name = "anemone"
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."
name = "friendenstein"
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"
homepage = "https://speyllsite.pages.dev/"
name = "zaaaerf"
homepage = "https://zaaarf.foo/"