Merge pull request #3 from rust-basel/update_theme

chore: update theme and add pt_Br translation

Author: yguenduez

.gitignore

@@ -1,2 +1,3 @@
 /public
 /.idea
+/node_modules

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright 2024 Rust Basel
+Copyright 2025 Rust Basel
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -32,7 +32,7 @@ you can choose your preferred language setting for a consistent blog experience.
 - [Configuration](#configuration)
 - [Front Matter](#front-matter)
 - [Localization](#localization)
-- [Integrating in theme folder](#integrating-in-theme-folder)
+- [Integrating the theme folder](#integrating-the-theme-folder)
 - [Development](#development)
 - [Remarks](#remarks)
 - [Contributing](#contributing)
@@ -49,15 +49,17 @@ The site uses the German language.
 
 ## Prerequisites
 
-In order to use the theme, you need some software pre-installed:
+To use the theme, you need some software pre-installed:
 
 - [Git](https://git-scm.com/downloads), Required for version control.
 
 - [Node](https://nodejs.org/en/download), an open-source, cross-platform JavaScript runtime environment.
+  Node is optional and only needed if you want to change the CSS in `css/main.css`.
 
 - [Zola](https://github.com/getzola/zola/releases), a fast static site generator.
 
-- an editor or integrated development environment of your choice - I use [JetBrains IDEA](https://www.jetbrains.com/idea/download),
+- an editor or integrated development environment of your choice —
+  I use [JetBrains IDEA](https://www.jetbrains.com/idea/download),
   an IDE that makes development a more productive and enjoyable experience. 
 
 ---
@@ -68,7 +70,7 @@ In order to use the theme, you need some software pre-installed:
    Or download it from `https://github.com/thomasweitzel/zolarwind`.
 
 2. Make adjustments to the `config.toml` file as needed.
-   In order to run the theme as a standalone site, you need to adjust the `base_url` to your domain.
+   To run the theme as a standalone site, you need to adjust the `base_url` to your domain.
    If you want to try it out on your local machine, you can leave it as is.
    Just run `zola serve` from the theme's root directory. 
 
@@ -81,7 +83,7 @@ Here's a breakdown of the configuration settings tailored for this theme:
 
 ### Basic Configuration:
 
-- **base_url**: Specifies the URL the site will be built for.
+- **base_url**: Specify the URL the site will be built for.
   In this case, the site will be built for `https://example.org`.
   Adjust this to your own domain.
 
@@ -93,7 +95,7 @@ Here's a breakdown of the configuration settings tailored for this theme:
   As of now, German (`de`) is available in the `i18n` directory.
 
 - **theme**: The theme used for the site.
-  The provided line is commented out, indicating that the themes files are taken from the `template` directory.
+  The provided line is commented out, indicating that the theme's files are taken from the `template` directory.
   If you move the theme to the `themes/zolarwind` directory, use `zolarwind` for this entry.
 
 - **build_search_index**: If set to `true`, a search index will be built from the pages and section content for the `default_language`.
@@ -111,39 +113,50 @@ Here's a breakdown of the configuration settings tailored for this theme:
 
 - **highlight_theme**: Specifies the theme to be used for code highlighting. The chosen theme in this configuration is `1337`.
 
+- **extra_syntaxes_and_themes**: directory for additional syntax highlighting configuration files for languages not directly supported by Zola.
+
 ### Extra Configuration:
 
 The `[extra]` section is where you can place any custom variables you want to be accessible in your templates.
 
-- **title**: The title of the site.
-  Here, it's set to "Zolarwind".
-
-- **generator**: Optional.
-  Specifies the generator used for creating the static website.
-  This site is generated using `Zola v0.18.0`.
+- **title**: Required.
+  The title of the site.
+  Here, it's set to "Zolarwind."
 
-- **path_language_resources**: The path to the directory containing language resource files.
+- **path_language_resources**: Required.
+  The path to the directory containing language resource files.
   In this config, it's set to `i18n/`.
   If you move the theme to the `themes/zolarwind` directory, use `themes/zolarwind/i18n/` for this entry.
 
-- **favicon_svg**: Provides a path to the site's favicon in SVG format.
+- **generator**: Optional.
+  Specify the generator used for creating the static website.
+  This site is generated using `Zola v0.19.0`.
+
+- **favicon_svg**: Optional.
+  Provides a path to the site's favicon in SVG format.
   The provided path points to `/img/yin-yang.svg`.
 
-- **copyright**: A template for the copyright notice.
+- **copyright**: Optional.
+  A template for the copyright notice.
   It includes a placeholder `{year}` which is dynamically replaced with the current year of your `zola build` run.
 
-- **site_description**: A brief description displayed on the site's banner.
+- **site_description**: Optional.
+  A brief description is displayed on the site's banner.
 
-- **quote**: A structure defining a quote and its author.
+- **quote**: Optional.
+  A structure defining a quote and its author.
   This quote is from Yoda.
 
-- **menu_pages**: An array of main navigation menu items.
+- **menu_pages**: Optional.
+  An array of main navigation menu items.
   Each item has a `title` and a `url`.
 
-- **footer_pages**: An array of pages that will appear in the site's footer.
+- **footer_pages**: Optional.
+  An array of pages that will appear in the site's footer.
   Each item has a `title` and a `url`.
 
-- **social_links**: An array of social media links.
+- **social_links**: Optional.
+  An array of social media links.
   Each link has a name, a boolean indicating if it's enabled, a URL, and an SVG icon.
 
 ---
@@ -154,7 +167,7 @@ For blog posts (Markdown files in folder `content/blog`), this theme uses a dire
 This way, I have all resources for a post in one place.
 It can include images, videos, and other files.
 
-Each post is associated with an image, that is displayed on the blog's main page and on the posts detail page.
+Each post is associated with an image displayed on the blog's main page and on the post's detail page.
 If you do not provide an image under `extra.image`, a default image is used instead.
 
 - **date**: the date of the blog posts, e.g. `2020-06-11`.
@@ -163,7 +176,7 @@ If you do not provide an image under `extra.image`, a default image is used inst
 
 - **description**: the description of the blog posts. It is used as a summary on the blog's main page.
 
-- **authors**: an optional array of all the posts authors, e.g. `["Thomas Weitzel"]`.
+- **authors**: an optional array of all the post's authors, e.g. `["Thomas Weitzel"]`.
   You can leave it empty, but then the first author will show up as `Unknown` in the feed (`atom.xml`).
 
 - **taxonomies**: only the optional `tags` taxonomy is used by this theme.
@@ -181,7 +194,7 @@ If you do not provide an image under `extra.image`, a default image is used inst
 
 - **extra.image**: an optional image for the post.
   If omitted, a default image is used instead.
-  The image is displayed on the blog's main page and on the posts detail page.
+  The image is displayed on the blog's main page and on the post's detail page.
 
 ---
 
@@ -200,7 +213,7 @@ To localize your blog with this theme:
    If your language is not supported yet, just create a new resource file with your translations.
    Use the file `en.toml` as a template for your own translations.
    Use the correct language code for the file name, e.g. `eo.toml` for Esperanto.
-   Only languages that read from left-to-right (ltr) are supported by this theme.
+   This theme supports only languages that read from left-to-right (ltr).
 
 2. The theme will automatically display all theme-specific string resources in the chosen language.
 
@@ -212,7 +225,7 @@ If you need to define your own date format, look [here](https://docs.rs/chrono/l
 
 ---
 
-## Integrating in theme folder
+## Integrating the theme folder
 
 This project is structured as a stand-alone Zola site.
 This section is for those who might want to integrate the theme into an existing Zola website.
@@ -232,6 +245,7 @@ This is the directory structure of the stand-alone site, where the theme is in t
 │   ├── css
 │   ├── img
 │   └── js
+├── syntaxes
 ├── templates
 └── theme.toml
 ```
@@ -249,6 +263,7 @@ Create a new directory `themes/zolarwind` and move the following files and direc
         ├── static
         │   ├── img
         │   └── js
+        ├── syntaxes
         ├── templates
         └── theme.toml
 ```
@@ -261,7 +276,7 @@ The generation process can be triggered with a script in the `package.json` file
 **You only need to adjust and run the script** in `package.json` if you make changes to the theme's template files or use new Tailwind CSS classes directly in your content files.
 Since the source file `css/main.css` has moved to the directory `themes/zolarwind/css/main.css`, we need to adjust the script in `package.json` accordingly.
 
-This is how the relevant part of it looks like for the stand-alone site:
+This is what the relevant part of it looks like for the stand-alone site:
 
 ```json
 "scripts": {
@@ -298,44 +313,44 @@ path_language_resources = "themes/zolarwind/i18n/"
 
 ## Development
 
-If you want to adjust the CSS of the theme to your needs, you will need to edit the files in the `templates` and `css` directories.
-While you do this, you should make sure that the CSS file `static/css/generated.css` is up-to-date.
-This file is generated from the file `css/main.css`, and all the files that are configured as a pattern in `tailwind.config.js`:
-
-- `css/main.css`
+If you want to adjust the CSS of the theme to your needs, you will need to edit the files in the `templates` and `css`
+directories. While you do this, you should make sure that the CSS file `static/css/generated.css` is up to date. This
+file is generated from the file `css/main.css`, and all the files that Tailwind automatically identifies via automatic
+content detection.
 
-- `themes/**/*.html`
+If you ever need to explicitly add a source file excluded by default, you can always add it with the `@source`
+directive, right in your `css/main.css` file:
 
-- `templates/**/*.html`
-
-- `content/**/*.md`
+```css
+@source "../node_modules/@my-company/ui-lib";
+```
 
 So whenever one of these files changes, you need to run the script `css:build` from the `package.json` file.
-To accomplish this, you need to have `Node.js` and all dependencies from `package.json` installed (with `npm install`).
+To achieve this, you need to have `Node.js` and all dependencies from `package.json` installed (with `npm install`).
 Then you can run the script with `npm run css:watch`.
 It monitors all files mentioned above and triggers the CSS generation whenever a relevant file changes.
-This ensures, that the file `static/css/generated.css` is always up-to-date.
+This ensures, that the file `static/css/generated.css` is always up to date.
 
-I recommend to have two terminals open.
-In one terminal, run `zola serve` to start the Zola server.
+I recommend having two terminals open.
+In one terminal, run `npm run server` - or just `zola serve` - to start the Zola server.
 In the other terminal, run `npm run css:watch` to start the CSS generation whenever a relevant file changes.
 
-That way, your local web browser will automatically reload  the page with the updated CSS whenever you change a file.
+That way, your local web browser will automatically reload the page with the updated CSS whenever you change a file.
 
 ---
 
 ## Remarks
 
-### Typography for markdown
+### Typography for Markdown
 
-I'm not using `@tailwindcss/typography` for styling of markdown files.
+I'm not using `@tailwindcss/typography` for styling of Markdown files.
 I don't like how it looks.
 Instead, I use `@apply` in the `css/main.css` file.
 The `@apply` directive in Tailwind CSS enables you to compose utility classes into custom CSS classes.
-This makes it possible to apply multiple utility styles within a single class, making it efficient to style markdown content.
+This makes it possible to apply multiple utility styles within a single class, making it efficient to style Markdown content.
 
 This approach has pros and cons.
-But it gives me fine-grained control over how the end result looks like.
+But it gives me fine-grained control over how the result looks like.
 While it is time-consuming, I prefer this solution over the `@tailwindcss/typography` plugin.
 
 Yes, I'm reinventing the wheel here, because for common typographic patterns, I'm just recreating what's already provided by the typography plugin.
@@ -352,7 +367,7 @@ Using KaTeX (or any other library) by serving it from a Content Delivery Network
 
 - **Cookies**: Many CDNs set cookies for various reasons, including analytics or performance optimizations.
   These cookies can track users across different websites that use the same CDN, potentially infringing on their privacy rights.
-  By hosting KaTeX on your domain, you have full control over the cookies set and can ensure compliance with GDPR.
+  By hosting KaTeX on your domain, you have full control over cookies and can ensure compliance with GDPR.
 
 - **Consent**: If you're using a CDN that sets cookies or collects data, you might need to get explicit user consent before loading resources from that CDN.
   This can complicate user experience and lead to a reduced site performance for users who opt-out.
@@ -374,7 +389,7 @@ If you see areas of improvement or want to add features, please submit a PR.
 
 I'm especially interested in more translations.
 See folder `i18n` for what's available and what is not.
-Just use the file `en.toml` as a template for your own translations.
+Use the file `en.toml` as a template for your own translations.
 
 ---
 

config.toml

@@ -14,7 +14,7 @@ default_language = "en"
 build_search_index = false
 
 # When set to "true", a feed is automatically generated
-# generate_feed = true
+generate_feeds = true
 
 # The taxonomies to use for the site
 taxonomies = [

css/main.css

@@ -1,8 +1,6 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss";
 
-@layer base {
+@layer utilities {
     .badge {
         @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium leading-4
     }
@@ -50,22 +48,25 @@
         @apply font-bold;
     }
     .prose h1 {
-        @apply text-xl font-bold mt-8;
+        @apply text-2xl font-bold mt-8;
     }
     .prose h2 {
-        @apply text-lg font-bold mt-8;
+        @apply text-xl font-bold mt-8;
     }
     .prose h3 {
-        @apply font-bold mt-8;
+        @apply text-lg font-bold mt-8;
+    }
+    .prose h4 {
+        @apply text-base font-bold mt-4;
     }
     .prose p {
         @apply mt-4;
     }
     .prose blockquote {
         @apply border-l-4 border-gray-600 pl-4 italic;
     }
-    .prose p code, .prose ol code, .prose ul code {
-        @apply px-1 font-mono text-sm border border-gray-200 bg-indigo-50 rounded-sm
+    .prose kbd, p code, .prose ol code, .prose ul code {
+        @apply mx-0.5 px-1 py-0.5 font-mono text-sm bg-gray-200 rounded shadow-sm ring-1 ring-gray-900/25;
     }
     .prose pre.mermaid {
         @apply block my-4 font-mono text-sm overflow-x-hidden
@@ -112,6 +113,9 @@
     h3 {
         @apply text-lg font-bold;
     }
+    h4 {
+        @apply text-base font-bold;
+    }
     a {
         @apply text-blue-600 no-underline;
     }

i18n/de.toml

@@ -7,8 +7,8 @@ settings_date_format = "%d. %B %Y"
 empty_page_title = "Kein Titel"
 empty_page_description = "Keine Zusammenfassung"
 read_more = "Mehr lesen"
-previous_posts = "Vorherige Beiträge"
-next_posts = "Nächste Beiträge"
+previous_posts = "Jüngere Beiträge"
+next_posts = "Ältere Beiträge"
 reading_time = "Lesezeit"
 aria_to_homepage = "Zur Homepage"
 aria_menu = "Menü"

i18n/pt.toml

@@ -0,0 +1,34 @@
+# Global settings
+settings_locale = "pt"
+settings_date_locale = "pt_BR"
+settings_date_format = "%d. %B %Y"
+
+# Simple language resources
+empty_page_title = "Título vazio"
+empty_page_description = "Descrição vazia"
+read_more = "Leia Mais"
+previous_posts = "Artigo anterior"
+next_posts = "Próximo artigo"
+reading_time = "tempo de leitura"
+aria_to_homepage = "Vá para homepage"
+aria_menu = "Menu"
+with_tag = "com tag"
+not_found_header = "A pagina solicitada não funciona."
+not_found_text = "Oops! Parece que a pagina desapareceu pelo abismo da internet. Talvez ela esteja de férias? Por favor verifique a URL ou me chame, and eu irei ver se posso localiza-la, ou ao menos enviar um grupo de busca."
+
+# Nouns with singular and plural
+[words]
+one = "palavra"
+other = "palavras"
+
+[minutes]
+one = "minuto"
+other = "minutos"
+
+[posts]
+one = "post"
+other = "posts"
+
+[tags]
+one = "tag"
+other = "tags"