@@ -1,20 +1,18 @@
 # Zola ʕ•ᴥ•ʔ Bear Blog
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/121b53ce-c913-4604-9179-eb3cca31cd2c/deploy-status)](https://app.netlify.com/sites/zola-bearblog/deploys)
+
 🧸 A [Zola](https://www.getzola.org/)-theme based on [Bear Blog](https://bearblog.dev).
 
 > Free, no-nonsense, super-fast blogging.
 
 ## Demo
 
-For a current & working demo of this theme, please check out https://alanpearce.codeberg.page/zola-bearblog/ 🎯.
-
-## Screenshots
+For a current & working demo of this theme, please check out <https://zola-bearblog.netlify.app/> 🎯.
 
-⬜️ [Light][light-screenshot]
-![light mode screenshot][light-screenshot]
+## Screenshot
 
-⬛️ [Dark][dark-screenshot]
-![dark mode screenshot][dark-screenshot]
+![Screenshot][screenshot]
 
 When the user's browser is running »dark mode«, the dark color scheme will be used automatically. The default is the light/white color scheme. Check out the [`style.html`](https://codeberg.org/alanpearce/zola-bearblog/src/branch/main/templates/style.html)-file for the implementation.
 
@@ -30,6 +28,12 @@ Then, adjust the `config.toml` as detailed below.
 
 For more information, read the official [setup guide][zola-setup-guide] of Zola.
 
+Alternatively, you can quickly deploy a copy of the theme site to Netlify using this button:
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://gitlab.com/alanpearce/zola-bearblog)
+
+(Note that this method makes it harder to keep up-to-date with theme updates, which might be necessary for newer versions of Zola.)
+
 ## Adjust configuration / config.toml
 
 Please check out the included [config.toml](https://codeberg.org/alanpearce/zola-bearblog/src/branch/main/config.toml)
@@ -41,6 +45,10 @@
 Create an array in `extra` with a key of `main_menu`. `url` is passed to [`get_url`](https://www.getzola.org/documentation/templates/overview/#get-url)
 
 ```toml
+[[extra.main_menu]]
+name = "Home"
+url = "/"
+
 [[extra.main_menu]]
 name = "Bear"
 url = "@/bear.md"
@@ -65,6 +73,29 @@ ### Adding your branding / colors / css
 
 Add a `custom_head.html`-file to your `templates/`-directory. In there you may add a `<style>`-tag, *or* you may add a `<link>`-tag referencing your own `custom.css` (in case you prefer to have a separate `.css`-file). Check out the [`style.html`](https://codeberg.org/alanpearce/zola-bearblog/src/branch/main/templates/style.html)-file to find out which CSS-styles are applied by default.
 
+### Table of contents
+
+Table of contents are not rendered by default. To render them, set `extra.table_of_contents.show = true` in `config.toml`.
+
+The table of contents is rendered inside a `details` element.
+If you want the section to be collapsed on page load, set `extra.table_of_contents.visible_on_load = false`.
+This defaults to `true`.
+
+In addition, `extra.table_of_contents.max_level` can limit the maximum level of headers to show.
+To show only `h1`s, set `max_level = 1`, to show `h1`s and `h2`s, set `max_level = 2`, and so on.
+By default, `max_level` is set to 6, so all headers on the page are shown.
+
+Below is an example of how to configure the table of contents in `config.toml`.
+
+```toml
+[extra.table_of_contents]
+show = true
+max_level = 2
+visible_on_load = false
+```
+
+It can also be toggled on page-by-page basis. Add `extra.hide_table_of_contents = true` to the page's frontmatter to hide the table of contents for that specific page.
+
 ## Issues / Feedback / Contributing
 Please use [Codeberg issues](https://codeberg.org/alanpearce/zola-bearblog/issues) and [Pull Requests](https://codeberg.org/alanpearce/zola-bearblog/pulls).
 
@@ -76,5 +107,4 @@ ## License
 [MIT License](http://en.wikipedia.org/wiki/MIT_License) © [Alan Pearce](https://www.alanpearce.eu/)
 
 [zola-setup-guide]: https://www.getzola.org/documentation/getting-started/installation/
-[light-screenshot]: https://codeberg.org/alanpearce/zola-bearblog/raw/branch/main/screenshot.png
-[dark-screenshot]: https://codeberg.org/alanpearce/zola-bearblog/raw/branch/main/screenshot-dark.png
+[screenshot]: https://codeberg.org/alanpearce/zola-bearblog/raw/branch/main/screenshot.png

@@ -1,6 +1,6 @@
 title = "Zola ʕ•ᴥ•ʔ Bear Blog"
-base_url = "https://alanpearce.codeberg.page/zola-bearblog"
-description = ""
+base_url = "https://zola-bearblog.netlify.app/"
+description = "A Zola-theme based on Bear Blog."
 
 # Whether to automatically compile all Sass files in the sass directory
 compile_sass = false
@@ -13,22 +13,64 @@ {name = "categories", feed = true},
   {name = "tags", feed = true},
 ]
 
+default_language = "en"
+
+[translations]
+no_posts = "No posts yet"
+remove_filter = "Remove filter"
+filtering_for = "Filtering for"
+made_with = "Made with"
+
+[languages.de]
+title = "Zola ʕ•ᴥ•ʔ Bear Blog"
+description = "Ein Zola-theme basiert auf Bear Blog."
+
+taxonomies = [
+  {name = "categories", feed = true},
+  {name = "tags", feed = true},
+]
+
+[languages.de.translations]
+no_posts = "Keine Einträge"
+remove_filter = "Filter entfernen"
+filtering_for = "Filtern nach"
+made_with = "Erstellt mit"
+
 [markdown]
 # Whether to do syntax highlighting
 # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
 highlight_code = true
 
 [extra]
-date_format="%d %b, %Y"
+date_format="%Y-%m-%d"
+webserver_sends_csp_headers=true
+language_switcher=true
+translations = [
+  { code="en", name="English" },
+  { code="de", name="Deutsch" },
+]
+
+[extra.table_of_contents]
+show=true
+max_level=2
+visible_on_load=true
+
+[[extra.main_menu]]
+name = "Home"
+name_de = "Startseite"
+url = "/"
 
 [[extra.main_menu]]
 name = "Bear"
+name_de = "Bear"
 url = "@/bear.md"
 
 [[extra.main_menu]]
 name = "Zola"
+name_de = "Zola"
 url = "@/zola.md"
 
 [[extra.main_menu]]
 name = "Blog"
+name_de = "Blog"
 url = "@/blog/_index.md"

@@ -0,0 +1,23 @@
++++
++++
+# Eine himmlische Verbindung
+
+Es gibt eine Krise der Website-Fettleibigkeit. Aufgeblähte Websites voller Skripte, Werbung und Tracker bremsen deine Leser jedes Mal aus, wenn sie versuchen, deine gut gestalteten Inhalte zu lesen.
+
+Zola Bear Blog ist alles, was du brauchst, um eine fantastische und optimierte Website oder einen Blog zu erstellen. Es funktioniert perfekt auf **jedem** Anzeigegerät. Alles, worauf du dich konzentrieren müssen, ist das Schreiben guter Inhalte.
+
+[Zum ursprünglichen Bear-Blog](https://bearblog.dev/).
+
+---
+
+Was passiert, wenn du den weltweit schnellsten und leichtesten Generator für statische Websites mit einem Design-Theme kombinieren, das dir kostenlose, unkomplizierte und superschnelle Blogging-Funktionen bietet?
+
+**Benutze dieses Theme und finde es heraus!**
+
+Erstellt mit 💚 von [Alan Pearce](https://alanpearce.eu).
+
+---
+
+Veröffentliche einfach deine Inhalte online, bau ein Publikum auf und halte deine Seiten klein, schnell und **für Suchmaschinen optimiert**.
+
+Jede Seite ist ~5kb groß, und du kannst dein Blog selbst **hosten**.

@@ -0,0 +1,15 @@
++++
+title = "Bear"
++++
+
+Webseite: [https://bearblog.dev](https://bearblog.dev)
+
+Es gibt eine Krise der Website-Fettleibigkeit. Aufgeblähte Websites voller Skripte, Werbung und Tracker bremsen deine Leser jedes Mal aus, wenn sie versuchen, deine gut gestalteten Inhalte zu lesen.
+
+Zola Bear Blog ist alles, was du brauchst, um eine fantastische und optimierte Website oder einen Blog zu erstellen. Es funktioniert perfekt auf **jedem** Anzeigegerät. Alles, worauf du dich konzentrieren müssen, ist das Schreiben guter Inhalte.
+
+Bear macht es einfach, Inhalte online zu veröffentlichen und ein Publikum aufzubauen, während die Seiten klein, schnell und **für Suchmaschinen optimiert** bleiben.
+
+Jede Seite ist ~5kb.
+
+Weitere Informationen und Beiträge unter [GitHub](https://github.com/HermanMartinus/bearblog).

@@ -0,0 +1,3 @@
++++
+title = "Blog"
++++

@@ -0,0 +1,36 @@
++++
+title = "Zola"
++++
+## Keine Abhängigkeiten
+
+Zola wird als einzelne ausführbare Datei mit Sass-Kompilierung, Syntax
+Syntaxhervorhebung, Inhaltsverzeichnis und vielen anderen Funktionen, die
+die normalerweise das Einrichten einer Entwicklungsumgebung oder das Hinzufügen einiger
+JavaScript-Bibliotheken zu deiner Website.
+
+## Rasend schnell
+
+Die durchschnittliche Website wird in weniger als einer Sekunde erstellt, einschließlich
+Sass-Kompilierung und Syntaxhervorhebung.
+
+## Skalierbar
+
+Zola rendert deine gesamte Website als statische Dateien, was es trivial macht
+jede Art von Datenverkehr zu bewältigen, ohne dass du dich um die
+ohne sich um die Verwaltung eines Servers oder einer Datenbank kümmern zu müssen.
+
+## Einfach zu bedienen
+
+Von der CLI bis zur Template-Engine ist alles so konzipiert, dass es
+intuitiv. Verlasse dich jedoch nicht auf mein Wort, sondern schaue in die Dokumentation
+und überzeug dich selbst.
+
+## Flexibel
+
+Zola geht dir aus dem Weg, damit du dich auf deine Inhalte konzentrieren kannst, sei es ein
+Blog, eine Wissensdatenbank, eine Landing Page oder eine Kombination aus beidem.
+
+## Erweitertes Markdown
+
+Zola verfügt über Shortcodes und interne Links, die das Schreiben von
+deine Inhalte zu schreiben.

@@ -1,5 +1,6 @@
 +++
 title = "Zola"
+extra.hide_table_of_contents = true
 +++
 ## No dependencies
 

@@ -5,11 +5,11 @@ "inputs": {
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1681202837,
-        "narHash": "sha256-H+Rh19JDwRtpVPAWp64F+rlEtxUWBAQW28eAi3SRSzg=",
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "cfacdce06f30d2b68473a46042957675eebb3401",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
         "type": "github"
       },
       "original": {
@@ -20,11 +20,11 @@ }
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1681693905,
-        "narHash": "sha256-XdXMvCt+i2ZcmAIPZvu3RUwcdaC9OX7d1WMAJJokzeA=",
+        "lastModified": 1715413075,
+        "narHash": "sha256-FCi3R1MeS5bVp0M0xTheveP6hhcCYfW/aghSTPebYL4=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "db34d7561caa508ece0265a56f382c5d3b7a6c1b",
+        "rev": "e4e7a43a9db7e22613accfeb1005cca1b2b1ee0d",
         "type": "github"
       },
       "original": {

@@ -0,0 +1,27 @@
+[build]
+publish = "public"
+command = "zola build"
+
+[build.environment]
+# Set the version name that you want to use and Netlify will automatically use it.
+ZOLA_VERSION = "0.17.2"
+
+# The magic for deploying previews of branches.
+# We need to override the base url with whatever url Netlify assigns to our
+# preview site.  We do this using the Netlify environment variable
+# `$DEPLOY_PRIME_URL`.
+
+[context.deploy-preview]
+command = "zola build --base-url $DEPLOY_PRIME_URL"
+[context.branch-deploy]
+command = "zola build --base-url $DEPLOY_PRIME_URL"
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Frame-Options = "DENY"
+    X-Content-Type-Options = "nosniff"
+    X-XSS-Protection = "1; mode=block"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+    Strict-Transport-Security = "max-age=63072000; includeSubdomains"
+    Content-Security-Policy = "default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'sha256-iJQfPEEzY1fjDE/sJElXzaTdtJI+vxkKM//fXwJj/cI='; form-action 'none'; base-uri 'self'; frame-ancestors 'none'"

Not showing binary file.

Not showing binary file.

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="{{ lang | default(value="en-US" ) }}">
 <head>
+  {%- if config.webserver_sends_csp_headers %}
+  {%- include "security_tags.html" ignore missing %}
+  {%- endif %}
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   {% include "favicon.html" ignore missing -%}
@@ -12,7 +15,9 @@ {% block rss -%}
   <link rel="alternate" type={% if config.feed_filename == "atom.xml" %}"application/atom+xml"{% else %}"application/rss+xml"{% endif %} title="{{ config.title }}" href="{{ get_url(path=config.feed_filename) | safe }}">
   {%- endblock -%}
   {%- endif %}
-  {% include "style.html" ignore missing -%}
+  <style>
+  {%- include "style.css.html" ignore missing -%}
+  </style>
   {% include "custom_head.html" ignore missing -%}
 </head>
 <body>

@@ -1,5 +1,5 @@
 <footer>
   {%- if not config.extra.hide_made_with_line %}
-    Made with <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
+    {{ trans(key="made_with", lang=lang) }} <a href="https://codeberg.org/alanpearce/zola-bearblog">Zola ʕ•ᴥ•ʔ Bear</a>
   {%- endif %}
 </footer>

@@ -1,6 +1,7 @@
 <header>
-  <a href="{{ config.base_url }}" class="title">
-    <h2>{{ config.title }}</h2>
+  {% include "language_switcher.html" %}
+  <a href="{{ get_url(path="@/_index.md", lang=lang) }}" class="title">
+    <h1>{{ config.title }}</h1>
   </a>
   <nav>
     {% include "nav.html" %}

@@ -0,0 +1,12 @@
+{% if config.extra.language_switcher %}
+  <nav class="lang">
+    {%- set language_agnostic_path = current_path | default(value="/") | replace(from='/' ~ lang ~ '/', to = '/') | trim_start_matches(pat = '/') -%}
+    {%- for tr in config.extra.translations %}
+      {%- if tr.code == lang %}
+        <active>{{ tr.name }}</active>
+      {%- else %}
+          <a href="{{ get_url(path=language_agnostic_path, lang=tr.code) ~ "/" }}" hreflang="{{ tr.code }}">{{ tr.name }}</a>
+      {%- endif %}
+    {%- endfor %}
+  </nav>
+{% endif %}

@@ -0,0 +1,12 @@
+{% macro table_of_contents(toc, max_level) %}
+<ul>
+  {% for header in toc %}
+    <li>
+      <a href="{{ header.permalink | safe }}">{{ header.title }}</a>
+        {% if header.children and header.level < max_level %}
+          {{ self::table_of_contents(toc=header.children, max_level=max_level) }}
+        {% endif %}
+    </li>
+  {% endfor %}
+</ul>
+{% endmacro %}

@@ -1,10 +1,21 @@
-<a href="{{ config.base_url }}">Home</a>
+{% set current_lang = config.default_language %}
+{% if page %}
+  {% set current_lang = page.lang %}
+{% elif section %}
+  {% set current_lang = section.lang %}
+{% endif %}
 {%- if config.extra.main_menu %}
   {%- for item in config.extra.main_menu %}
+    {% if current_lang == config.default_language %}
+      {% set title = item.name %}
+    {% else %}
+      {% set language_key = 'name_' ~ current_lang %}
+      {% set title = item[language_key] %}
+    {% endif %}
     {%- if item.url is matching("https?://") %}
-      <a href="{{ item.url }}">{{ item.name }}</a>
+      <a href="{{ item.url }}">{{ title }}</a>
     {%- else %}
-      <a href="{{ get_url(path=item.url )}}">{{ item.name }}</a>
+      <a href="{{ get_url(path=item.url, lang=lang )}}">{{ title }}</a>
     {%- endif %}
   {%- endfor %}
 {%- endif -%}

@@ -1,3 +1,4 @@
+{% import "macros.html" as macros %}
 {% extends "base.html" %}
 
 {% block title %}{{ page.title }} | {{ super() }}{% endblock %}
@@ -15,6 +16,12 @@ </i>
       </p>
     {%- endif %}
   {%- endif %}
+  {%- if config.extra.table_of_contents.show and not page.extra.hide_table_of_contents and page.toc %}
+    <details {%if config.extra.table_of_contents.visible_on_load %}open{% endif %}>
+      <summary>Table of Contents</summary>
+      {{ macros::table_of_contents(toc=page.toc, max_level=config.extra.table_of_contents.max_level) }}
+    </details>
+  {%- endif %}
   <main>
     {{ page.content | safe }}
   </main>
@@ -23,7 +30,7 @@ {%- if page.taxonomies %}
       {%- for name, taxon in page.taxonomies %}
         {{ name | capitalize }}:
         {%- for item in taxon %}
-          <a href="{{ get_taxonomy_url(kind=name, name=item) }}">#{{ item }}</a>
+          <a href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">#{{ item }}</a>
         {%- endfor %}
       {%- endfor %}
     {%- endif %}

@@ -3,9 +3,9 @@
 {% block main %}
   <main>
     {%- if taxonomy.term %}
-      <h3 style="margin-bottom:0">Filtering for "{{ section.title }}"</h3>
+      <h3 class="filter">{{ trans(key="filtering_for",lang=lang)}} "{{ section.title }}"</h3>
       <small>
-        <a href="{{ get_url(path="@/blog/_index.md") }}">Remove filter</a>
+        <a href="{{ get_url(path="@/blog/_index.md", lang=lang) }}">{{ trans(key="remove_filter", lang=lang) }}</a>
       </small>
     {%- endif %}
     <ul class="blog-posts">
@@ -22,13 +22,13 @@ <a href="{{ page.permalink }}">{{ page.title }}</a>
         </li>
         {% else %}
         <li>
-          No posts yet
+          {{ trans(key="no_posts", lang=lang) }}
         </li>
       {% endfor %}
     </ul>
     <small>
       <div>
-        {% set tags = get_taxonomy(kind="tags") %}
+        {% set tags = get_taxonomy(kind="tags", lang=lang) %}
         {% for post in tags.items %}
           <a href="{{ post.permalink }}">#{{ post.name }}</a>&nbsp;
         {% endfor %}

@@ -0,0 +1,2 @@
+<!-- These tags are here for demostration. It's recommended to send them via HTTP headers instead. -->
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; object-src 'none'; script-src 'none'; style-src 'unsafe-inline'">

@@ -1,1 +1,2 @@
 <meta name="title" content="{% if page.title %}{{ page.title }}{% else %}{{ config.title }}{% endif %}">
+<meta name="description" content="{{ config.description }}" />

@@ -1,4 +1,3 @@
-<style>
   body {
     font-family: Verdana, sans-serif;
     margin: auto;
@@ -32,11 +31,24 @@ text-decoration: none;
     border: 0;
   }
 
+  .title h1 {
+  font-size: 1.5em;
+  }
+
   .title span {
     font-weight: 400;
   }
 
+  .filter {
+    margin-bottom: 0;
+  }
+
   nav a {
+    margin-right: 10px;
+  }
+
+  nav active {
+    font-weight: bold;
     margin-right: 10px;
   }
 
@@ -168,5 +180,3 @@ .helptext {
       color: #aaa;
     }
   }
-
-</style>

@@ -2,9 +2,10 @@ {% extends "base.html" %}
 
 {% block main %}
   <main>
+    <h1>{{ taxonomy.name | capitalize }}</h1>
     <small>
       <div>
-        {% set tags = get_taxonomy(kind="tags") %}
+        {% set tags = get_taxonomy(kind="tags", lang=lang) %}
         {% for post in tags.items %}
           <a href="{{ post.permalink }}">#{{ post.name }}</a>&nbsp;
         {% endfor %}

@@ -2,10 +2,10 @@ {% extends "base.html" %}
 
 {% block main %}
   <main>
-    {%- if taxonomy.term %}
-      <h3 style="margin-bottom:0">Filtering for "{{ term.name }}"</h3>
+    {%- if term %}
+      <h3 class="filter">Filtering for "{{ term.name }}"</h3>
       <small>
-        <a href="{{ get_url(path="@/blog/_index.md") }}">Remove filter</a>
+        <a href="{{ get_url(path="@/blog/_index.md", lang=lang) }}">{{ trans(key="remove_filter", lang=lang) }}</a>
       </small>
     {%- endif %}
     <ul class="blog-posts">
@@ -22,7 +22,7 @@ <a href="{{ page.permalink }}">{{ page.title }}</a>
         </li>
       {% else %}
         <li>
-          No posts yet
+          {{ trans(key="no_posts", lang=lang) }}
         </li>
       {% endfor %}
     </ul>

@@ -1,11 +1,11 @@
 name = "Bear"
 description = "Bear blog theme"
 license = "MIT"
-homepage = "https://codeberg.org/alanpearce/zola/bearblog"
+homepage = "https://codeberg.org/alanpearce/zola-bearblog"
 # The minimum version of Zola required
 min_version = "0.4.0"
 # An optional live demo URL
-demo = "https://alanpearce.codeberg.page/zola-bearblog"
+demo = "https://zola-bearblog.netlify.app/"
 
 # Any variable there can be overridden in the end user `config.toml`
 # You don't need to prefix variables by the theme name but as this will
@@ -13,6 +13,12 @@ # be merged with user data, some kind of prefix or nesting is preferable
 # Use snake_casing to be consistent with the rest of Zola
 [extra]
 date_format="%d %b, %Y"
+webserver_sends_csp_headers=false
+
+[extra.table_of_contents]
+show=false
+max_level=6
+visible_on_load=true
 
 [author]
 name = "Alan Pearce"