mirror of
https://github.com/zaaarf/friendenstein.git
synced 2024-11-22 07:24:51 +01:00
feat: proper main page
This commit is contained in:
parent
d8d1db19bf
commit
1da4a393a4
11 changed files with 363 additions and 180 deletions
4
LICENSE
4
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
|
||||
|
|
|
|||
129
README.md
129
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.
|
||||
|
||||
|
||||
|
||||
### 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).
|
||||
67
config.toml
67
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_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
44
sass/logo.scss
Normal 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; }
|
||||
}
|
||||
|
||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>   <a href="{{ paginator.previous }}"><</a>{% endif %}   {{ paginator.current_index }} / {{ paginator.number_pagers }}   {% if paginator.next %}<a href="{{ paginator.next }}">></a>   <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
30
templates/logo.html
Normal 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>
|
||||
8
templates/shortcodes/image.html
Normal file
8
templates/shortcodes/image.html
Normal 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
194
templates/svg.html
Normal file
File diff suppressed because one or more lines are too long
12
theme.toml
12
theme.toml
|
|
@ -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/"
|
||||
|
|
|
|||
Loading…
Reference in a new issue