diff --git a/config.toml b/config.toml index ab6cab6..adfab22 100644 --- a/config.toml +++ b/config.toml @@ -1,7 +1,7 @@ -base_url = "https://welpo.github.io/tabi" -title = "~/tabi" -description = "tabi is an accessible Zola theme with search, multi-language support, optional JavaScript, a perfect Lighthouse score, and comprehensive documentation. Crafted for personal websites and blogs." -author = "welpo" +base_url = "https://alexohneander.de" +title = "~/alexohneander" +description = "I’m Alex Wellnitz, a DevOps architect and software developer. I currently hold the role of DevOps Engineer at Materna, where I assist developers in accelerating web performance and provide guidance on various topics such as web development, Kubernetes, network security, and more." +author = "Alex Wellnitz" generate_feeds = true compile_sass = true minify_html = true @@ -48,19 +48,6 @@ skip_anchor_prefixes = [ "https://github.com/", ] -[languages.es] -title = "~/tabi" -description = "tabi es un tema accesible para Zola con búsqueda, soporte multilingüe, JavaScript opcional, una puntuación perfecta en Lighthouse y documentación exhaustiva. Diseñado para sitios web y blogs personales." -generate_feeds = true -taxonomies = [{name = "tags", feed = true}] -build_search_index = true - -[languages.ca] -title = "~/tabi" -description = "tabi és un tema accessible per a Zola amb cerca, suport multilingüe, JavaScript opcional, una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals." -generate_feeds = true -taxonomies = [{name = "tags", feed = true}] - [extra] # Check out the documentation (or the comments below) to learn how to customise tabi: # https://welpo.github.io/tabi/blog/mastering-tabi-settings/ @@ -114,7 +101,7 @@ stylesheets = [] # Remote repository for your Zola site. # Used for `show_remote_changes` and `show_remote_source` (see below). # Supports GitHub, GitLab, Gitea, and Codeberg. -remote_repository_url = "https://github.com/welpo/tabi" +remote_repository_url = "https://github.com/alexohneander/alexohneander-zola" # Set this to "auto" to try and auto-detect the platform based on the repository URL. # Accepted values are "github", "gitlab", "gitea", and "codeberg". remote_repository_git_platform = "auto" # Defaults to "auto". @@ -180,7 +167,7 @@ katex = false # Enable Mermaid diagrams for all posts. # Loads ~2.5MB of JavaScript. # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy -mermaid = false +mermaid = true # Serve Mermaid JavaScript locally. Version bundled with tabi. # If set to false, it will load the latest version from JSDelivr. @@ -256,8 +243,7 @@ social_media_card = "index.jpg" menu = [ { name = "blog", url = "blog", trailing_slash = true }, - { name = "archive", url = "archive", trailing_slash = true }, - { name = "tags", url = "tags", trailing_slash = true }, + { name = "experience", url = "experience", trailing_slash = true }, { name = "projects", url = "projects", trailing_slash = true }, ] @@ -273,7 +259,7 @@ full_content_in_feed = false # Protect against spambots: # 1. Use base64 for email (convert at https://www.base64encode.org/ or `printf 'your@email.com' | base64`). # 2. Or, set 'encode_plaintext_email' to true for auto-encoding (only protects on site, not in public repos). -email = "dGFiaUBvc2MuZ2FyZGVu" +email = "bW9pbkBhbGV4b2huZWFuZGVyLmRl" # Decoding requires ~400 bytes of JavaScript. If JS is disabled, the email won't be displayed. encode_plaintext_email = true # Setting is ignored if email is already encoded. @@ -281,11 +267,8 @@ encode_plaintext_email = true # Setting is ignored if email is already encoded. # Built-in icons: https://github.com/welpo/tabi/tree/main/static/social_icons # To use a custom icon, add it to your site's `static/social_icons` directory. socials = [ - { name = "github", url = "https://github.com/welpo/", icon = "github" }, - { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" }, - { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" }, - { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" }, - { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" }, + { name = "github", url = "https://github.com/alexohneander/", icon = "github" }, + { name = "linkedin", url = "https://www.linkedin.com/in/alex-wellnitz/", icon = "linkedin" }, ] # Fediverse profile. @@ -297,7 +280,6 @@ socials = [ footer_menu = [ {url = "about", name = "about", trailing_slash = true}, {url = "privacy", name = "privacy", trailing_slash = true}, - {url = "https://tabi-stats.osc.garden", name = "site_statistics", trailing_slash = true}, {url = "sitemap.xml", name = "sitemap", trailing_slash = false}, ] @@ -343,7 +325,7 @@ custom_subset = true [extra.analytics] # Specify which analytics service you want to use. # Supported options: ["goatcounter", "umami", "plausible"] -service = "goatcounter" +#service = "goatcounter" # Unique identifier for tracking. # For GoatCounter, this is the code you choose during signup. @@ -357,13 +339,13 @@ service = "goatcounter" # For Umami: Base URL like "https://umami.example.com" # For Plausible: Base URL like "https://plausible.example.com" # Leave this field empty if you're using the service's default hosting. -self_hosted_url = "https://tabi-stats.osc.garden" +#self_hosted_url = "https://tabi-stats.osc.garden" # giscus support for comments. https://giscus.app # Setup instructions: https://welpo.github.io/tabi/blog/comments/#setup [extra.giscus] enabled_for_all_posts = false # Enables giscus on all posts. It can be enabled on individual posts by setting `giscus = true` in the [extra] section of a post's front matter. -automatic_loading = true # If set to false, a "Load comments" button will be shown. +automatic_loading = false # If set to false, a "Load comments" button will be shown. repo = "welpo/tabi-comments" repo_id = "R_kgDOJ59Urw" # Find this value in https://giscus.app/ category = "Announcements" diff --git a/content/_index.ca.md b/content/_index.ca.md deleted file mode 100644 index a5da748..0000000 --- a/content/_index.ca.md +++ /dev/null @@ -1,15 +0,0 @@ -+++ -title = "Publicacions recents" -sort_by = "date" - -[extra] -header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor de tabi" } -section_path = "blog/_index.ca.md" -max_posts = 4 -projects_path = "projects/_index.ca.md" -max_projects = 3 -show_projects_first = false -social_media_card = "ca.jpg" -+++ - -tabi és un tema accessible per a Zola amb [cerca](@/blog/mastering-tabi-settings/index.ca.md#cerca), [suport multilingüe](@/blog/faq-languages/index.ca.md), [JavaScript opcional](@/blog/javascript/index.ca.md), una puntuació perfecta a Lighthouse i documentació exhaustiva. Dissenyat per a llocs web i blogs personals. diff --git a/content/_index.es.md b/content/_index.es.md deleted file mode 100644 index 53eb2e9..0000000 --- a/content/_index.es.md +++ /dev/null @@ -1,15 +0,0 @@ -+++ -title = "Publicaciones recientes" -sort_by = "date" - -[extra] -header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor de tabi" } -section_path = "blog/_index.es.md" -max_posts = 4 -projects_path = "projects/_index.es.md" -max_projects = 3 -show_projects_first = false -social_media_card = "es.jpg" -+++ - -tabi es un tema accesible para [Zola](https://www.getzola.org) con [búsqueda](@/blog/mastering-tabi-settings/index.es.md#busqueda), [soporte multilingüe](@/blog/faq-languages/index.es.md), [JavaScript opcional](@/blog/javascript/index.es.md), una puntuación perfecta en Lighthouse y documentación exhaustiva. Diseñado para sitios web y blogs personales. diff --git a/content/_index.md b/content/_index.md index 4d1dbe6..d697af0 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,7 +3,7 @@ title = "Latest posts" sort_by = "date" [extra] -header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" } +header = {title = "Hello! I'm Alex~", img = "img/main.webp", img_alt = "Alex Wellnitz" } section_path = "blog/_index.md" max_posts = 4 projects_path = "projects/_index.md" @@ -12,4 +12,4 @@ show_projects_first = false social_media_card = "index.jpg" +++ -tabi is an accessible [Zola](https://www.getzola.org) theme with [search](@/blog/mastering-tabi-settings/index.md#search), [multi-language support](@/blog/faq-languages/index.md), [optional JavaScript](@/blog/javascript/index.md), a perfect Lighthouse score, and comprehensive documentation. Crafted for personal websites and blogs. +I'm Alex Wellnitz, a DevOps architect and software developer. I currently hold the role of DevOps Engineer at Materna, where I assist developers in accelerating web performance and provide guidance on various topics such as web development, Kubernetes, network security, and more. diff --git a/content/archive/_index.ca.md b/content/archive/_index.ca.md deleted file mode 100644 index 869b1d2..0000000 --- a/content/archive/_index.ca.md +++ /dev/null @@ -1,7 +0,0 @@ -+++ -title = "Arxiu" -template = "archive.html" - -[extra] -social_media_card = "ca_archive.jpg" -+++ diff --git a/content/archive/_index.es.md b/content/archive/_index.es.md deleted file mode 100644 index 9f33695..0000000 --- a/content/archive/_index.es.md +++ /dev/null @@ -1,7 +0,0 @@ -+++ -title = "Archivo" -template = "archive.html" - -[extra] -social_media_card = "es_archive.jpg" -+++ diff --git a/content/archive/_index.md b/content/archive/_index.md deleted file mode 100644 index 10cf255..0000000 --- a/content/archive/_index.md +++ /dev/null @@ -1,7 +0,0 @@ -+++ -title = "Archive" -template = "archive.html" - -[extra] -social_media_card = "archive.jpg" -+++ diff --git a/content/archive/archive.jpg b/content/archive/archive.jpg deleted file mode 100644 index fb03554..0000000 Binary files a/content/archive/archive.jpg and /dev/null differ diff --git a/content/archive/ca_archive.jpg b/content/archive/ca_archive.jpg deleted file mode 100644 index cd25448..0000000 Binary files a/content/archive/ca_archive.jpg and /dev/null differ diff --git a/content/archive/es_archive.jpg b/content/archive/es_archive.jpg deleted file mode 100644 index c95177d..0000000 Binary files a/content/archive/es_archive.jpg and /dev/null differ diff --git a/content/blog/_index.ca.md b/content/blog/_index.ca.md deleted file mode 100644 index 25e0758..0000000 --- a/content/blog/_index.ca.md +++ /dev/null @@ -1,10 +0,0 @@ -+++ -paginate_by = 5 -title = "Blog" -sort_by = "date" -insert_anchor_links = "left" - -[extra] -social_media_card = "ca_blog.jpg" -show_previous_next_article_links = true -+++ diff --git a/content/blog/_index.es.md b/content/blog/_index.es.md deleted file mode 100644 index 201c2d4..0000000 --- a/content/blog/_index.es.md +++ /dev/null @@ -1,10 +0,0 @@ -+++ -paginate_by = 5 -title = "Blog" -sort_by = "date" -insert_anchor_links = "left" - -[extra] -social_media_card = "es_blog.jpg" -show_previous_next_article_links = true -+++ diff --git a/content/blog/backup-mysql-databases-in-kubernetes/index.md b/content/blog/backup-mysql-databases-in-kubernetes/index.md new file mode 100644 index 0000000..96ec0ad --- /dev/null +++ b/content/blog/backup-mysql-databases-in-kubernetes/index.md @@ -0,0 +1,130 @@ ++++ +title = "Backup MySQL Databases in Kubernetes" +date = 2021-03-03 +updated = 2021-03-03 +description = "In this post, we will show you how to create a MySQL server backup using Kubernetes CronJobs." + +[taxonomies] +tags = ["docker", "kubernetes", "cronjob", "bash", "backup"] + +[extra] +toc = false +quick_navigation_buttons = true ++++ +In this post, we will show you how to create a MySQL server backup using Kubernetes CronJobs. + +In our case, we do not have a managed MySQL server. But we want to backup it to our NAS, so that we have a backup in case of emergency. +For this we first build a container that can execute our tasks, because we will certainly need several tasks to backup our cluster. + +## CronJob Agent Container + +First, we'll show you our Dockerfile so you know what we need. + +```Dockerfile +FROM alpine:3.10 + +# Update +RUN apk --update add --no-cache bash nodejs-current yarn curl busybox-extras vim rsync git mysql-client openssh-client +RUN curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.18.0/bin/linux/amd64/kubectl && chmod +x ./kubectl && mv ./kubectl /usr/local/bin/kubectl + +# Scripts +RUN mkdir /srv/jobs +COPY jobs/* /srv/jobs/ + +# Backup Folder +RUN mkdir /var/backup +RUN mkdir /var/backup/mysql +``` + +## Backup Script + +And now our backup script which the container executes. + +Our script is quite simple, we get all tables with the mysql client, export them as sql file, pack them in a zip file and send them in a 8 hours interval to our NAS. + +```bash +#!/bin/bash + +############# SET VARIABLES ############# + +# Env Variables +BACKUPSERVER="8.8.8.8" # Backup Server Ip +BACKUPDIR=/var/backup/mysql +BACKUPREMOTEDIR="/mnt/backup/kubernetes/" +HOST="mariadb.default" +NOW="$(date +"%Y-%m-%d")" +STARTTIME=$(date +"%s") +USER=mysqlUser +PASS=mysqlPassword + + +############# BUILD ENVIROMENT ############# +# Check if temp Backup Directory is empty +mkdir $BACKUPDIR + +if [ "$(ls -A $BACKUPDIR)" ]; then + echo "Take action $BACKUPDIR is not Empty" + rm -f $BACKUPDIR/*.gz + rm -f $BACKUPDIR/*.mysql +else + echo "$BACKUPDIR is Empty" +fi + +############# BACKUP SQL DATABASES ############# +for DB in $(mysql -u$USER -p$PASS -h $HOST -e 'show databases' -s --skip-column-names); do + mysqldump -u$USER -p$PASS -h $HOST --lock-tables=false $DB > "$BACKUPDIR/$DB.sql"; +done + +############# ZIP BACKUP ############# +cd $BACKUPDIR +tar -zcvf backup-${NOW}.tar.gz *.sql + +############# MOVE BACKUP TO REMOTE ############# +rsync -avz $BACKUPDIR/backup-${NOW}.tar.gz root@$BACKUPSERVER:$BACKUPREMOTEDIR + +# done +``` + +## Kubernetes CronJob Deployment + +Finally we show you the kubernetes deployment for our agent. + +In the deployment, our agent is defined as a CronJob that runs every 8 hours. +In addition, we have added an SSH key as a Conifg map so that this can write to the NAS and a certain security is given. + +```yaml +apiVersion: batch/v1beta1 +kind: CronJob +metadata: + name: backup-mariadb + namespace: default +spec: + schedule: "0 8 * * *" + successfulJobsHistoryLimit: 1 + failedJobsHistoryLimit: 1 + jobTemplate: + spec: + template: + spec: + containers: + - name: cronjob-agent + image: xxx/cronjob-agent + command: ["bash", "/srv/jobs/backup-mariadb.sh"] + volumeMounts: + - mountPath: /root/.ssh/id_rsa.pub + name: cronjob-default-config + subPath: id_rsa.pub + - mountPath: /root/.ssh/id_rsa + name: cronjob-default-config + subPath: id_rsa + readOnly: true + - mountPath: /root/.ssh/config + name: cronjob-default-config + subPath: config + volumes: + - name: cronjob-default-config + configMap: + name: cronjob-default-config + defaultMode: 256 + restartPolicy: Never +``` \ No newline at end of file diff --git a/content/blog/baremetal-cni-setup-with-cilium/index.md b/content/blog/baremetal-cni-setup-with-cilium/index.md new file mode 100644 index 0000000..434cfc8 --- /dev/null +++ b/content/blog/baremetal-cni-setup-with-cilium/index.md @@ -0,0 +1,114 @@ ++++ +title = "Baremetal CNI Setup with Cilium" +date = 2022-01-21 +updated = 2022-01-21 +description = "In a freshly set up Kubernetes cluster, we need a so-called CNI. This CNI is not always present after installation." + +[taxonomies] +tags = ["kubernetes", "cni", "baremetal"] + +[extra] +toc = false +quick_navigation_buttons = true ++++ +In a freshly set up Kubernetes cluster, we need a so-called CNI. This CNI is not always present after installation. + +## What is a Container Network Interface (CNI)? + +CNI is a network framework that allows the dynamic configuration of networking resources through a group of Go-written specifications and libraries. The specification mentioned for the plugin outlines an interface that would configure the network, provisioning the IP addresses, and mantain multi-host connectivity. + +In the Kubernetes context, the CNI seamlessly integrates with the kubelet to allow automatic network configuration between pods using an underlay or overlay network. An underlay network is defined at the physical level of the networking layer composed of routers and switches. In contrast, the overlay network uses a virtual interface like VxLAN to encapsulate the network traffic. + +Once the network configuration type is specified, the runtime defines a network for containers to join and calls the CNI plugin to add the interface into the container namespace and allocate the linked subnetwork and routes by making calls to IPAM (IP Address Management) plugin. + +In addition to Kubernetes networking, CNI also supports Kubernetes-based platforms like OpenShift to provide a unified container communication across the cluster through software-defined networking (SDN) approach. + +### What is Cilium? + +Cilium is an open-source, highly scalable Kubernetes CNI solution developed by Linux kernel developers. Cilium secures network connectivity between Kubernetes services by adding high-level application rules utilizing eBPF filtering technology. Cilium is deployed as a daemon `cilium-agent` on each node of the Kubernetes cluster to manage operations and translates the network definitions to eBPF programs. + +The communication between pods happens over an overlay network or utilizing a routing protocol. Both IPv4 and IPv6 addresses are supported for cases. Overlay network implementation utilizes VXLAN tunneling for packet encapsulation while native routing happens through unencapsulated BGP protocol. + +Cilium can be used with multiple Kubernetes clusters and can provide multi CNI features, a high level of inspection,pod-to-pod connectivity across all clusters. + +Its network and application layer awareness manages packet inspection, and the application protocol packets are using. + +Cilium also has support for Kubernetes Network Policies through HTTP request filters. The policy configuration can be written into a YAML or JSON file and offers both ingress and egress enforcements. Admins can accept or reject requests based on the request method or path header while integrating policies with service mesh like Istio. + +### Preparation + +For the installation we need the CLI from Cilium. +We can install this with the following commands: + +**Mac OSx** + +```bash +curl -L --remote-name-all https://github.com/cilium/cilium-cli/releases/latest/download/cilium-darwin-amd64.tar.gz{,.sha256sum} +shasum -a 256 -c cilium-darwin-amd64.tar.gz.sha256sum +sudo tar xzvfC cilium-darwin-amd64.tar.gz /usr/local/bin +rm cilium-darwin-amd64.tar.gz{,.sha256sum} +``` + +**Linux** + +```bash +curl -L --remote-name-all https://github.com/cilium/cilium-cli/releases/latest/download/cilium-linux-amd64.tar.gz{,.sha256sum} +sha256sum --check cilium-linux-amd64.tar.gz.sha256sum +sudo tar xzvfC cilium-linux-amd64.tar.gz /usr/local/bin +rm cilium-linux-amd64.tar.gz{,.sha256sum} +``` + +### Install Cilium + +You can install Cilium on any Kubernetes cluster. These are the generic instructions on how to install Cilium into any Kubernetes cluster. The installer will attempt to automatically pick the best configuration options for you. + +#### Requirements + +- Kubernetes must be configured to use CNI +- Linux kernel >= 4.9.17 + +#### Install + +Install Cilium into the Kubernetes cluster pointed to by your current kubectl context: + +```bash +cilium install +``` + +If the installation fails for some reason, run `cilium status` to retrieve the overall status of the Cilium deployment and inspect the logs of whatever pods are failing to be deployed. + +### Validate the Installation + +To validate that Cilium has been properly installed, you can run + +```bash +$ cilium status --wait + /¯¯\ +/¯¯\__/¯¯\ Cilium: OK +\__/¯¯\__/ Operator: OK +/¯¯\__/¯¯\ Hubble: disabled +\__/¯¯\__/ ClusterMesh: disabled + \__/ + +DaemonSet cilium Desired: 2, Ready: 2/2, Available: 2/2 +Deployment cilium-operator Desired: 2, Ready: 2/2, Available: 2/2 +Containers: cilium-operator Running: 2 + cilium Running: 2 +Image versions cilium quay.io/cilium/cilium:v1.9.5: 2 + cilium-operator quay.io/cilium/operator-generic:v1.9.5: 2 +``` + +Run the following command to validate that your cluster has proper network connectivity: + +```bash +$ cilium connectivity test +ℹ️ Monitor aggregation detected, will skip some flow validation steps +✨ [k8s-cluster] Creating namespace for connectivity check... +(...) +--------------------------------------------------------------------------------------------------------------------- +📋 Test Report +--------------------------------------------------------------------------------------------------------------------- +✅ 69/69 tests successful (0 warnings) +``` + +Congratulations! You have a fully functional Kubernetes cluster with Cilium. 🎉 diff --git a/content/blog/ca_blog.jpg b/content/blog/ca_blog.jpg deleted file mode 100644 index c9c9057..0000000 Binary files a/content/blog/ca_blog.jpg and /dev/null differ diff --git a/content/blog/comments/index.ca.md b/content/blog/comments/index.ca.md deleted file mode 100644 index fdc0f37..0000000 --- a/content/blog/comments/index.ca.md +++ /dev/null @@ -1,136 +0,0 @@ -+++ -title = "Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes" -date = 2023-07-14 -updated = 2023-07-26 -description = "Descobreix com habilitar una secció de comentaris a les teves publicacions utilitzant giscus, utterances, Hyvor Talk, o Isso, permetent la interacció i feedback dels lectors." - -[taxonomies] -tags = ["funcionalitat", "tutorial"] - -[extra] -giscus = true -quick_navigation_buttons = true -toc = true -social_media_card = "social_cards/ca_blog_comments.jpg" -+++ - -tabi actualment suporta quatre sistemes de comentaris: [giscus](https://giscus.app/ca) i [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/) i [Isso](https://isso-comments.de/). - -giscus i utterances són projectes de codi obert que et permeten afegir una secció de comentaris al teu lloc web utilitzant les «issues» (utterances) o «discussions» (giscus) de GitHub. Són perfectes per a generadors de llocs estàtics com Zola, ja que permeten als teus lectors interactuar i deixar comentaris a les teves publicacions sense requerir un backend tradicional o una base de dades. - -Com que tots dos es basen en GitHub, giscus i utterances requereixen que els usuaris tinguin un compte a GitHub i autoritzin l'aplicació respectiva. Alternativament, els visitants també poden comentar directament en la discussió o «issue» corresponent a GitHub. - -Ambdues són excel·lents eines per afegir comentaris al teu blog, però giscus té alguns avantatges: -- Més temes. -- Suport per a reaccions. -- Respostes a comentaris i vista de conversa. -- Més segur: utterances requereix habilitar estils en línia no segurs («unsafe inline styles») per establir l'altura del frame; giscus no. -- Suport multilingüe: utterances només està disponible en anglès; giscus suporta més de 20 idiomes. -- Desenvolupament més actiu: l'últim commit de giscus, en el moment d'aquesta publicació, va ser fa dos dies. L'últim commit d'utterances es va fer fa més d'un any. - -Hyvor Talk és una plataforma de comentaris de pagament centrada en la privadesa. Ofereix tots els avantatges del giscus i alguns més, com la moderació i la detecció de correu brossa. - -Isso és un sistema de comentaris de codi obert autoallotjat que emmagatzema els comentaris a la seva pròpia base de dades. Un dels seus principals avantatges és la privacitat; no comparteix les dades dels usuaris amb tercers. També té una interfície lleugera i neta, facilitant als teus visitants deixar comentaris. Isso també permet comentaris anònims, potencialment augmentant la participació dels usuaris a la teva pàgina web. - -## Configuració - -### Sistemes basats en GitHub - -giscus y utterances requereixen una configuració similar. Primer, visita el lloc web del sistema que vulguis habilitar: [giscus.app](https://giscus.app/ca) o [utteranc.es](https://utteranc.es/). - -Segueix les instruccions de la secció **Configuració** del lloc web, i tria les opcions que prefereixis. Finalment, estableix els valors que es mostren a la secció **Habilitar giscus/utterances** (el bloc de codi `script`) en la secció corresponent del teu `config.toml`: `[extra.giscus]` o `[extra.utterances]`. - -#### giscus - -giscus té més opcions que utterances: - -```toml -[extra.giscus] -enabled_for_all_posts = false -automatic_loading = true -repo = "elTeuNomDUsuariDeGithub/elTeuRepositori" -repo_id = "LaTevaIDdeRepositori" -category = "Anuncis" -category_id = "LaTevaIDdeCategoria" -mapping = "slug" -strict_title_matching = 1 # 1 per habilitar, 0 per deshabilitar. -enable_reactions = 1 # 1 per habilitar, 0 per deshabilitar. -comment_box_above_comments = true -light_theme = "noborder_light" -dark_theme = "noborder_dark" -lang = "" # Deixa en blanc perquè coincideixi amb l'idioma de la pàgina. -lazy_loading = true -``` -#### utterances - -``` -[extra.utterances] -enabled_for_all_posts = false -automatic_loading = true -repo = "elTeuNomDUsuariDeGithub/elTeuRepositori" -issue_term = "slug" -label = "💬" -light_theme = "github-light" -dark_theme = "photon-dark" -lazy_loading = true -``` - -### Hyvor Talk - -Configura el teu lloc web des de la [consola Hyvor Talk](https://talk.hyvor.com/console) i completa la configuració a `config.toml`: - -```toml -[extra.hyvortalk] -enabled_for_all_posts = false -automatic_loading = true -website_id = "1234" -page_id_is_slug = true -lang = "" -page_author = "" # Correu (o correu codificat en base64) de l'autor. -lazy_loading = true -``` - -### Isso - -Per habilitar Isso, primer hauràs d'instal·lar i executar un servidor Isso ([aquí tens una guia útil](https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso)). Després, completa aquestes configuracions a `config.toml`: - -```toml -[extra.isso] -enabled_for_all_posts = false -automatic_loading = true -endpoint_url = "https://example.com/comments/" # URL a Isso. -page_id_is_slug = true -lang = "" -max_comments_top = "inf" -max_comments_nested = "5" -avatar = true -voting = true -page_author_hashes = "" -lazy_loading = true -``` - -### Configuracions comunes - -La opció `enabled_for_all_posts = true` habilita globalment el sistema de comentaris corresponent. - -Alternativament, pots habilitar els comentaris a publicacions concretes afegint el nom del sistema (`utterances`, `giscus`, `hyvortalk` o `isso`) ` = true`. Per exemple, així és com habilitaries giscus: - -```toml,hl_lines=09-10 -title = "L'art de l'entremaliadura segons Shin-Chan -date = 1990-02-14 -description = "Descobreix com les travessures poden canviar la teva perspectiva de vida." - -[taxonomies] -tags = ["personal", "travessures"] - -[extra] -giscus = true -``` - -Si accidentalment habilites més d'un sistema, Zola mostrarà un error. - -Si el teu lloc web té múltiples idiomes amb publicacions coincidents (com aquesta demo), i t'agradaria compartir comentaris entre idiomes, has d'utilitzar `issue_term = "slug"` (per giscus y utterances) o `page_id_is_slug = true` (per Hyvor Talk o Isso). Això utilitzarà el nom de l'arxiu Markdown (sense l'etiqueta d'idioma) com a identificador. Totes les altres opcions crearan diferents seccions de comentaris per a cada idioma. - -## Exemple en viu - -A continuació trobaràs el widget de giscus amb la configuració mostrada [a dalt](#giscus). diff --git a/content/blog/comments/index.es.md b/content/blog/comments/index.es.md deleted file mode 100644 index ff493cf..0000000 --- a/content/blog/comments/index.es.md +++ /dev/null @@ -1,138 +0,0 @@ -+++ -title = "Añade comentarios a tus publicaciones con estas 4 plataformas" -date = 2023-07-14 -updated = 2023-07-26 -description = "Descubre cómo habilitar una sección de comentarios en tus publicaciones usando giscus, utterances, Hyvor Talk, o Isso, permitiendo la interacción y feedback de los lectores." - -[taxonomies] -tags = ["funcionalidad", "tutorial"] - -[extra] -giscus = true -quick_navigation_buttons = true -toc = true -social_media_card = "social_cards/es_blog_comments.jpg" -+++ - -tabi actualmente soporta cuatro sistemas de comentarios: [giscus](https://giscus.app/es) y [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/) e [Isso](https://isso-comments.de/). - -giscus y utterances son proyectos de código abierto que te permiten añadir una sección de comentarios a tu sitio web usando las «issues» (utterances) o «discussions» (giscus) de GitHub. Son perfectos para generadores de sitios estáticos como Zola, ya que permiten a tus lectores interactuar y dejar comentarios en tus publicaciones sin requerir un backend tradicional ni una base de datos. - -Al estar basados en GitHub, giscus y utterances requieren que los usuarios tengan una cuenta en dicha plataforma y autoricen la respectiva aplicación. Alternativamente, los visitantes también pueden comentar directamente en la discusión o «issue» correspondiente de GitHub. - -Ambas son excelentes herramientas para agregar comentarios a tu blog, pero giscus tiene algunas ventajas: -- Más temas. -- Soporte para reacciones. -- Respuestas a comentarios y vista de conversación. -- Más seguro: utterances requiere habilitar estilos en línea inseguros («unsafe inline styles») para ajustar la altura del frame; giscus no. -- Soporte multilingüe: utterances solo está disponible en inglés; giscus soporta más de 20 idiomas. -- Desarrollo más activo: el último commit de giscus, a fecha de esta publicación, fue hace una dos días. El último commit de utterances fue hace más de un año. - -Hyvor Talk es una plataforma de comentarios de pago centrada en la privacidad. Ofrece todas las ventajas de giscus y algunas más, como moderación y detección de spam. - -Isso es un sistema de comentarios de código abierto y autoalojado que almacena los comentarios en su propia base de datos. Una de sus principales ventajas es la privacidad; no comparte los datos de los usuarios con terceros. También tiene una interfaz ligera y limpia, lo que facilita que tus visitantes dejen comentarios. Isso también permite comentarios anónimos, lo que podría aumentar la participación de los usuarios en tu sitio web. - -## Configuración - -### Sistemas basados en GitHub - -giscus y utterances requieren una configuración similar. Primero, visita el sitio web del sistema que quieras habilitar: [giscus.app](https://giscus.app/es) o [utteranc.es](https://utteranc.es/). - -Sigue las instrucciones de la sección **Configuración** del sitio web, y elige las opciones que prefieras. Luego, establece los valores que se muestran en la sección **Habilitar giscus/utterances** (el bloque de código `script`) en la sección correspondiente de tu `config.toml`: `[extra.giscus]` o `[extra.utterances]`. - -#### giscus - -giscus tiene algunos ajustes más que utterances: - -```toml -[extra.giscus] -enabled_for_all_posts = false -automatic_loading = true -repo = "tuNombreDeUsuarioDeGithub/tuRepositorio" -repo_id = "TuIDdeRepositorio" -category = "Anuncios" -category_id = "TuIDdeCategoría" -mapping = "slug" -strict_title_matching = 1 # 1 para habilitar, 0 para deshabilitar. -enable_reactions = 1 # 1 para habilitar, 0 para deshabilitar. -comment_box_above_comments = true -light_theme = "noborder_light" -dark_theme = "noborder_dark" -lang = "" # Deja en blanco para que coincida con el idioma de la página. -lazy_loading = true -``` - -#### utterances - -```toml -[extra.utterances] -enabled_for_all_posts = false -automatic_loading = true -repo = "tuNombreDeUsuarioDeGithub/tuRepositorio" -issue_term = "slug" -label = "💬" -light_theme = "github-light" -dark_theme = "photon-dark" -lazy_loading = true -``` - -### Hyvor Talk - -Configura tu web desde la [consola de Hyvor Talk](https://talk.hyvor.com/console) y rellena las opciones en `config.toml`: - -```toml -[extra.hyvortalk] -enabled_for_all_posts = false -automatic_loading = true -website_id = "1234" -page_id_is_slug = true -lang = "" -page_author = "" # Correo (o correo codificado en base64) del autor. -lazy_loading = true -``` - -### Isso - -Para habilitar Isso, primero necesitarás instalar y ejecutar un servidor Isso ([aquí tienes una guía útil](https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso)). Luego, completa estas configuraciones en `config.toml`: - -```toml -[extra.isso] -enabled_for_all_posts = false -automatic_loading = true -endpoint_url = "https://example.com/comments/" # URL a Isso. -page_id_is_slug = true -lang = "" -max_comments_top = "inf" -max_comments_nested = "5" -avatar = true -voting = true -page_author_hashes = "" -lazy_loading = true -``` - -### Ajustes comunes - -La opción `enabled_for_all_posts = true` habilitará globalmente el sistema de comentarios correspondiente. - -Alternativamente, puedes habilitar los comentarios en publicaciones concretas añadiendo el nombre del sistema (`utterances`, `giscus`, `hyvortalk` o `isso`) `= true`. Por ejemplo, así habilitarías giscus: - -```toml,hl_lines=09-10 -title = "Los molinos de viento de mi vida: reflexiones de un escudero" -date = 1605-01-16 -description = "Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida." - -[taxonomies] -tags = ["personal", "reflexiones"] - -[extra] -giscus = true -``` - -Si accidentalmente habilitas más de un sistema, Zola mostrará un error. - -Si tu web tiene múltiples idiomas con publicaciones coincidentes (como esta demo), y te gustaría compartir comentarios entre idiomas, debes usar `issue_term = "slug"` (en el caso de giscus y utterances) o `page_id_is_slug = true` (para Hyvor Talk e Isso). Esto usará el nombre del archivo Markdown (sin la etiqueta de idioma) como identificador. Todas las demás opciones crearán diferentes secciones de comentarios para cada idioma. - - -## Ejemplo en vivo - -Al final de esta publicación encontrarás el widget de giscus usando los ajustes mostrados [arriba](#giscus). diff --git a/content/blog/comments/index.md b/content/blog/comments/index.md deleted file mode 100644 index 940836d..0000000 --- a/content/blog/comments/index.md +++ /dev/null @@ -1,137 +0,0 @@ -+++ -title = "Add comments to your posts with these 4 comment systems" -date = 2023-07-14 -updated = 2023-07-26 -description = "Discover how to enable a comments section on your posts using giscus, utterances, Hyvor Talk, or Isso, enabling reader interaction and feedback." - -[taxonomies] -tags = ["showcase", "tutorial"] - -[extra] -giscus = true -quick_navigation_buttons = true -toc = true -social_media_card = "social_cards/blog_comments.jpg" -+++ - -tabi currently supports four comment systems: [giscus](https://giscus.app/), [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/), and [Isso](https://isso-comments.de/). - -giscus and utterances are open-source projects that let you add a comments section to your website using GitHub issues (utterances) or discussions (giscus). They are perfect for static site generators like Zola, since they enable your readers to interact and leave comments on your posts without requiring a traditional backend or database. - -As they are based on GitHub, giscus and utterances require users to have a GitHub account and authorize the respective app. Alternatively, visitors can also comment directly on the corresponding GitHub discussion or issue. - -Both are great tools for adding comments to your blog, but giscus has a few advantages: -- More themes. -- Support for reactions. -- Comment replies and conversation view. -- Safer: utterances requires enabling unsafe inline styles to set the height of the frame; giscus doesn't. -- Multilanguage support: utterances is only available in English; giscus supports over 20 languages. -- More active development: giscus' last commit, as of this post, was a two days ago. utterances' last commit was over a year ago. - -Hyvor Talk is a paid privacy-focused commenting platform. It offers all of the giscus' advantages, and a few more, like moderation and spam detection. - -Isso is an open-source self-hosted commenting system that stores comments in its own database. One of its main advantages is privacy; it does not share user data with third parties. It also has a lightweight and clean interface, making it easy for your visitors to leave comments. Isso also allows anonymous comments, potentially increasing user engagement on your website. - -## Setup - -### GitHub based systems - -The configuration of both giscus and utterances is quite similar. First, visit the website of the system you want to enable: [giscus.app](https://giscus.app/) or [utteranc.es](https://utteranc.es/). - -Follow the instructions on the **Configuration** section of the website, and set it up it to your liking. Then, set the values shown on the **Enable giscus/utterances** section (the `script` codeblock) on the proper section of your `config.toml`: `[extra.giscus]` or `[extra.utterances]`. - -#### giscus - -giscus has a few more settings than utterances: - -```toml -[extra.giscus] -enabled_for_all_posts = false -automatic_loading = true -repo = "yourGithubUsername/yourRepo" -repo_id = "YourRepoID" -category = "Announcements" -category_id = "YourCategoryID" -mapping = "slug" -strict_title_matching = 1 # 1 to enable, 0 to disable. -enable_reactions = 1 # 1 to enable, 0 to disable. -comment_box_above_comments = true -light_theme = "noborder_light" -dark_theme = "noborder_dark" -lang = "" # Leave blank to match the page's language. -lazy_loading = true -``` - -#### utterances - -```toml -[extra.utterances] -enabled_for_all_posts = false -automatic_loading = true -repo = "yourgithubuser/yourrepo" -issue_term = "slug" -label = "💬" -light_theme = "github-light" -dark_theme = "photon-dark" -lazy_loading = true -``` - -### Hyvor Talk - -Set up your website from the [Hyvor Talk console](https://talk.hyvor.com/console) and fill in the settings in `config.toml`: - -```toml -[extra.hyvortalk] -enabled_for_all_posts = false -automatic_loading = true -website_id = "1234" -page_id_is_slug = true -lang = "" -page_author = "" # Email (or base64 encoded email) of the author. -lazy_loading = true -``` - -### Isso - -To enable Isso, you'll first need to install and run an Isso server ([here's a useful guide](https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso)). Then, complete these settings in `config.toml`: - -```toml -[extra.isso] -enabled_for_all_posts = false -automatic_loading = true -endpoint_url = "https://example.com/comments/" # URL to Isso host. -page_id_is_slug = true -lang = "" -max_comments_top = "inf" -max_comments_nested = "5" -avatar = true -voting = true -page_author_hashes = "" -lazy_loading = true -``` - -### Common settings - -Setting `enabled_for_all_posts = true` for a comment system will enable it globally. - -Alternatively, enable comments on an individual post's front matter by adding the name of the system (`utterances`, `giscus`, `hyvortalk`, or `isso`) `= true`. For example, this is how you would enable giscus: - -```toml,hl_lines=09-10 -title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life" -date = 2007-04-26 -description = "Lessons learned from beet farming and paper sales." - -[taxonomies] -tags = ["personal", "beets"] - -[extra] -giscus = true -``` - -If you accidentally enable more than one system, your site will fail to build with an error. - -If your site has multiple languages with matching posts (like this demo), and you'd like to share comments between languages, you must use `issue_term = "slug"` (for giscus and utterances) or `page_id_is_slug = true` (for Hyvor Talk or Isso). This will use the name of the Markdown file (sans the language tag) as the identifier. All other options will create different comment sections for each language. - -## Live example - -Below you'll find the giscus widget using the settings shown [above](#giscus). diff --git a/content/blog/comments/social_cards/blog_comments.jpg b/content/blog/comments/social_cards/blog_comments.jpg deleted file mode 100644 index 4047579..0000000 Binary files a/content/blog/comments/social_cards/blog_comments.jpg and /dev/null differ diff --git a/content/blog/comments/social_cards/ca_blog_comments.jpg b/content/blog/comments/social_cards/ca_blog_comments.jpg deleted file mode 100644 index 06d3294..0000000 Binary files a/content/blog/comments/social_cards/ca_blog_comments.jpg and /dev/null differ diff --git a/content/blog/comments/social_cards/es_blog_comments.jpg b/content/blog/comments/social_cards/es_blog_comments.jpg deleted file mode 100644 index b6713fb..0000000 Binary files a/content/blog/comments/social_cards/es_blog_comments.jpg and /dev/null differ diff --git a/content/blog/custom-font-subset/index.ca.md b/content/blog/custom-font-subset/index.ca.md deleted file mode 100644 index ede8541..0000000 --- a/content/blog/custom-font-subset/index.ca.md +++ /dev/null @@ -1,193 +0,0 @@ -+++ -title = "Optimitza la càrrega amb un subconjunt de font personalitzat" -date = 2023-04-29 -updated = 2023-07-08 -description = "Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris." - -[taxonomies] -tags = ["funcionalitat", "tutorial"] - -[extra] -social_media_card = "social_cards/ca_blog_custom_font_subset.jpg" -+++ - -## El problema - -Les fonts personalitzades causen parpelleig de text a Firefox. Per veure un gif i més detalls, mira [aquesta issue](https://github.com/welpo/tabi/issues/75). - -## La solució - -Per solucionar això, tabi carrega un subconjunt de glifs per a l'encapçalament. Donat que això augmenta lleugerament el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d'aquest subconjunt. - -Per defecte, tabi inclou fitxers de subconjunts per a caràcters en anglès i espanyol (amb alguns símbols). Aquests fitxers es carreguen quan la pàgina o el lloc web de Zola està en aquest idioma. - -Per a una optimització addicional, pots crear un subconjunt de fonts personalitzat que només inclogui els caràcters utilitzats en el teu encapçalament. - -## Requisits - -Instal·la aquestes eines: - -- [fonttools](https://github.com/fonttools/fonttools) - -- [brotli](https://github.com/google/brotli) - -Executa `pip install fonttools brotli` per instal·lar totes dues. - -## L'script - -El següent script pren un fitxer `config.toml` i un fitxer de font com a entrada, extreu els caràcters necessaris, crea un subconjunt de la font i genera un fitxer CSS que conté el subconjunt codificat en base64. - -```bash -#!/usr/bin/env bash - -usage() { - echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]" - echo - echo "Options:" - echo " --config, -c Path to the config.toml file." - echo " --font, -f Path to the font file." - echo " --output, -o Output path for the generated custom_subset.css file (default: current directory)" - echo " --help, -h Show this help message and exit" -} - -# La sortida per defecte és el directori actual. -output_path="." - -# Opcions de la línia de comandes. -while [ "$#" -gt 0 ]; do - case "$1" in - --config|-c) - config_file="$2" - shift 2 - ;; - --font|-f) - font_file="$2" - shift 2 - ;; - --output|-o) - output_path="$2" - shift 2 - ;; - --help|-h) - usage - exit 0 - ;; - *) - echo "Unknown option: $1" - usage - exit 1 - ;; - esac -done - -# Comprova si s'han proporcionat les opcions -c i -f. -if [ -z "$config_file" ]; then - echo "Error: --config|-c option is required." - usage - exit 1 -fi - -if [ -z "$font_file" ]; then - echo "Error: --font|-f option is required." - usage - exit 1 -fi - -# Comprova si els fitxers de configuració i de font existeixen. -if [ ! -f "$config_file" ]; then - echo "Error: Config file '$config_file' not found." - exit 1 -fi - -if [ ! -f "$font_file" ]; then - echo "Error: Font file '$font_file' not found." - exit 1 -fi - -# Extreu el títol i els noms del menú del fitxer de configuració. -title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"') -menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' ) -language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' ) - -# Si el lloc web és multilingüe, obté les traduccions del menú. -if [ -n "$language_names" ]; then - for menu_name in $menu_names; do - # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus. - menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' ) - # Add the found menu value to the translations string - menu_names+="$menu_translation" - done -fi - -# Combina les cadenes extretes. -combined="$title$menu_names$language_names" - -# Obté els caràcters únics. -unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n') - -# Crea un fitxer temporal per a subset.woff2. -temp_subset=$(mktemp) - -# Crea el subconjunto. -pyftsubset "$font_file" \ - --text="$unique_chars" \ - --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli - -# Codifica en base64 el fitxer temporal subset.woff2 i crea el fitxer CSS. -base64_encoded_font=$(base64 -i "$temp_subset") -echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css" - -# Elimina el fitxer temporal subset.woff2. -rm "$temp_subset" -``` - -## Ús - -Guarda l'script a algun lloc com `~/bin/subset_font`. Fes-lo executable amb `chmod +x ~/bin/subset_font`. - -Ara pots executar-lo amb les opcions requerides `--config` i `--font`: - -```bash -~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2 -``` - -De forma predeterminada, això generarà un fitxer `custom_subset.css` al directori actual. Utilitza `-o` o `--output` per especificar una ruta diferent: - -```bash -~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output -``` - -Col·loca aquest fitxer `custom_subset.css` dins del directori `static/` del teu projecte de Zola. - -## Automatització amb un Pre-commit Hook - -És possible que canviïs el títol o les opcions del menú del teu lloc web, la qual cosa faria que el subconjunt personalitzat deixés de ser útil. - -Per automatitzar el procés de creació d'aquest fitxer, pots integrar l'script en un ganxo (hook) pre-commit de Git que s'activi en detectar canvis al fitxer `config.toml`, executi l'script i guardi el fitxer CSS resultant al directori `static/` del teu lloc web. - -1. Crea un fitxer `.git/hooks/pre-commit` al teu projecte de Git, si encara no existeix. - -2. Fes-lo executable amb `chmod +x .git/hooks/pre-commit`. - -3. Afegeix el següent codi al fitxer: - -```bash -# Comprova si config.toml s'ha modificat. -if git diff --cached --name-only | grep -q "config.toml"; then - echo "config.toml modified. Running subset_font…" - - # Executa l'script subset_font. - ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/ - - # Afegeix el fitxer subset.css generat al commit. - git add static/custom_subset.css -fi -``` - -Asegura't de modificar l'script perquè coincideixi amb la ruta on has guardat l'script `subset_font`. Les rutes de configuració i font haurien de funcionar correctament amb la configuració predeterminada de tabi. - -Ara, cada vegada que facis canvis al teu projecte de Git i facis commit, el ganxo pre-commit verificarà les modificacions al fitxer `config.toml` i executarà automàticament l'script `subset_font` per actualitzar el fitxer `custom_subset.css`. - -Per cert, si t'interessa una forma d'actualitzar automàticament la data de les teves publicacions a Zola o comprimir automàticament els teus fitxers PNG, fes un cop d'ull a [aquesta publicació](https://osc.garden/ca/blog/zola-date-git-hook/). - -Si desitges utilitzar tots els scripts alhora (compressió de fitxers PNG, actualització de la data i creació del subconjunt de fonts), combina el seu codi en un sol fitxer `.git/hooks/pre-commit`. diff --git a/content/blog/custom-font-subset/index.es.md b/content/blog/custom-font-subset/index.es.md deleted file mode 100644 index 4f00491..0000000 --- a/content/blog/custom-font-subset/index.es.md +++ /dev/null @@ -1,194 +0,0 @@ -+++ -title = "Optimiza la carga con un subconjunto de fuente personalizado" -date = 2023-04-29 -updated = 2023-07-08 -description = "Aprende cómo crear un subconjunto personalizado que solo incluya los glifos necesarios." - -[taxonomies] -tags = ["funcionalidad", "tutorial"] - -[extra] -social_media_card = "social_cards/es_blog_custom_font_subset.jpg" -+++ - -## El problema - -Las fuentes personalizadas causan parpadeo de texto en Firefox. Para ver un gif y más detalles, mira [esta issue](https://github.com/welpo/tabi/issues/75). - -## La solución - -Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto aumenta ligeramente el tiempo de carga inicial, es una buena idea tratar de minimizar el tamaño de este subconjunto. - -Por defecto, tabi incluye archivos de subconjuntos para caracteres en inglés y español (con algunos símbolos). Estos archivos se cargan cuando la página o el sitio de Zola está en ese idioma. - -Para una optimización adicional, puedes crear un subconjunto de fuentes personalizado que solo incluya los caracteres utilizados en tu encabezado. - -## Requisitos - -Instala estas herramientas: - -- [fonttools](https://github.com/fonttools/fonttools) - -- [brotli](https://github.com/google/brotli) - -Ejecuta `pip install fonttools brotli` para instalar ambas. - -## El script - -El script que sigue toma un archivo `config.toml` y un archivo de fuente como entrada, extrae los caracteres necesarios, crea un subconjunto de la fuente y genera un archivo CSS que contiene el subconjunto codificado en base64. - -```bash -#!/usr/bin/env bash - -usage() { - echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]" - echo - echo "Options:" - echo " --config, -c Path to the config.toml file." - echo " --font, -f Path to the font file." - echo " --output, -o Output path for the generated custom_subset.css file (default: current directory)" - echo " --help, -h Show this help message and exit" -} - -# La salida predeterminada es el directorio actual. -output_path="." - -# Analiza las opciones de la línea de comandos. -while [ "$#" -gt 0 ]; do - case "$1" in - --config|-c) - config_file="$2" - shift 2 - ;; - --font|-f) - font_file="$2" - shift 2 - ;; - --output|-o) - output_path="$2" - shift 2 - ;; - --help|-h) - usage - exit 0 - ;; - *) - echo "Unknown option: $1" - usage - exit 1 - ;; - esac -done - -# Comprueba si se proporcionan las opciones -c y -f. -if [ -z "$config_file" ]; then - echo "Error: --config|-c option is required." - usage - exit 1 -fi - -if [ -z "$font_file" ]; then - echo "Error: --font|-f option is required." - usage - exit 1 -fi - -# Comprueba si existen los archivos de configuración y de fuentes. -if [ ! -f "$config_file" ]; then - echo "Error: Config file '$config_file' not found." - exit 1 -fi - -if [ ! -f "$font_file" ]; then - echo "Error: Font file '$font_file' not found." - exit 1 -fi - -# Extrae el título y los nombres de los menús del archivo de configuración. -title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"') -menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' ) -language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' ) - -# Si el sitio es multilingüe, obtiene las traducciones de los menús. -if [ -n "$language_names" ]; then - for menu_name in $menu_names; do - # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus. - menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' ) - # Add the found menu value to the translations string - menu_names+="$menu_translation" - done -fi - -# Combina las cadenas extraídas. -combined="$title$menu_names$language_names" - -# Obtiene los caracteres únicos. -unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n') - -# Crea un archivo temporal para subset.woff2. -temp_subset=$(mktemp) - -# Crea el subconjunto. -pyftsubset "$font_file" \ - --text="$unique_chars" \ - --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli - -# Codifica en Base64 el archivo temporal subset.woff2 y crea el archivo CSS. -base64_encoded_font=$(base64 -i "$temp_subset") -echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css" - -# Elimina el archivo temporal subset.woff2. -rm "$temp_subset" -``` - -## Uso - -Guarda el script en algún lugar como `~/bin/subset_font`. Hazlo ejecutable con `chmod +x ~/bin/subset_font`. - -Ahora puedes ejecutarlo con las opciones requeridas `--config` y `--font`: - -```bash -~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2 -``` - -De forma predeterminada, esto generará un archivo `custom_subset.css` en el directorio actual. Usa `-o` o `--output` para especificar una ruta diferente: - -```bash -~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output -``` - -Coloca este archivo `custom_subset.css` dentro del directorio `static/`. - - -## Automatización con un Pre-commit Hook - -Es posible que cambies el título o las opciones del menú de tu sitio, lo que haría que el subconjunto personalizado deje de ser útil. - -Para automatizar el proceso de creación de este archivo, puedes integrar el script en un gancho (hook) pre-commit de Git que se active al detectar cambios en el archivo `config.toml`, ejecute el script y guarde el archivo CSS resultante en el directorio `static/` de tu sitio. - -1. Crea un archivo `.git/hooks/pre-commit` en tu proyecto de Git, si aún no existe. - -2. Hazlo ejecutable con `chmod +x .git/hooks/pre-commit`. - -3. Agrega el siguiente código al archivo: - -```bash -# Comprueba si config.toml se ha modificado. -if git diff --cached --name-only | grep -q "config.toml"; then - echo "config.toml modified. Running subset_font…" - - # Ejecuta el script subset_font. - ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/ - - # Añadie el subset.css recién generado al commit. - git add static/custom_subset.css -fi -``` - -Asegúrate de modificar el script para que coincida con la ruta donde has guardado el script `subset_font`. Las rutas de configuración y fuente deberían funcionar correctamente con la configuración predeterminada de tabi. - -Ahora, cada vez que hagas cambios en tu proyecto de Git y los confirmes, el gancho pre-commit verificará las modificaciones en el archivo `config.toml` y ejecutará automáticamente el script `subset_font` para actualizar el archivo `custom_subset.css`. - -Por cierto, si te interesa una forma de actualizar automáticamente la fecha de tus publicaciones en Zola o comprimir automáticamente tus archivos PNG, echa un vistazo a [esta publicación](https://osc.garden/es/blog/zola-date-git-hook/). - -Si deseas utilizar todos los scripts a la vez (compresión de archivos PNG, actualización de la fecha y creación del subconjunto de fuentes), combina su código en un solo archivo `.git/hooks/pre-commit`. diff --git a/content/blog/custom-font-subset/index.md b/content/blog/custom-font-subset/index.md deleted file mode 100644 index 9cd54d3..0000000 --- a/content/blog/custom-font-subset/index.md +++ /dev/null @@ -1,196 +0,0 @@ -+++ -title = "Optimise loading times with a custom font subset" -date = 2023-04-29 -updated = 2023-07-08 -description = "Learn how to create a custom subset that only includes the necessary glyphs." - -[taxonomies] -tags = ["showcase", "tutorial"] - -[extra] -social_media_card = "social_cards/blog_custom_font_subset.jpg" -+++ - -## The problem - -Custom fonts cause flashing text in Firefox. For a gif and more details, see [this issue](https://github.com/welpo/tabi/issues/75). - -## The solution - -To fix this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it's a good idea to try and minimise the size of this subset. - -By default, there are subset files for English and Spanish characters (with a few symbols). These files are loaded when the Zola page/site is set to that language. - -For further optimisation, you can create a custom font subset that only includes the characters used in your header. - -## Requirements - -Install these tools: - -- [fonttools](https://github.com/fonttools/fonttools) - -- [brotli](https://github.com/google/brotli) - -Run `pip install fonttools brotli` to install both. - -## The script - -The script below takes a `config.toml` file and a font file as input, extracts the necessary characters, creates a subset of the font, and generates a CSS file containing the base64 encoded subset. - -```bash -#!/usr/bin/env bash - -usage() { - echo "Usage: $0 [--config | -c CONFIG_FILE] [--font | -f FONT_FILE] [--output | -o OUTPUT_PATH]" - echo - echo "Options:" - echo " --config, -c Path to the config.toml file." - echo " --font, -f Path to the font file." - echo " --output, -o Output path for the generated subset.css file (default: current directory)" - echo " --help, -h Show this help message and exit" -} - -# Default output is current directory. -output_path="." - -# Parse command line options -while [ "$#" -gt 0 ]; do - case "$1" in - --config|-c) - config_file="$2" - shift 2 - ;; - --font|-f) - font_file="$2" - shift 2 - ;; - --output|-o) - output_path="$2" - shift 2 - ;; - --help|-h) - usage - exit 0 - ;; - *) - echo "Unknown option: $1" - usage - exit 1 - ;; - esac -done - -# Check if -c and -f options are provided -if [ -z "$config_file" ]; then - echo "Error: --config|-c option is required." - usage - exit 1 -fi - -if [ -z "$font_file" ]; then - echo "Error: --font|-f option is required." - usage - exit 1 -fi - -# Check if config and font files exist. -if [ ! -f "$config_file" ]; then - echo "Error: Config file '$config_file' not found." - exit 1 -fi - -if [ ! -f "$font_file" ]; then - echo "Error: Font file '$font_file' not found." - exit 1 -fi - -# Extract the title and menu names from the config file. -title=$(awk -F' = ' '/^title/{print $2}' "$config_file" | tr -d '"') -menu_names=$(awk -F' = ' '/^menu/{f=1;next} /socials/{f=0} f && /name/{print $2}' "$config_file" | cut -d',' -f1 | tr -d '"' ) -language_names=$(awk -F' = ' '/^language_name\./{print $2}' "$config_file" | tr -d '"' ) - -# If the site is multilingual, get the menu translations. -if [ -n "$language_names" ]; then - for menu_name in $menu_names; do - # Find the line with the menu name inside a [languages.*.translations] section and get the translated menus. - menu_translation=$(awk -F' = ' "/\\[languages.*\\.translations\\]/{f=1;next} /^\\[/ {f=0} f && /$menu_name =/{print \$2}" "$config_file" | tr -d '"' ) - # Add the found menu value to the translations string - menu_names+="$menu_translation" - done -fi - -# Combine the extracted strings. -combined="$title$menu_names$language_names" - -# Get unique characters. -unique_chars=$(echo "$combined" | grep -o . | sort -u | tr -d '\n') - -# Create a temporary file for subset.woff2. -temp_subset=$(mktemp) - -# Create the subset. -pyftsubset "$font_file" \ - --text="$unique_chars" \ - --layout-features="*" --flavor="woff2" --output-file="$temp_subset" --with-zopfli - -# Remove trailing slash from output path, if present. -output_path=${output_path%/} - -# Base64 encode the temporary subset.woff2 file and create the CSS file. -base64_encoded_font=$(base64 -i "$temp_subset") -echo "@font-face{font-family:\"Inter Subset\";src:url(data:application/font-woff2;base64,$base64_encoded_font);}" > "$output_path/custom_subset.css" - -# Remove the temporary subset.woff2 file. -rm "$temp_subset" -``` - -## Usage - -Save the script somewhere like `~/bin/subset_font`. Make it executable with `chmod +x ~/bin/subset_font`. - -Now you can run it with the required `--config` and `--font` options: - -```bash -~/bin/subset_font --config path/to/config.toml --font path/to/font.woff2 -``` -By default, this generates a `custom_subset.css` file in the current directory. Use `-o` or `--output` to specify a different path: - -```bash -~/bin/subset_font -c path/to/config.toml -f path/to/font.woff2 -o path/to/output -``` - -You should place this `custom_subset.css` file inside the `static/` directory. - - -## Automating with Pre-commit Hook - -You might change the title or menu options of your site, making the custom subset no longer useful. - -To automate the process of creating this file, you can integrate the script into a Git pre-commit hook that checks for changes in the `config.toml` file, runs the script, and stores the resulting CSS file in the `static/` directory of your site. - -1. Create a `.git/hooks/pre-commit` file in your Git project, if it doesn't already exist. - -2. Make it executable with `chmod +x .git/hooks/pre-commit`. - -3. Add the following code to the file: - -```bash -# Check if config.toml has been modified. -if git diff --cached --name-only | grep -q "config.toml"; then - echo "config.toml modified. Running subset_font…" - - # Call the subset_font script. - ~/bin/subset_font -c config.toml -f static/fonts/Inter4.woff2 -o static/ - - # Add the generated subset.css file to the commit. - git add static/custom_subset.css -fi -``` - -Make sure to modify the script to match the path where you stored the `subset_font` script. The config and font paths should work fine with tabi's default setup. - -Now, every time you commit changes to your Git project, the pre-commit hook will check for modifications in the `config.toml` file and automatically run the `subset_font` script to update the `custom_subset.css` file. - -By the way, if you're interested in a way to automatically update the date of your Zola posts or compress your PNG files, check out [this post](https://osc.garden/blog/zola-date-git-hook/). - -If you want to use all scripts at once (compressing PNG files, updating the date, and creating the font subset), combine their code into a single `.git/hooks/pre-commit` file. diff --git a/content/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg b/content/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg deleted file mode 100644 index 7bb8b26..0000000 Binary files a/content/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg and /dev/null differ diff --git a/content/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg b/content/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg deleted file mode 100644 index 573ff88..0000000 Binary files a/content/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg and /dev/null differ diff --git a/content/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg b/content/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg deleted file mode 100644 index 8bddf80..0000000 Binary files a/content/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg and /dev/null differ diff --git a/content/blog/customise-tabi/index.ca.md b/content/blog/customise-tabi/index.ca.md deleted file mode 100644 index f17d30a..0000000 --- a/content/blog/customise-tabi/index.ca.md +++ /dev/null @@ -1,204 +0,0 @@ -+++ -title = "Personalitza el color de tabi i el tema per defecte" -date = 2023-08-09 -updated = 2024-09-12 -description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic." - -[taxonomies] -tags = ["funcionalitat", "tutorial"] - -[extra] -toc = true -quick_navigation_buttons = true -social_media_card = "social_cards/ca_blog_customise_tabi.jpg" -+++ - -tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc o clar) i triant el color principal per al tema ("skin"). - -## Tema per defecte - -Utilitza `default_theme = "dark"` per establir el tema fosc com a predeterminat, o `default_theme = "light"` per establir el tema clar com a predeterminat. - -Establir `default_theme = ""` (o comentar la variable) seguirà la preferència del sistema de l'usuari (mode clar o fosc). - -Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el `theme_switcher` a `config.toml` i establir el teu tema preferit (`light` o `dark`) a `default_theme`. - -Per exemple, per tenir un tema fosc permanent: - -```toml -[extra] -theme_switcher = false -default_theme = "dark" -``` - -## Skins - -No t'agrada l'aiguamarina? Cap problema! tabi té 12 skins per triar. Si cap d'aquestes t'agrada, pots [crear la teva pròpia skin](#crea-la-teva-propia-skin). - -Una skin és un arxiu CSS amb dues variables: el color principal per al tema clar i el color principal per al tema fosc. - -Activar una skin és tan fàcil com establir la variable `skin` a la teva `config.toml` amb el nom de la skin. Per exemple: - -```toml -[extra] -skin = "sakura" -``` - -Fes una ullada a les skins disponibles a continuació. - -**Fes clic a les imatges** per canviar entre els temes fosc i clar. - -
- -### Aiguamarina - -La skin per defecte. Si la variable `skin` no està configurada (o és igual a `"teal"`), aquest és l'aspecte de tabi: - -{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }} - -
- -### Lavanda - -{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="skin lavanda en mode clar", toggled_alt="skin lavanda en mode fosc", full_width=true) }} - -Per aplicar-la, utilitza `skin = "lavender"`. - -
- -### Vermell - -{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="skin vermell en mode clar", toggled_alt="skin vermell en mode fosc", full_width=true) }} - -Canvia a aquesta skin establint `skin = "red"`. - -
- -### Menta - -Una skin dissenyada per 🅿️. - -{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="skin menta amb tema clar", toggled_alt="skin menta amb tema fosc", full_width=true) }} - -Activa-la amb `skin = "mint"`. - -
- -### Sakura - -Inspirat per la temporada de floració dels cirerers al Japó. - -{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="skin sakura en mode clar", toggled_alt="skin sakura en mode fosc", full_width=true) }} - -Per habilitar aquesta skin, ajusta `skin = "sakura"`. - -
- -### Blau - -{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="skin blau en mode clar", toggled_alt="skin blau en mode fosc", full_width=true) }} - -Per activar aquesta aparença, estableix `skin = "blue"`. - -
- -### Lingot indigo - -*Indigo* pel blau (en el tema clar) i *lingot* pel daurat (en el tema fosc). - -{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="skin lingot indigo en mode clar", toggled_alt="skin lingot indigo en mode fosc", full_width=true) }} - -Per activar aquest tema, utilitza `skin = "indigo_ingot"`. - -
- -### Evangelion - -Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar). - -{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="skin evangelion en mode clar", toggled_alt="skin evangelion en mode fosc", full_width=true) }} - -
- -### Monocromàtic - -{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="skin monocromàtic en mode clar", toggled_alt="skin monocromàtic en mode fosc", full_width=true) }} - -Per aconseguir aquesta aparença, estableix `skin = "monochrome"`. - -
- -### Taronja (baix contrast) - -**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="skin taronja de baix contrast en mode clar", toggled_alt="skin taronja de baix contrast en mode fosc", full_width=true) }} - -Per utilitzar-la, estableix `skin = "lowcontrast_orange"`. - -
- -### Préssec (baix contrast) - -**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="skin préssec de baix contrast en mode clar", toggled_alt="skin préssec de baix contrast en mode fosc", full_width=true) }} - -Especifica `skin = "lowcontrast_peach"` per utilitzar aquesta skin. - -
- -### Rosa (baix contrast) - -**AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de baix contrast en tema clar", toggled_alt="skin rosa de baix contrast en tema fosc", full_width=true) }} - -Per utilitzar aquests colors, assigna `skin = "lowcontrast_pink"`. - -
- -### Crea la teva pròpia skin - -No estàs limitat a les skins predefinides. Per què no crees un disseny únic que et representi? - -Pots guardar la teva nova skin en qualsevol d'aquests dos directoris: -1. Dins del directori del tema: `themes/tabi/sass/skins` -2. Dins del directori principal del teu lloc: `sass/skins` (necessitaràs crear aquesta carpeta) - -Crea un nou arxiu `.scss` (per exemple, `la_teva_skin.scss`) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, "teal"): - -```scss -// This defines theme-specific variables. -@mixin theme-variables($theme) { - @if $theme =='light' { - // Light theme colours. - --primary-color: #087e96; // Contrast ratio: 4.73:1 - } - @else if $theme == 'dark' { - // Dark theme colours. - --primary-color: #91e0ee; // Contrast ratio: 11.06:1 - } -} - -// Apply light theme variables by default. -:root { - @include theme-variables('light'); -} - -[data-theme='dark'] { - @include theme-variables('dark'); -} - -// Apply dark theme variables when user's system prefers dark mode -// and the theme is not explicitly set to light. -@media (prefers-color-scheme: dark) { - :root:not([data-theme='light']) { - @include theme-variables('dark'); - } -} -``` - -Modifica els colors al teu gust. Una vegada estiguis satisfet, actualitza la variable `skin` perquè coincideixi amb el nom del teu arxiu. - -Recorda tenir en compte l'accesibilitat dels colors que triis. Aquí tens un enllaç que et pot ajudar: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). El fondo del tema clar és `#fff`, i el del tema fosc `#1f1f1f`. diff --git a/content/blog/customise-tabi/index.es.md b/content/blog/customise-tabi/index.es.md deleted file mode 100644 index 8f5ff3a..0000000 --- a/content/blog/customise-tabi/index.es.md +++ /dev/null @@ -1,207 +0,0 @@ -+++ -title = "Personaliza el color de tabi y el tema predeterminado" -date = 2023-08-09 -updated = 2024-09-12 -description = "Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único." - -[taxonomies] -tags = ["funcionalidad", "tutorial"] - -[extra] -toc = true -quick_navigation_buttons = true -social_media_card = "social_cards/es_blog_customise_tabi.jpg" -+++ - -tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminado (oscuro o claro) y eligiendo el color principal para el tema ("skin"). - -## Tema predeterminado - -Usa `default_theme = "dark"` para establecer el tema oscuro como predeterminado, o `default_theme = "light"` para establecer el tema claro como predeterminado. - -Establecer `default_theme = ""` (o no especificar la variable) seguirá las preferencias del sistema del usuario (modo claro u oscuro). - -Para configurar permanentemente tu sitio en el tema oscuro o claro, necesitas desactivar el `theme_switcher` en `config.toml` y establecer tu tema preferido (`light` o `dark`) como el `default_theme`. - -Por ejemplo, para tener un tema oscuro permanente: - -```toml -[extra] -theme_switcher = false -default_theme = "dark" -``` - -## Skins - -¿No te gusta el aguamarina? ¡No hay problema! tabi tiene 12 skins (pieles) para elegir. Si ninguna de estas te convence, puedes [crear tu propia skin](#crea-tu-propia-skin). - -Una skin es un archivo CSS con dos variables: el color principal para el tema claro y el color principal para el tema oscuro. - -Activar una skin es tan fácil como establecer la variable `skin` en tu `config.toml` con el nombre de la skin. Por ejemplo: - -```toml -[extra] -skin = "sakura" -``` - -Echa un vistazo a las pieles disponibles a continuación. - -**Haz clic en las imágenes** para cambiar entre los temas oscuro y claro. - -
- -### Aguamarina - -La skin predeterminada. Si la variable `skin` no está configurada (o es igual a `"teal"`), este es el aspecto de tabi: - -{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="skin aguamarina en tema claro", toggled_alt="skin aguamarina en tema oscuro", full_width=true) }} - -
- -### Lavanda - -{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="skin lavanda en tema claro", toggled_alt="skin lavanda en tema oscuro", full_width=true) }} - -Aplica esta skin con `skin = "lavender"`. - -
- -### Rojo - -{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="skin rojo en tema claro", toggled_alt="skin rojo en tema oscuro", full_width=true) }} - -Cambia a esta skin con la configuración `skin = "red"`. - -
- -### Menta - -Una skin hecha por 🅿️. - -{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="skin menta en tema claro", toggled_alt="skin menta en tema oscuro", full_width=true) }} - -Actívala con `skin = "mint"`. - -
- -### Sakura - -Inspirada en la temporada de florecimiento de los cerezos en Japón. - -{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="skin sakura en tema claro", toggled_alt="skin sakura en tema oscuro", full_width=true) }} - -Para activar esta skin, ajusta `skin = "sakura"`. - -
- -### Azul - -{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="skin azul en tema claro", toggled_alt="skin azul en tema oscuro", full_width=true) }} - -Para lograr esta apariencia, establece `skin = "blue"`. - -
- -### Lingote índigo - -*Índigo* por el azul (en el tema claro) y *lingote* por el oro (en el tema oscuro). - -{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="skin lingote índigo en tema claro", toggled_alt="skin lingote índigo en tema oscuro", full_width=true) }} - -Para activar esta skin, usa `skin = "indigo_ingot"`. - -
- -### Evangelion - -Inspirada en los colores de la Unidad-01 de Evangelion (en el tema oscuro) y el EVA-02 (en el tema claro). - -{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="skin evangelion en tema claro", toggled_alt="skin evangelion en tema oscuro", full_width=true) }} - -Actívala con `skin = "evangelion"`. - -
- -### Monocromático - -{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="skin monocromático en tema claro", toggled_alt="skin monocromático en tema oscuro", full_width=true) }} - -Si te gusta este look, usa `skin = "monochrome"`. - -
- -### Naranja (bajo contraste) - -**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="skin naranja de bajo contraste en tema claro", toggled_alt="skin naranja de bajo contraste en tema oscuro", full_width=true) }} - -Para activarla, configura `skin = "lowcontrast_orange"`. - -
- -### Melocotón (bajo contraste) - -**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="skin melocotón de bajo contraste en tema claro", toggled_alt="skin melocotón de bajo contraste en tema oscuro", full_width=true) }} - -Especifica `skin = "lowcontrast_peach"` para usar esta skin. - -
- -### Rosa (bajo contraste) - -**¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de bajo contraste en tema claro", toggled_alt="skin rosa de bajo contraste en tema oscuro", full_width=true) }} - -Para usar estos colores, asigna `skin = "lowcontrast_pink"`. - -
- -### Crea tu propia skin - -No estás limitado a las skins predefinidas. ¿Por qué no diseñas un aspecto único que te represente? - -Puedes guardar tu nueva skin en cualquiera de estos dos directorios: -1. Dentro del directorio del tema: `themes/tabi/sass/skins` -2. Dentro del directorio principal de tu sitio: `sass/skins` (necesitarás crear esta carpeta) - -Crea un nuevo archivo `.scss` (por ejemplo, `tu_skin.scss`) en la ubicación que prefieras. Este archivo debe contener estas dos variables (esta es la skin predeterminada, "teal"): - -```scss -// This defines theme-specific variables. -@mixin theme-variables($theme) { - @if $theme =='light' { - // Light theme colours. - --primary-color: #087e96; // Contrast ratio: 4.73:1 - } - @else if $theme == 'dark' { - // Dark theme colours. - --primary-color: #91e0ee; // Contrast ratio: 11.06:1 - } -} - -// Apply light theme variables by default. -:root { - @include theme-variables('light'); -} - -// Apply dark theme variables when dark theme is explicitly set. -[data-theme='dark'] { - @include theme-variables('dark'); -} - -// Apply dark theme variables when user's system prefers dark mode -// and the theme is not explicitly set to light. -@media (prefers-color-scheme: dark) { - :root:not([data-theme='light']) { - @include theme-variables('dark'); - } -} -``` - -Modifica los colores a tu gusto. Una vez que estés satisfecho, actualiza la variable `skin` para que coincida con el nombre de tu archivo. - -Recuerda tener en cuenta la accesibilidad de los colores que elijas. Aquí tienes un enlace que te puede ayudar: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). El fondo del tema claro es `#fff`, y el del tema oscuro `#1f1f1f`. diff --git a/content/blog/customise-tabi/index.md b/content/blog/customise-tabi/index.md deleted file mode 100644 index 488e658..0000000 --- a/content/blog/customise-tabi/index.md +++ /dev/null @@ -1,216 +0,0 @@ -+++ -title = "Customise tabi with skins and a default theme" -date = 2023-08-09 -updated = 2024-09-12 -description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours." - -[taxonomies] -tags = ["showcase", "tutorial"] - -[extra] -toc = true -quick_navigation_buttons = true -social_media_card = "social_cards/blog_customise_tabi.jpg" -+++ - -tabi can be customised in two ways: by setting the default theme (dark or light) and by choosing the main colour for the theme (skins). - -## Default theme - -Use `default_theme = "dark"` to set the dark theme as the default, or `default_theme = "light"` to set the light theme as the default. - -Setting `default_theme = ""` (or commenting out the variable) will follow the user's system preference (light or dark mode). - -To permanently set your site to either the dark or light theme, you need to disable the theme switcher in `config.toml` and set your preferred theme as the `default_theme`. - -For example, to have a permanent dark theme: - -```toml -[extra] -theme_switcher = false -default_theme = "dark" -``` - -## Skins - -Not a fan of teal? No problem! tabi has 12 skins for you to choose from. If none of these work for you, you can [create your own](#create-your-own-skin). - -A skin is a CSS file with two variables: the primary colour for the light theme, and the primary colour for the dark theme. - -Enabling a skin is as easy as setting the `skin` variable in your `config.toml` with the name of the skin. For example: - -```toml -[extra] -skin = "sakura" -``` - -Take a look below at the available skins below. - -**Click on the images** to switch between dark and light themes. - -
- -### Teal - -The default skin. If the `skin` variable is unset (or set to `"teal"`), this is what tabi looks like: - -{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }} - -
- -### Lavender - -{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }} - -To apply, use `skin = "lavender"`. - - -
- -### Red - -{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="red skin in light mode", toggled_alt="red skin in dark mode", full_width=true) }} - -Switch to this by setting `skin = "red"`. - - -
- -### Mint - -A skin designed by 🅿️. - -{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="mint skin in light mode", toggled_alt="mint skin in dark mode", full_width=true) }} - -Activate it with `skin = "mint"`. - - -
- -### Sakura - -Inspired by the Japanese cherry blossom season. - -{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="sakura skin in light mode", toggled_alt="sakura skin in dark mode", full_width=true) }} - -To enable this skin, adjust `skin = "sakura"`. - - -
- -### Blue - -{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="blue skin in light mode", toggled_alt="blue skin in dark mode", full_width=true) }} - -For this appearance, set `skin = "blue"`. - - -
- -### Indigo Ingot - -*Indigo* for blue (in light theme) and *ingot* for gold (in dark theme). - -{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="indigo ingot skin in light mode", toggled_alt="indigo ingot skin in dark mode", full_width=true) }} - -To activate this skin, use `skin = "indigo_ingot"`. - - -
- -### Evangelion - -Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme). - -{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="evangelion skin in light mode", toggled_alt="evangelion skin in dark mode", full_width=true) }} - - -
- -### Monochrome - -{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="monochrome skin in light mode", toggled_alt="monochrome skin in dark mode", full_width=true) }} - -To achieve this look, set `skin = "monochrome"`. - - -
- -### Low contrast orange - -**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="low contrast orange skin in light mode", toggled_alt="low contrast orange skin in dark mode", full_width=true) }} - -To use, set `skin = "lowcontrast_orange"`. - - -
- -### Low contrast peach - -**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="low contrast peach skin in light mode", toggled_alt="low contrast peach skin in dark mode", full_width=true) }} - -To enable it, specify `skin = "lowcontrast_peach"`. - - -
- -### Low contrast pink - -**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.) - -{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="low contrast pink skin in light mode", toggled_alt="low contrast pink skin in dark mode", full_width=true) }} - -For this colourscheme, choose `skin = "lowcontrast_pink"`. - - -
- -### Create your own skin - -You're not just limited to predefined skins. Why not create a look that's distinctively tailored to your preferences? - -You can save your new skin it in either of these two directories: -1. Inside the theme's directory: `themes/tabi/sass/skins` -2. Inside your main site's directory: `sass/skins` (you'll need to create this folder) - -Create a new `.scss` file (for example, `your_skin.scss`) in your preferred location. This file needs to have these two variables (this is the default skin, "teal"): - -```scss -// This defines theme-specific variables. -@mixin theme-variables($theme) { - @if $theme =='light' { - // Light theme colours. - --primary-color: #087e96; // Contrast ratio: 4.73:1 - } - @else if $theme == 'dark' { - // Dark theme colours. - --primary-color: #91e0ee; // Contrast ratio: 11.06:1 - } -} - -// Apply light theme variables by default. -:root { - @include theme-variables('light'); -} - -// Apply dark theme variables when dark theme is explicitly set. -[data-theme='dark'] { - @include theme-variables('dark'); -} - -// Apply dark theme variables when user's system prefers dark mode -// and the theme is not explicitly set to light. -@media (prefers-color-scheme: dark) { - :root:not([data-theme='light']) { - @include theme-variables('dark'); - } -} -``` - -Modify the colours to your taste. Once you're satisfied, update the `skin` variable to match your filename. - -Remember to consider the accessibility of the colours you choose. Here's a link that can help you: [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/). The background of the light theme is `#fff`, and the dark one is `#1f1f1f`. diff --git a/content/blog/customise-tabi/skins/blue_dark.webp b/content/blog/customise-tabi/skins/blue_dark.webp deleted file mode 100644 index c8e4d31..0000000 Binary files a/content/blog/customise-tabi/skins/blue_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/blue_light.webp b/content/blog/customise-tabi/skins/blue_light.webp deleted file mode 100644 index ff49dee..0000000 Binary files a/content/blog/customise-tabi/skins/blue_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/evangelion_dark.webp b/content/blog/customise-tabi/skins/evangelion_dark.webp deleted file mode 100644 index 2303692..0000000 Binary files a/content/blog/customise-tabi/skins/evangelion_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/evangelion_light.webp b/content/blog/customise-tabi/skins/evangelion_light.webp deleted file mode 100644 index c3be3a8..0000000 Binary files a/content/blog/customise-tabi/skins/evangelion_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/indigo_ingot_dark.webp b/content/blog/customise-tabi/skins/indigo_ingot_dark.webp deleted file mode 100644 index 5e316ad..0000000 Binary files a/content/blog/customise-tabi/skins/indigo_ingot_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/indigo_ingot_light.webp b/content/blog/customise-tabi/skins/indigo_ingot_light.webp deleted file mode 100644 index 047b0d1..0000000 Binary files a/content/blog/customise-tabi/skins/indigo_ingot_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lavender_dark.webp b/content/blog/customise-tabi/skins/lavender_dark.webp deleted file mode 100644 index 478bb87..0000000 Binary files a/content/blog/customise-tabi/skins/lavender_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lavender_light.webp b/content/blog/customise-tabi/skins/lavender_light.webp deleted file mode 100644 index 199e521..0000000 Binary files a/content/blog/customise-tabi/skins/lavender_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lowcontrast_orange_dark.webp b/content/blog/customise-tabi/skins/lowcontrast_orange_dark.webp deleted file mode 100644 index 7d71457..0000000 Binary files a/content/blog/customise-tabi/skins/lowcontrast_orange_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lowcontrast_orange_light.webp b/content/blog/customise-tabi/skins/lowcontrast_orange_light.webp deleted file mode 100644 index f950a1a..0000000 Binary files a/content/blog/customise-tabi/skins/lowcontrast_orange_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lowcontrast_peach_dark.webp b/content/blog/customise-tabi/skins/lowcontrast_peach_dark.webp deleted file mode 100644 index d2d878b..0000000 Binary files a/content/blog/customise-tabi/skins/lowcontrast_peach_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lowcontrast_peach_light.webp b/content/blog/customise-tabi/skins/lowcontrast_peach_light.webp deleted file mode 100644 index 3019b78..0000000 Binary files a/content/blog/customise-tabi/skins/lowcontrast_peach_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lowcontrast_pink_dark.webp b/content/blog/customise-tabi/skins/lowcontrast_pink_dark.webp deleted file mode 100644 index 45aedb3..0000000 Binary files a/content/blog/customise-tabi/skins/lowcontrast_pink_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/lowcontrast_pink_light.webp b/content/blog/customise-tabi/skins/lowcontrast_pink_light.webp deleted file mode 100644 index 5121e36..0000000 Binary files a/content/blog/customise-tabi/skins/lowcontrast_pink_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/mint_dark.webp b/content/blog/customise-tabi/skins/mint_dark.webp deleted file mode 100644 index 4b56e85..0000000 Binary files a/content/blog/customise-tabi/skins/mint_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/mint_light.webp b/content/blog/customise-tabi/skins/mint_light.webp deleted file mode 100644 index 1fd48f4..0000000 Binary files a/content/blog/customise-tabi/skins/mint_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/monochrome_dark.webp b/content/blog/customise-tabi/skins/monochrome_dark.webp deleted file mode 100644 index 484de64..0000000 Binary files a/content/blog/customise-tabi/skins/monochrome_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/monochrome_light.webp b/content/blog/customise-tabi/skins/monochrome_light.webp deleted file mode 100644 index dfdcf6d..0000000 Binary files a/content/blog/customise-tabi/skins/monochrome_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/red_dark.webp b/content/blog/customise-tabi/skins/red_dark.webp deleted file mode 100644 index 360c0ba..0000000 Binary files a/content/blog/customise-tabi/skins/red_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/red_light.webp b/content/blog/customise-tabi/skins/red_light.webp deleted file mode 100644 index a628a87..0000000 Binary files a/content/blog/customise-tabi/skins/red_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/sakura_dark.webp b/content/blog/customise-tabi/skins/sakura_dark.webp deleted file mode 100644 index e923d90..0000000 Binary files a/content/blog/customise-tabi/skins/sakura_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/sakura_light.webp b/content/blog/customise-tabi/skins/sakura_light.webp deleted file mode 100644 index a628a87..0000000 Binary files a/content/blog/customise-tabi/skins/sakura_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/teal_dark.webp b/content/blog/customise-tabi/skins/teal_dark.webp deleted file mode 100644 index 496aeb7..0000000 Binary files a/content/blog/customise-tabi/skins/teal_dark.webp and /dev/null differ diff --git a/content/blog/customise-tabi/skins/teal_light.webp b/content/blog/customise-tabi/skins/teal_light.webp deleted file mode 100644 index eada00e..0000000 Binary files a/content/blog/customise-tabi/skins/teal_light.webp and /dev/null differ diff --git a/content/blog/customise-tabi/social_cards/blog_customise_tabi.jpg b/content/blog/customise-tabi/social_cards/blog_customise_tabi.jpg deleted file mode 100644 index c91dc95..0000000 Binary files a/content/blog/customise-tabi/social_cards/blog_customise_tabi.jpg and /dev/null differ diff --git a/content/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg b/content/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg deleted file mode 100644 index 8703e9d..0000000 Binary files a/content/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg and /dev/null differ diff --git a/content/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg b/content/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg deleted file mode 100644 index 2ddcdcf..0000000 Binary files a/content/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg and /dev/null differ diff --git a/content/blog/es_blog.jpg b/content/blog/es_blog.jpg deleted file mode 100644 index 4c91a6e..0000000 Binary files a/content/blog/es_blog.jpg and /dev/null differ diff --git a/content/blog/faq-languages/index.ca.md b/content/blog/faq-languages/index.ca.md deleted file mode 100644 index 37fc2f5..0000000 --- a/content/blog/faq-languages/index.ca.md +++ /dev/null @@ -1,135 +0,0 @@ -+++ -title = "Lost in Translation? Explora les capacitats multilingües de tabi" -date = 2023-09-12 -updated = 2024-08-18 -description = "Descobreix com tabi t'ajuda a connectar amb una audiència global gràcies a les seves funcions multilingües. Aprèn a canviar la llengua per defecte, afegir més llengües i aportar les teves pròpies traduccions." - -[taxonomies] -tags = ["funcionalitat", "tutorial", "Preguntes Freqüents"] - -[extra] -quick_navigation_buttons = true -toc_ignore_pattern = "^(Preguntes Freqüents)" -social_media_card = "social_cards/ca_blog_faq_languages.jpg" -+++ - -tabi simplifica el procés de creació de llocs web multilingües perquè puguis connectar amb una audiència global. En aquesta guia, t'explicarem tot el que necessites saber, des de com configurar la llengua principal en el teu lloc fins a com contribuir amb les teves pròpies traduccions. Comencem! - -### Preguntes Freqüents - - - -## Quines llengües admet tabi? - -tabi admet les següents llengües: - -- Alemany -- Àrab -- Anglès -- Català -- Coreà -- Espanyol -- Estonià -- Francès -- Hindi -- Italià -- Japonès -- Odia -- Persa -- Portuguès (Europeu) -- Rus -- Ucraïnès -- Xinès (Simplificat) - -Per a una llista sempre actualitzada de llengües suportades, consulta la [carpeta `i18n`](https://github.com/welpo/tabi/tree/main/i18n) en el repositori de tabi. - -## Com estableixo la llengua predeterminada del meu lloc? - -Pots definir la llengua principal del teu lloc configurant la variable `default_language` a `config.toml`. - -Per exemple, si vols que la llengua principal sigui el Xinès, simplement afegeix aquesta línia a l'arxiu `config.toml`: - -```toml, hl_lines=03 -base_url = "https://welpo.github.io/tabi" -title = "~/tabi" -default_language = "zh" -``` - -Si el valor de `default_language` coincideix amb el nom d'un fitxer TOML al [directori `i18n`](https://github.com/welpo/tabi/tree/main/i18n), tots els textos de tabi es traduiran a aquest idioma. - -## Com gestiona tabi el suport multilingüe? - -Zola genera automàticament URLs per a cada llengua que no sigui la predeterminada de la següent manera: `{base_url}/{codi_idioma}/{post}`. - -tabi facilita la navegació entre llengües afegint un commutador de llengua en la barra de navegació (que només es mostra quan hi ha més d'una llengua habilitada). - -Si [pujes](#) a la barra de navegació, veuràs el commutador de llengua. Si cliques sobre ell, es mostrarà un desplegable amb les llengües disponibles. Si fas clic en el nom d'una llengua, et portarà a la mateixa pàgina en aquesta llengua. - -Si una pàgina específica no està disponible en una llengua, tabi mostrarà una pàgina 404 amb el text: - -> La pàgina que has sol·licitat sembla que no existeix o encara no s'ha traduït al teu idioma. Comprova l'URL per detectar errors o torna a la pàgina d'inici. - -Aquest text es mostrarà una vegada per cada llengua activada en el teu lloc. Pots veure aquesta pàgina en acció [aquí](https://welpo.github.io/tabi/404.html). - -## Com activo el suport multilingüe? - -Per habilitar el suport per a diverses llengües, necessites configurar la variable `languages` a `config.toml`. Per exemple, si vols un lloc amb anglès com a llengua principal que també admeti hindi i espanyol, pots configurar el teu `config.toml` de la següent manera: - -```toml -base_url = "https://example.com" -title = "My Site" -default_language = "en" - -[languages.hi] -title = "मेरी वेबसाइट" - -[languages.es] -title = "El meu web" -``` - -En cada secció de llengua pots establir altres variables com `taxonomies`, `description`… Consulta la [documentació de suport multilingüe de Zola](https://www.getzola.org/documentation/content/multilingual/) per a més informació. - -## Què són aquests codis de dues lletres? - -Els codis de dues lletres són [codis d'idioma ISO 639-1](https://localizely.com/iso-639-1-list/) (o [IETF BCP 47](https://ca.wikipedia.org/wiki/Codi_de_llengua_IETF), quan cal), que serveixen per identificar idiomes d'una manera estandarditzada. - -tabi utilitza aquests codis per permetre la navegació entre idiomes i traduir el tema. - -## Com personalitzo o reemplaço una cadena de text específica al meu lloc web? - -tabi cerca els fitxers de cadenes en el següent ordre. `$base_directory` és on resideix el teu lloc Zola (allà on està `config.toml`): - -1. `$base_directory + "i18n"` -2. `$base_directory + "themes/tabi/i18n"` - -Per tant, si crees `i18n/ca.toml` al teu directori base, tabi llegirà les cadenes de text d'aquest fitxer en lloc de les cadenes predeterminades en català. Pots fer això per a qualsevol idioma, suportat o no. - -Assegura't de copiar tot el fitxer per a aquest idioma primer, o el tema utilitzarà l'anglès per les claus que faltin. - -## Què passa si falta una traducció o està incompleta? - -Si una cadena no es troba en el fitxer d'idioma, tabi utilitzarà a la cadena predeterminada en anglès. - -## El meu idioma no està suportat. Puc contribuir amb una traducció? - -És clar! Sempre estem buscant afegir suport per a més idiomes. Pots contribuir amb una traducció creant una Pull Request al [repositori de tabi](https://github.com/welpo/tabi). - -Pots utilitzar el [fitxer en català](https://github.com/welpo/tabi/blob/main/i18n/ca.toml) com a base per traduir les cadenes al teu idioma. Assegura't de mantenir la mateixa estructura. - -El fitxer ha de portar el nom del codi de dues lletres del teu idioma i ha de ser un fitxer TOML. Per exemple, si vols afegir suport per al suahili, pots crear un fitxer anomenat `sw.toml` al directori `i18n`. - -Nota: quan provis la teva traducció, és possible que necessitis reiniciar `zola serve` per veure els canvis, ja que Zola no sempre detecta canvis en els fitxers TOML. - -## He trobat un error en una traducció. Com el corregeixo? - -Si trobes un error en una traducció, pots crear una issue o una Pull Request al [repositori de tabi](https://github.com/welpo/tabi). - -## Com actualitzo les traduccions després d'una actualització del tema? - -Si no vas personalitzar les traduccions, simplement actualitza el tema. - -Si ho vas fer, hauràs d'actualitzar manualment les traduccions. Pots fer-ho copiant les noves cadenes dels fitxers corresponents i enganxant-les al teu fitxer personalitzat. - -## tabi tradueix el meu contingut? - -No. tabi només tradueix les cadenes de text del tema. Hauràs de traduir el teu contingut tu mateix. diff --git a/content/blog/faq-languages/index.es.md b/content/blog/faq-languages/index.es.md deleted file mode 100644 index a8682e8..0000000 --- a/content/blog/faq-languages/index.es.md +++ /dev/null @@ -1,135 +0,0 @@ -+++ -title = "¿Lost in Translation? Explora las capacidades multilingües de tabi" -date = 2023-09-12 -updated = 2024-08-18 -description = "Descubre cómo tabi te ayuda a conectar con una audiencia global gracias a sus funciones multilingües. Aprende a cambiar el idioma por defecto, añadir más idiomas y aportar tus propias traducciones." - -[taxonomies] -tags = ["funcionalidad", "tutorial", "Preguntas Frecuentes"] - -[extra] -quick_navigation_buttons = true -toc_ignore_pattern = "^(Preguntas Frecuentes)" -social_media_card = "social_cards/es_blog_faq_languages.jpg" -+++ - -tabi simplifica el proceso de crear sitios web multilingües para que puedas conectar con una audiencia global. En esta guía, te explicaremos todo lo que necesitas saber, desde cómo configurar el idioma principal en tu sitio hasta cómo contribuir con tus propias traducciones. ¡Empecemos! - -### Preguntas Frecuentes - - - -## ¿Qué idiomas admite tabi? - -tabi admite los siguientes idiomas: - -- Alemán -- Árabe -- Catalán -- Chino (Simplificado) -- Coreano -- Español -- Estonio -- Francés -- Hindi -- Inglés -- Italiano -- Japonés -- Odia -- Persa -- Portugués (Europeo) -- Ruso -- Ucraniano - -Para una lista siempre actualizada de idiomas soportados, consulta la [carpeta `i18n`](https://github.com/welpo/tabi/tree/main/i18n) en el repositorio de tabi. - -## ¿Cómo establezco el idioma predeterminado de mi sitio? - -Puedes definir el idioma principal de tu sitio configurando la variable `default_language` en tu archivo `config.toml`. - -Por ejemplo, si deseas que el idioma principal sea el Chino, simplemente añade esta línea al archivo `config.toml`: - -```toml, hl_lines=03 -base_url = "https://welpo.github.io/tabi" -title = "~/tabi" -default_language = "zh" -``` - -Si el valor de `default_language` coincide con el nombre de un archivo TOML en el [directorio `i18n`](https://github.com/welpo/tabi/tree/main/i18n), todos los textos de tabi se traducirán a ese idioma. - -## ¿Cómo gestiona tabi el soporte multilingüe? - -Zola genera automáticamente URLs para cada idioma que no sea el predeterminado de la siguiente manera: `{base_url}/{código_idioma}/{post}`. - -tabi facilita la navegación entre idiomas añadiendo un conmutador de idioma en la barra de navegación (que sólo se muestra cuando hay más de un idioma habilitado). - -Si [subes](#) a la barra de navegación, verás el conmutador de idioma. Al hacer clic sobre él, se mostrará un desplegable con los idiomas disponibles. Si haces clic en el nombre de un idioma, te llevará a la misma página en ese idioma. - -Si una página específica no está disponible en un idioma, tabi mostrará una página 404 con el texto: - -> La página que has solicitado parece no existir o aún no se ha traducido a tu idioma. Revisa la URL en busca de errores o regresa a la página de inicio. - -Este texto se mostrará una vez por cada idioma activado en tu sitio. Puedes ver esta página en acción [aquí](https://welpo.github.io/tabi/404.html). - -## ¿Cómo activo el soporte multilingüe? - -Para habilitar el soporte para varios idiomas, necesitas configurar la variable `languages` en `config.toml`. Por ejemplo, si quieres un sitio con inglés como idioma principal que también admita hindi y español, puedes configurar tu `config.toml` de la siguiente manera: - -```toml -base_url = "https://example.com" -title = "My Site" -default_language = "en" - -[languages.hi] -title = "मेरी वेबसाइट" - -[languages.es] -title = "Mi web" -``` - -En cada sección de idioma puedes establecer otras variables como `taxonomies`, `description`… Consulta la [documentación de soporte multilingüe de Zola](https://www.getzola.org/documentation/content/multilingual/) para más información. - -## ¿Qué son estos códigos de dos letras? - -Los códigos de dos letras son [códigos de idioma ISO 639-1](https://localizely.com/iso-639-1-list/) (o [IETF BCP 47](https://es.wikipedia.org/wiki/C%C3%B3digo_de_idioma_IETF), si hace falta), que sirven para identificar idiomas de una manera estandarizada. - -tabi utiliza estos códigos para permitir la navegación entre idiomas y traducir el tema. - -## ¿Cómo personalizo o reemplazo una cadena de texto específica en mi sitio web? - -tabi busca los archivos de cadenas en el siguiente orden. `$base_directory` es donde reside tu sitio Zola (donde se guarda `config.toml`): - -1. `$base_directory + "i18n"` -2. `$base_directory + "themes/tabi/i18n"` - -Por lo tanto, si creas `i18n/en.toml` en tu directorio base, tabi leerá las cadenas de texto de ese archivo en lugar de las cadenas predeterminadas en inglés. Puedes hacer esto para cualquier idioma, soportado o no. - -Asegúrate de copiar todo el archivo para ese idioma primero, o el tema usará el inglés para las claves faltantes. - -## ¿Qué pasa si falta una traducción o está incompleta? - -Si una cadena no se encuentra en el archivo de idioma, tabi recurrirá a la cadena predeterminada en inglés. - -## Mi idioma no está soportado. ¿Puedo contribuir con una traducción? - -¡Por supuesto! Siempre estamos buscando añadir soporte para más idiomas. Puedes contribuir con una traducción creando una Pull Request en el [repositorio de tabi](https://github.com/welpo/tabi). - -Puedes usar el [archivo en inglés](https://github.com/welpo/tabi/blob/main/i18n/en.toml) como base para traducir las cadenas a tu idioma. Asegúrate de mantener la misma estructura. - -El archivo debe llevar el nombre del código de dos letras de tu idioma y debe ser un archivo TOML. Por ejemplo, si quieres añadir soporte para el suajili, puedes crear un archivo llamado `sw.toml` en el directorio `i18n`. - -Nota: cuando pruebes tu traducción, es posible que necesites reiniciar `zola serve` para ver los cambios, ya que Zola no siempre detecta cambios en los archivos TOML. - -## He encontrado un error en una traducción. ¿Cómo lo corrijo? - -Si encuentras un error en una traducción, puedes abrir un ticket o una Pull Request en el [repositorio de tabi](https://github.com/welpo/tabi). - -## ¿Cómo actualizo las traducciones después de una actualización del tema? - -Si no personalizaste las traducciones, basta con actualizar el tema. - -Si lo hiciste, tendrás que actualizar manualmente las traducciones. Puedes hacerlo copiando las nuevas cadenas de los archivos correspondientes y pegándolas en tu archivo personalizado. - -## ¿tabi traduce el contenido de mi sitio? - -No. tabi sólo traduce el tema. Los posts deberás traducirlos tú mismo. diff --git a/content/blog/faq-languages/index.md b/content/blog/faq-languages/index.md deleted file mode 100644 index ee4d46f..0000000 --- a/content/blog/faq-languages/index.md +++ /dev/null @@ -1,136 +0,0 @@ -+++ -title = "Lost in Translation? Not with tabi's Multilingual Capabilities" -date = 2023-09-12 -updated = 2024-03-01 -description = "Master the art of serving a global audience through tabi's built-in multilingual features. Learn how to change the default language, add multilingual support, and contribute your own translations." - -[taxonomies] -tags = ["showcase", "tutorial", "FAQ"] - -[extra] -quick_navigation_buttons = true -toc_ignore_pattern = "^(Frequently Asked Questions)" -social_media_card = "social_cards/blog_faq_languages.jpg" -+++ - -To broaden your reach to a global audience, tabi streamlines the process of building multilingual websites. In this guide, we'll walk you through everything you need to know—from setting a default language for your site to contributing your own translations. Let's get started! - -### Frequently Asked Questions - - - -## What languages does tabi support? - -tabi supports the following languages: - -- Arabic -- Catalan -- Chinese (Simplified) -- Chinese (Traditional) -- English -- Estonian -- French -- German -- Hindi -- Italian -- Japanese -- Korean -- Odia -- Persian -- Portuguese (European) -- Russian -- Spanish -- Ukranian - -For an always up to date list of supported languages, refer to the [`i18n` directory](https://github.com/welpo/tabi/tree/main/i18n) in the tabi repository. - -## How do I set a default language for my site? - -You can set the default language for your site by defining the `default_language` variable in your `config.toml` file. - -For instance, if you want (Simplified) Chinese to be the primary language, simply add this line to `config.toml`: - -```toml, hl_lines=03 -base_url = "https://welpo.github.io/tabi" -title = "~/tabi" -default_language = "zh-Hans" -``` - -If the value of `default_language` matches the name of a TOML file in the [`i18n` directory](https://github.com/welpo/tabi/tree/main/i18n), all of tabi's text strings will be translated to that language. - -## How does tabi handle multilingual support? - -Zola automatically generates URLs for each non-default language like this: `{base_url}/{language_code}/{post}`. - -tabi facilitates the navigation between languages by adding a language switcher to the navigation bar (only shown when there's more than one language enabled). - -If you [scroll up](#) to the navigation bar, you'll see the language switcher (the globe icon). Clicking on it will display a dropdown with the available languages. Clicking on a language's name will take you to the same page in that language. - -If a specific page is not available in a language, tabi will display a 404 page with the text: - -> The page you've requested seems to be missing or hasn't been translated into your language yet. Check the URL for errors or go back to the homepage. - -This text will be shown once for each language enabled on your site. You can see this page in action [here](https://welpo.github.io/tabi/404.html). - -## How do I enable multilingual support? - -To enable multilingual support, you need to set the `languages` variable in your `config.toml` file. For example, if want an English-default site with support for Hindi and Spanish, you can set up your `config.toml` like so: - -```toml -base_url = "https://example.com" -title = "My Site" -default_language = "en" - -[languages.hi] -title = "मेरी वेबसाइट" - -[languages.es] -title = "Mi web" -``` - -On each language's section, you can set other variables like `taxonomies`, `description`, whether to generate a feed… Refer to Zola's [multilingual support documentation](https://www.getzola.org/documentation/content/multilingual/) for more information. - -## What are these two letter codes? - -The two letter codes are [ISO 639-1 language codes](https://localizely.com/iso-639-1-list/) (or [IETF BCP 47](https://en.wikipedia.org/wiki/IETF_language_tag), when necessary). They are used to identify languages in a standardised way. - -tabi uses these codes to allow navigation between languages and translate the theme. - -## How do I customise or override a specific text string on my website? - -tabi looks for the strings files in the following order. `$base_directory` is where your Zola site resides (where `config.toml` is stored): - -1. `$base_directory + "i18n"` -2. `$base_directory + "themes/tabi/i18n"` - -So if you create `i18n/en.toml` in your base directory, tabi will read the strings from that file instead of the default English strings. You can do this for any language, supported or not. - -Make sure to copy the entire file for that language first, or the theme will fall back to the default English strings. - -## What happens if a translation is missing or incomplete? - -If a string is not found in the language file, tabi will fall back to the default English string. - -## My language is not supported. Can I contribute a translation? - -Please do! We are always looking to add support for more languages. You can contribute a translation by creating a pull request in the [tabi repository](https://github.com/welpo/tabi). - -You can use the [English file](https://github.com/welpo/tabi/blob/main/i18n/en.toml) as a base to translate the strings to your language. Please make sure to follow the same structure. - -The file should be named after the two letter code of your language, and should be a TOML file. For example, if you want to add support for Swahili, you can create a file named `sw.toml` in the `i18n` directory. - -Note: when testing your translation, you might need to restart `zola serve` to see the changes, as Zola doesn't always detect changes in the TOML files. - -## I've found an error in a translation. How do I fix it? - -If you find an error in a translation, you can create an issue or a pull request in the [tabi repository](https://github.com/welpo/tabi). - -## How do I update the translations after a theme update? - -If you didn't customise the translations, simply updating the theme will update the translations. - -If you did, you will need to manually update the translations. You can do this by copying the new strings from the corresponding files, and pasting them in your custom file. - -## Does tabi translate my content? - -No. tabi only translates the theme's text strings. You will need to translate your content yourself. diff --git a/content/blog/faq-languages/social_cards/blog_faq_languages.jpg b/content/blog/faq-languages/social_cards/blog_faq_languages.jpg deleted file mode 100644 index 1b54ca8..0000000 Binary files a/content/blog/faq-languages/social_cards/blog_faq_languages.jpg and /dev/null differ diff --git a/content/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg b/content/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg deleted file mode 100644 index 87acc35..0000000 Binary files a/content/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg and /dev/null differ diff --git a/content/blog/faq-languages/social_cards/es_blog_faq_languages.jpg b/content/blog/faq-languages/social_cards/es_blog_faq_languages.jpg deleted file mode 100644 index 47e5305..0000000 Binary files a/content/blog/faq-languages/social_cards/es_blog_faq_languages.jpg and /dev/null differ diff --git a/content/blog/highly-scalable-minecraft-cluster/index.md b/content/blog/highly-scalable-minecraft-cluster/index.md new file mode 100644 index 0000000..e75db87 --- /dev/null +++ b/content/blog/highly-scalable-minecraft-cluster/index.md @@ -0,0 +1,89 @@ ++++ +title = "Highly scalable Minecraft cluster" +date = 2023-11-03 +updated = 2023-11-03 +description = "How to build and configure a highly scalable Minecraft server" + +[taxonomies] +tags = ["kubernetes", "minecraft", "cluster"] + +[extra] +toc = false +quick_navigation_buttons = true ++++ +Are you planning a very large Minecraft LAN party? Then this article is for you. Here I show you how to set up a highly scalable Minecraft cluster. + + +### What is a Minecraft cluster? + +A Minecraft cluster is a Minecraft server network that consists of multiple Minecraft servers. These servers are connected to each other via a network and can therefore be shared. This means that you can play with your friends on a server that consists of multiple servers. + +### How does a Minecraft cluster work? + +A Minecraft cluster consists of several components. + + +![Minecraft cluster](https://github.com/MultiPaper/MultiPaper/raw/main/assets/multipaper-diagram.jpg) + +#### Master database +First, there is the master database. This database allows servers to store data in a central location that all servers can access. Servers store chunks, maps, level.dat, player data, banned players, and more in this database. This database also records which chunk belongs to which server and coordinates communication between servers. + +#### Server +The master database is great for storing data, but not so good at synchronizing data in real time between servers. This is where peer-to-peer communication comes in. Each server establishes a connection to another server so that data between them can be updated in real time. When a player on server A attacks another player on server B, server A sends this data directly to server B so that server B can damage the player and apply any knockback. + +#### Load Balancer +The load balancer is the last component of the cluster. A load balancer is required to distribute players evenly across your servers. A load balancer automatically distributes players between servers to distribute the load evenly across the individual servers. + +### Why do I need multiple servers? +By having multiple servers, we can distribute the load across multiple servers. This means that we can have more players on our servers without the servers becoming overloaded. With this setup, we can also easily add new servers if we get more players. If the number of players decreases again, the server can be removed again. + +## Preparation + +You should be familiar with Kubernetes and have set up a Kubernetes cluster. I recommend [k3s](https://k3s.io/). + +You should also be familiar with Helm. I recommend [Helm 3](https://helm.sh/docs/intro/install/). + +## Installation + +First, you should clone the repository. + +```bash +git clone git@github.com:alexohneander/MultiPaperHelm.git +cd MultiPaperHelm/ +``` + +I installed the entire setup in a separate namespace. You can create this namespace with the following command. + +```bash +kubectl create namespace minecraft +``` + +Next, we install the Minecraft cluster with Helm. + +```bash +helm install multipaper . --namespace minecraf +``` + +Once the Helm chart is installed, you can view the port of the proxy service. + +```bash +kubectl describe service multipaper-master-proxy -n minecraft +``` + +This port is the port that you need to enter in your Minecraft client. + +## Configuration + +The Helm chart creates several ConfigMaps. In these ConfigMaps, you can customize the configuration of your cluster. + +For example, you can set the number of maximum players or change the description of the server. + +For more information on the individual config files, see [MultiPaper](https://github.com/MultiPaper/MultiPaper). + +## Conclusion + +With this setup, you can easily set up a highly scalable Minecraft cluster. You can easily add new servers if you get more players and remove them again if the number of players decreases again. + +You can test this setup under the following Server Address: `minecraft.alexohneander.de:31732` + +If you have any questions, feel free to contact me on [Email](mailto:moin@wellnitz-alex.de) or on [Matrix](https://matrix.to/#/@alexohneander:dev-null.rocks). \ No newline at end of file diff --git a/content/blog/javascript/index.ca.md b/content/blog/javascript/index.ca.md deleted file mode 100644 index fc446f1..0000000 --- a/content/blog/javascript/index.ca.md +++ /dev/null @@ -1,46 +0,0 @@ -+++ -title = "Sense JavaScript obligatori" -date = 2023-01-06 -updated = 2024-12-15 -description = "JavaScript només s'utilitza quan HTML i CSS no són suficients." - -[taxonomies] -tags = ["funcionalitat", "tutorial"] - -[extra] -social_media_card = "social_cards/ca_blog_javascript.jpg" -+++ - -Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una quantitat mínima per afegir algunes característiques que són impossibles d'aconseguir amb HTML i CSS. - -## Opcions habilitades globalment - -- [**Cerca**](@/blog/mastering-tabi-settings/index.ca.md#cerca). Activada establint un idioma per defecte i `build_search_index = true` a la secció principal de `config.toml`. (~23KB de JavaScript) - -- L'**interruptor de mode clar/fosc** es pot habilitar configurant `theme_switcher = true` a la secció `[extra]` del teu `config.toml` (~1KB de JavaScript). - -- **Decodificació de correu electrònic** (~400 bytes). Per protegir contra robots de correu brossa, pots configurar `encode_plaintext_email = true`. Si el teu lloc web està en un repositori públic, considera utilitzar el teu `email` com una cadena codificada en base64[^1]. - -## Opcions que es poden sobreescriure de forma jeràrquica - -Les següents opcions es poden especificar per a publicacions, seccions i globalment, seguint la jerarquia de `pàgina > secció > config.toml`: - -- [**Suport de KaTeX**](@/blog/markdown/index.ca.md#katex). Habilitat configurant `katex = true` (274 KB). Per renderitzar fórmules sense JS, prova [MathML](https://developer.mozilla.org/docs/Web/MathML/). -- [**Diagrames de Mermaid**](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid). Habilitat configurant `mermaid = true` (~2.5 MB). -- [**Còpia de blocs de codi amb un sol clic**](@/blog/markdown/index.ca.md#bloc-de-codi). Habilitada configurant `copy_button = true`. (~700 bytes) -- [**Mostrar ruta/URL a blocs de codi**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `add_src_to_code_block = true`. (~400 bytes) -- [**Filtratge per etiquetes** per a graelles de targetes](@/blog/mastering-tabi-settings/index.ca.md#filtrar-projectes) (p. ex. [projectes](@/projects/_index.ca.md)) (~2KB). S'habilita configurant `enable_cards_tag_filtering = true`. - -Per especificar aquestes opcions: - -- **Globalment**: Afegeix-les sota la secció `[extra]` al teu `config.toml`. -- **Per a una secció**: Afegeix-les sota la secció `[extra]` al front matter de l'`_index.md` de la secció. -- **Per a una publicació individual**: Configura les variables corresponents a la secció `[extra]` del front matter de la publicació. - -## Opcions que es poden habilitar globalment o per a publicacions individuals - -- [**Comentaris**](@/blog/comments/index.ca.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant `enabled_for_all_posts = true` a la secció apropiada del teu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Per habilitar comentaris en publicacions individuals, configura el nom del sistema `= true` (per exemple, `hyvortalk = true`) al front matter del post. - -A part d'això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-) - -[^1]: Per codificar el teu correu en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al terminal, executa: `printf 'mail@example.com' | base64`. diff --git a/content/blog/javascript/index.es.md b/content/blog/javascript/index.es.md deleted file mode 100644 index 7a935fc..0000000 --- a/content/blog/javascript/index.es.md +++ /dev/null @@ -1,46 +0,0 @@ -+++ -title = "Sin JavaScript obligatorio" -date = 2023-01-06 -updated = 2024-12-15 -description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes." - -[taxonomies] -tags = ["funcionalidad", "tutorial"] - -[extra] -social_media_card = "social_cards/es_blog_javascript.jpg" -+++ - -Este tema no requiere JavaScript de manera obligatoria. Opcionalmente, puede cargar una cantidad mínima de JavaScript para añadir algunas características que son imposibles de lograr con solo HTML y CSS. - -## Opciones habilitadas globalmente - -- [**Búsqueda**](@/blog/mastering-tabi-settings/index.es.md#busqueda). Habilitada estableciendo un idioma por defecto y `build_search_index = true` en la sección principal de `config.toml`. (~23KB de JavaScript) - -- El **interruptor de modo claro/oscuro** puede habilitarse configurando `theme_switcher = true` en la sección `[extra]` de tu `config.toml` (~1KB de JavaScript). - -- **Descodificación de correo electrónico** (~400 bytes). Para proteger contra bots que recopilan correos electrónicos desde tu sitio web, puedes configurar `encode_plaintext_email = true`. Si tu sitio está en un repositorio público, para mayor protección, considera configurar tu `email` como una cadena codificada en base64[^1]. - -## Opciones que se pueden sobreescribir de forma jerárquica - -Las siguientes opciones pueden especificarse para publicaciones, secciones y a nivel global, siguiendo la jerarquía de `página > sección > config.toml`: - -- [**Soporte de KaTeX**](@/blog/markdown/index.es.md#katex). Habilitado al configurar `katex = true` (274 KB). Para renderizar fórmulas sin JS, prueba [MathML](https://developer.mozilla.org/docs/Web/MathML/). -- [**Diagramas de Mermaid**](@/blog/shortcodes/index.es.md#diagramas-de-mermaid). Habilitado al configurar `mermaid = true` (~2.5 MB). -- [**Copia de bloques de código con un solo clic**](@/blog/markdown/index.es.md#bloque-de-codigo). Habilitado al configurar `copy_button = true` (~700 bytes). -- [**Mostrar ruta/URL en bloques de código**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `add_src_to_code_block = true`. (~400 bytes) -- [**Filtraje por etiquetas** para cuadrículas de tarjetas](@/blog/mastering-tabi-settings/index.es.md#filtrar-proyectos) (p. ej. [proyectos](@/projects/_index.es.md)) (~2KB). Habilitado al configurar `enable_cards_tag_filtering = true`. - -Para especificar estas opciones: - -- **Globalmente**: Añádelas en la sección `[extra]` de tu `config.toml`. -- **Para una sección**: Añádelas en la sección `[extra]` del front matter del `_index.md` de la sección. -- **Para una publicación individual**: Configura las variables correspondientes en la sección `[extra]` del front matter de la publicación. - -## Opciones que pueden habilitarse globalmente o para publicaciones individuales - -- [**Comentarios**](@/blog/comments/index.es.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) pueden habilitarse globalmente configurando `enabled_for_all_posts = true` en la sección apropiada de tu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Para habilitar comentarios en publicaciones individuales, configura el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`) en el front matter de la publicación. - -Aparte de eso, es un tema rápido con HTML y CSS que funciona con JavaScript deshabilitado. Justo como debería ser (la mayoría de) la web :-) - -[^1]: Para codificar tu correo electrónico en base64 puedes usar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64`. diff --git a/content/blog/javascript/index.md b/content/blog/javascript/index.md deleted file mode 100644 index a6b60ef..0000000 --- a/content/blog/javascript/index.md +++ /dev/null @@ -1,46 +0,0 @@ -+++ -title = "No mandatory JavaScript" -date = 2023-01-06 -updated = 2024-12-15 -description = "JavaScript is only used when HTML and CSS aren't enough." - -[taxonomies] -tags = ["showcase", "tutorial"] - -[extra] -social_media_card = "social_cards/blog_javascript.jpg" -+++ - -This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS. - -## Globally enabled settings - -- [**Search**](@/blog/mastering-tabi-settings/index.md#search). Enabled by setting a default language and `build_search_index = true` on the main section of `config.toml`. (~23KB of JavaScript) - -- The **light/dark mode switch** can be enabled by setting `theme_switcher = true` in the `[extra]` section of your `config.toml` (~1KB of JavaScript). - -- **E-mail decoding** (~400 bytes). To protect against spambots scraping your e-mail from your website, you can set `encode_plaintext_email = true`. If your site is on a public repository, for extra protection, consider setting your `email` as a base64-encoded string[^1] directly. - -## Settings with hierarchical override capability - -The following settings can be specified for posts, sections and globally, following the hierarchy of `page > section > config.toml`: - -- [**KaTeX support**](@/blog/markdown/index.md#katex). Enabled by setting `katex = true` (274 KB). To render math without JS, check out [MathML](https://developer.mozilla.org/docs/Web/MathML/). -- [**Mermaid diagrams**](@/blog/shortcodes/index.md#mermaid-diagrams). Enabled by setting `mermaid = true` (~2.5 MB). -- [**One-click copy of code blocks**](@/blog/markdown/index.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes) -- [**Showing source (path or URL) in code blocks**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `add_src_to_code_block = true`. (~300 bytes) -- [**Tag filtering** for card grids](@/blog/mastering-tabi-settings/index.md#filtering-projects) (e.g. [projects](@/projects/_index.md)) (~2KB). Enabled by setting `enable_cards_tag_filtering = true`. - -To specify these settings: - -- **Globally**: Add them under the `[extra]` section in your `config.toml` file. -- **For a section**: Add them under the `[extra]` section in the front matter of the section's `_index.md`. -- **For an individual post**: Set the corresponding variables in the `[extra]` section of the post's front matter. - -## Settings that can be enabled globally or for individual posts - -- [**Comments**](@/blog/comments/index.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting `enabled_for_all_posts = true` in the right section of your `config.toml` (i.e. `[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` or `[extra.isso]`). To enable comments on individual posts, set the name of the system `= true` (e.g. `hyvortalk = true`) in the post's front matter. - -Other than that, it's a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-) - -[^1]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`. diff --git a/content/blog/javascript/social_cards/blog_javascript.jpg b/content/blog/javascript/social_cards/blog_javascript.jpg deleted file mode 100644 index fa5dde9..0000000 Binary files a/content/blog/javascript/social_cards/blog_javascript.jpg and /dev/null differ diff --git a/content/blog/javascript/social_cards/ca_blog_javascript.jpg b/content/blog/javascript/social_cards/ca_blog_javascript.jpg deleted file mode 100644 index 4ac3b4f..0000000 Binary files a/content/blog/javascript/social_cards/ca_blog_javascript.jpg and /dev/null differ diff --git a/content/blog/javascript/social_cards/es_blog_javascript.jpg b/content/blog/javascript/social_cards/es_blog_javascript.jpg deleted file mode 100644 index 21547c7..0000000 Binary files a/content/blog/javascript/social_cards/es_blog_javascript.jpg and /dev/null differ diff --git a/content/blog/markdown/index.ca.md b/content/blog/markdown/index.ca.md deleted file mode 100644 index cbebb54..0000000 --- a/content/blog/markdown/index.ca.md +++ /dev/null @@ -1,108 +0,0 @@ -+++ -title = "Exemples de Markdown" -date = 2023-01-31 -updated = 2024-11-23 -description = "Aquesta publicació mostra alguns exemples de format en Markdown, incloent-hi una taula, blocs de codi i etiquetes, citacions, taules i notes a peu de pàgina." - -[taxonomies] -tags = ["markdown", "funcionalitat"] - -[extra] -katex = true -social_media_card = "social_cards/ca_blog_markdown.jpg" -+++ - -## $\KaTeX$ - -[$\KaTeX$](https://katex.org/) és una llibreria ràpida i fàcil d'usar que permet representar notació matemàtica mitjançant la sintaxi LaTeX. - -Pots utilitzar $\KaTeX$ **en línia** embolcallant l'expressió entre `$` o entre `\\(` i `\\)`. - -Per exemple, `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` es renderitzarà com: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $ - -Per mostrar l'expressió **en una línia pròpia i centrada**, embolcalla-la amb `$$` o entre `\\[` i `\\]`. - -Per exemple, `\\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]` es renderitzarà com: \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\] - -Per activar $\KaTeX$ en una publicació o secció sencera, inclou `katex = true` dins de la secció `[extra]` de les metadades. Per exemple: - -```toml,hl_lines=5-6 -title = "Provant KaTeX" -date = 2002-11-30 - -[extra] -katex = true -``` - -Per activar-lo globalment, afeigeix `katex = true` a la secció `[extra]` del teu `config.toml`. - -Per obtenir un millor rendiment i seguretat, els fitxers JavaScript, CSS i les tipografies de $\KaTeX$ s'allotgen localment. - -**Nota**: Després d'activar $\KaTeX$, si vols utilitzar el caràcter \$ sense renderitzar-lo com a expressió matemàtica, escapa'l amb una barra inversa: `\$`. - -## Taula - -Aquí tens un exemple de taula[^1]. Els seus colors canvien en funció del tema actual. - -| Símbol | Element | Nombre atòmic | -|---------|---------|---------------| -| H | Hidrogen| 1 | -| C | Carboni | 6 | -| Fe | Ferro | 26 | -| Au | Or | 79 | - -## Bloc de codi - -```rust -fn main() { - println!("Hola, món!") -> (); -} -``` - -### Amb numeració de línies - -```rust,linenos -use std::collections::HashMap; - -#[derive(Debug)] -struct TwinPeaksCharacter { - name: String, - coffee_rating: f32, - pie_preference: String, -} - -fn main() { - let mut black_lodge = HashMap::new(); - - black_lodge.insert("agent", TwinPeaksCharacter { - name: String::from("Dale Cooper"), - coffee_rating: 9999.99, - pie_preference: String::from("Damn Fine Cherry"), - }); - - black_lodge.insert("giant", TwinPeaksCharacter { - name: String::from("The Fireman"), - coffee_rating: 42.424242, - pie_preference: String::from("Garmonbozia"), - }); - - // Calculate total appreciation of damn fine coffee - let total_coffee: f32 = black_lodge.values() - .map(|character| character.coffee_rating) - .sum(); - - println!("☕ Total coffee appreciation: {:.2} cups", total_coffee); -} -``` - -## Etiquetes de codi - -A Rust, declares una variable mutable amb `let mut x = 5;`, mentre que a Python, simplement fas `x = 5`. De manera similar, per imprimir un valor a Rust, utilitzaries `println!("Valor: {}", x);`, però a Python, és tan senzill com `print(f"Valor: {x}")`. - -## Quote - -> «La vida, perquè sigui vida, s'ha de viure a poc a poc…» -> -> — Mercè Rodoreda, La plaça del Diamant - -[^1]: I aquí tens un exemple de nota a peu de pàgina! diff --git a/content/blog/markdown/index.es.md b/content/blog/markdown/index.es.md deleted file mode 100644 index 200bc72..0000000 --- a/content/blog/markdown/index.es.md +++ /dev/null @@ -1,108 +0,0 @@ -+++ -title = "Ejemplos de Markdown" -date = 2023-01-31 -updated = 2024-11-23 -description = "Esta publicación muestra algunos ejemplos de formato Markdown, incluyendo una tabla, bloques de código y etiquetas, citas, tablas y notas al pie de página." - -[taxonomies] -tags = ["markdown", "funcionalidad"] - -[extra] -katex = true -social_media_card = "social_cards/es_blog_markdown.jpg" -+++ - -## $\KaTeX$ - -[$\KaTeX$](https://katex.org/) es una biblioteca rápida y fácil de usar que permite la representación de notación matemática utilizando sintaxis LaTeX. - -Puedes usar $\KaTeX$ **en línea** al envolver la expresión entre `$` o entre `\\(` y `\\)`. - -Por ejemplo, `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` se mostraría como: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $ - -Para mostrar la expresión **en su propia línea y centrada**, envuélvela entre `$$` o entre `\\[` y `\\]`. - -Por ejemplo, `\\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]` se mostraría como: \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\] - -Para activar $\KaTeX$ en una publicación o sección entera, incluye `katex = true` dentro de la sección `[extra]` del encabezado. Por ejemplo: - -```toml,hl_lines=5-6 -title = "Probando KaTeX" -date = 2002-11-30 - -[extra] -katex = true -``` - -Para activarlo globalmente, añade `katex = true` en la sección `[extra]` de tu `config.toml`. - -Para un mejor rendimiento y seguridad, el JavaScript, CSS y las fuentes de $\KaTeX$ se alojan localmente. - -**Nota**: Después de habilitar $\KaTeX$, si deseas usar \$ sin representar una expresión matemática, escápalo con una sola barra invertida: `\$`. - -## Tabla - -Aquí tienes un ejemplo de una tabla[^1]. Los colores cambian dependiendo del tema actual. - -| Símbolo | Elemento | Número atómico | -|---------|----------|----------------| -| H | Hidrógeno| 1 | -| C | Carbono | 6 | -| Fe | Hierro | 26 | -| Au | Oro | 79 | - -## Bloque de código - -```rust -fn main() { - println!("¡Hola, mundo!") -> (); -} -``` - -### Con números de línea - -```rust,linenos -use std::collections::HashMap; - -#[derive(Debug)] -struct TwinPeaksCharacter { - name: String, - coffee_rating: f32, - pie_preference: String, -} - -fn main() { - let mut black_lodge = HashMap::new(); - - black_lodge.insert("agent", TwinPeaksCharacter { - name: String::from("Dale Cooper"), - coffee_rating: 9999.99, - pie_preference: String::from("Damn Fine Cherry"), - }); - - black_lodge.insert("giant", TwinPeaksCharacter { - name: String::from("The Fireman"), - coffee_rating: 42.424242, - pie_preference: String::from("Garmonbozia"), - }); - - // Calculate total appreciation of damn fine coffee - let total_coffee: f32 = black_lodge.values() - .map(|character| character.coffee_rating) - .sum(); - - println!("☕ Total coffee appreciation: {:.2} cups", total_coffee); -} -``` - -## Etiquetas de código - -En Rust, declaras una variable mutable con `let mut x = 5;`, mientras que en Python, simplemente usas `x = 5`. De manera similar, para imprimir un valor en Rust, utilizarías `println!("Valor: {}", x);`, pero en Python, es tan sencillo como `print(f"Valor: {x}")`. - -## Cita - -> «A mí me sobra el cuerpo, Orfeo, me sobra el cuerpo porque me falta alma.» -> -> — Miguel de Unamuno, Niebla - -[^1]: ¡Y aquí tienes un ejemplo de una nota al pie de página! diff --git a/content/blog/markdown/index.md b/content/blog/markdown/index.md deleted file mode 100644 index 39366f4..0000000 --- a/content/blog/markdown/index.md +++ /dev/null @@ -1,108 +0,0 @@ -+++ -title = "Markdown examples" -date = 2023-01-31 -updated = 2024-11-23 -description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes." - -[taxonomies] -tags = ["markdown", "showcase"] - -[extra] -katex = true -social_media_card = "social_cards/blog_markdown.jpg" -+++ - -## $\KaTeX$ - -[$\KaTeX$](https://katex.org/) is a fast and easy-to-use library that enables the rendering of mathematical notation, using LaTeX syntax. - -You can use $\KaTeX$ **inline** by wrapping the expression between `$` or between `\\(` and `\\)`. - -For example, `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` would render: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $ - -To display the expression **on its own line and centered**, wrap it around `$$` or between `\\[` and `\\]`. - -For example, `\\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\]` renders: \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\] - -To activate $\KaTeX$ for a post or an entire section, include `katex = true` within the `[extra]` section of the front matter. For exemple: - -```toml,hl_lines=5-6 -title = "Testing KaTeX" -date = 2002-11-30 - -[extra] -katex = true -``` - -You may enable it globally as well, by setting `katex = true` in the `[extra]` section of your `config.toml`. - -For enhanced performance and security, the $\KaTeX$ JavaScript, CSS, and fonts are hosted locally. - -**Note**: After enabling $\KaTeX$, if you want to use \$ without rendering a mathematical expression, escape it with a single backslash: `\$`. - -## Table - -Here's an example of a table[^1]. Its colours change depending on the current theme. - -| Symbol | Element | Atomic Number | -|---------|---------|---------------| -| H | Hydrogen| 1 | -| C | Carbon | 6 | -| Fe | Iron | 26 | -| Au | Gold | 79 | - -## Code Block - -```rust -fn main() { - println!("Hello, world!") -> (); -} -``` - -### With line numbers - -```rust,linenos -use std::collections::HashMap; - -#[derive(Debug)] -struct TwinPeaksCharacter { - name: String, - coffee_rating: f32, - pie_preference: String, -} - -fn main() { - let mut black_lodge = HashMap::new(); - - black_lodge.insert("agent", TwinPeaksCharacter { - name: String::from("Dale Cooper"), - coffee_rating: 9999.99, - pie_preference: String::from("Damn Fine Cherry"), - }); - - black_lodge.insert("giant", TwinPeaksCharacter { - name: String::from("The Fireman"), - coffee_rating: 42.424242, - pie_preference: String::from("Garmonbozia"), - }); - - // Calculate total appreciation of damn fine coffee - let total_coffee: f32 = black_lodge.values() - .map(|character| character.coffee_rating) - .sum(); - - println!("☕ Total coffee appreciation: {:.2} cups", total_coffee); -} -``` - -## Code tags - -In Rust, you declare a mutable variable with `let mut x = 5;`, whereas in Python, you simply use `x = 5`. Similarly, to print a value in Rust, you would use `println!("Value: {}", x);`, but in Python, it's as straightforward as `print(f"Value: {x}")`. - -## Quote - -> "We're all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we're going to die. Each of us secretly believing we won't." -> -> — Charlie Kaufman, Synecdoche, New York - -[^1]: And here's an example of a footnote! diff --git a/content/blog/markdown/social_cards/blog_markdown.jpg b/content/blog/markdown/social_cards/blog_markdown.jpg deleted file mode 100644 index 98e7a5b..0000000 Binary files a/content/blog/markdown/social_cards/blog_markdown.jpg and /dev/null differ diff --git a/content/blog/markdown/social_cards/ca_blog_markdown.jpg b/content/blog/markdown/social_cards/ca_blog_markdown.jpg deleted file mode 100644 index a94d2b5..0000000 Binary files a/content/blog/markdown/social_cards/ca_blog_markdown.jpg and /dev/null differ diff --git a/content/blog/markdown/social_cards/es_blog_markdown.jpg b/content/blog/markdown/social_cards/es_blog_markdown.jpg deleted file mode 100644 index 1034677..0000000 Binary files a/content/blog/markdown/social_cards/es_blog_markdown.jpg and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp b/content/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp deleted file mode 100644 index bc6bc97..0000000 Binary files a/content/blog/mastering-tabi-settings/img/browser_theme_color_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/browser_theme_color_light.webp b/content/blog/mastering-tabi-settings/img/browser_theme_color_light.webp deleted file mode 100644 index 1dea675..0000000 Binary files a/content/blog/mastering-tabi-settings/img/browser_theme_color_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/commit_history_dark.webp b/content/blog/mastering-tabi-settings/img/commit_history_dark.webp deleted file mode 100644 index 1be6676..0000000 Binary files a/content/blog/mastering-tabi-settings/img/commit_history_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/commit_history_light.webp b/content/blog/mastering-tabi-settings/img/commit_history_light.webp deleted file mode 100644 index f904fdb..0000000 Binary files a/content/blog/mastering-tabi-settings/img/commit_history_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp b/content/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp deleted file mode 100644 index ac24387..0000000 Binary files a/content/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp b/content/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp deleted file mode 100644 index 82aeb04..0000000 Binary files a/content/blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/copyright_dark.webp b/content/blog/mastering-tabi-settings/img/copyright_dark.webp deleted file mode 100644 index ee383f6..0000000 Binary files a/content/blog/mastering-tabi-settings/img/copyright_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/copyright_light.webp b/content/blog/mastering-tabi-settings/img/copyright_light.webp deleted file mode 100644 index 6a4af57..0000000 Binary files a/content/blog/mastering-tabi-settings/img/copyright_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp b/content/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp deleted file mode 100644 index bcbb67d..0000000 Binary files a/content/blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp b/content/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp deleted file mode 100644 index 39f675f..0000000 Binary files a/content/blog/mastering-tabi-settings/img/footnote_backlinks_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/header_dark.webp b/content/blog/mastering-tabi-settings/img/header_dark.webp deleted file mode 100644 index cc67ca3..0000000 Binary files a/content/blog/mastering-tabi-settings/img/header_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/header_light.webp b/content/blog/mastering-tabi-settings/img/header_light.webp deleted file mode 100644 index 518c74b..0000000 Binary files a/content/blog/mastering-tabi-settings/img/header_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp b/content/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp deleted file mode 100644 index 4790470..0000000 Binary files a/content/blog/mastering-tabi-settings/img/jump_to_series_posts_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp b/content/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp deleted file mode 100644 index 4fee0d6..0000000 Binary files a/content/blog/mastering-tabi-settings/img/jump_to_series_posts_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/pinned_post_dark.webp b/content/blog/mastering-tabi-settings/img/pinned_post_dark.webp deleted file mode 100644 index 6111f62..0000000 Binary files a/content/blog/mastering-tabi-settings/img/pinned_post_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/pinned_post_light.webp b/content/blog/mastering-tabi-settings/img/pinned_post_light.webp deleted file mode 100644 index ddddc44..0000000 Binary files a/content/blog/mastering-tabi-settings/img/pinned_post_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp b/content/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp deleted file mode 100644 index a7c9fd4..0000000 Binary files a/content/blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp b/content/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp deleted file mode 100644 index 42c9c36..0000000 Binary files a/content/blog/mastering-tabi-settings/img/projects_tag_filter_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp b/content/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp deleted file mode 100644 index bf83faa..0000000 Binary files a/content/blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp b/content/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp deleted file mode 100644 index 900c01f..0000000 Binary files a/content/blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/sans-serif.webp b/content/blog/mastering-tabi-settings/img/sans-serif.webp deleted file mode 100644 index 9688a79..0000000 Binary files a/content/blog/mastering-tabi-settings/img/sans-serif.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/see_changes_dark.webp b/content/blog/mastering-tabi-settings/img/see_changes_dark.webp deleted file mode 100644 index ad7b527..0000000 Binary files a/content/blog/mastering-tabi-settings/img/see_changes_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/see_changes_light.webp b/content/blog/mastering-tabi-settings/img/see_changes_light.webp deleted file mode 100644 index 986c5e1..0000000 Binary files a/content/blog/mastering-tabi-settings/img/see_changes_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/serif.webp b/content/blog/mastering-tabi-settings/img/serif.webp deleted file mode 100644 index 93a276c..0000000 Binary files a/content/blog/mastering-tabi-settings/img/serif.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp b/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp deleted file mode 100644 index 177c069..0000000 Binary files a/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp b/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp deleted file mode 100644 index 74981c7..0000000 Binary files a/content/blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/site_source_dark.webp b/content/blog/mastering-tabi-settings/img/site_source_dark.webp deleted file mode 100644 index 28f445f..0000000 Binary files a/content/blog/mastering-tabi-settings/img/site_source_dark.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/site_source_light.webp b/content/blog/mastering-tabi-settings/img/site_source_light.webp deleted file mode 100644 index 13b9efa..0000000 Binary files a/content/blog/mastering-tabi-settings/img/site_source_light.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/img/with_social_media_card.webp b/content/blog/mastering-tabi-settings/img/with_social_media_card.webp deleted file mode 100644 index 9be353a..0000000 Binary files a/content/blog/mastering-tabi-settings/img/with_social_media_card.webp and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/index.ca.md b/content/blog/mastering-tabi-settings/index.ca.md deleted file mode 100644 index b394805..0000000 --- a/content/blog/mastering-tabi-settings/index.ca.md +++ /dev/null @@ -1,965 +0,0 @@ -+++ -title = "Domina la configuració de tabi: guia completa" -date = 2023-09-18 -updated = 2024-11-30 -description = "Descobreix les múltiples maneres en què pots personalitzar tabi." - -[taxonomies] -tags = ["funcionalitat", "tutorial", "preguntes freqüents"] - -[extra] -pinned = true -quick_navigation_buttons = true -social_media_card = "social_cards/ca_blog_mastering_tabi_settings.jpg" -+++ - -Aquesta és la guia completa sobre la configuració a tabi. Si tens alguna pregunta, pots [obrir un issue a GitHub](https://github.com/welpo/tabi/issues/new) o [iniciar una discussió](https://github.com/welpo/tabi/discussions). - -
- Taula de continguts - -
- -## Jerarquia de configuració - -tabi té una jerarquia que permet personalitzar el teu lloc a diferents nivells. La jerarquia (de menor a major prioritat) és la següent: - -1. **Configuracions globals**: Aquestes són les configuracions que s'apliquen a tot el teu lloc. Es configuren a `config.toml`. -2. **Configuracions de secció**: Aquestes són les configuracions que s'apliquen a una secció del teu lloc (per exemple, `/blog` o `/projects`). Es configuren a la metainformació de l'arxiu `_index.md` de la secció. -3. **Configuració de la pàgina «pare»**: Per a pàgines anidades (pàgines dins de pàgines), aquestes són les configuracions de la pàgina que les conté. -4. **Configuracions de pàgina**: Aquestes són les configuracions que s'apliquen a una sola pàgina. Es configuren a la metainformació de la pàgina. - -En tots els casos, les opcions de tabi es configuren a la secció `[extra]`. - -Per a les configuracions que segueixen aquesta jerarquia, el valor establert a una pàgina reemplaça el valor d'una secció, que al seu torn reemplaça el valor global. En resum: com més específica sigui la configuració, més prioritat tindrà, o `pàgina > pàgina pare/secció > config.toml`. - ---- - -## Cerca - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:--------------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -tabi permet cerca local accessible i multilingüe amb [Elasticlunr](http://elasticlunr.com/). Per activar-la, necessites: - -1. Establir un `default_language` a `config.toml`. -2. Establir `build_search_index = true`. -3. Opcionalment, configurar la secció `[search]`. - -Per exemple: - -```toml -base_url = "https://example.com" -default_language = "en" -build_search_index = true - -[search] -index_format = "elasticlunr_json" # O el menys eficient "elasticlunr_javascript". -include_title = true -include_description = true -include_path = true -include_content = true -``` - -**Nota**: per suport de cerca en Xinès/Japonès, necessites utilitzar una [build personalitzada de Zola](https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55). Addicionalment, actualment no hi ha suport per a la cerca en català. - -### Consideracions per a usuaris de Zola 0.17.X - -Zola 0.17.X no proporciona accés a la variable `search.index_format` ([informe del bug](https://github.com/getzola/zola/issues/2165)). En utilitzar tabi, s'assumeix l'ús de l'índex JSON, que és més eficient. No obstant això, a causa d'[un altre bug](https://github.com/getzola/zola/issues/2193) solucionat en 0.18.0, l'índex JSON per a llocs multilingües no es genera correctament. - -Els usuaris amb versions de Zola anteriors a 0.18.0 que vulguin utilitzar l'índex JavaScript necessiten establir la variable `index_format` a dos llocs: - -```toml -[search] -index_format = "elasticlunr_javascript" - -[extra] -index_format = "elasticlunr_javascript" -``` - -Això assegura que tabi carregui els arxius correctes. Recomanem actualitzar a Zola 0.18.0 o posterior per a una funcionalitat òptima. - -### Detalls d'implementació - -Per a detalls tècnics sobre la implementació de la cerca, incloent quan es carrega l'índex, característiques d'accessibilitat i altres detalls, consulta el [Pull Request #250](https://github.com/welpo/tabi/pull/250). - ---- - -## Suport multilingüe - -tabi ofereix suport multilingüe complet per al teu lloc Zola, des de configurar un idioma predeterminat fins a afegir tots els que vulguis. Consulta les [preguntes freqüents sobre idiomes](@/blog/faq-languages/index.ca.md) per a més informació. - ---- - -## Aparença - -### Pàgina principal - -La [pàgina principal](/) d'aquesta demo té una capçalera amb una imatge, un títol i una descripció: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Capçalera de la pàgina principal") }} - -#### Capçalera - -Per configurar la imatge i el títol, pots utilitzar la variable `header` al front matter de l'arxiu `_index.md` de la secció. Per exemple: - -```toml -[extra] -header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor del tema" } -``` - -La descripció és contingut Markdown normal, escrit fora del front matter. - -#### Llistant publicacions recents - -Per mostrar publicacions a la pàgina principal, primer has de decidir d'on es serviran: de la ruta arrel (`/`) o d'un subdirectori (per exemple, `/blog`). - -**Opció A: Servir publicacions des de la ruta arrel (`/`)** - -Configura `paginate_by` al front matter del teu arxiu `content/_index.md`: - -```toml -title = "Últimes publicacions" -sort_by = "date" -paginate_by = 5 # Mostra 5 publicacions per pàgina. - -[extra] -header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "El teu nom" } -``` - -{{ admonition(type="note", text="La configuració `paginate_by` va al front matter principal, no a la secció `[extra]`.") }} - -**Opció B: Servir publicacions des d'un subdirectori (per exemple, `/blog`)** - -Utilitza `section_path` a la secció `[extra]` del teu arxiu `content/_index.md`: - -```toml -title = "Últimes publicacions" -sort_by = "date" -# No configuris `paginate_by` aquí. - -[extra] -header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "El teu nom" } -section_path = "blog/_index.md" # On trobar les teves publicacions. -max_posts = 5 # Mostra fins a 5 publicacions a la pàgina principal. -``` - -{{ admonition(type="warning", title="ALERTA", text="No configuris `paginate_by` i `section_path` alhora. Aquestes configuracions són mútuament excloents i usar ambdues pot fer que no es mostrin publicacions.") }} - -Notes addicionals: - -- El `title` al front matter estableix el títol que apareix sobre les publicacions. -- Utilitza la ruta completa a l'arxiu `_index.md` de la secció per a `section_path`. Usar `section_path = "blog/"` no funcionarà. - -##### Fixar entrades - -Pots fixar entrades per mantenir-les a la part superior de la pàgina principal. En aquesta demo, aquesta entrada està fixada, així que apareix primera amb una icona i etiqueta de "fixada": - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fixada", full_width=true) }} - -Les entrades fixades es mostren primer, mantenint el seu ordre relatiu segons el `sort_by` de la secció, seguides per les entrades regulars. - -Per fixar una entrada, afegeix el següent al seu front matter: - -```toml -[extra] -pinned = true -``` - -{{ admonition(type="info", text="Aquesta configuració només afecta les pàgines principals del lloc (com `/`, `/es/`, `/fr/`). Altres seccions com `blog/`, `tags/` o `archive/` mostren les publicacions en el seu ordre habitual.") }} - -{{ admonition(type="warning", text='Quan s'utilitza la paginació (`paginate_by`), les entrades fixades poden aparèixer dues vegades: una vegada a la part superior de la primera pàgina, i una altra en la seva posició cronològica normal en pàgines posteriors.') }} - -##### Mostrar la data dels articles al llistat - -Per defecte, quan es llisten els articles, es mostra la data de creació. Pots configurar quina(es) data(es) mostrar utilitzant l'opció `post_listing_date`. Configuracions disponibles: - -- `date`: Mostra només la data de publicació original de l'article (opció per defecte). -- `updated`: Mostra només la data de l'última actualització de l'article. Si no hi ha data d'actualització, es mostra la data de publicació original. -- `both`: Mostra tant la data de publicació original com la data de l'última actualització. - -#### Llistat de Projectes - -Pots mostrar una selecció de projectes a la teva pàgina principal. Per fer això, primer necessitaràs configurar el directori `projects`. - -Un cop fet això, configura la ruta als projectes a la secció `[extra]` del teu fitxer `_index.md`: - -```toml -[extra] -projects_path = "projects/_index.md" -``` - -Això mostrarà els 3 projectes de major prioritat (amb menor pes; el mateix ordre que a Projectes). Per mostrar més o menys projectes, configura `max_projects` a `[extra]`. - -Per defecte, la secció de projectes es mostrarà a la part inferior de la pàgina principal, sota les publicacions. Si prefereixes mostrar-la a la part superior, configura `show_projects_first = true`. - -### Commutador de mode clar i fosc - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -El commutador de mode clar i fosc (la icona de lluna/sol a la cantonada superior dreta) es pot habilitar configurant `theme_switcher = true` a `config.toml`. - -### Mode predeterminat (clar/fosc) - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El mode predeterminat es pot especificar amb la variable `default_theme`, que accepta `"dark"` o `"light"`. Si no s'especifica, el mode predeterminat és el mode del sistema. - -### Skin personalitzada - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Les skins («pells») de tabi canvien el color principal del lloc web. Pots configurar la skin a `config.toml` amb `skin = "nom_de_la_skin`. Per exemple, `skin = "lavender"` es veu així (clica per canviar entre mode clar i fosc): - -{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="pell lavender en mode clar", toggled_alt="pell lavender en mode fosc", full_width=true) }} - -Explora les skins disponibles i aprèn com crear la teva pròpia consultant [la documentació](/ca/blog/customise-tabi/#skins). - -### Font sans serif (pal sec) - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -tabi utilitza una font serif per als paràgrafs dels articles (la que estàs veient ara). Pots canviar a una font sans-serif (la que veus als encapçalaments/menú) a tot el teu lloc configurant `override_serif_with_sans = true` a `config.toml`. - -Fes clic a la imatge a continuació per comparar les fonts: - -{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Font serif", toggled_alt="Font sans-serif", full_width=true) }} - -### Estils CSS personalitzats - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ❌ | ✅ | ❌ | ❌ | - -Pots carregar estils CSS personalitzats per a tot el lloc web o en pàgines específiques utilitzant `stylesheets`, que accepta una llista de rutes cap a arxius CSS. Per exemple: - -```toml -stylesheets = ["css/custom.css", "css/another.css"] -``` - -### Color del tema del navegador - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El color del tema del navegador és el color que apareix a la barra de pestanyes del navegador: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_dark.webp" alt="pestanyes amb un tema de navegador de color") }} - -Pots establir-ho a `config.toml` com a `browser_theme_color = "#087e96"`. Si vols diferents colors per als modes clar/obscur, pots establir un conjunt de colors amb `browser_theme_color = ["#ffffff", "#000000"]`. El primer color és per al mode clar, el segon per al fosc. - -Aquesta variable accepta qualsevol color CSS vàlid, així que pots utilitzar paraules clau (per exemple, `blue`), codis hexadecimals (per exemple, `#087e96`) o valors RGB/HSL (per exemple, `rgb(8, 126, 150)`). - -### Etiquetes compactes - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:-----------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Per defecte, la [pàgina d'etiquetes](/ca/tags) mostra les etiquetes com: - -[NomEtiqueta](#) — n entrada[es] - -Establir `compact_tags = true` les mostrarà com: - -[NomEtiqueta](#) n - -### Ordre de les etiquetes - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:-----------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Per defecte, la [pàgina d'etiquetes](/ca/tags) ordena les etiquetes alfabèticament, donada la configuració predeterminada de `tag_sorting = "name"`. -Si configures `tag_sorting = "frequency"`, s'ordenaran segons el nombre de publicacions (de més a menys). - ---- - -## Sèries - -Per a una explicació detallada, consulta la [documentació de sèries](@/blog/series/index.ca.md). - -### Enllaç per saltar a les publicacions - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ✅ | ✅ | ✅ | ❌ | - -Per defecte, apareix automàticament un enllaç "Salta a les publicacions" al costat del títol de la sèrie quan una sèrie té un contingut de més de 2000 caràcters: - -{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="enllaç per saltar a les publicacions de la sèrie", full_width=true) }} - -Estableix `show_jump_to_posts = true` per forçar l'activació de la funció i `show_jump_to_posts = false` per desactivar-la. - -### Indexació de pàgines de sèries - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ✅ | ✅ | ✅ | ❌ | - -Per defecte, les pàgines de sèries s'indexen (usant una indexació basada en 1) segons el `sort_by` de la secció de sèries. - -Estableix `post_listing_index_reversed = true` per invertir aquest índex. - ---- - -## Integració amb repositoris Git - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:--------------------:|:--------------------:| -| ❓ | ❓ | ✅ | ❓ | ❌ | - -❓: `show_remote_source` sí que segueix [la jerarquia](#jerarquia-de-configuracio) i es pot configurar en una pàgina, secció o de manera global. La resta de les configuracions només es poden establir a `config.toml`. - -Aquestes configuracions et permeten vincular el teu lloc web tabi amb un repositori públic de Git a GitHub, GitLab, Gitea o Codeberg. Exemples de configuració: - -```toml -remote_repository_url = "https://github.com/welpo/tabi" -remote_repository_git_platform = "auto" -remote_repository_branch = "main" -show_remote_changes = true -show_remote_source = true -``` - -Això habilita dues funcions: - -1. `show_remote_source = true` afegeix un enllaç al codi font del teu lloc web (el teu `remote_repository_url`) que es mostrarà al peu de pàgina: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Peu de pàgina del lloc web, mostrant un enllaç 'Codi font del lloc'") }} - -2. `show_remote_changes = true` afegeix un enllaç "Veure canvis ↗" a l'historial de commits de l'article actualitzat, al costat de la data de l'última actualització [^1]: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç 'Veure canvis'") }} - -En clicar aquest enllaç, seràs dirigit a l'historial de commits de l'article, on podràs veure els canvis realitzats en ell: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Historial de commits d'un article", full_width=true) }} - ---- - -## Pàgines - -### Projectes - -tabi té una plantilla integrada per a projectes. Per habilitar-la, pots crear un directori a `content/projects/`. Allà, pots crear un fitxer `_index.md` amb el següent contingut al bloc de metadades: - -```toml -title = "Projectes" -sort_by = "weight" -template = "cards.html" -insert_anchor_links = "left" - -[extra] -show_reading_time = false -quick_navigation_buttons = true -``` - -- `title` és el títol de la pàgina. -- `sort_by` determina com s'ordenen els projectes. Pots ordenar per "date", "update_date", "title", "title_bytes", "weight", "slug" o "none". -- `template = "cards.html"` estableix la plantilla per renderitzar la pàgina de projectes. -- `insert_anchor_links = "left"` afegeix enllaços àncora als encapçalaments. -- `show_reading_time = false` amaga el temps estimat de lectura. -- `quick_navigation_buttons = true` mostra els botons de navegació ràpida. - -Al costat del fitxer `_index.md`, pots crear un fitxer per a cada projecte. Per exemple, aquest és el bloc de metadades per a la pàgina del projecte [tabi](@/projects/tabi/index.ca.md): - -```toml -title = "tabi" -description = "Un tema de Zola ràpid, lleuger i modern amb suport multilingüe." -weight = 1 - -[extra] -local_image = "img/tabi.webp" -``` - -- `title` és el títol del projecte. -- `description` és la descripció del projecte. -- `weight` determina l'ordre en què es mostren els projectes. Com menor sigui el pes, més amunt apareixerà el projecte. -- `local_image` és la ruta de la imatge del projecte. Aquesta imatge es mostra a la pàgina de projectes. - -Quan un usuari faci clic a la imatge o al títol d'un projecte, serà portat a la pàgina del projecte. Si prefereixes que els usuaris vagin a un enllaç extern, pots establir `link_to = "https://example.com"` a la secció `[extra]` del fitxer `.md` del projecte. - -La pàgina del projecte individual es renderitza amb la plantilla predeterminada, tret que estableixis una altra, per exemple, `template = "info-page.html"`. - -#### Filtrar projectes - -Si afegeixes etiquetes als teus projectes, veuràs un filtre d'etiquetes: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Pàgina de projectes amb filtre d'etiquetes", full_width=true) }} - -El sistema de filtratge d'etiquetes utilitza millora progressiva: - -- Sense JavaScript: Les etiquetes enllacen directament a pàgines d'etiquetes dedicades (per exemple, `/tags/nom-de-l-etiqueta`). -- Amb JavaScript: Filtratge instantani, sincronització d'URL (#nom-etiqueta) i navegació amb el teclat. - -Per desactivar aquesta funció, estableix `enable_cards_tag_filtering = false` a la secció `[extra]` del fitxer `projects/_index.md` o a `config.toml`. - -{% admonition(type="tip") %} - -Per filtrar projectes per etiquetes, necessites establir etiquetes a la front matter de cada projecte. Per exemple: - -```toml -title = "nom del projecte" -weight = 40 - -[taxonomies] -tags = ["etiqueta", "etiqueta 2", "tercera etiqueta"] -``` - -{% end %} - -### Arxiu - -Afegir una pàgina d'arxiu és similar a afegir una pàgina de projectes. Pots crear un directori a `content/archive/`. Allà, pots crear un fitxer `_index.md` amb el següent encapçalament: - -```toml -title = "Arxiu" -template = "archive.html" -``` - -Per defecte, l'arxiu llistarà les publicacions situades a `blog/`. Per personalitzar això, pots modificar la secció `[extra]` de l'arxiu `_index.md`: - -- **Per a un sol directori**: Estableix `section_path = "directori/"` per llistar publicacions d'un directori específic. Assegura't d'incloure la barra inclinada al final. - -- **Per a múltiples directoris**: Si vols agregar publicacions de diversos directoris, especifica la llista a `section_path`. Per exemple: - - ```toml - [extra] - section_path = ["blog/", "notes/", "camí-tres/"] - ``` - -**Nota**: - -- La pàgina d'arxiu només llistarà publicacions amb data. -- L'ordre de les publicacions ve determinada per la variable `sort_by` de les seccions arxivades. Aquesta demo utilitza `sort_by = "date"` en `blog/_index.md`. - -### Etiquetes - -tabi té suport integrat per a etiquetes. Per habilitar-les, simplement afegeix la taxonomia al teu `config.toml`: - -```toml -taxonomies = [{name = "tags", feed = true}] -``` - -Després, pots afegir etiquetes a les teves publicacions afegint-les a l'array `tags` en el bloc de metadades de la teva publicació. Per exemple: - -```toml,hl_lines=05-06 -title = "Els molins de vent de la meva vida: reflexions d'un escuder" -date = 1605-01-16 -description = "El meu viatge al costat de Don Quixot, enfrontant-me a gegants imaginats i descobrint les veritables batalles de la vida." - -[taxonomies] -tags = ["personal", "reflexions"] -``` - -### Pàgina sobre - -Si vols tenir una pàgina que no sigui un article, per exemple per a una secció "Sobre", "Contacte" o "Drets d'autor", pots utilitzar la plantilla `info-page.html`. - -Primer, crea un directori dins de `content/` amb el nom que prefereixis. Per exemple, `content/pages/`. Després, crea un fitxer `_index.md` dins d'aquest directori. El fitxer hauria de ser així: - -```markdown -+++ -render = false -insert_anchor_links = "left" -+++ -``` - -- `render = false` indica a Zola que no renderitzi la secció. -- `insert_anchor_links = "left"` afegeix enllaços àncora als encapçalaments. Això és opcional. - -Dins del directori, pots crear qualsevol quantitat de fitxers `.md`. - -En aquesta demo, la pàgina [Sobre mi](/ca/about/) utilitza la plantilla `info-page.html`. El bloc de metadades és el següent: - -```toml -title = "Sobre mi" -template = "info-page.html" -path = "about" -``` - -Fixa't com s'estableix `path = "about"`. Zola situarà la pàgina a `$base_url/about/`. Si vols que la pàgina estigui disponible a `/contacte/`, hauries d'establir `path = "contacte"`. - ---- - -## SEO - -tabi s'encarrega de la majoria de tasques de SEO per a tu (com ara les etiquetes del protocol Open Graph, descripció, paleta de colors...), però hi ha certes configuracions que pots personalitzar. - -### Favicon - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:--------------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El favicon és la petita imatge que es mostra a la pestanya del navegador. Pots establir-la a `config.toml` amb `favicon = "img/favicon.png"`. - -### Favicon d'emoji - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:--------------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -També pots establir un emoji com a favicon amb `favicon_emoji`. Per exemple, `favicon_emoji = "👾"`. - -Nota: Alguns navegadors no suporten favicons d'emoji. Consulta la taula de compatibilitat a [caniuse](https://caniuse.com/link-icon-svg). - -### URL canònica - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:--------------------:|:--------------------:| -| ✅ | ✅ | ✅ | ❌ | ❌ | - -L'URL canònica és una manera d'indicar als motors de cerca quina és l'URL preferida per al contingut del teu lloc web. Això és útil per al SEO i per evitar problemes de contingut duplicat. - -Per defecte, l'URL canònica és l'URL de la pàgina on et trobes. No obstant això, pots canviar això configurant `canonical_url` al front matter de la teva pàgina o secció. - -Si tens un lloc amb una estructura idèntica i contingut coincident, pots configurar `base_canonical_url` al teu `config.toml`. L'URL canònica es crearà substituint el `$base_url` de l'URL actual amb el `$base_canonical_url` que establisquis. - -Per exemple, si configures `base_canonical_url = "https://example.com"`, l'URL canònica de la pàgina `$base_url/blog/post1` serà `https://example.com/blog/post1`. Això és útil si tens un lloc amb diversos dominis que comparteixen el mateix contingut. - -**Nota**: per assegurar-te que l'URL canònica sigui correcta, probablement serà millor configurar `canonical_url` individualment per a cada pàgina. - -### Targetes per a xarxes socials - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Les targetes per a xarxes socials són les imatges que es mostren quan comparteixes un enllaç a les xarxes socials: - -{{ dimmable_image(src="img/with_social_media_card.webp", alt="Una captura de pantalla de WhatsApp mostrant un enllaç amb una targeta per a xarxes socials") }} - -Pots establir la imatge per a xarxes socials amb `social_media_card = "img/social_media_card.png"`. - -Pots especificar rutes tant relatives com absolutes. - -- **Ruta relativa**: Posiciona la imatge a la mateixa carpeta que la teva entrada de blog i especifica el seu nom. Per exemple, `social_media_card = "relative_image.png"`. - -- **Ruta absoluta**: Posiciona la imatge en una carpeta específica i especifica la ruta des de l'arrel. Per exemple, `social_media_card = "/img/absolute_image.png"`. - -Si ambdues rutes, relativa i absoluta, són vàlides, la ruta relativa tindrà prioritat. - -Ja que segueix la [jerarquia](#jerarquia-de-configuracio), si no està configurat en una pàgina, però sí ho està en una secció, s'utilitzarà la imatge de la secció. Si no està configurat en una pàgina o secció, però sí en `config.toml`, s'utilitzarà la imatge global. - -{{ admonition(type="tip", title="CONSELL", text="Automatitza la seva creació amb un [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [Automatitzant les vistes prèvies dels enllaços amb Zola](https://osc.garden/ca/blog/automating-social-media-cards-zola/).") }} - -### Creador del fedivers - -| Pàgina | Secció | `config.toml` | Segueix jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:-----------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Pots mostrar el perfil del fedivers de l'autor en les previsualitzacions d'enllaços de Mastodon configurant la variable `fediverse_creator` al teu `config.toml`. Per exemple, per a @username@example.com, fes servir: - -```toml -fediverse_creator = { handle = "username", domain = "example.com" } -``` - ---- - -## Navegació - -### Barra de navegació - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -La barra de navegació és la franja a la part superior de la pàgina que conté el títol del lloc i el menú de navegació. Pots personalitzar els elements que apareixen configurant `menu` en `config.toml`. Per exemple: - -```toml -menu = [ - { name = "blog", url = "blog", trailing_slash = true }, - { name = "arxiu", url = "archive", trailing_slash = true }, - { name = "etiquetes", url = "tags", trailing_slash = true }, - { name = "projectes", url = "projects", trailing_slash = true }, - { name = "sobre nosaltres", url = "about", trailing_slash = true }, -] -``` - -### Botons de navegació ràpida - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Els botons de navegació ràpida són els botons que apareixen a la part inferior dreta de la pantalla. Hauries de veure'ls en aquesta pàgina, si no estàs en un dispositiu mòbil. Es veuen així: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp", alt="Botons de navegació ràpida") }} - -Per activar-los, estableix `quick_navigation_buttons = true`. - -### Taula de continguts - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:------------------:|:--------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Activa l'índex de continguts just sota del títol i metadades de l'article amb `toc = true`. - -Per saber més sobre com personalitzar-ho, consulta [la documentació sobre la Taula de continguts](@/blog/toc/index.ca.md). - -### Enllaços als articles anterior i següent - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:--------------------:|:--------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Mostra enllaços als articles anterior i següent a la part inferior dels posts. Es veu així: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enllaços als articles anterior i següent", full_width=true) }} - -Per activar aquesta funció, estableix `show_previous_next_article_links = true` i assegura't que la secció té un valor `sort_by` (per exemple `sort_by = "date"`). - -Per defecte, els articles següents estaran al costat esquerre de la pàgina i els articles anteriors al costat dret. -Per invertir l'ordre (articles següents al costat dret i articles anteriors al costat esquerre), configura `invert_previous_next_article_links = true`. - -Per defecte, aquesta secció de navegació tindrà l'amplada completa del lloc (igual que la barra de navegació de la part superior). Per fer-la més estreta, coincidint amb l'amplada de l'article, configura `previous_next_article_links_full_width = false`. - -Totes aquestes configuracions segueixen la jerarquia. - -### Enllaços de retorn a les notes a peu de pàgina - -{{ admonition(type="warning", title="ADVERTÈNCIA DE DEPRECACIÓ", text="Zola v0.19.0 i posterior pot fer això de forma nativa. Estableix `bottom_footnotes = true` a la secció `[markdown]` de la teva configuració.") }} - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:------------------:|:--------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Establir `footnote_backlinks = true` afegirà enllaços de retorn a les notes a peu de pàgina de les teves publicacions, com aquest: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp", alt="Enllaços de retorn a les notes a peu de pàgina", full_width=true) }} - -Quan facis clic en un enllaç de retorn (la fletxa ↩), et portarà de tornada al punt del text on es va fer referència a la nota a peu de pàgina. - ---- - -## Usabilitat - -### Botó de copiar en blocs de codi - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:------------------:|:--------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Establir `copy_button = true` afegirà un petit botó de copiar a la part superior dreta dels blocs de codi, com aquest: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botó de copiar en blocs de codi", full_width=true) }} - -### Mostrar ruta/URL en blocs de codi - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Estableix `add_src_to_code_block = true` per habilitar l'ús del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). - -### Forçar blocs de codi d'esquerra a dreta - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:-----------------:|:--------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Per defecte, els blocs de codi es renderitzen d'esquerra a dreta, independentment de la direcció general del text. Estableix `force_codeblock_ltr = false` per permetre que els blocs de codi segueixin la direcció del document. Útil per a idiomes de dreta a esquerra que necessiten blocs de codi de dreta a esquerra. - -### Suport per a KaTeX - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:------------------:|:--------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -KaTeX és una biblioteca JavaScript ràpida i fàcil d'usar per a la representació de matemàtiques TeX a la web. Pots habilitar-ho amb `katex = true`. Mira com es veu en tabi [aquí](/ca/blog/markdown/#katex). - -### Suport per a Mermaid - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:-----------------:|:--------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics basada en JavaScript. Pots activar-la amb `mermaid = true`. - -Per defecte, la biblioteca Mermaid es serveix localment. Si prefereixes utilitzar un CDN, estableix `serve_local_mermaid = false` a `config.toml`. L'ús d'un CDN servirà la versió més recent de Mermaid; l'opció local servirà la versió inclosa amb tabi. - -Consulta la [documentació de Mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) per a instruccions d'ús i exemples. - -### Subconjunt de tipus de lletra personalitzat - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:------------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Les tipus de lletra personalitzades causen parpalleig del text en Firefox. Per resoldre això, tabi carrega un subconjunt de glifs per a la capçalera. Donat que això (lleugerament) augmenta el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d'aquest subconjunt. - -Pots crear un subconjunt personalitzat adaptat al teu lloc, guardar-lo com a `static/custom_subset.css`, i fer que es carregui amb `custom_subset = true`. - -Per obtenir més informació, incloent instruccions sobre com crear un subconjunt personalitzat, consulta la [documentació](@/blog/custom-font-subset/index.ca.md). - -### Contingut complet al feed - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:-------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Per defecte, el feed Atom només conté el resum o descripció de les teves publicacions. Pots incloure el contingut complet de les publicacions establint `full_content_in_feed = true` a `config.toml`. - -### Amagar contingut del feed - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Pots amagar pàgines específiques o seccions senceres del feed amb `hide_from_feed = true`. - -### Comentaris {#afegir-comentaris} - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:-------------------:|:-------------------:| -| ✅ | ❌ | ✅ | ❌ | ✅ | - -Per activar els comentaris en una pàgina, establert el nom del sistema com a `true` al front matter. Per exemple, `utterances = true`. - -Si vols activar els comentaris de forma global, pots fer-ho establint `enabled_for_all_posts = true` a la secció apropiada del teu `config.toml` (per exemple, a `[extra.giscus]`). - -Si has activat un sistema de forma global i vols desactivar-lo per a una pàgina específica, pots fer-ho establint el nom del sistema com a `false` al front matter. Per exemple, `utterances = false`. - -Llegeix la [documentació](@/blog/comments/index.ca.md) per a més informació sobre els sistemes disponibles i la seva configuració. - -### Anàlisi web - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:-----------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -tabi ofereix suport per a 3 sistemes d'anàlisi web que respecten la privacitat: [Plausible](https://plausible.io/), [GoatCounter](https://www.goatcounter.com/) i [Umami](https://umami.is/). - -Pots configurar-los en la secció `[extra.analytics]` del teu arxiu `config.toml`. - -- `service`: el servei a utilitzar. Les opcions disponibles són `"goatcounter"`, `"umami", i "plausible"`. - -- `id`: l'identificador únic per al teu servei d'anàlisi. Això varia segons el servei: - - Per a GoatCounter, és el codi triat durant el registre. Instàncies auto-allotjades de GoatCounter no requereixen aquest camp. - - Per a Umami, és l'ID del lloc web. - - Per a Plausible, és el nom de domini. - -- `self_hosted_url`: Opcional. Utilitza aquest camp per especificar l'URL si tens una instància auto-allotjada. L'URL base variarà segons la teva configuració particular. Alguns exemples: - - Per a GoatCounter: `"https://stats.example.com"` - - Per a Umami: `"https://umami.example.com"` - - Per a Plausible: `"https://plausible.example.com"` - -Un exemple de configuració per a GoatCounter no auto-allotjada seria: - -```toml -[extra.analytics] -service = "goatcounter" -id = "tabi" -self_hosted_url = "" -``` - -## Icones al peu de pàgina - -### Icones de xarxes socials - -| Pàgina | Secció | `config.toml` | Respecta jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Pots afegir icones de xarxes socials al peu de pàgina amb `socials`, que accepta una llista d'objectes de xarxes socials. Per exemple: - -```toml -socials = [ - { name = "github", url = "https://github.com/welpo/", icon = "github" }, - { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" }, - { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" }, - { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" }, - { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" }, -] -``` - -Per veure una llista de totes les icones integrades, fes un cop d'ull al directori [`static/social_icons` a GitHub](https://github.com/welpo/tabi/tree/main/static/social_icons). - -Trobes a faltar algun icona? Si creus que seria una bona addició a tabi, no dubtis en [obrir un issue](https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) o enviar una pull request ([exemple](https://github.com/welpo/tabi/pull/333)). - -Per utilitzar una icona personalitzada, pots afegir-la al directori `static/social_icons` del teu lloc web. Per exemple, si afegeixes `custom.svg`, la pots referenciar així: - -``` -{ name = "custom", url = "https://example.com", icon = "custom" } -``` - -{{ admonition(type="note", title="NOTA", text="Tots els enllaços a xarxes socials inclouen l'[atribut](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me) `rel='me'`. Això ajuda els motors de cerca i serveis web a verificar que les comptes de xarxes socials et pertanyen.") }} - -### Icona de feed - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Pots afegir un enllaç al teu feed RSS/Atom al peu de pàgina amb `feed_icon = true`. - -Nota pels usuaris de Zola 0.19.X: quan hi ha dos noms de fitxer a `feed_filenames`, només s'enllaçarà el primer al peu de pàgina. - -#### Menú de peu de pàgina - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:-----------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Pots afegir un menú al peu de pàgina amb `footer_menu`, que accepta una llista d'elements de menú. Per exemple: - -```toml -footer_menu = [ - {url = "about", name = "about", trailing_slash = true}, - {url = "privacy", name = "privacy", trailing_slash = true}, - {url = "sitemap.xml", name = "sitemap", trailing_slash = false}, - {url = "https://example.com", name = "external link", trailing_slash = true}, -] -``` - -### Copyright - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Per afegir una menció sobre els drets d'autor al teu lloc web, configura `copyright`: - -```toml -copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license." -``` - -- `$TITLE` serà reemplaçat per la variable `title` configurada a `config.toml` -- `$CURRENT_YEAR` serà reemplaçat per l'any actual -- `$AUTHOR` serà reemplaçat per la variable `author` -- `$SEPARATOR` serà reemplaçat per la [variable `separator`](#separador-personalitzat). - -El text es processarà en Markdown. Per exemple, la configuració d'adalt: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Secció de drets d'autor", full_width=true) }} - -Si tens un lloc multilingüe i vols establir diferents notificacions de drets d'autor per a diferents idiomes, afegeix la traducció corresponent a `copyright_translations.{codi_d'idioma}` per a cada idioma que vulguis donar suport. El codi de llengua ha de coincidir amb el [codi de llengua de tabi](https://welpo.github.io/tabi/ca/blog/faq-languages/#que-son-aquests-codis-de-dues-lletres). Per exemple, pel castellà: - -```toml -copyright_translations.es = "© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)." -``` - ---- - -## Metadades - -### Mostrar autoria - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Per mostrar l'autoria d'un article, estableix `show_author = true`. - -Això mostrarà els autors establerts a la variable `authors = []` al front matter del post. Si aquest camp no està configurat, mostrarà l'autor de `config.toml` (`author = ""`). - -### Temps de lectura - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Pots activar o desactivar el temps estimat de lectura d'un article amb `show_reading_time`. Si el configures com a `true`, apareixerà a les metadades de l'article, com això: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç «Veure canvis»") }} - -Com que segueix [la jerarquia](#jerarquia-de-configuracio), pots activar-lo o desactivar-lo per a pàgines o seccions específiques. Per exemple, aquesta demo desactiva `show_reading_time = false` a la secció [projectes](https://welpo.github.io/tabi/ca/projects/) a l'arxiu [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), de manera que les seves publicacions individuals no mostren el temps de lectura. - -### Mostrar la data - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:--------------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Per defecte, la data es mostra sota el títol de la publicació. Pots amagar-la amb `show_date = false`. Aquest ajust segueix [la jerarquia](#jerarquia-de-configuracio). - -### Format de data - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -tabi té dos formats de data: `long_date_format` i `short_date_format`. El format curt s'utilitza a les metadades d'una publicació, mentre que el format llarg s'utilitza al llistar les publicacions (és a dir, a la [secció de blog](/ca/blog/) o a la [pàgina principal](/ca/)). - -Per defecte és "6th July 2049" per a ambdós formats en anglès. Per a altres idiomes, el predeterminat és `"%d %B %Y"` per al format llarg i `"%-d %b %Y"` per al format curt. - -A Zola, la sintaxi per al format de temps està inspirada en strftime. Una referència completa està disponible a la [documentació de chrono](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html). - -### Separador personalitzat - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El separador apareix en diversos llocs: al títol del navegador, entre les metadades d'una publicació... - -El separador per defecte és un punt de llista (`•`), però pots canviar-lo configurant alguna cosa com `separator = "|"`. - -### Ordre del títol - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:-------:|:-------------:|:---------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Per defecte, el títol a la pestanya del navegador és el nom del lloc seguit del títol de la pàgina. Per exemple, el títol de la secció del blog és «~/tabi • Blog». - -Configurant `invert_title_order = true`, pots invertir l'ordre del títol del lloc i el títol de la pàgina a la pestanya del navegador. Per exemple, l'etiqueta del títol de la secció del blog es convertiria en «Blog • ~/tabi». - ---- - -Certainly, here is a high-quality, non-literal translation of the provided text into Catalan. I've adhered to your specifications, keeping the variables and English terms unchanged. - -## Seguretat - -### Correu electrònic codificat - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:--------------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -Per tal de protegir la teva adreça de correu electrònic contra els spambots, pots codificar-la al peu de pàgina. Pots fer això establint `email` a una versió codificada en base64 de la teva adreça de correu electrònic[^2]. Per exemple, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` és la versió codificada en base64 de "mail@example.com". - -Si no vols codificar el teu correu electrònic tu mateix, tabi pot fer-ho per tu si configures `encode_plaintext_email = true`. Això et permet establir un correu electrònic en text pla en la configuració. Tingues en compte que això només protegeix la teva adreça de correu electrònic al teu lloc web, no en repositoris públics. - -Si el correu electrònic està codificat (ja sigui per tu o per tabi), els usuaris amb JavaScript desactivat no veuran la icona de correu electrònic. - -### CSP (Content Security Policy) - -| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript | -|:------:|:------:|:-------------:|:--------------------:|:--------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -La Content Security Policy (CSP) és una capa addicional de seguretat que ajuda a detectar i mitigar certs tipus d'atacs, inclosos atacs de Cross Site Scripting (XSS) i injecció de dades. Aquests atacs s'utilitzen per a tot, des del robatori de dades fins a la desfiguració de llocs web i la distribució de programari maliciós. - -tabi té una CSP predeterminada que permet imatges i vídeos remots, així com incrustacions de YouTube i Vimeo. Pots personalitzar-la amb `allowed_domains`, que accepta una llista de directrius de CSP. Aquesta és la CSP predeterminada: - -```toml -allowed_domains = [ - { directive = "font-src", domains = ["'self'", "data:"] }, - { directive = "img-src", domains = ["'self'", "https://*", "data:"] }, - { directive = "script-src", domains = ["'self'"] }, - { directive = "style-src", domains = ["'self'"] }, - { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] }, -] -``` - -Aquesta opció està habilitada per defecte. Per desactivar-la per una pàgina, secció o globalment, estableix `enable_csp = false`. La configuració de `enable_csp` segueix la jerarquia. - -Per a més informació, consulta la [pàgina de documentació de CSP](@/blog/security/index.ca.md). - -[^1]: Si estàs utilitzant un repositori Git remot, potser voldràs automatitzar el procés d'actualització del camp `updated`. Aquí tens una guia per a això: [Zola Git Hook: actualitzant les dates de les publicacions](https://osc.garden/ca/blog/zola-date-git-hook/). - -[^2]: Per a codificar el teu correu electrònic en base64 pots utilitzar [eines en línia](https://www.base64encode.org/) o, al teu terminal, executar: `printf 'mail@example.com' | base64` diff --git a/content/blog/mastering-tabi-settings/index.es.md b/content/blog/mastering-tabi-settings/index.es.md deleted file mode 100644 index 044b265..0000000 --- a/content/blog/mastering-tabi-settings/index.es.md +++ /dev/null @@ -1,965 +0,0 @@ -+++ -title = "Domina la configuración de tabi: guía completa" -date = 2023-09-18 -updated = 2024-11-30 -description = "Descubre las múltiples maneras en que puedes personalizar tabi." - -[taxonomies] -tags = ["funcionalidad", "tutorial", "preguntas frecuentes"] - -[extra] -pinned = true -quick_navigation_buttons = true -social_media_card = "social_cards/es_blog_mastering_tabi_settings.jpg" -+++ - -Esta es la guía completa sobre la configuración en tabi. Si tienes alguna pregunta, puedes [abrir un issue en GitHub](https://github.com/welpo/tabi/issues/new) o [inciar una discusión](https://github.com/welpo/tabi/discussions). - -
- Tabla de contenido - -
- -## Jerarquía de configuración - -tabi tiene una jerarquía que te permite personalizar tu sitio en diferentes niveles. La jerarquía (de menor a mayor prioridad) es la siguiente: - -1. **Configuraciones globales**: Estas son las configuraciones que se aplican a todo tu sitio. Se establecen en `config.toml`. -2. **Configuraciones de sección**: Estas son las configuraciones que se aplican a una sección de tu sitio (por ejemplo, `/blog` o `/projects`). Se establecen en la metainformación del archivo `_index.md` de la sección. -3. **Configuración de la página «padre»**: Para páginas anidadas (páginas dentro de páginas), estas son las configuraciones de la página que las contiene. -4. **Configuraciones de página**: Estas son las configuraciones que se aplican a una sola página. Se establecen en la metainformación de la página. - -En todos los casos, las opciones de tabi se establecen en la sección `[extra]`. - -Para las configuraciones que siguen esta jerarquía, el valor establecido en una página reemplaza el valor de una sección, que a su vez reemplaza el valor global. En resumen: cuanto más específica sea la configuración, mayor prioridad tendrá, o `página > página padre/sección > config.toml`. - ---- - -## Búsqueda - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -tabi soporta búsqueda local accesible y multilingüe con [Elasticlunr](http://elasticlunr.com/). Para activarla, necesitas: - -1. Establecer un `default_language` en `config.toml`. -2. Establecer `build_search_index = true`. -3. Opcionalmente, configurar la sección `[search]`. - -Por ejemplo: - -```toml -base_url = "https://example.com" -default_language = "en" -build_search_index = true - -[search] -index_format = "elasticlunr_json" # O el menos eficiente "elasticlunr_javascript". -include_title = true -include_description = true -include_path = true -include_content = true -``` - -**Nota**: para soporte de búsqueda en Chino/Japonés, necesitas usar una [build personalizada de Zola](https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55). - -### Consideraciones para usuarios de Zola 0.17.X - -Zola 0.17.X no proporciona acceso a la variable `search.index_format` ([reporte del bug](https://github.com/getzola/zola/issues/2165)). Al usar tabi, se asume el uso del índice JSON, que es más eficiente. Sin embargo, debido a [otro bug](https://github.com/getzola/zola/issues/2193) solucionado en 0.18.0, el índice JSON para sitios multilingües no se genera correctamente. - -Los usuarios con versiones de Zola anteriores a 0.18.0 que quieran usar el índice JavaScript necesitan establecer la variable `index_format` en dos lugares: - -```toml -[search] -index_format = "elasticlunr_javascript" - -[extra] -index_format = "elasticlunr_javascript" -``` - -Esto asegura que tabi cargue los archivos correctos. Recomendamos actualizar a Zola 0.18.0 o posterior para una funcionalidad óptima. - -### Detalles de implementación - -Para detalles técnicos sobre la implementación de la búsqueda en tabi, incluyendo cuándo se carga el índice, características de accesibilidad y otros detalles, consulta el [Pull Request #250](https://github.com/welpo/tabi/pull/250). - ---- - -## Soporte multilingüe - -tabi ofrece soporte multilingüe completo para tu sitio Zola, desde configurar un idioma predeterminado hasta añadir todos los que desees. Consulta la [preguntas frecuentes sobre idiomas](@/blog/faq-languages/index.es.md) para más información. - ---- - -## Apariencia - -### Página principal - -La [página principal](/) de esta demo tiene un encabezado con una imagen, un título y una descripción: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Encabezado de la página principal") }} - -#### Cabecera - -Para configurar la imagen y el título, puedes usar la variable `header` en el front matter del archivo `_index.md` de la sección. Por ejemplo: - -```toml -[extra] -header = {title = "¡Hola! Soy tabi~", img = "blog/mastering-tabi-settings/img/main.webp", img_alt = "Óscar Fernández, el autor del tema" } -``` - -La descripción es contenido Markdown normal, escrito fuera del front matter. - -#### Listando publicaciones recientes - -Para mostrar publicaciones en la página principal, primero debes decidir de dónde se servirán: de la ruta raíz (`/`) o de un subdirectorio (por ejemplo, `/blog`). - -**Opción A: Servir publicaciones desde la ruta raíz (`/`)** - -Configura `paginate_by` en el front matter de tu archivo `content/_index.md`: - -```toml -title = "Últimas publicaciones" -sort_by = "date" -paginate_by = 5 # Muestra 5 publicaciones por página. - -[extra] -header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Tu nombre" } -``` - -{{ admonition(type="note", text="La configuración `paginate_by` va en el front matter principal, no en la sección `[extra]`.") }} - -**Opción B: Servir publicaciones desde un subdirectorio (por ejemplo, `/blog`)** - -Utiliza `section_path` en la sección `[extra]` de tu archivo `content/_index.md`: - -```toml -title = "Últimas publicaciones" -sort_by = "date" -# No configures `paginate_by` aquí. - -[extra] -header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Tu nombre" } -section_path = "blog/_index.md" # Dónde encontrar tus publicaciones. -max_posts = 5 # Muestra hasta 5 publicaciones en la página principal. -``` - -{{ admonition(type="warning", title="ALERTA", text="No configures `paginate_by` y `section_path` a la vez. Estas configuraciones son mutuamente excluyentes y usarlas juntas puede resultar en que no se muestren publicaciones.") }} - -Notas adicionales: - -- El `title` en el front matter establece el título que aparece sobre las publicaciones. -- Usa la ruta completa al archivo `_index.md` de la sección para `section_path`. Usar `section_path = "blog/"` no funcionará. - -##### Fijar publicaciones - -Puedes fijar publicaciones para mantenerlas en la parte superior de la página principal. En esta demo, esta publicación está fijada, por lo que aparece primera con un icono y etiqueta de "fijada": - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Entrada fijada", full_width=true) }} - -Las publicaciones fijadas se muestran primero, manteniendo su orden relativo según el `sort_by` de la sección, seguidas por el resto de las publicaciones. - -Para fijar una publicación, añade lo siguiente a su front matter: - -```toml -[extra] -pinned = true -``` - -{{ admonition(type="info", text="Este ajuste solo afecta a las páginas principales del sitio (como `/`, `/es/`, `/fr/`). Otras secciones como `blog/`, `tags/` o `archive/` muestran las publicaciones en su orden habitual.") }} - -{{ admonition(type="warning", text='Cuando se utiliza la paginación (`paginate_by`), las publicaciones destacadas pueden aparecer dos veces: una vez en la parte superior de la primera página, y otra en su posición cronológica normal en páginas posteriores.') }} - -##### Mostrar la fecha de los artículos en el listado - -Por defecto, cuando se listan los artículos, se muestra la fecha de creación. Puedes configurar qué fecha(s) mostrar usando la opción `post_listing_date`. Configuraciones disponibles: - -- `date`: Muestra solo la fecha de publicación original del artículo (opción por defecto). -- `updated`: Muestra solo la fecha de la última actualización del artículo. Si no hay fecha de actualización, muestra la fecha de publicación original. -- `both`: Muestra tanto la fecha de publicación original como la fecha de la última actualización. - -#### Listado de proyectos - -Puedes mostrar una selección de proyectos en tu página principal. Para hacer esto, primero necesitarás configurar el directorio `projects`. - -Una vez hecho esto, configura la ruta a los proyectos en la sección `[extra]` de tu archivo `_index.md`: - -```toml -[extra] -projects_path = "projects/_index.md" -``` - -Esto mostrará los 3 proyectos de mayor prioridad (con menor peso; el mismo orden que en Proyectos). Para mostrar más o menos proyectos, puedes establecer `max_projects` en `[extra]`. - -Por defecto, la sección de proyectos se mostrará en la parte inferior de la página principal, bajo los posts. Si prefieres que aparezca en la parte superior, establece `show_projects_first = true`. - -### Interruptor de modo claro y oscuro - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -El interruptor de modo claro y oscuro (el icono de luna/sol en la esquina superior derecha) puede habilitarse configurando `theme_switcher = true` en `config.toml`. - -### Modo predeterminado (claro/oscuro) - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El tema predeterminado puede especificarse con la variable `default_theme`, que acepta `"dark"` o `"light"`. Si no lo especificas, el tema predeterminado será el tema del sistema. - -### Pieles personalizadas - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Las pieles de tabi cambian el color principal del sitio. Puedes configurar la piel en `config.toml` con `skin = "nombre_de_la_piel"`. Por ejemplo, `skin = "lavender"` se ve así (haz clic para cambiar entre modo claro y oscuro): - -{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="piel lavender en modo claro", toggled_alt="piel lavender en modo oscuro", full_width=true) }} - -Explora las pieles disponibles y aprende cómo crear la tuya propia consultando [la documentación](/es/blog/customise-tabi/#skins). - -### Fuente sans serif (paloseco) - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -tabi utiliza una fuente serif para los párrafos de los artículos (la que estás viendo ahora). Puedes cambiar a una fuente sans serif (la que ves en los encabezados/menú) en todo tu sitio configurando `override_serif_with_sans = true` en `config.toml`. - -Haz clic en la imagen para comparar las fuentes: - -{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Fuente serif", toggled_alt="Fuente sans-serif", full_width=true) }} - -### Estilos CSS personalizados - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ❌ | ✅ | ❌ | ❌ | - -Puedes cargar estilos CSS personalizados para todo el sitio o en páginas específicas utilizando `stylesheets`, que acepta una lista de rutas hacia archivos CSS. Por ejemplo: - -```toml -stylesheets = ["css/custom.css", "css/another.css"] -``` - -### Color del tema del navegador - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El color del tema del navegador es el color que aparece en la barra de pestañas del navegador: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_dark.webp" alt="pestañas con un tema de navegador de color") }} - -Puedes establecerlo en `config.toml` como `browser_theme_color = "#087e96"`. Si deseas diferentes colores para los modos oscuro/claro, puedes establecer un conjunto de colores con `browser_theme_color = ["#ffffff", "#000000"]`. El primer color es para el modo claro, el segundo para el oscuro. - -Esta variable acepta cualquier color CSS válido, así que puedes usar palabras clave (por ejemplo, `blue`), códigos hexadecimales (por ejemplo, `#087e96`) o valores RGB/HSL (por ejemplo, `rgb(8, 126, 150)`). - -### Etiquetas compactas - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Por defecto, la [página de etiquetas](/es/tags) muestra las etiquetas así: - -[NombreEtiqueta](#) — n publicación[es] - -Establecer `compact_tags = true` mostrará las mismas de este modo: - -[NombreEtiqueta](#) n - -### Orden de las etiquetas - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Por defecto, la [página de etiquetas](/es/tags) ordena las etiquetas alfabéticamente, dada la configuración predeterminada de `tag_sorting = "name"`. -Si configuras `tag_sorting = "frequency"`, se ordenarán según el número de publicaciones (de mayor a menor). - ---- - -## Series - -Para una explicación detallada, consulta la [documentación de series](@/blog/series/index.es.md). - -### Enlace para saltar a las publicaciones - -| Página | Sección | `config.toml` | Sigue jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ✅ | ✅ | ✅ | ❌ | - -Por defecto, aparece automáticamente un enlace "Saltar a publicaciones" junto al título de la serie cuando una serie tiene un contenido de más de 2000 caracteres: - -{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="enlace para saltar a las publicaciones de la serie", full_width=true) }} - -Establece `show_jump_to_posts = true` para forzar la activación de la función y `show_jump_to_posts = false` para desactivarla. - -### Indexación de páginas de series - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ✅ | ✅ | ✅ | ❌ | - -Por defecto, las páginas de series se indexan (usando una indexación basada en 1) según el `sort_by` de la sección de series. - -Establece `post_listing_index_reversed = true` para invertir el índice. - ---- - -## Integración con repositorios Git - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❓ | ❓ | ✅ | ❓ | ❌ | - -❓: `show_remote_source` sí sigue [la jerarquía](#jerarquia-de-configuracion) y puede configurarse en una página, sección o globalmente. El resto de las configuraciones solo pueden establecerse en `config.toml`. - -Estas configuraciones te permiten vincular tu sitio web tabi con un repositorio público de Git en GitHub, GitLab, Gitea o Codeberg. Configuraciones de ejemplo: - -```toml -remote_repository_url = "https://github.com/welpo/tabi" -remote_repository_git_platform = "auto" -remote_repository_branch = "main" -show_remote_changes = true -show_remote_source = true -``` - -Esto habilita dos funciones: - -1. `show_remote_source = true` añade un enlace al código fuente de tu sitio (tu `remote_repository_url`) que se mostrará en el pie de página: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Pie de página del sitio, mostrando un enlace 'Código fuente del sitio'") }} - -1. `show_remote_changes = true` añade un enlace «Ver cambios ↗» al historial de commits del artículo actualizado, al lado de la fecha de última actualización [^1]: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace 'Ver cambios'") }} - -Al hacer clic en este enlace, serás dirigido al historial de commits del artículo, donde podrás ver los cambios realizados en él: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Historial de commits de un artículo", full_width=true) }} - ---- - -## Páginas - -### Proyectos - -tabi tiene una plantilla integrada para proyectos. Para habilitarla, puedes crear un directorio en `content/projects/`. Allí, puedes crear un archivo `_index.md` con el siguiente contenido en el bloque de metadatos: - -```toml -title = "Proyectos" -sort_by = "weight" -template = "cards.html" -insert_anchor_links = "left" - -[extra] -show_reading_time = false -quick_navigation_buttons = true -``` - -- `title` es el título de la página. -- `sort_by` determina cómo se ordenan los proyectos. Puedes ordenar por «date», «update_date», «title», «title_bytes», «weight», «slug» o «none». -- `template = "cards.html"` establece la plantilla para renderizar la página de proyectos. -- `insert_anchor_links = "left"` añade enlaces ancla a los encabezados. -- `show_reading_time = false` oculta el tiempo estimado de lectura. -- `quick_navigation_buttons = true` muestra los botones de navegación rápida. - -Junto al archivo `_index.md`, puedes crear un archivo para cada proyecto. Por ejemplo, este es el bloque de metadatos para la página del proyecto [tabi](@/projects/tabi/index.es.md): - -```toml -title = "tabi" -description = "Un tema de Zola rápido, ligero y moderno con soporte multilingüe." -weight = 1 - -[extra] -local_image = "img/tabi.webp" -``` - -- `title` es el título del proyecto. -- `description` es la descripción del proyecto. -- `weight` determina el orden en el que se muestran los proyectos. Cuanto menor sea el peso, más arriba aparecerá el proyecto. -- `local_image` es la ruta de la imagen del proyecto. Esta imagen se muestra en la página de proyectos. - -Cuando un usuario haga clic en la imagen o el título de un proyecto, será llevado a la página del proyecto. Si prefieres que los usuarios vayan a un enlace externo, puedes establecer `link_to = "https://example.com"` en la sección `[extra]` del archivo `.md` del proyecto. - -La página del proyecto individual se renderiza con la plantilla predeterminada, a menos que establezcas otra, por ejemplo, `template = "info-page.html"`. - -#### Filtrar proyectos - -Si agregas etiquetas a tus proyectos, verás un filtro de etiquetas: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Página de proyectos con filtro de etiquetas", full_width=true) }} - -El sistema de filtrado de etiquetas utiliza mejora progresiva: - -- Sin JavaScript: Las etiquetas enlazan directamente a páginas de etiquetas dedicadas (por ejemplo, `/tags/nombre-etiqueta`). -- Con JavaScript: Filtrado instantáneo, sincronización de URL (#nombre-etiqueta) y navegación por teclado. - -Para desactivar esta función, establece `enable_cards_tag_filtering = false` en la sección `[extra]` del archivo `projects/_index.md` o en `config.toml`. - -{% admonition(type="tip") %} - -Para filtrar proyectos por etiquetas, necesitas establecer etiquetas en el front matter de cada proyecto. Por ejemplo: - -```toml -title = "nombre del proyecto" -weight = 40 - -[taxonomies] -tags = ["etiqueta uno", "etiqueta 2", "tercera etiqueta"] -``` - -{% end %} - -### Archivo - -Agregar una página de archivo es similar a agregar una página de proyectos. Puedes crear un directorio en `content/archive/`. Allí, puedes crear un archivo `_index.md` con el siguiente encabezado: - -```toml -title = "Archivo" -template = "archive.html" -``` - -Por defecto, el archivo mostrará las publicaciones ubicadas en `blog/`. Para personalizar esto, puedes modificar la sección `[extra]` del archivo `_index.md`: - -- **Para una sola ruta**: Establece `section_path = "tu-ruta/"` para listar publicaciones de un directorio específico. Asegúrate de incluir la barra inclinada al final. - -- **Para múltiples rutas**: Si deseas agregar publicaciones de varios directorios, `section_path` puede especificarse como una lista de rutas. Por ejemplo: - - ```toml - [extra] - section_path = ["blog/", "notas/", "ruta-tres/"] - ``` - -**Nota**: - -- La página de Archivo sólo listará publicaciones con fecha. -- El orden las publicaciones viene determinada por la variable `sort_by` de las secciones archivadas. Esta demo utiliza `sort_by = "date"` en `blog/_index.md`. - -### Etiquetas - -tabi tiene soporte integrado para etiquetas. Para habilitarlas, simplemente añade la taxonomía a tu `config.toml`: - -```toml -taxonomies = [{name = "tags", feed = true}] -``` - -Luego, puedes añadir etiquetas a tus publicaciones agregándolas al array `tags` en el bloque de metadatos de tu publicación. Por ejemplo: - -```toml,hl_lines=05-06 -title = "Los molinos de viento de mi vida: reflexiones de un escudero" -date = 1605-01-16 -description = "Mi viaje junto a Don Quijote, enfrentándome a gigantes imaginarios y descubriendo las verdaderas batallas de la vida." - -[taxonomies] -tags = ["personal", "reflexiones"] -``` - -### Página acerca de - -Si deseas tener una página que no sea un artículo, por ejemplo para un apartado "Acerca de", "Contacto" o "Derechos de autor", puedes usar la plantilla `info-page.html`. - -Primero, crea un directorio dentro de `content/` con el nombre que prefieras. Por ejemplo, `content/pages/`. Luego, crea un archivo `_index.md` dentro de ese directorio. El archivo debería verse así: - -```markdown -+++ -render = false -insert_anchor_links = "left" -+++ -``` - -- `render = false` indica a Zola que no renderice la sección. -- `insert_anchor_links = "left"` añade enlaces ancla a los encabezados. Esto es opcional. - -Dentro del directorio, puedes crear cualquier cantidad de archivos `.md`. - -En esta demo, la página [Sobre mí](/es/about/) utiliza la plantilla `info-page.html`. El bloque de metadatos es el siguiente: - -```toml -title = "Sobre mí" -template = "info-page.html" -path = "about" -``` - -Fíjate cómo se establece `path = "about"`. Zola colocará la página en `$base_url/about/`. Si deseas que la página esté disponible en `/contacto/`, tendrías que establecer `path = "contacto"`. - ---- - -## SEO - -tabi se encarga de la mayoría de las tareas de SEO por ti (como etiquetas del protocolo Open Graph, descripción, esquema de colores…), pero hay ciertas configuraciones que puedes personalizar. - -### Favicon - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El favicon es el pequeño icono que aparece en la pestaña del navegador. Puedes establecerlo en `config.toml` con `favicon = "img/favicon.png"`. - -### Favicon de emoji - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -También puedes establecer un emoji como tu favicon con `favicon_emoji`. Por ejemplo, `favicon_emoji = "👾"`. - -Nota: Algunos navegadores no admiten favicons de emoji. Consulta la tabla de compatibilidad en [caniuse](https://caniuse.com/link-icon-svg). - -### URL canónica - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ❌ | ❌ | - -La URL canónica es una manera de indicar a los motores de búsqueda cuál es la URL preferida para el contenido de tu sitio web. Esto es útil para el SEO y para evitar problemas de contenido duplicado. - -Por defecto, la URL canónica es la URL de la página en la que te encuentras. Sin embargo, puedes cambiar esto configurando `canonical_url` en el front matter de tu página o sección. - -Si tienes un sitio con una estructura idéntica y contenido coincidente, puedes configurar `base_canonical_url` en tu `config.toml`. La URL canónica se creará reemplazando el `$base_url` de la URL actual con el `$base_canonical_url` que establezcas. - -Por ejemplo, si configuras `base_canonical_url = "https://example.com"`, la URL canónica de la página `$base_url/blog/post1` será `https://example.com/blog/post1`. Esto es útil si tienes un sitio con varios dominios que comparten el mismo contenido. - -**Nota**: para asegurarte de que la URL canónica sea correcta, probablemente sea mejor configurar `canonical_url` individualmente para cada página. - -### Tarjetas para redes sociales - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Las tarjetas para redes sociales son las imágenes que se muestran cuando compartes un enlace en redes sociales: - -{{ dimmable_image(src="img/with_social_media_card.webp", alt="Una captura de pantalla de WhatsApp mostrando un enlace con una tarjeta para redes sociales") }} - -Puedes establecer la imagen para redes sociales con `social_media_card = "img/social_media_card.png"`. - -Puedes especificar rutas tanto relativas como absolutas. - -- **Ruta relativa**: Coloca la imagen en la misma carpeta que tu entrada de blog y especifica su nombre. Por ejemplo, `social_media_card = "relative_image.png"`. - -- **Ruta absoluta**: Coloca la imagen en una carpeta específica y especifica la ruta desde la raíz. Por ejemplo, `social_media_card = "img/absolute_image.png"`. - -Si ambas rutas, relativa y absoluta, son válidas, la ruta relativa tendrá prioridad. - -Dado que sigue la [jerarquía](#jerarquia-de-configuracion), si no está configurado en una página, pero sí lo está en una sección, se utilizará la imagen de la sección. Si no está configurado en una página o sección, pero sí en `config.toml`, se usará la imagen global. - -{{ admonition(type="tip", title="CONSEJO", text="Automatiza su creación con un [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [Automatizando las vistas previas de los enlaces con Zola](https://osc.garden/es/blog/automating-social-media-cards-zola/).") }} - -### Creador del fediverso - -| Página | Sección | `config.toml` | Sigue jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Puedes mostrar tu perfil del fediverso en las vistas previas de enlaces de Mastodon configurando la variable `fediverse_creator` en tu `config.toml`. Por ejemplo, para @username@example.com, usa: - -```toml -fediverse_creator = { handle = "username", domain = "example.com" } -``` - ---- - -## Navegación - -### Barra de navegación - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -La barra de navegación es la barra en la parte superior de la página que contiene el título del sitio y el menú de navegación. Puedes personalizar los elementos que aparecen configurando `menu` en `config.toml`. Por ejemplo: - -```toml -menu = [ - { name = "blog", url = "blog", trailing_slash = true }, - { name = "archivo", url = "archive", trailing_slash = true }, - { name = "etiquetas", url = "tags", trailing_slash = true }, - { name = "proyectos", url = "projects", trailing_slash = true }, - { name = "acerca de", url = "about", trailing_slash = true }, -] -``` - -### Botones de navegación rápida - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Los botones de navegación rápida son los botones que aparecen en la parte inferior derecha de la pantalla. Deberías verlos en esta página, si no estás en un dispositivo móvil. Se ven así: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp", alt="Botones de navegación rápida") }} - -Para activarlos, establece `quick_navigation_buttons = true`. - -### Table de contenido - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Habilita el índice de contenidos justo debajo del título y metadatos del artículo con `toc = true`. - -Para saber más sobre cómo personalizarlo, consulta [la documentación sobre la Tabla de contenido](@/blog/toc/index.es.md). - -### Enlace a los artículos anterior y siguiente - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Muestra enlaces a los artículos anterior y siguiente en la parte inferior de los posts. Se ve así: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enlaces a los artículos anterior y siguiente", full_width=true) }} - -Para activar esta función, configura `show_previous_next_article_links = true` y asegúrate de que tu sección tiene `sort_by` (por ejemplo, `sort_by = "date"`). - -Por defecto, los artículos siguientes estarán en el lado izquierdo de la página y los artículos anteriores en el lado derecho. -Para invertir el orden (artículos siguientes en el lado derecho y artículos anteriores en el lado izquierdo), establece `invert_previous_next_article_links = true`. - -Por defecto, esta sección de navegación tendrá el ancho completo del sitio (igual que la barra de navegación de la parte superior). Para hacerla más estrecha, coincidiendo con el ancho del artículo, establece `previous_next_article_links_full_width = false`. - -Todas estas configuraciones siguen la jerarquía. - -### Enlaces de retorno en notas al pie - -{{ admonition(type="warning", title="ADVERTENCIA DE DEPRECACIÓN", text="Zola v0.19.0 y posterior puede hacer esto de forma nativa. Establece `bottom_footnotes = true` en la sección `[markdown]` de tu configuración.") }} - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Establecer `footnote_backlinks = true` añadirá enlaces de retorno a las notas al pie de tus publicaciones, como este: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp", alt="Enlaces de retorno en notas al pie", full_width=true) }} - -Cuando hagas clic en un enlace de retorno (la flecha ↩), te llevará de vuelta al punto del texto donde se hizo referencia a la nota al pie. - ---- - -## Usabilidad - -### Botón de copiar en bloques de código - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Establecer `copy_button = true` añadirá un pequeño botón de copiar en la parte superior derecha de los bloques de código, como este: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botón de copiar en bloques de código", full_width=true) }} - -### Mostrar ruta/URL en bloques de código - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Establece `add_src_to_code_block = true` para habilitar el uso del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). - -### Forzar bloques de código de izquierda a derecha - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Por defecto, los bloques de código se renderizan de izquierda a derecha, independientemente de la dirección general del texto. Establece `force_codeblock_ltr = false` para permitir que los bloques de código sigan la dirección del documento. Útil para idiomas de derecha a izquierda que necesitan bloques de código de derecha a izquierda. - -### Soporte para KaTeX - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -KaTeX es una biblioteca JavaScript rápida y fácil de usar para la representación de matemáticas TeX en la web. Puedes habilitarlo con `katex = true`. Mira cómo se ve en tabi [aquí](/es/blog/markdown/#katex). - -### Soporte para Mermaid - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos basada en JavaScript. Puedes activarla con `mermaid = true`. - -Por defecto, la biblioteca Mermaid se sirve localmente. Si prefieres usar un CDN, establece `serve_local_mermaid = false` en `config.toml`. El uso de un CDN servirá la versión más reciente de Mermaid; la opción local servirá la versión incluida con tabi. - -Consulta la [documentación de Mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) para instrucciones de uso y ejemplos. - -### Subconjunto de fuente personalizada - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Las fuentes personalizadas causan parpadeo del texto en Firefox. Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto (ligeramente) aumenta el tiempo de carga inicial, es una buena idea intentar minimizar el tamaño de este subconjunto. - -Puedes crear un subconjunto personalizado adaptado a tu sitio, guardarlo como `static/custom_subset.css`, y hacer que se cargue con `custom_subset = true`. - -Para obtener más información, incluyendo instrucciones sobre cómo crear un subconjunto personalizado, consulta la [documentación](@/blog/custom-font-subset/index.es.md). - -### Contenido completo en el feed - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Por defecto, el feed Atom solo contiene el resumen/descripción de tus publicaciones. Puedes incluir el contenido completo de las publicaciones estableciendo `full_content_in_feed = true` en `config.toml`. - -### Ocultar contenido del feed - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Puedes ocultar páginas específicas o secciones enteras del feed con `hide_from_feed = true`. - -### Comentarios {#añadir-comentarios} - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:-------------------:| -| ✅ | ❌ | ✅ | ❌ | ✅ | - -Para activar los comentarios en una página, establece el nombre del sistema como `true` en el front matter. Por ejemplo, `utterances = true`. - -Si quieres activar los comentarios de forma global, puedes hacerlo estableciendo `enabled_for_all_posts = true` en la sección apropiada de tu `config.toml` (por ejemplo, en `[extra.giscus]`). - -Si has activado un sistema globalmente, pero quieres desactivarlo en una página específica, puedes hacerlo estableciendo el nombre del sistema como `false` en el front matter. Por ejemplo, `utterances = false`. - -Lee la [documentación](@/blog/comments/index.es.md) para obtener más información sobre los sistemas disponibles y su configuración. - -### Análisis web - -| Página | Sección | `config.toml` | Sigue Jerarquía | Requiere JavaScript | -|:------:|:--------:|:-------------:|:----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -tabi ofrece soporte para 3 sistemas de análisis web que respetan la privacidad: [Plausible](https://plausible.io/), [GoatCounter](https://www.goatcounter.com/) y [Umami](https://umami.is/). - -Puedes configurarlos en la sección `[extra.analytics]` de tu archivo `config.toml`. - -- `service`: el servicio a utilizar. Las opciones disponibles son `"goatcounter"`, `"umami"`, y `"plausible"`. - -- `id`: el identificador único para tu servicio de análisis. Esto varía según el servicio: - - Para GoatCounter, es el código elegido durante el registro. Instancias auto-alojadas de GoatCounter no requieren este campo. - - Para Umami, es la ID del sitio web. - - Para Plausible, es el nombre de dominio. - -- `self_hosted_url`. Opcional. Utiliza este campo para especificar la URL si tienes una instancia auto-alojada. La URL base variará según tu configuración particular. Algunos ejemplos: - - Para GoatCounter: `"https://stats.example.com"` - - Para Umami: `"https://umami.example.com"` - - Para Plausible: `"https://plausible.example.com"` - -Un ejemplo de configuración para GoatCounter no auto-alojada sería: - -```toml -[extra.analytics] -service = "goatcounter" -id = "tabi" -self_hosted_url = "" -``` - ---- - -## Pie de página - -### Iconos de redes sociales - -| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Puedes añadir iconos de redes sociales al pie de página con `socials`, que acepta una lista de objetos de redes sociales. Por ejemplo: - -```toml -socials = [ - { name = "github", url = "https://github.com/welpo/", icon = "github" }, - { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" }, - { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" }, - { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" }, - { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" }, -] -``` - -Para ver una lista de todos los iconos integrados, echa un vistazo al directorio [`static/social_icons` en GitHub](https://github.com/welpo/tabi/tree/main/static/social_icons). - -¿Echas en falta algún icono? Si crees que sería una buena adición a tabi, no dudes en [abrir un issue](https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) o enviar un pull request ([ejemplo](https://github.com/welpo/tabi/pull/333)). - -Para usar un icono personalizado, puedes añadirlo al directorio `static/social_icons` de tu sitio. Por ejemplo, si añades `custom.svg`, puedes referenciarlo así: - -``` -{ name = "custom", url = "https://example.com", icon = "custom" } -``` - -{{ admonition(type="note", title="NOTA", text="Todos los enlaces sociales incluyen el [atributo](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me) `rel='me'`. Esto ayuda a los motores de búsqueda y servicios web a verificar que las cuentas de redes sociales te pertenecen.") }} - -### Icono de feed - -| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Puedes añadir un enlace a tu feed RSS/Atom en el pie de página con `feed_icon = true`. - -Nota para usuarios de Zola 0.19.X: cuando hay dos nombres de archivo en `feed_filenames`, solo se enlazará el primero en el pie de página. - -### Menú de pie de página - -| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:---------------:|:------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Puedes añadir un menú al pie de página con `footer_menu`, que acepta una lista de elementos de menú. Por ejemplo: - -```toml -footer_menu = [ - {url = "about", name = "about", trailing_slash = true}, - {url = "privacy", name = "privacy", trailing_slash = true}, - {url = "sitemap.xml", name = "sitemap", trailing_slash = false}, - {url = "https://example.com", name = "external link", trailing_slash = true}, -] -``` - -### Copyright - -| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Para añadir una mención sobre los derechos de autor a tu sitio web, configura `copyright`: - -```toml -copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license." -``` - -- `$TITLE` será reemplazado por la variable `title` configurada en `config.toml` -- `$CURRENT_YEAR` será reemplazado por el año actual -- `$AUTHOR` será reemplazado por la variable `author` -- `$SEPARATOR` será reemplazado por la [variable `separator`](#separador-personalizado). - -Se procesará el texto en Markdown. Por ejemplo, la configuració de arriba: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Sección de derechos de autor", full_width=true) }} - -Si tienes un sitio multilingüe y deseas establecer diferentes notificaciones de derechos de autor para diferentes idiomas, añade la traducción correspondiente a `copyright_translations.{código_de_idioma}` para cada idioma que quieras dar soporte. El código de idioma debe coincidir con el [código de idioma de tabi](https://welpo.github.io/tabi/es/blog/faq-languages/#que-son-estos-codigos-de-dos-letras). Por ejemplo: - -```toml -copyright_translations.es = "© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)." -``` - ---- - -## Metadatos - -### Mostrar autoría - -| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Para mostrar la autoría de un artículo, usa `show_author = true`. - -Esto mostrará lxs autorxs establecidxs en la variable `authors = []` en el front matter del artículo. Si esto no está disponible, se usará `author = ""` en `config.toml`. - -### Tiempo de lectura - -| Página | Sección | `config.toml` | Respeta jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Puedes activar o desactivar el tiempo estimado de lectura de un artículo con `show_reading_time`. Si lo estableces en `true`, se mostrará en los metadatos del artículo, así: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace «Ver cambios»") }} - -Dado que sigue [la jerarquía](#jerarquia-de-configuracion), puedes activarlo o desactivarlo para páginas o secciones específicas. Por ejemplo, esta demo desactiva `show_reading_time = false` en la sección [proyectos](https://welpo.github.io/tabi/es/projects/) en el archivo [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), por lo que sus publicaciones individuales no muestran el tiempo de lectura. - -### Mostrar la fecha - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Por defecto, la fecha se muestra debajo del título de la publicación. Puedes ocultarla con `show_date = false`. Esta configuración sigue [la jerarquía](#jerarquia-de-configuracion). - -### Formato de fecha - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -tabi tiene dos formatos de fecha: `long_date_format` y `short_date_format`. El formato corto se utiliza en los metadatos de una publicación, mientras que el formato largo se utiliza al listar las publicaciones (es decir, en la [sección de blog](/es/blog/) o en la [página principal](/es/)). - -Por defecto es "6th July 2049" para ambos formatos en inglés. Para otros idiomas, el predeterminado es `"%d %B %Y"` para el formato largo y `"%-d %b %Y"` para el formato corto. - -En Zola, la sintaxis para el formateo de tiempo está inspirada en strftime. Una referencia completa está disponible en la [documentación de chrono](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html). - -### Separador personalizado - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -El separador aparece en varios lugares: en el título del navegador, entre los metadatos de una publicación… - -El separador por defecto es un punto de viñeta (`•`), pero puedes cambiarlo configurando algo como `separator = "|"`. - -### Orden del título - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Por defecto, el título en la pestaña del navegador es el nombre del sitio seguido del título de la página. Por ejemplo, el título de la sección del blog es «~/tabi • Blog». - -Al configurar `invert_title_order = true`, puedes invertir el orden del título del sitio y el título de la página en la pestaña del navegador. Por ejemplo, la etiqueta del título de la sección del blog se convertiría en «Blog • ~/tabi». - ---- - -## Seguridad - -### Correo electrónico codificado - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -Para proteger tu dirección de correo electrónico de los spambots, puedes codificarla en el pie de página. Puedes hacer esto estableciendo `email` en una versión codificada en base64 de tu dirección de correo electrónico[^2]. Por ejemplo, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` es la versión codificada en base64 de "mail@example.com". - -Si no quieres codificar tu correo electrónico tú mismo, tabi puede hacerlo por ti si configuras `encode_plaintext_email = true`. Esto te permite establecer un correo electrónico en texto plano en la configuración. Ten en cuenta que esto sólo protege tu dirección de correo electrónico en tu sitio, no en repositorios públicos. - -Si el correo electrónico está codificado (ya sea por ti o por tabi), los usuarios con JavaScript desactivado no verán el icono de correo electrónico. - -### CSP (Content Security Policy) - -| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript | -|:------:|:-------:|:-------------:|:------------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -La Content Security Policy (CSP) es una capa adicional de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluidos ataques de Cross Site Scripting (XSS) e inyección de datos. Estos ataques se utilizan para todo, desde robo de datos hasta desfiguración de sitios y distribución de malware. - -tabi tiene una CSP predeterminada que permite imágenes y vídeos remotos, así como incrustaciones de YouTube y Vimeo. Puedes personalizarla con `allowed_domains`, que toma una lista de directivas de CSP. Esta es la CSP predeterminada: - -```toml -allowed_domains = [ - { directive = "font-src", domains = ["'self'", "data:"] }, - { directive = "img-src", domains = ["'self'", "https://*", "data:"] }, - { directive = "script-src", domains = ["'self'"] }, - { directive = "style-src", domains = ["'self'"] }, - { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] }, -] -``` - -Esta función está habilitada por defecto. Para deshabilitarla (y permitir todo), configura `enable_csp = false` en una página, sección o globalmente. La opción `enable_csp` sigue [la jerarquía](#jerarquia-de-configuracion). - -Para obtener más información, consulta la [página de documentación de CSP](@/blog/security/index.es.md). - -[^1]: Si estás utilizando un repositorio Git remoto, es posible que quieras automatizar el proceso de actualización del campo `updated`. Aquí tienes una guía para eso: [Zola Git Hook: actualizando las fechas de las publicaciones](https://osc.garden/es/blog/zola-date-git-hook/). - -[^2]: Para codificar tu correo electrónico en base64 puedes utilizar [herramientas en línea](https://www.base64encode.org/) o, en tu terminal, ejecutar: `printf 'mail@example.com' | base64` diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md deleted file mode 100644 index afc8503..0000000 --- a/content/blog/mastering-tabi-settings/index.md +++ /dev/null @@ -1,977 +0,0 @@ -+++ -title = "Mastering tabi Settings: A Comprehensive Guide" -date = 2023-09-18 -updated = 2024-11-30 -description = "Discover the many ways you can customise your tabi site." - -[taxonomies] -tags = ["showcase", "tutorial", "FAQ"] - -[extra] -pinned = true -quick_navigation_buttons = true -social_media_card = "social_cards/blog_mastering_tabi_settings.jpg" -+++ - -This aims to be a comprehensive guide to every setting in tabi. If you have any questions, feel free to [open an issue on GitHub](https://github.com/welpo/tabi/issues/new) or [start a discussion](https://github.com/welpo/tabi/discussions). - -
- Table of Contents - -
- -## Settings Hierarchy - -tabi has a hierarchy that allows you to customise your site at different levels. The hierarchy (from low to high priority) is as follows: - -1. **Global settings**: These are the settings that apply to your entire site. They are set in `config.toml`. -2. **Section settings**: These are the settings that apply to a section of your site (e.g.`/blog` or `/projects`). They are set in the front matter of the `_index.md` file of the section. -3. **Parent page settings**: For nested pages (pages within pages), these are the settings from the parent page. -4. **Page settings**: These are the settings that apply to a single page. They are set in the front matter of the page. - -In all cases, tabi's settings are set in the `[extra]` section. - -For settings which follow this hierarchy, the value set on a page overrides the value for a section, which overrides the global value. In short: the more specific the setting, the higher priority it has, or `page > parent page/section > config.toml`. - ---- - -## Search - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -tabi supports accessible, local multi-lingual search with [Elasticlunr](http://elasticlunr.com/). To enable it, you need to: - -1. Set a `default_language` in `config.toml`. -2. Set `build_search_index = true`. -3. Optionally, configure the `[search]`. - -Here's an example configuration: - -```toml -base_url = "https://example.com" -default_language = "en" -build_search_index = true - -[search] -index_format = "elasticlunr_json" # Or the less efficient "elasticlunr_javascript". -include_title = true -include_description = true -include_path = true -include_content = true -``` - -**Note**: for Chinese/Japanese search support, you need to use a [custom Zola build](https://github.com/getzola/zola/blob/master/Cargo.toml#L54-L55). - -### Considerations for Zola 0.17.X Users - -Zola 0.17.X doesn't provide access to the `search.index_format` variable ([bug report](https://github.com/getzola/zola/issues/2165)). When using tabi, this variable defaults to the more efficient JSON index. However, due to [another bug](https://github.com/getzola/zola/issues/2193) fixed in 0.18.0, the JSON index for multi-language sites is not generated correctly. - -Users with Zola versions prior to 0.18.0 who want to use the JavaScript index need to set the `index_format` variable in two places: - -```toml -[search] -index_format = "elasticlunr_javascript" - -[extra] -index_format = "elasticlunr_javascript" -``` - -This ensures tabi loads the right files. We recommend upgrading to Zola 0.18.0 or later for optimal functionality. - -### Implementation Details - -For technical details about the search implementation in tabi, including when the index loads, accessibility features, and other specifics, see the [Pull Request #250](https://github.com/welpo/tabi/pull/250). - ---- - -## Multilingual Support - -tabi offers comprehensive multilingual support for your Zola site, from setting a default language to adding as many as you wish. Refer to the [multilingual FAQ](@/blog/faq-languages/index.md) for more information. - ---- - -## Appearance - -### Home Page - -The [main page](/) of this demo has a header with an image, a title and description: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Main page header") }} - -#### Heading - -To set the image and title, you can use the `header` variable in the front matter of the section's `_index.md` file. For example: - -```toml -[extra] -header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" } -``` - -The description is regular Markdown content, set outside the front matter. - -#### Listing Recent Posts - -To show posts on your main page, you first need to decide where these posts will be served from: the root path (`/`) or a subdirectory (e.g., `/blog`). - -**Option A: Serve posts from the root path (`/`)** - -Set `paginate_by` in the front matter of your `content/_index.md` file: - -```toml -title = "Latest posts" -sort_by = "date" -paginate_by = 5 # Show 5 posts per page. - -[extra] -header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" } -``` - -{{ admonition(type="note", text="The `paginate_by` setting goes in the main front matter, not in the `[extra]` section.") }} - -**Option B: Serve posts from a subdirectory (e.g., `/blog`)** - -Use `section_path` in the `[extra]` section of your `content/_index.md` file: - -```toml -title = "Latest posts" -sort_by = "date" -# Do not set `paginate_by` here. - -[extra] -header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" } -section_path = "blog/_index.md" # Where to find your posts. -max_posts = 5 # Show up to 5 posts on the main page. -``` - -{{ admonition(type="warning", text="Do not set both `paginate_by` and `section_path`. These settings are mutually exclusive and using both may result in no posts being displayed.") }} - -Additional notes: - -- The `title` in the front matter sets the header that appears above the posts. -- Use the full path to the section's `_index.md` file for `section_path`. Using `section_path = "blog/"` will not work. - -##### Pinning Posts - -You can pin posts to keep them at the top of the main page listing. In this demo, this post is pinned, so it appears first with a "pinned" icon and label: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/pinned_post_light.webp", dark_src="blog/mastering-tabi-settings/img/pinned_post_dark.webp", alt="Pinned post", full_width=true) }} - -Pinned posts are shown first, maintaining their relative order of the section's `sort_by`, followed by regular posts. - -To pin a post, add the following to its front matter: - -```toml -[extra] -pinned = true -``` - -{{ admonition(type="info", text="This setting only affects your site's main pages (like `/`, `/es/`, `/fr/`). Other sections like `blog/`, `tags/`, or `archive/` show posts in their normal order.") }} - -{{ admonition(type="warning", text='When using pagination (`paginate_by`), pinned posts may appear twice: once on top of page 1, and again in their normal chronological position on subsequent pages.') }} - -##### Display the Date of Posts in Listing - -By default, when listing posts, the date of post creation is shown. You can configure which date(s) to display using the `post_listing_date` option. Available settings: - -- `date`: Show only the original date of the post (default). -- `updated`: Show only the last updated date of the post. If there is no last updated date, it shows the original date. -- `both`: Show both the original date and the last updated date. - -```toml -post_listing_date = "date" -``` - -#### Listing Projects - -You can showcase a selection of projects on your main page. To do this, you'll need to set up the `projects` directory first. - -Once that's done, you configure the path to the projects in the `[extra]` section of your `_index.md` file: - -```toml -[extra] -projects_path = "projects/_index.md" -``` - -By default, this will show the 3 projects with the highest priority (smallest weight; same sorting as Projects page). To show more or fewer projects, you can set `max_projects` in the `[extra]` section. - -By default, the featured projects will be shown after the posts. If you want to show the projects before the posts, set `show_projects_first = true`. - -### Light and Dark Mode Switcher - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -The light and dark mode switcher (the moon/sun icon on the top right) can be enabled by setting `theme_switcher = true` in `config.toml`. - -### Default (Light/Dark) Mode - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -The default theme can be specified with the `default_theme` variable, which accepts either `"dark"` or `"light"`. If you don't set it, the default theme will be the one set in the user's browser. - -### Custom Skins - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -tabi's skins change the main colour of the site. You can set the skin in `config.toml` with `skin = "skin_name"`. For example, `skin = "lavender"` looks like this (click to switch between light and dark mode): - -{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }} - -Explore the available skins and learn how to create your own reading [the documentation](/blog/customise-tabi/#skins). - -### Sans-serif Font - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -tabi uses a serif font for article paragraphs (the one you're seeing now). You can switch to using a sans-serif font (the one on the headers/menu) throughout your entire site by setting `override_serif_with_sans = true` in your `config.toml`. - -Click on the image below to compare the two looks: - -{{ image_toggler(default_src="blog/mastering-tabi-settings/img/serif.webp", toggled_src="blog/mastering-tabi-settings/img/sans-serif.webp", default_alt="Serif font", toggled_alt="Sans-serif font", full_width=true) }} - -### Custom CSS - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ❌ | ✅ | ❌ | ❌ | - -You can load custom CSS for the entire site or on specific pages with `stylesheets`, which takes a list of paths to CSS files. For example: - -```toml -stylesheets = ["css/custom.css", "css/another.css"] -``` - -### Browser Theme Colour - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -The browser theme colour is the colour that appears in the browser's tab bar: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_dark.webp" alt="tabi with a coloured browser theme") }} - -You can set it in `config.toml` like `browser_theme_color = "#087e96"`. If you'd like different colours for dark/light mode, you can set an array of colours with `browser_theme_color = ["#ffffff", "#000000"]`. The first colour will be used for light mode, the second for dark mode. - -This variable accepts any valid CSS colour, so you can use keywords (e.g. `blue`), hex codes (e.g. `#087e96`) or RGB/HSL values (e.g. `rgb(8, 126, 150)`). - -### Compact Tags - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -By default, the [tags page](/tags) displays tags as: - -[TagName](#) — n post[s] - -Setting `compact_tags = true` will display them as: - -[TagName](#) n - -### Tags Sorting - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -By default, the [tags page](/tags) sorts tags alphabetically, given the default setting of `tag_sorting = "name"`. - -Setting `tag_sorting = "frequency"` will sort them by number-of-posts (descending). - ---- - -## Series - -For a detailed explanation of the series feature, see the [series documentation](@/blog/series/index.md). - -### Jump to posts link - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ✅ | ✅ | ✅ | ❌ | - -By default, a "Jump to posts" link automatically appears next to the series title when a series has a content over 2000 characters: - -{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="jump to series posts link", full_width=true) }} - -Set `show_jump_to_posts = true` to force the feature on and `show_jump_to_posts = false` to force it off. - -### Series pages indexation - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ✅ | ✅ | ✅ | ❌ | - -By default, series page are indexed (using a 1-based indexing) as per the series section `sort_by`. - -Set `post_listing_index_reversed = true` to reverse this index. - ---- - -## Git Repository Integration - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:-----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❓ | ❓ | ✅ | ❓ | ❌ | - -❓: `show_remote_source` does follow [the hierarchy](#settings-hierarchy) and can be set on a page, section or globally. The rest of the settings can only be set in `config.toml`. - -These settings allow you to link your tabi website with a public Git repository in GitHub, GitLab, Gitea or Codeberg. Example settings: - -```toml -remote_repository_url = "https://github.com/welpo/tabi" -remote_repository_git_platform = "auto" -remote_repository_branch = "main" -show_remote_changes = true -show_remote_source = true -``` - -This enables two features: - -1. `show_remote_source = true` adds a link to the source code of your site (your `remote_repository_url`) will be displayed on the footer: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Page footer, showing a 'Site source' link") }} - -1. `show_remote_changes = true` adds a "See changes ↗" link to the commit history of updated posts, next to the last updated date [^1]: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }} - -Clicking on this link will take you to the commit history of the post, where you can see the changes made to it: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Commit history of a post", full_width=true) }} - ---- - -## Pages - -### Projects - -tabi has a built-in projects (cards) template. To enable it, you can create a directory in `content/projects/`. There, you can create a `_index.md` file with the following front matter: - -```toml -title = "Projects" -sort_by = "weight" -template = "cards.html" -insert_anchor_links = "left" - -[extra] -show_reading_time = false -quick_navigation_buttons = true -``` - -- The `title` is the title of the page. -- `sort_by` determines how the projects are sorted. You can sort by "date", "update_date", "title", "title_bytes", "weight", "slug" or "none". -- `template = "cards.html"` sets the template to render the projects page. -- `insert_anchor_links = "left"` adds anchor links to headers. -- `show_reading_time = false` hides the [reading time](#reading-time). -- `quick_navigation_buttons = true` shows the [quick navigation buttons](#quick-navigation-buttons) are shown. - -Alongside the `_index.md` file, you can create a file for each project. For example, this is the front matter for the [tabi project page](@/projects/tabi/index.md): - -```toml -title = "tabi" -description = "A feature-rich modern Zola theme with first-class multi-language support." -weight = 1 - -[extra] -local_image = "img/tabi.webp" -``` - -- `title` is the title of the project. -- `description` is the description of the project. -- `weight` determines the order in which the projects are shown. The lower the weight, the higher the project will appear. -- `local_image` is the path to the image of the project. This image is shown on the projects page. - -When a user clicks on the image or title of a project, they will be taken to the project's page. If you'd rather have users go to an external link, you can set `link_to = "https://example.com` in the `[extra]` section of the project's `.md` file. - -The individual project's page is rendered with the default template, unless you set another one, e.g. `template = "info-page.html"`. - -#### Filtering Projects - -If you add tags to your projects, you will see a tag filter: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Projects page with tag filter", full_width=true) }} - -The tag filtering system uses progressive enhancement: - -- Without JavaScript: Tags link directly to dedicated tag pages (e.g. `/tags/tag-name`) -- With JavaScript: Instant filtering, URL syncing (#tag-name), and keyboard navigation - -To disable this feature, set `enable_cards_tag_filtering = false` in the `[extra]` section of the `projects/_index.md` file or in `config.toml`. - -{% admonition(type="tip") %} - -To filter projects by tags, you need to set tags in the front matter of each project. For example: - -```toml -title = "project name" -weight = 40 - -[taxonomies] -tags = ["tag one", "tag 2", "third tag"] -``` - -{% end %} - -### Archive - -Adding an archive page is similar to adding a projects page. You can create a directory in `content/archive/`. There, you can create a `_index.md` file with the following front matter: - -```toml -title = "Archive" -template = "archive.html" -``` - -By default, the archive will list posts located in `blog/`. To customise this, you can modify the `[extra]` section of the `_index.md` file: - -- **For a single source path**: Set `section_path = "your-path/"` to list posts from a specific directory. Make sure to include the trailing slash. - -- **For multiple source paths**: If you want to aggregate posts from various directories, `section_path` can be specified as a list of paths. For example: - - ```toml - [extra] - section_path = ["blog/", "notes/", "path-three/"] - ``` - -**Notes**: - -- the Archive page will only list posts that have a date in their front matter. -- Post sorting is determined by the `sort_by` variable of the sections you are archiving. This demo uses `sort_by = "date"` set in the `blog/_index.md`. - -### Tags - -tabi has built-in support for tags. To enable them, simply add the taxonomy to your `config.toml`: - -```toml -taxonomies = [{name = "tags", feed = true}] -``` - -You can then add tags to your posts by adding them to the `tags` array in the front matter of your post. For example: - -```toml,hl_lines=05-06 -title = "Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life" -date = 2007-04-26 -description = "Lessons learned from beet farming and paper sales." - -[taxonomies] -tags = ["personal", "beets"] -``` - -### About Page - -If you'd like to have a non-article page for an "About" section, a "Contact" or "Copyright" page, etc., you can use the `info-page.html` template. - -First, create a directory inside `content/` with any name you like. For example, `content/pages/`. Then, create a `_index.md` file inside that directory. The file should look like this: - -```markdown -+++ -render = false -insert_anchor_links = "left" -+++ -``` - -- `render = false` tells Zola not to render the section. -- `insert_anchor_links = "left"` adds anchor links to headers. This is optional. - -Inside the directory, you can create any number of `.md` files. - -In this demo, the [about](about/) page uses the `info-page.html` template. The front matter is as follows: - -```toml -title = "About" -template = "info-page.html" -path = "about" -``` - -Notice how the `path` is set to `about`. Zola will place the page at `$base_url/about/`. If you'd like to have the page available at `/contact/`, you'd set `path = "contact"`. - ---- - -## SEO - -tabi takes care of most of the SEO for you (like Open Graph protocol tags, description, color-scheme…), but there are a few things you can customise. - -### Favicon - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -The favicon is the small icon that appears in the browser tab. You can set it in `config.toml` with `favicon = "img/favicon.png"`. - -### Emoji Favicon - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -You can also set an emoji as your favicon with `favicon_emoji`. For example, `favicon_emoji = "👾"`. - -Note: Some browsers don't support emoji favicons. See the compatibility table in [caniuse](https://caniuse.com/link-icon-svg). - -### Canonical URL - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ❌ | ❌ | - -The canonical URL is a way to indicate to search engines what the preferred URL is for your website content. This is useful for SEO and avoiding duplicate content issues. - -By default, the canonical URL is the URL of the page you're on. However, you can override this by setting `canonical_url` in the front matter of your page or section. - -If you have a site with an identical structure and matching content, you can set `base_canonical_url` in your `config.toml`. The canonical URL will be crafted by replacing the `$base_url` of the current URL with the `$base_canonical_url` you set. - -For example, if you set `base_canonical_url = "https://example.com"`, the canonical URL of the page `$base_url/blog/post1` will be `https://example.com/blog/post1`. This is useful if you have a site with multiple domains that share the same content. - -**Note**: to ensure that the canonical URL is correct, it's probably best to set `canonical_url` individually for each page. - -### Social media cards - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Social media cards are the images that are displayed when you share a link on social media: - -{{ dimmable_image(src="img/with_social_media_card.webp", alt="A screenshot of WhatsApp showing a link with a social media card") }} - -You can set the social media image with `social_media_card = "img/social_media_card.png"`. - -You can specify both relative and absolute paths. - -- **Relative Path**: Place the image in the same folder as your blog post and specify its name. For example, `social_media_card = "relative_image.png"`. - -- **Absolute Path**: Put the image in a specific folder and specify the path from the root. For example, `social_media_card = "/img/absolute_image.png"`. - -If both relative and absolute paths are valid, the relative path will take precedence. - -Since it follows the [hierarchy](#settings-hierarchy), if it's not set on a page, but is set on a section, the section's image will be used. If it's not set on a page or section, but is set in `config.toml`, the global image will be used. - -{{ admonition(type="tip", title="PROTIP", text="Automate their creation with a [script](https://github.com/welpo/osc.garden/blob/main/static/code/social-cards-zola): [Automating Link Previews for Zola Sites](https://osc.garden/blog/automating-social-media-cards-zola/).") }} - -### Fediverse Creator - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -You can highlight your fediverse profile in Mastodon link previews by setting the `fediverse_creator` variable in your `config.toml`. For example, for @username@example.com, use: - -```toml -fediverse_creator = { handle = "username", domain = "example.com" } -``` - -This adds metadata to your HTML, allowing Mastodon to display the author's fediverse profile when your content is shared. - ---- - -## Navigation - -### Navigation Bar - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -The navigation bar is the bar at the top of the page that contains the site title and the navigation menu. You can customise which items appear by setting `menu` in `config.toml`. For example: - -```toml -menu = [ - { name = "blog", url = "blog", trailing_slash = true }, - { name = "archive", url = "archive", trailing_slash = true }, - { name = "tags", url = "tags", trailing_slash = true }, - { name = "projects", url = "projects", trailing_slash = true }, - { name = "about", url = "about", trailing_slash = true }, -] -``` - -### Quick Navigation Buttons - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Quick navigation buttons are the buttons that appear on the bottom right of the screen. You should see them on this page, if you're not on mobile. They look like this: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp" alt="Quick navigation buttons") }} - -The buttons allow you to quickly navigate through an expandable mini-table of contents, to the comment section (if enabled), as well as to the top of the page. - -To enable them, set `quick_navigation_buttons = true`. - -### Table of Contents - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Enable the table of contents right below the post's title and metadata with `toc = true`. - -Read more about the table of contents and how to customise it by reading [the docs](@/blog/toc/index.md). - -### Previous and Next Article Links - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -Displays links to the previous and next articles at the bottom of posts. It looks like this: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp" alt="Previous and next article links", full_width=true) }} - -To activate this feature, set `show_previous_next_article_links = true` and ensure your section has a `sort_by` value (e.g. `sort_by = "date"`). - -By default, next articles will be on the left side of the page and previous articles will be on the right side. -To reverse the order (next articles on the right and previous articles on the left), set `invert_previous_next_article_links = true`. - -By default, this navigation section will have the full width of the site (same as the navigation bar at the top). -To make it narrower, matching the article width, set `previous_next_article_links_full_width = false`. - -All of these settings follow the hierarchy. - -### Footnote Backlinks - -{{ admonition(type="warning", title="DEPRECATION WARNING", text="Zola v0.19.0 and later can do this natively. Set `bottom_footnotes = true` in your config's `[markdown]` section.") }} - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Setting `footnote_backlinks = true` will add backlinks to the footnotes of your posts, like this: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp" alt="Footnote backlinks", full_width=true) }} - -When you click on a backlink (the arrow ↩), it will take you back to the text where the footnote was referenced. - ---- - -## Usability - -### Copy Button on Code Blocks - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Setting `copy_button = true` will add a small copy button to the top right of code blocks, like this: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp" alt="Copy button on code blocks", full_width=true) }} - -### Source/Path on Code Blocks - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -Setting `add_src_to_code_block = true` enables the use of the [`add_src_to_code_block` shortcode](@/blog/shortcodes/index.md#show-source-or-path). - -### Force Code Blocks LTR - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -By default, code blocks are rendered left-to-right, regardless of the overall text direction. Set `force_codeblock_ltr = false` to allow code blocks to follow the document's text direction. Useful for RTL languages needing RTL code blocks. - -### KaTeX Support - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. You can enable it with `katex = true`. See what it looks like in tabi [here](/blog/markdown/#katex). - -### Mermaid Support - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ✅ | - -[Mermaid](https://github.com/mermaid-js/mermaid) is a JavaScript-based diagramming and charting tool. You can enable it with `mermaid = true`. - -By default, the Mermaid library is served locally. If you prefer to use a CDN, set `serve_local_mermaid = false` in `config.toml`. Using a CDN will serve the latest version of Mermaid; the local option will serve the version bundled with tabi. - -See the [Mermaid documentation](@/blog/shortcodes/index.md#mermaid-diagrams) for usage instructions and examples. - -### Custom Font Subset - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Custom fonts cause flashing text in Firefox. To amend this, tabi loads a subset of glyphs for the header. Since this (slightly) increases the initial load time, it's a good idea to try and minimise the size of this subset. - -You can create a custom subset tailored to your site, save it as `static/custom_subset.css`, and have it load with `custom_subset = true`. - -For more information, including instructions on how to create a custom subset, see the [docs](@/blog/custom-font-subset/index.md). - -### Full Content in Feed - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -By default, the Atom feed only contains the summary/description of your posts. You can include the entire posts' content by setting `full_content_in_feed = true` in `config.toml`. - -### Hiding Content from Feed - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -You can hide specific pages or entire sections from your feed by setting `hide_from_feed = true`. - -### Comments {#adding-comments} - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ❌ | ✅ | ❌ | ✅ | - -To enable comments on an individual page, set the name of the system you want to enable to `true` in the front matter. For example, `utterances = true`. - -To enable a system globally (on all pages), set `enabled_for_all_posts = true` in the correct section of your `config.toml` (e.g. inside `[extra.giscus]`). - -If you have enabled a system globally, but want to disable it on a specific page, set the name of the system to `false` in the front matter of that page. For example, `utterances = false`. - -Read [the docs](@/blog/comments/index.md) for more information on the available systems and their setup. - -### Analytics - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -tabi supports 3 privacy-friendly analytics systems: [Plausible](https://plausible.io/), [GoatCounter](https://www.goatcounter.com/) and [Umami](https://umami.is/). - -You can set them up in the `[extra.analytics]` section of your `config.toml`. - -- `service`: Specifies which analytics service to use. Supported options are `"goatcounter"`, `"umami"`, and `"plausible"`. - -- `id`: The unique identifier for your analytics service. This varies based on the service: - - For GoatCounter, it's the code chosen during signup. Self-hosted instances of GoatCounter don't require this field. - - For Umami, it's the website ID. - - For Plausible, it's the domain name. - -- `self_hosted_url`: Optional. Use this field to specify the URL for self-hosted instances of your chosen analytics service. The base URL differs based on your specific setup. Some examples: - - For GoatCounter: `"https://stats.example.com"` - - For Umami: `"https://umami.example.com"` - - For Plausible: `"https://plausible.example.com"` - -An example configuration for non-self-hosted GoatCounter would look like this: - -```toml -[extra.analytics] -service = "goatcounter" -id = "tabi" -self_hosted_url = "" -``` - ---- - -## Footer - -### Social Media Icons - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -You can add social media icons to the footer with `socials`, which takes a list of social media objects. For example: - -```toml -socials = [ - { name = "github", url = "https://github.com/welpo/", icon = "github" }, - { name = "soundcloud", url = "https://soundcloud.com/oskerwyld", icon = "soundcloud" }, - { name = "instagram", url = "https://instagram.com/oskerwyld", icon = "instagram" }, - { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" }, - { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" }, -] -``` - -To see a list of all the built-in icons, take a look at the [`static/social_icons` directory on GitHub](https://github.com/welpo/tabi/tree/main/static/social_icons). - -Missing an icon? If you think it would be a good addition to tabi, feel free to [open an issue](https://github.com/welpo/tabi/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) or submit a pull request ([example](https://github.com/welpo/tabi/pull/333)). - -To use a custom icon, you can add it to your site's `static/social_icons` directory. For example, if you add `custom.svg`, you can reference it like this: - -``` -{ name = "custom", url = "https://example.com", icon = "custom" } -``` - -{{ admonition(type="note", text="All social links include the `rel='me'` [attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me). This helps search engines and web services verify that the social media accounts are owned by you.") }} - -### Feed Icon - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -You can add a link to your RSS/Atom feed to the footer with `feed_icon = true`. - -Note for Zola 0.19.X users: when there are two filenames in `feed_filenames`, only the first one will be linked in the footer. - -### Footer Menu - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -You can add a menu to the footer with `footer_menu`, which takes a list of menu items. For example: - -```toml -footer_menu = [ - {url = "about", name = "about", trailing_slash = true}, - {url = "privacy", name = "privacy", trailing_slash = true}, - {url = "sitemap.xml", name = "sitemap", trailing_slash = false}, - {url = "https://example.com", name = "external link", trailing_slash = true}, -] -``` - -### Copyright - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -To add a copyright notice to your site, set `copyright`: - -```toml -copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the content in this website is available under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/) license." -``` - -You can use the following variables: - -- `$TITLE` will be replaced by `title` variable set in `config.toml` -- `$CURRENT_YEAR` will be replaced by the current year -- `$AUTHOR` will be replaced by the `author` variable -- `$SEPARATOR` will be replaced by the [`separator` variable](#custom-separator) - -Markdown is rendered. The example above: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Copyright section", full_width=true) }} - -If you have a multilingual site and want to set different copyright notices for different languages, you can add the corresponding translation to `copyright_translations.{language_code}` for each language you want to support. The language code must match [tabi's language code](https://welpo.github.io/tabi/blog/faq-languages/#what-are-these-two-letter-codes). For example, for Spanish: - -```toml -copyright_translations.es = "© $CURRENT_YEAR $AUTHOR $SEPARATOR A menos que se indique lo contrario, el contenido de esta web está disponible bajo la licencia [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)." -``` - ---- - -## Metadata - -### Show author - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -To show the author(s) below the post title, set `show_author = true`. - -This will display the authors set on `authors = []` in the front matter of the post. If this is not available, it will fall back to `author = ""`in `config.toml`. - -### Reading Time - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -You can enable or hide the reading time of a post with `show_reading_time`. If you set it to `true`, it will be displayed in the post's metadata, like this: - -{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }} - -Since it follows [the hierarchy](#settings-hierarchy), you can enable it or hide it for specific pages or sections. For example, this demo sets `show_reading_time = false` in the [projects](https://welpo.github.io/tabi/projects/) section's [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.md?plain=1), so their individual posts don't show the reading time. - -### Show Date - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ✅ | ✅ | ✅ | ✅ | ❌ | - -By default, the date is shown below the post title. You can hide it with `show_date = false`. This setting follows [the hierarchy](#settings-hierarchy). - -### Date Format - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -tabi has two date formats: `long_date_format` and `short_date_format`. The short format is used in a post's metadata, while the long format is used when listing posts (i.e. on the [blog section](@/blog/_index.md) or the [main page](@/_index.md)). - -The default is "6th July 2049" for both formats in English. For other languages, the defaut is `"%d %B %Y"` for the long format and `"%-d %b %Y"` for the short format. - -In Zola, time formatting syntax is inspired fom strftime. A full reference is available in the [chrono docs](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html). - -### Custom Separator - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -The separator appears in various places: in the title tag, between the metadata of a post… - -The default separator is a bullet point (`•`), but you can change by setting something like `separator = "|"`. - -### Title Tag Order - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -The title tag is the text that appears in the browser tab. By default, it's the site title followed by the page title. For example, the title tag of the blog section is "~/tabi • Blog". - -By setting `invert_title_order = true`, you can invert the order of the site title and page title in the browser tab. For example, the title tag of the blog section would become "Blog • ~/tabi". - ---- - -## Security - -### Encoded Email - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ✅ | - -To protect your email address from spambots, you can encode it in the footer. You can do this by setting `email` to a base64 encoded version of your email address[^2]. For example, `email = "bWFpbEBleGFtcGxlLmNvbQ=="` is the base64 encoded version of "mail@example.com". - -If you don't want to encode your email yourself, tabi can encode it for you if you set `encode_plaintext_email = true`. This allows you to set a plaintext email on the config. Note that this only protects your email address on your site, not in public repositories. - -If the email is encoded (either by you or by tabi), users with JavaScript disabled will not see the email icon. - -### CSP (Content Security Policy) - -| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript | -|:----:|:-------:|:-------------:|:-----------------:|:-------------------:| -| ❌ | ❌ | ✅ | ❌ | ❌ | - -Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware. - -tabi has a default CSP that allows for remote images and videos, as well as YouTube and Vimeo embeds. You can customise it with `allowed_domains`, which takes a list of CSP directives. This is the default CSP: - -```toml -allowed_domains = [ - { directive = "font-src", domains = ["'self'", "data:"] }, - { directive = "img-src", domains = ["'self'", "https://*", "data:"] }, - { directive = "script-src", domains = ["'self'"] }, - { directive = "style-src", domains = ["'self'"] }, - { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] }, -] -``` - -This feature is enabled by default. To disable it (and allow all connections), set `enable_csp = false` on a page, section or globally. The `enable_csp` setting follows the [hierarchy](#settings-hierarchy). - -See the [CSP documentation page](@/blog/security/index.md) for more information. - -[^1]: If you're using a remote Git repository, you might want to automate the process of updating the `updated` field. Here's a guide for that: [Zola Git Pre-Commit Hook: Updating Post Dates](https://osc.garden/blog/zola-date-git-hook/). - -[^2]: To encode your email in base64 you can use [online tools](https://www.base64encode.org/) or, on your terminal, run: `printf 'mail@example.com' | base64`. diff --git a/content/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg b/content/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg deleted file mode 100644 index 69e0efc..0000000 Binary files a/content/blog/mastering-tabi-settings/social_cards/blog_mastering_tabi_settings.jpg and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg b/content/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg deleted file mode 100644 index 4c8f94f..0000000 Binary files a/content/blog/mastering-tabi-settings/social_cards/ca_blog_mastering_tabi_settings.jpg and /dev/null differ diff --git a/content/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg b/content/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg deleted file mode 100644 index cdc4d16..0000000 Binary files a/content/blog/mastering-tabi-settings/social_cards/es_blog_mastering_tabi_settings.jpg and /dev/null differ diff --git a/content/blog/security/index.ca.md b/content/blog/security/index.ca.md deleted file mode 100644 index be1f675..0000000 --- a/content/blog/security/index.ca.md +++ /dev/null @@ -1,44 +0,0 @@ -+++ -title = "Seguretat per defecte" -date = 2023-02-22 -updated = 2024-08-28 -description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment personalitzable amb valors segurs per defecte. Obtingues tranquil·litat i un A+ en l'Observatori de Mozilla." - -[taxonomies] -tags = ["seguretat", "funcionalitat"] - -[extra] -social_media_card = "social_cards/ca_blog_security.jpg" -+++ - -La configuració per defecte del tema obté una puntuació A+ a l'[Observatori de Mozilla](https://observatory.mozilla.org).[^1] - -Això s'aconsegueix configurant programàticament les capçaleres de la Política de Seguretat de Contingut (CSP) basant-se en una llista de dominis permesos definida per l'usuari en el fitxer `config.toml`. Aquí tens la configuració per defecte i recomanada (pots eliminar l'última directiva si no vols inserir vídeos de YouTube): - -```toml -[extra] -allowed_domains = [ - { directive = "font-src", domains = ["'self'", "data:"] }, - { directive = "img-src", domains = ["'self'", "https://*", "data:"] }, - { directive = "script-src", domains = ["'self'"] }, - { directive = "style-src", domains = ["'self'"] }, - { directive = "frame-src", domains = ["https://www.youtube-nocookie.com"] }, -] -``` - -La llista `allowed_domains` especifica les URLs a les quals el lloc web hauria de poder connectar-se, i cada domini de la llista està associat amb una directiva CSP com `frame-src`, `connect-src` o `script-src`. El fitxer `templates/partials/header.html` genera dinàmicament la capçalera CSP basant-se en aquesta llista. - -Aquesta funcionalitat permet personalitzar fàcilment les capçaleres de seguretat del lloc web per permetre casos d'ús específics, com ara inserir vídeos de YouTube, carregar scripts o tipografies remotes ([no recomanat](https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/)). - -Pots desactivar les capçaleres (permitint-ho tot) en una pàgina, secció, o globalment configurant `enable_csp = false` en el front matter o en el fitxer `config.toml`. - -**Notas**: - -- [Habilitar els comentaris](@/blog/comments/index.ca.md), [les analítiques](@/blog/mastering-tabi-settings/index.ca.md#analisi-web), o [els diagrames de mermaid](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid) permet automàticament els scripts/frames/estils/conexions pertinents. -- Per utilitzar un [tema de resaltat de sintaxis integrat a Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permetre `unsafe-inline` a la directiva `style-src`: - - ``` - { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] }, - ``` - -[^1]: Requereix una configuració adequada del servidor web (p. ex., redirigir el trànsit HTTP a HTTPS). diff --git a/content/blog/security/index.es.md b/content/blog/security/index.es.md deleted file mode 100644 index 928e03d..0000000 --- a/content/blog/security/index.es.md +++ /dev/null @@ -1,44 +0,0 @@ -+++ -title = "Seguro por defecto" -date = 2023-02-22 -updated = 2024-08-28 -description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilmente personalizable con configuraciones seguras. Obtén tranquilidad y una calificación de A+ en Mozilla Observatory." - -[taxonomies] -tags = ["seguridad", "funcionalidad"] - -[extra] -social_media_card = "social_cards/es_blog_security.jpg" -+++ - -La configuración predeterminada del tema obtiene una calificación de A+ en [Mozilla Observatory](https://observatory.mozilla.org).[^1] - -Esto se logra configurando programáticamente las cabeceras de la Política de Seguridad de Contenido (CSP) en función de una lista de dominios permitidos definida por el usuario en el archivo `config.toml`. Aquí tienes la configuración predeterminada y recomendada (puedes eliminar la última directiva si no deseas insertar videos de YouTube): - -```toml -[extra] -allowed_domains = [ - { directive = "font-src", domains = ["'self'", "data:"] }, - { directive = "img-src", domains = ["'self'", "https://*", "data:"] }, - { directive = "script-src", domains = ["'self'"] }, - { directive = "style-src", domains = ["'self'"] }, - { directive = "frame-src", domains = ["https://www.youtube-nocookie.com"] }, -] -``` - -La lista `allowed_domains` especifica las URL a las que el sitio web debería poder conectarse, y cada dominio de la lista se asocia con una directiva CSP como `frame-src`, `connect-src` o `script-src`. El archivo `templates/partials/header.html` genera dinámicamente la cabecera CSP en función de esta lista. - -Esta función permite personalizar fácilmente las cabeceras de seguridad del sitio web para permitir casos de uso específicos, como la incrustación de videos de YouTube, la carga de scripts o fuentes remotas ([no recomendado](https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/)). - -Puedes desactivar las cabeceras (permitiendo todo) en una página, sección, o globalmente configurando `enable_csp = false` en el front matter o en el archivo `config.toml`. - -**Notas**: - -- [Habilitar los comentarios](@/blog/comments/index.es.md), [las analíticas](@/blog/mastering-tabi-settings/index.es.md#analisis-web), o [los diagramas mermaid](@/blog/shortcodes/index.es.md#diagramas-de-mermaid) permite automáticamente los scripts/frames/estilos/conexiones pertinentes. -- Para usar un [tema de resaltado de sintaxis integrado en Zola](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), has de permitir `unsafe-inline` en la directiva `style-src`: - - ``` - { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] }, - ``` - -[^1]: Requiere una configuración adecuada del servidor web (por ejemplo, redirigir el tráfico HTTP a HTTPS). diff --git a/content/blog/security/index.md b/content/blog/security/index.md deleted file mode 100644 index fb46313..0000000 --- a/content/blog/security/index.md +++ /dev/null @@ -1,44 +0,0 @@ -+++ -title = "Secure by default" -date = 2023-02-22 -updated = 2024-08-28 -description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory." - -[taxonomies] -tags = ["security", "showcase"] - -[extra] -social_media_card = "social_cards/blog_security.jpg" -+++ - -The default configuration of the theme gets an A+ score on [Mozilla Observatory](https://observatory.mozilla.org).[^1] - -This is accomplished by programatically configuring Content Security Policy (CSP) headers based on a user-defined list of allowed domains in the `config.toml` file. Here's the default and recommended setup (you could remove the last directive if you don't want to embed YouTube videos): - -```toml -[extra] -allowed_domains = [ - { directive = "font-src", domains = ["'self'", "data:"] }, - { directive = "img-src", domains = ["'self'", "https://*", "data:"] }, - { directive = "script-src", domains = ["'self'"] }, - { directive = "style-src", domains = ["'self'"] }, - { directive = "frame-src", domains = ["https://www.youtube-nocookie.com"] }, -] -``` - -The `allowed_domains` list specifies the URLs that the website should be able to connect to, and each domain in the list is associated with a CSP directive such as `frame-src`, `connect-src`, or `script-src`. The `templates/partials/header.html` file dynamically generates the CSP header based on this list. - -This feature allows you to easily customize the website's security headers to allow for specific use cases, such as embedding YouTube videos, loading scripts or remote fonts ([not recommended](https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/)). - -You can disable the CSP (allowing all connections) on a page, section, or globally by setting `enable_csp = false` in the front matter or `config.toml` file. - -**Notes**: - -- [Enabling comments](@/blog/comments/index.md), [analytics](@/blog/mastering-tabi-settings/index.md#analytics), or [mermaid diagrams](@/blog/shortcodes/index.md#mermaid-diagrams) automatically allows scripts/frames/styles/connections as needed. -- To use a [Zola built-in syntax highlighting theme](https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting), you need to allow `unsafe-inline` in the `style-src` directive: - - ``` - { directive = "style-src", domains = ["'self'", "'unsafe-inline'"] }, - ``` - -[^1]: Requires proper webserver configuration (e.g. redirecting HTTP traffic to HTTPS). diff --git a/content/blog/security/social_cards/blog_security.jpg b/content/blog/security/social_cards/blog_security.jpg deleted file mode 100644 index 154cb98..0000000 Binary files a/content/blog/security/social_cards/blog_security.jpg and /dev/null differ diff --git a/content/blog/security/social_cards/ca_blog_security.jpg b/content/blog/security/social_cards/ca_blog_security.jpg deleted file mode 100644 index 725da83..0000000 Binary files a/content/blog/security/social_cards/ca_blog_security.jpg and /dev/null differ diff --git a/content/blog/security/social_cards/es_blog_security.jpg b/content/blog/security/social_cards/es_blog_security.jpg deleted file mode 100644 index 3a898a2..0000000 Binary files a/content/blog/security/social_cards/es_blog_security.jpg and /dev/null differ diff --git a/content/blog/series/img/jump_to_series_posts_dark.webp b/content/blog/series/img/jump_to_series_posts_dark.webp deleted file mode 100644 index d88a292..0000000 Binary files a/content/blog/series/img/jump_to_series_posts_dark.webp and /dev/null differ diff --git a/content/blog/series/img/jump_to_series_posts_light.webp b/content/blog/series/img/jump_to_series_posts_light.webp deleted file mode 100644 index 22f5e78..0000000 Binary files a/content/blog/series/img/jump_to_series_posts_light.webp and /dev/null differ diff --git a/content/blog/series/img/series_dark.webp b/content/blog/series/img/series_dark.webp deleted file mode 100644 index 89223d0..0000000 Binary files a/content/blog/series/img/series_dark.webp and /dev/null differ diff --git a/content/blog/series/img/series_light.webp b/content/blog/series/img/series_light.webp deleted file mode 100644 index 780e2f2..0000000 Binary files a/content/blog/series/img/series_light.webp and /dev/null differ diff --git a/content/blog/series/img/series_reversed_dark.webp b/content/blog/series/img/series_reversed_dark.webp deleted file mode 100644 index 112a853..0000000 Binary files a/content/blog/series/img/series_reversed_dark.webp and /dev/null differ diff --git a/content/blog/series/img/series_reversed_light.webp b/content/blog/series/img/series_reversed_light.webp deleted file mode 100644 index 2a1dd0e..0000000 Binary files a/content/blog/series/img/series_reversed_light.webp and /dev/null differ diff --git a/content/blog/series/index.ca.md b/content/blog/series/index.ca.md deleted file mode 100644 index e56375f..0000000 --- a/content/blog/series/index.ca.md +++ /dev/null @@ -1,424 +0,0 @@ -+++ -title = "Guia completa sobre sèries" -date = 2024-11-08 -description = "Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts." - -[taxonomies] -tags = ["funcionalitat", "tutorial", "preguntes freqüents", "sèries"] - -[extra] -quick_navigation_buttons = true -toc = true -mermaid = true -social_media_card = "social_cards/ca_blog_series.jpg" -+++ - -Una sèrie organitza publicacions relacionades en ordre seqüencial, similar als capítols d'un llibre. A diferència de les etiquetes, que simplement agrupen contingut relacionat, les sèries suggereixen un ordre específic de lectura de principi a fi. - -Les publicacions dins d'una sèrie no necessiten publicar-se de forma consecutiva; la funció de sèries reuneix publicacions temàticament vinculades en una seqüència coherent. - -El següent diagrama il·lustra com les publicacions de la sèrie (3, 5 i 8) existeixen dins del flux principal del blog mentre mantenen la seva pròpia seqüència ordenada dins de Sèrie 1. - -{% mermaid(full_width=true) %} -flowchart - subgraph main[BLOG] - P1[Post 1] - P2[P2] - P3[P3] - P4[P4] - P5[P5] - P6[P6] - P7[P7] - P8[P8] - P9[P9] - end - subgraph series1[SÈRIE 1] - PS1["Post Sèrie 1 (=P3)"] - PS2["Post Sèrie 2 (=P5)"] - PS3["Post Sèrie 3 (=P8)"] - end - P3 o-.-o PS1 - P5 o-.-o PS2 - P8 o-.-o PS3 -{% end %} - -## Inici ràpid - -1. Crea un directori per a la teva sèrie -2. Crea `_index.md` al directori de la sèrie -3. Configura el front matter de `_index.md`: - - {{ add_src_to_code_block(src="series/_index.md") }} - - ```toml - title = "Aprenent Rust" - template = "series.html" - sort_by = "slug" - transparent = true - - [extra] - series = true - ``` - -4. Crea els teus articles de la sèrie en aquest directori - -Vols saber-ne més? Continua llegint! - -## Com funcionen les sèries? - -Una sèrie és simplement una secció que tabi gestiona de manera especial. Per a més detalls sobre seccions, consulta la [documentació de Zola](https://www.getzola.org/documentation/content/section/). - -Prenent l'exemple del diagrama anterior, l'estructura de directoris seria així: - -```txt -content/ - _index.md - blog/ - _index.md - post1/ - index.md - post2/ - index.md - post4/ - index.md - post6/ - index.md - post7/ - index.md - post9/ - index.md - serie1/ - _index.md - post3/ - index.md - post5/ - index.md - post8/ - index.md -``` - -Per crear una sèrie, necessites: - -1. Utilitzar la plantilla `series.html` -2. Establir `series = true` a la configuració `[extra]` de la secció -3. Activar `transparent = true` per integrar les publicacions de la sèrie amb la secció del blog principal - -La pàgina principal de la sèrie mostra un resum seguit d'una llista de totes les publicacions a la sèrie: - -{{ dual_theme_image(light_src="blog/series/img/series_light.webp", dark_src="blog/series/img/series_dark.webp" alt="una sèrie", full_width=true) }} - -## Saltar a les publicacions - -Si el contingut d'una sèrie (el Markdown després del frontmatter a `_index.md`) supera els 2000 caràcters, apareix un enllaç "Salta a les publicacions" al costat del títol de la sèrie. - -{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="enllaç per saltar a les publicacions de la sèrie", full_width=true) }} - -Per forçar l'activació o desactivació d'aquesta funció, configura `show_jump_to_posts` a la secció `[extra]` de la teva secció de sèries o a `config.toml`. Aquesta configuració segueix [la jerarquia](@/blog/mastering-tabi-settings/index.ca.md#jerarquia-de-configuracio). - -## Pàgines de sèries i ordre - -Totes les pàgines a la secció de sèries seran pàgines de sèrie. Les pàgines s'ordenaran segons el `sort_by` de la secció. - -Tot i que les sèries mantenen el seu propi ordre intern, romanen independents del flux cronològic de la secció principal (per exemple, `blog/`) gràcies a la configuració `transparent`. - -### Opcions d'ordre - -Tria entre aquests mètodes d'ordre, cadascun amb els seus avantatges: - -{% wide_container() %} - -`sort_by` | avantatges | desavantatges ----------|------------|--------------- -`slug` | L'ordre de les pàgines és explícit a la ruta (per exemple, `example.com/blog/series1/01-series-post-un`). | Cada pàgina de la sèrie ha de tenir el prefix corresponent. -`weight` | L'ordre de les pàgines és fàcil de configurar de forma transparent.
La primera publicació té pes `1`, la segona pes `2` i així successivament. | Cada pàgina de la sèrie ha de tenir el seu pes configurat. -`date` | L'ordre de les pàgines es pot configurar una sola vegada a la configuració de la secció. No cal fer res a cada pàgina. | L'ordre de les pàgines s'ha d'invertir perquè la primera pàgina sol ser la més antiga. Això només es pot aconseguir paginant la secció (`paginate_by = 9999`) i invertint el seu ordre (`paginate_reversed = true`). - -{% end %} - -{{ admonition(type="danger", title="Versió de Zola per ordenar per data", text="Per invertir correctament les dates, es requereix Zola v0.19.3+ (no publicada) perquè la informació de paginació estigui disponible a través de la funció `get_section`. En cas contrari, qualsevol cosa que depengui de l'ordre de les pàgines de la sèrie no serà correcta (per exemple, pàgina anterior/següent, llistes ordenades i no ordenades...) Vegeu [Zola PR #2653](https://github.com/getzola/zola/pull/2653).") }} - -### Indexació de pàgines - -Les pàgines en una sèrie s'indexen començant des d'1, seguint el seu ordre `sort_by`. Per invertir la indexació (fent que la primera pàgina tingui l'índex més alt), afegeix aquesta configuració a `_index.md` o `config.toml`: - -```toml -[extra] -post_listing_index_reversed = true # Per defecte és false si no es configura -``` - -{{ dual_theme_image(light_src="blog/series/img/series_reversed_light.webp", dark_src="blog/series/img/series_reversed_dark.webp" alt="una sèrie amb índexs invertits", full_width=true) }} - -Aquesta configuració segueix [la jerarquia](@/blog/mastering-tabi-settings/index.ca.md#jerarquia-de-configuracio). - -## Plantilles d'introducció i conclusió - -Els articles d'una sèrie poden tenir seccions automàtiques d'introducció i conclusió. Aquestes es configuren al `_index.md` de la teva sèrie. Un exemple bàsic: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -default = "Aquest article és part de la sèrie $SERIES_HTML_LINK." - -[extra.series_outro_templates] -default = "Gràcies per llegir la part $SERIES_PAGE_INDEX de $SERIES_HTML_LINK!" -``` - -Les seccions d'introducció i conclusió tenen les seves pròpies classes CSS (`series-page-intro` i `series-page-outro`), que et permeten personalitzar la seva aparença mitjançant [CSS personalitzat](@/blog/mastering-tabi-settings/index.ca.md#estils-css-personalitzats). - -### Tipus de plantilles - -El sistema de sèries utilitza diferents plantilles segons la posició de l'article a la sèrie: - -- `next_only` - Utilitzat per al primer article (té article següent però no anterior) -- `middle` - Utilitzat per a articles amb articles anterior i següent -- `prev_only` - Utilitzat per a l'últim article (té article anterior però no següent) -- `default` - Plantilla per defecte utilitzada quan no existeix una plantilla específica per a la posició - -El sistema determina automàticament quina plantilla utilitzar segons la posició de l'article. Les plantilles es defineixen a la configuració de la sèrie (`_index.md`), com `extra.series_intro_templates` i `extra.series_outro_templates`: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -next_only = "Benvingut a la part 1! Següent: $NEXT_HTML_LINK" -middle = "Anterior: $PREV_HTML_LINK | Següent: $NEXT_HTML_LINK" -prev_only = "El capítol final! Anteriorment: $PREV_HTML_LINK" -default = "Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER" -``` - -Totes les plantilles són opcionals. La selecció de plantilles segueix un sistema de prioritat: - -1. Si existeix una plantilla específica per a la posició (`next_only`, `middle`, o `prev_only`), s'utilitzarà aquesta -2. Si no, s'utilitza la plantilla `default` -3. Si no es defineix cap plantilla, no es mostrarà informació de la sèrie - -Mira l'[exemple de plantilla](#exemple-de-plantilla) per veure un exemple més elaborat. - -### Ubicació al contingut - -Per defecte: - -- Les introduccions de sèrie apareixen a l'inici del teu article -- La conclusió apareix al final (abans de les notes al peu, si n'hi ha) - -Pots controlar exactament on apareixen utilitzant `` i `` al teu Markdown: - -```markdown -Aquest paràgraf apareix abans de la introducció de la sèrie. - - - -Contingut principal de l'article. - - - -## Recursos d'aprenentatge - -Contingut addicional... - -[^1]: Les notes al peu sempre apareixeran al final. -``` - -## Variables - -Les plantilles de sèries utilitzen un sistema flexible de variables que et permet: - -1. Fer referència a informació de la sèrie (títol, enllaços) -2. Afegir navegació entre articles -3. Mostrar indicadors de progrés -4. Incloure informació personalitzada utilitzant les teves pròpies variables - -Les variables són marcadors que comencen amb `$` i es reemplacen amb contingut real quan es construeix el teu lloc. Per exemple, `$SERIES_HTML_LINK` es converteix en un enllaç clicable a la pàgina índex de la teva sèrie. - -Hi ha tres tipus de variables: - -- [Variables bàsiques de sèrie](#variables-basiques-de-serie): Informació general sobre la sèrie -- [Variables de navegació](#variables-de-navegacio): Enllaços a articles anterior/següent -- [Variables personalitzades](#variables-personalitzades): Els teus propis marcadors per a informació addicional - -### Variables bàsiques de sèrie - -{% wide_container() %} - -| Variable | Disponibilitat | Retorna | Descripció | Exemple d'ús | Exemple de sortida | -|----------|---------------|----------|------------|--------------|-------------------| -| `$SERIES_TITLE` | Sempre | Text | Títol de la sèrie en text pla | `Part de $SERIES_TITLE` | Part d'Aprenent Rust | -| `$SERIES_PERMALINK` | Sempre | Text | URL a l'índex de la sèrie | `[Veure totes les publicacions]($SERIES_PERMALINK)` | [Veure totes les publicacions](/series/learn-rust) | -| `$SERIES_HTML_LINK` | Sempre | HTML | Enllaç llest per usar a la sèrie | `Benvingut a $SERIES_HTML_LINK!` | Benvingut a Aprenent Rust! | -| `$SERIES_PAGES_NUMBER` | Sempre | Nombre | Total d'articles a la sèrie | `Una sèrie de $SERIES_PAGES_NUMBER parts` | Una sèrie de 5 parts | -| `$SERIES_PAGE_INDEX` | Sempre | Nombre | Posició de l'article actual | `Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER` | Part 3 de 5 | -| `$SERIES_PAGES_OLIST` | Sempre | HTML | Llista ordenada de tots els articles | `Articles a la sèrie: $SERIES_PAGES_OLIST` | Articles a la sèrie:
  1. Article actual
  2. Altres articles
| -| `$SERIES_PAGES_ULIST` | Sempre | HTML | Llista desordenada de tots els articles | `Articles a la sèrie: $SERIES_PAGES_ULIST` | Articles a la sèrie: | - -{% end %} - -### Variables de navegació - -{% wide_container() %} - -| Variable | Disponibilitat | Retorna | Descripció | Exemple d'ús | Exemple de sortida | -|----------|---------------|----------|------------|--------------|-------------------| -| `$PREV_TITLE` | Existeix anterior | Text | Títol de l'article anterior | `Anteriorment: $PREV_TITLE` | Anteriorment: Configurant el teu entorn | -| `$PREV_PERMALINK` | Existeix anterior | Text | URL a l'article anterior | `[← Enrere]($PREV_PERMALINK)` | [← Enrere](/series/learn-rust/setup) | -| `$PREV_HTML_LINK` | Existeix anterior | HTML | Enllaç llest per usar a l'anterior | `Llegeix primer $PREV_HTML_LINK` | Llegeix primer Configurant el teu entorn | -| `$PREV_DESCRIPTION` | Existeix anterior | Text | Descripció de l'article anterior | `Resum: $PREV_DESCRIPTION` | Resum: Configurant Rust | -| `$NEXT_TITLE` | Existeix següent | Text | Títol del següent article | `Següent: $NEXT_TITLE` | Següent: Patrons avançats | -| `$NEXT_PERMALINK` | Existeix següent | Text | URL al següent article | `[Continuar →]($NEXT_PERMALINK)` | [Continuar →](/series/learn-rust/patterns) | -| `$NEXT_HTML_LINK` | Existeix següent | HTML | Enllaç llest per usar al següent | `Continua amb $NEXT_HTML_LINK` | Continua amb Patrons avançats | -| `$NEXT_DESCRIPTION` | Existeix següent | Text | Descripció del següent article | `Properament: $NEXT_DESCRIPTION` | Properament: Aprèn sobre les característiques avançades de pattern matching en Rust | - -{% end %} - -### Referència al primer article - -{% wide_container() %} - -| Variable | Disponibilitat | Retorna | Descripció | Exemple d'ús | Exemple de sortida | -|----------|---------------|----------|------------|--------------|-------------------| -| `$FIRST_TITLE` | Sempre | Text | Títol del primer article | `Comença amb $FIRST_TITLE` | Comença amb Introducció a Rust | -| `$FIRST_HTML_LINK` | Sempre | HTML | Enllaç llest per usar al primer article | `Comença a $FIRST_HTML_LINK` | Comença a Introducció a Rust | - -{% end %} - -### Exemple de plantilla - -{{ admonition(type="tip", title="Variables HTML vs text", text="Utilitza variables HTML (que acaben en `_HTML_LINK`) quan vulguis enllaços preparats per usar. Utilitza variables de text (que acaben en `_TITLE` o `_PERMALINK`) quan vulguis més control sobre el format.") }} - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -# Introducció -[extra.series_intro_templates] -next_only = """ -Benvingut a $SERIES_HTML_LINK! Aquesta sèrie de $SERIES_PAGES_NUMBER parts t'ensenyarà Rust des de zero. - -Següent: $NEXT_HTML_LINK - $NEXT_DESCRIPTION -""" - -middle = """ -📚 Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER a $SERIES_HTML_LINK - -Anterior: $PREV_HTML_LINK -Següent: $NEXT_HTML_LINK -""" - -prev_only = """ -Benvingut a l'última part de $SERIES_HTML_LINK! -Ets nou? Comença amb $FIRST_HTML_LINK per construir una base sòlida. - -Anterior: $PREV_HTML_LINK -""" - -# Plantilla de respatller -default = "Aquest article és part de la sèrie $SERIES_HTML_LINK." - -# Conclusió -[extra.series_outro_templates] -next_only = """ -Gràcies per llegir! 🙌 - -Continua el teu viatge amb $NEXT_HTML_LINK, on $NEXT_DESCRIPTION -O revisa l'esquema complet de la sèrie [$SERIES_TITLE]($SERIES_PERMALINK). -""" - -middle = """ ---- -📝 Navegació de la sèrie - -- Anterior: $PREV_HTML_LINK -- Següent: $NEXT_HTML_LINK -- [Resum de la sèrie]($SERIES_PERMALINK) -""" - -prev_only = """ -🎉 Felicitats! Has completat $SERIES_HTML_LINK. - -Vols repassar? Aquí vam començar: $FIRST_HTML_LINK -O revisa el que acabem de veure a $PREV_HTML_LINK. -""" - -# Respatller. -default = """ ---- -Aquest article és la part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER a $SERIES_HTML_LINK. -""" -``` - -### Variables personalitzades - -Les plantilles de sèries admeten variables personalitzades per incloure informació addicional a tota la teva sèrie. El procés té dos passos: - -1. Primer, defineix els teus **marcadors** a la configuració de la teva sèrie (`_index.md`): - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra] -series = true -series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"] -``` - -2. Després, a cada article de la sèrie, proporciona els valors per a aquests marcadors a `series_template_variables`: - -{{ add_src_to_code_block(src="series/article.md") }} - -```toml -[extra.series_template_variables] -position = "primer" -topic = "Variables i tipus" -difficulty = "Principiant" -``` - -### Ús de variables personalitzades - -Pots usar les teves variables personalitzades a qualsevol plantilla, juntament amb les variables integrades: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -default = """ -Aquest és l'article $POSITION a $SERIES_HTML_LINK. -Tema d'avui: $TOPIC -Nivell de dificultat: $DIFFICULTY -""" -``` - -{{ admonition(type="warning", text="Encara que els marcadors es defineixen en majúscules (`$POSITION`), els noms de variables a `series_template_variables` han d'estar en minúscules (`position`).") }} - -### Exemple amb variables personalitzades - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -# A la configuració de la sèrie. -[extra] -series = true -series_template_placeholders = ["$LEARNING_TIME", "$KEY_CONCEPTS"] - -series_intro_templates.default = """ -📚 Part $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER -⏱️ Temps estimat: $LEARNING_TIME -🔑 Conceptes clau: $KEY_CONCEPTS -""" -``` - -{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }} - -```toml -# En un article de la sèrie. -[extra.series_template_variables] -learning_time = "30 minuts" -key_concepts = "Funcions, gestió d'errors, coincidència de patrons" -``` - -Això generarà: - -```txt -📚 Part 2 de 5 -⏱️ Temps estimat: 30 minuts -🔑 Conceptes clau: Funcions, gestió d'errors, coincidència de patrons -``` - -{{ admonition(type="warning", title="Variables que falten", text="Si uses un marcador a les teves plantilles però no proporciones el seu valor a `series_template_variables`, la compilació fallarà amb un error que llista les variables que falten.") }} diff --git a/content/blog/series/index.es.md b/content/blog/series/index.es.md deleted file mode 100644 index 47664f0..0000000 --- a/content/blog/series/index.es.md +++ /dev/null @@ -1,424 +0,0 @@ -+++ -title = "Guía completa sobre series" -date = 2024-11-08 -description = "Aprende a organizar tus publicaciones en series secuenciales, perfectas para tutoriales, cursos e historias de varias partes." - -[taxonomies] -tags = ["funcionalidad", "tutorial", "preguntas frecuentes", "series"] - -[extra] -quick_navigation_buttons = true -toc = true -mermaid = true -social_media_card = "social_cards/es_blog_series.jpg" -+++ - -Una serie organiza publicaciones relacionadas en orden secuencial, similar a los capítulos de un libro. A diferencia de las etiquetas, que simplemente agrupan contenido relacionado, las series sugieren un orden específico de lectura de principio a fin. - -Las publicaciones dentro de una serie no necesitan publicarse de forma consecutiva; la función de series reúne publicaciones temáticamente vinculadas en una secuencia coherente. - -El siguiente diagrama ilustra cómo las publicaciones de la serie (3, 5 y 8) existen dentro del flujo principal del blog mientras mantienen su propia secuencia ordenada dentro de Serie 1. - -{% mermaid(full_width=true) %} -flowchart - subgraph main[BLOG] - P1[Post 1] - P2[P2] - P3[P3] - P4[P4] - P5[P5] - P6[P6] - P7[P7] - P8[P8] - P9[P9] - end - subgraph series1[SERIE 1] - PS1["Post Serie 1 (=P3)"] - PS2["Post Serie 2 (=P5)"] - PS3["Post Serie 3 (=P8)"] - end - P3 o-.-o PS1 - P5 o-.-o PS2 - P8 o-.-o PS3 -{% end %} - -## Inicio rápido - -1. Crea un directorio para tu serie -2. Crea `_index.md` en el directorio de la serie -3. Configura el front matter de `_index.md`: - - {{ add_src_to_code_block(src="series/_index.md") }} - - ```toml - title = "Aprendiendo Rust" - template = "series.html" - sort_by = "slug" - transparent = true - - [extra] - series = true - ``` - -4. Crea tus artículos de la serie en este directorio - -¿Quieres saber más? ¡Sigue leyendo! - -## ¿Cómo funcionan las series? - -Una serie es simplemente una sección que tabi maneja de manera especial. Para más detalles sobre secciones, consulta la [documentación de Zola](https://www.getzola.org/documentation/content/section/). - -Tomando el ejemplo del diagrama anterior, la estructura de directorios sería así: - -```txt -content/ - _index.md - blog/ - _index.md - post1/ - index.md - post2/ - index.md - post4/ - index.md - post6/ - index.md - post7/ - index.md - post9/ - index.md - serie1/ - _index.md - post3/ - index.md - post5/ - index.md - post8/ - index.md -``` - -Para crear una serie, necesitas: - -1. Usar la plantilla `series.html` -2. Establecer `series = true` en la configuración `[extra]` de la sección -3. Activar `transparent = true` para integrar las publicaciones de la serie con la sección del blog principal - -La página principal de la serie muestra un resumen seguido de una lista de todas las publicaciones en la serie: - -{{ dual_theme_image(light_src="blog/series/img/series_light.webp", dark_src="blog/series/img/series_dark.webp" alt="una serie", full_width=true) }} - -## Saltar a las publicaciones - -Si el contenido de una serie (el Markdown después del frontmatter en `_index.md`) supera los 2000 caracteres, aparece un enlace "Saltar a publicaciones" junto al título de la serie. - -{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="enlace para saltar a las publicaciones de la serie", full_width=true) }} - -Para forzar la activación o desactivación de esta función, configura `show_jump_to_posts` en la sección `[extra]` de tu sección de series o en `config.toml`. Esta configuración sigue [la jerarquía](@/blog/mastering-tabi-settings/index.es.md#jerarquia-de-configuracion). - -## Páginas de series y orden - -Todas las páginas en la sección de series serán páginas de serie. Las páginas se ordenarán según el `sort_by` de la sección. - -Aunque las series mantienen su propio orden interno, permanecen independientes del flujo cronológico de la sección principal (por ejemplo, `blog/`) gracias a la configuración `transparent`. - -### Opciones de orden - -Elige entre estos métodos de orden, cada uno con sus ventajas: - -{% wide_container() %} - -`sort_by` | ventajas | desventajas ----------|-------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -`slug` | El orden de las páginas es explícito en la ruta (por ejemplo, `example.com/blog/series1/01-series-post-uno`). | Cada página de la serie debe tener el prefijo correspondiente. -`weight` | El orden de las páginas es fácil de configurar de forma transparente.
La primera publicación tiene peso `1`, la segunda peso `2` y así sucesivamente. | Cada página de la serie debe tener su peso configurado. -`date` | El orden de las páginas se puede configurar una sola vez en la configuración de la sección. No hay que hacer nada en cada página. | El orden de las páginas debe invertirse porque la primera página suele ser la más antigua. Esto solo se puede lograr paginando la sección (`paginate_by = 9999`) e invirtiendo su orden (`paginate_reversed = true`). - -{% end %} - -{{ admonition(type="danger", title="Versión de Zola para ordenar por fecha", text="Para invertir correctamente las fechas, se requiere Zola v0.19.3+ (no publicada) para que la información de paginación esté disponible a través de la función `get_section`. De lo contrario, cualquier cosa que dependa del orden de las páginas de la serie no será correcta (por ejemplo, página anterior/siguiente, listas ordenadas y no ordenadas...) Ver [Zola PR #2653](https://github.com/getzola/zola/pull/2653).") }} - -### Indexación de páginas - -Las páginas en una serie se indexan empezando desde 1, siguiendo su orden `sort_by`. Para invertir la indexación (haciendo que la primera página tenga el índice más alto), añade esta configuración a `_index.md` o `config.toml`: - -```toml -[extra] -post_listing_index_reversed = true # Por defecto es false si no se configura -``` - -{{ dual_theme_image(light_src="blog/series/img/series_reversed_light.webp", dark_src="blog/series/img/series_reversed_dark.webp" alt="una serie con índices invertidos", full_width=true) }} - -Esta configuración sigue [la jerarquía](@/blog/mastering-tabi-settings/index.es.md#jerarquia-de-configuracion). - -## Plantillas de introducción y conclusión - -Los artículos de una serie pueden tener secciones automáticas de introducción y conclusión. Estas se configuran en el `_index.md` de tu serie. Un ejemplo básico: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -default = "Este artículo es parte de la serie $SERIES_HTML_LINK." - -[extra.series_outro_templates] -default = "¡Gracias por leer la parte $SERIES_PAGE_INDEX de $SERIES_HTML_LINK!" -``` - -Las secciones de introducción y conclusión tienen sus propias clases CSS (`series-page-intro` y `series-page-outro`), lo que te permite personalizar su apariencia mediante [CSS personalizado](@/blog/mastering-tabi-settings/index.es.md#estilos-css-personalizados). - -### Tipos de plantillas - -El sistema de series usa diferentes plantillas según la posición del artículo en la serie: - -- `next_only` - Usado para el primer artículo (tiene artículo siguiente pero no anterior) -- `middle` - Usado para artículos con artículos anterior y siguiente -- `prev_only` - Usado para el último artículo (tiene artículo anterior pero no siguiente) -- `default` - Plantilla por defecto usada cuando no existe una plantilla específica para la posición - -El sistema determina automáticamente qué plantilla usar según la posición del artículo. Las plantillas se definen en la configuración de la serie (`_index.md`), como `extra.series_intro_templates` y `extra.series_outro_templates`: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -next_only = "¡Bienvenido a la parte 1! Siguiente: $NEXT_HTML_LINK" -middle = "Anterior: $PREV_HTML_LINK | Siguiente: $NEXT_HTML_LINK" -prev_only = "¡El capítulo final! Anteriormente: $PREV_HTML_LINK" -default = "Parte $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER" -``` - -Todas las plantillas son opcionales. La selección de plantillas sigue un sistema de prioridad: - -1. Si existe una plantilla específica para la posición (`next_only`, `middle`, o `prev_only`), se usará esa -2. Si no, se usa la plantilla `default` -3. Si no se define ninguna plantilla, no se mostrará información de la serie - -Mira el [ejemplo de plantilla](#ejemplo-de-plantilla) para ver un ejemplo más elaborado. - -### Ubicación en el contenido - -Por defecto: - -- Las introducciones de serie aparecen al inicio de tu artículo -- La conclusión aparece al final (antes de las notas al pie, si las hay) - -Puedes controlar exactamente dónde aparecen usando `` y `` en tu Markdown: - -```markdown -Este párrafo aparece antes de la introducción de la serie. - - - -Contenido principal del artículo. - - - -## Recursos de aprendizaje - -Contenido adicional... - -[^1]: Las notas al pie siempre aparecerán al final. -``` - -## Variables - -Las plantillas de series usan un sistema flexible de variables que te permite: - -1. Hacer referencia a información de la serie (título, enlaces) -2. Añadir navegación entre artículos -3. Mostrar indicadores de progreso -4. Incluir información personalizada usando tus propias variables - -Las variables son marcadores que comienzan con `$` y se reemplazan con contenido real cuando se construye tu sitio. Por ejemplo, `$SERIES_HTML_LINK` se convierte en un enlace clicable a la página índice de tu serie. - -Hay tres tipos de variables: - -- [Variables básicas de serie](#variables-basicas-de-serie): Información general sobre la serie -- [Variables de navegación](#variables-de-navegacion): Enlaces a artículos anterior/siguiente -- [Variables personalizadas](#variables-personalizadas): Tus propios marcadores para información adicional - -### Variables básicas de serie - -{% wide_container() %} - -| Variable | Disponibilidad | Devuelve | Descripción | Ejemplo de uso | Ejemplo de salida | -|----------|---------------|-----------|-------------|----------------|-------------------| -| `$SERIES_TITLE` | Siempre | Texto | Título de la serie en texto plano | `Parte de $SERIES_TITLE` | Parte de Aprendiendo Rust | -| `$SERIES_PERMALINK` | Siempre | Texto | URL al índice de la serie | `[Ver todas las publicaciones]($SERIES_PERMALINK)` | [Ver todas las publicaciones](/series/learn-rust) | -| `$SERIES_HTML_LINK` | Siempre | HTML | Enlace listo para usar a la serie | `¡Bienvenido a $SERIES_HTML_LINK!` | ¡Bienvenido a Aprendiendo Rust! | -| `$SERIES_PAGES_NUMBER` | Siempre | Número | Total de artículos en la serie | `Una serie de $SERIES_PAGES_NUMBER partes` | Una serie de 5 partes | -| `$SERIES_PAGE_INDEX` | Siempre | Número | Posición del artículo actual | `Parte $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER` | Parte 3 de 5 | -| `$SERIES_PAGES_OLIST` | Siempre | HTML | Lista ordenada de todos los artículos | `Artículos en la serie: $SERIES_PAGES_OLIST` | Artículos en la serie:
  1. Artículo actual
  2. Otros artículos
| -| `$SERIES_PAGES_ULIST` | Siempre | HTML | Lista desordenada de todos los artículos | `Artículos en la serie: $SERIES_PAGES_ULIST` | Artículos en la serie: | - -{% end %} - -### Variables de navegación - -{% wide_container() %} - -| Variable | Disponibilidad | Devuelve | Descripción | Ejemplo de uso | Ejemplo de salida | -|----------|---------------|-----------|-------------|----------------|-------------------| -| `$PREV_TITLE` | Existe anterior | Texto | Título del artículo anterior | `Anteriormente: $PREV_TITLE` | Anteriormente: Configurando tu entorno | -| `$PREV_PERMALINK` | Existe anterior | Texto | URL al artículo anterior | `[← Atrás]($PREV_PERMALINK)` | [← Atrás](/series/learn-rust/setup) | -| `$PREV_HTML_LINK` | Existe anterior | HTML | Enlace listo para usar al anterior | `Lee primero $PREV_HTML_LINK` | Lee primero Configurando tu entorno | -| `$PREV_DESCRIPTION` | Existe anterior | Texto | Descripción del artículo anterior | `Resumen: $PREV_DESCRIPTION` | Resumen: Configurando Rust | -| `$NEXT_TITLE` | Existe siguiente | Texto | Título del siguiente artículo | `Siguiente: $NEXT_TITLE` | Siguiente: Patrones avanzados | -| `$NEXT_PERMALINK` | Existe siguiente | Texto | URL al siguiente artículo | `[Continuar →]($NEXT_PERMALINK)` | [Continuar →](/series/learn-rust/patterns) | -| `$NEXT_HTML_LINK` | Existe siguiente | HTML | Enlace listo para usar al siguiente | `Continúa con $NEXT_HTML_LINK` | Continúa con Patrones avanzados | -| `$NEXT_DESCRIPTION` | Existe siguiente | Texto | Descripción del siguiente artículo | `Próximamente: $NEXT_DESCRIPTION` | Próximamente: Aprende sobre las características avanzadas de pattern matching en Rust | - -{% end %} - -### Referencia al primer artículo - -{% wide_container() %} - -| Variable | Disponibilidad | Devuelve | Descripción | Ejemplo de uso | Ejemplo de salida | -|----------|---------------|-----------|-------------|----------------|-------------------| -| `$FIRST_TITLE` | Siempre | Texto | Título del primer artículo | `Comienza con $FIRST_TITLE` | Comienza con Introducción a Rust | -| `$FIRST_HTML_LINK` | Siempre | HTML | Enlace listo para usar al primer artículo | `Empieza en $FIRST_HTML_LINK` | Empieza en Introducción a Rust | - -{% end %} - -### Ejemplo de plantilla - -{{ admonition(type="tip", title="Variables HTML vs texto", text="Usa variables HTML (que terminan en `_HTML_LINK`) cuando quieras enlaces listos para usar. Usa variables de texto (que terminan en `_TITLE` o `_PERMALINK`) cuando quieras más control sobre el formato.") }} - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -# Introducción. -[extra.series_intro_templates] -next_only = """ -¡Bienvenido a $SERIES_HTML_LINK! Esta serie de $SERIES_PAGES_NUMBER partes te enseñará Rust desde cero. - -Siguiente: $NEXT_HTML_LINK - $NEXT_DESCRIPTION -""" - -middle = """ -📚 Parte $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER en $SERIES_HTML_LINK - -Anterior: $PREV_HTML_LINK -Siguiente: $NEXT_HTML_LINK -""" - -prev_only = """ -¡Bienvenido a la última parte de $SERIES_HTML_LINK! -¿Eres nuevo? Comienza con $FIRST_HTML_LINK para construir una base sólida. - -Anterior: $PREV_HTML_LINK -""" - -# Plantilla de respaldo. -default = "Este artículo es parte de la serie $SERIES_HTML_LINK." - -# Conclusión. -[extra.series_outro_templates] -next_only = """ -¡Gracias por leer! 🙌 - -Continúa tu viaje con $NEXT_HTML_LINK, donde $NEXT_DESCRIPTION -O revisa el esquema completo de la serie [$SERIES_TITLE]($SERIES_PERMALINK). -""" - -middle = """ ---- -📝 Navegación de la serie - -- Anterior: $PREV_HTML_LINK -- Siguiente: $NEXT_HTML_LINK -- [Resumen de la serie]($SERIES_PERMALINK) -""" - -prev_only = """ -🎉 ¡Felicidades! Has completado $SERIES_HTML_LINK. - -¿Quieres repasar? Aquí comenzamos: $FIRST_HTML_LINK -O revisa lo que acabamos de ver en $PREV_HTML_LINK. -""" - -# Respaldo. -default = """ ---- -Este artículo es la parte $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER en $SERIES_HTML_LINK. -""" -``` - -### Variables personalizadas - -Las plantillas de series admiten variables personalizadas para incluir información adicional en toda tu serie. El proceso tiene dos pasos: - -1. Primero, define tus **marcadores** en la configuración de tu serie (`_index.md`): - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra] -series = true -series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"] -``` - -2. Luego, en cada artículo de la serie, proporciona los valores para estos marcadores en `series_template_variables`: - -{{ add_src_to_code_block(src="series/article.md") }} - -```toml -[extra.series_template_variables] -position = "primero" -topic = "Variables y tipos" -difficulty = "Principiante" -``` - -### Uso de variables personalizadas - -Puedes usar tus variables personalizadas en cualquier plantilla, junto con las variables integradas: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -default = """ -Este es el artículo $POSITION en $SERIES_HTML_LINK. -Tema de hoy: $TOPIC -Nivel de dificultad: $DIFFICULTY -""" -``` - -{{ admonition(type="warning", text="Aunque los marcadores se definen en mayúsculas (`$POSITION`), los nombres de variables en `series_template_variables` deben estar en minúsculas (`position`).") }} - -### Ejemplo con variables personalizadas - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -# En la configuración de la serie. -[extra] -series = true -series_template_placeholders = ["$LEARNING_TIME", "$KEY_CONCEPTS"] - -series_intro_templates.default = """ -📚 Parte $SERIES_PAGE_INDEX de $SERIES_PAGES_NUMBER -⏱️ Tiempo estimado: $LEARNING_TIME -🔑 Conceptos clave: $KEY_CONCEPTS -""" -``` - -{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }} - -```toml -# En un artículo de la serie. -[extra.series_template_variables] -learning_time = "30 minutos" -key_concepts = "Funciones, manejo de errores, coincidencia de patrones" -``` - -Esto generará: - -```txt -📚 Parte 2 de 5 -⏱️ Tiempo estimado: 30 minutos -🔑 Conceptos clave: Funciones, manejo de errores, coincidencia de patrones -``` - -{{ admonition(type="warning", title="Variables faltantes", text="Si usas un marcador en tus plantillas pero no proporcionas su valor en `series_template_variables`, la compilación fallará con un error que lista las variables faltantes.") }} diff --git a/content/blog/series/index.md b/content/blog/series/index.md deleted file mode 100644 index bbb4648..0000000 --- a/content/blog/series/index.md +++ /dev/null @@ -1,424 +0,0 @@ -+++ -title = "A Complete Guide to Series" -date = 2024-11-08 -description = "Learn how to organize your posts into sequential series, perfect for tutorials, courses, and multi-part stories." - -[taxonomies] -tags = ["showcase", "tutorial", "FAQ", "series"] - -[extra] -quick_navigation_buttons = true -toc = true -mermaid = true -social_media_card = "social_cards/es_blog_series.jpg" -+++ - -A series organizes related posts in a sequential order, similar to chapters in a book. Unlike tags, which simply group related content, series suggest a specific reading order from start to finish. - -Posts within a series do not need to be published consecutively; the series feature brings together thematically linked posts in a coherent sequence. - -The diagram below illustrates how series posts (3, 5, and 8) exist within the main blog flow while maintaining their own ordered sequence within Series 1. - -{% mermaid(full_width=true) %} -flowchart - subgraph main[BLOG] - P1[Post 1] - P2[P2] - P3[P3] - P4[P4] - P5[P5] - P6[P6] - P7[P7] - P8[P8] - P9[P9] - end - subgraph series1[SERIES 1] - PS1["Series Post 1 (=P3)"] - PS2["Series Post 2 (=P5)"] - PS3["Series Post 3 (=P8)"] - end - P3 o-.-o PS1 - P5 o-.-o PS2 - P8 o-.-o PS3 -{% end %} - -## Quick Start - -1. Create a directory for your series. -2. Create `_index.md` in the series directory. -3. Set up the `_index.md` front matter: - - {{ add_src_to_code_block(src="series/_index.md") }} - - ```toml - title = "Learning Rust" - template = "series.html" - sort_by = "slug" - transparent = true - - [extra] - series = true - ``` - -4. Create your series articles in this directory. - -Want more? Keep reading! - -## How Do Series Work? - -A series is just a section which is handled in a special way by tabi. For more details on sections, see the [Zola documentation](https://www.getzola.org/documentation/content/section/). - -Taking the example from the diagram above, the directory structure would be as follow: - -```txt -content/ - _index.md - blog/ - _index.md - post1/ - index.md - post2/ - index.md - post4/ - index.md - post6/ - index.md - post7/ - index.md - post9/ - index.md - series1/ - _index.md - post3/ - index.md - post5/ - index.md - post8/ - index.md -``` - -To create a series, you need to: - -1. Use the `series.html` template -2. Set `series = true` in the section's `[extra]` configuration -3. Enable `transparent = true` to integrate series posts with the parent blog section - -The series main page displays an overview followed by a list of all posts in the series: - -{{ dual_theme_image(light_src="blog/series/img/series_light.webp", dark_src="blog/series/img/series_dark.webp" alt="a series", full_width=true) }} - -## Jump to Posts - -If the content of a series (the Markdown after the front matter in `_index.md`) is over 2000 characters, a "Jump to posts" link appears next to the series title. - -{{ dual_theme_image(light_src="blog/series/img/jump_to_series_posts_light.webp", dark_src="blog/series/img/jump_to_series_posts_dark.webp" alt="jump to series posts link", full_width=true) }} - -To force the feature on or off, set `show_jump_to_posts` in the `[extra]` section of your series section or in `config.toml`. This setting follows [the hierarchy](@/blog/mastering-tabi-settings/index.md#settings-hierarchy). - -## Series Pages and Order - -All pages in the series section will be a series page. The series pages will be ordered as per the series section `sort_by`. - -While series maintain their own internal order, they remain independent from the main section's (e.g. `blog/`) chronological flow thanks to the `transparent` setting. - -### Sorting Options - -Choose from these sorting methods, each with its own advantages: - -{% wide_container() %} - -`sort_by` | pros | cons ----------|-------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - `slug` | The series pages order is made explicit in the path (e.g. `example.com/blog/series1/01-series-post-one`). | Each series page must be prefixed accordingly. - `weight` | The series pages order is easy to set up transparently.
First series post has weight `1`, second series post has weight `2` and so on. | Each series page must have its weight set accordingly. - `date` | The series pages order can be configured once in the series section configuration. No need to do anything on each series page. | The series pages order has to be reversed because the first page is usually the oldest. This can only be achieved by paginating the series section (`paginate_by = 9999`) and reversing its order (`paginate_reversed = true`). - -{% end %} - -{{ admonition(type="danger", title="Zola version to sort by date", text="In order to properly reverse dates, Zola v0.19.3+ (unreleased) is required so that pagination information is available through the `get_section` function. Anything relying on the series pages order won't be correct in a series page otherwise (e.g. previous/next series page, ordered and unordered list…) See [Zola PR #2653](https://github.com/getzola/zola/pull/2653).") }} - -### Page Indexing - -Pages in a series are indexed starting from 1, following their `sort_by` order. To reverse the indexing (making the first page have the highest index instead), add this setting to `_index.md` or `config.toml`: - -```toml -[extra] -post_listing_index_reversed = true # Defaults to false if unset. -``` - -{{ dual_theme_image(light_src="blog/series/img/series_reversed_light.webp", dark_src="blog/series/img/series_reversed_dark.webp" alt="a series with indexes reversed", full_width=true) }} - -This setting follows [the hierarchy](@/blog/mastering-tabi-settings/index.md#settings-hierarchy). - -## Intro and Outro Templates - -Series articles can have automatic introduction and conclusion sections. These are configured in your series' `_index.md`. A basic example: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -default = "This article is part of the $SERIES_HTML_LINK series." - -[extra.series_outro_templates] -default = "Thanks for reading part $SERIES_PAGE_INDEX of $SERIES_HTML_LINK!" -``` - -The intro and outro sections each have their own CSS classes (`series-page-intro` and `series-page-outro`), allowing you to customize their appearance through [custom CSS](@/blog/mastering-tabi-settings/index.md#custom-css). - -### Template Types - -The series system uses different templates based on an article's position in the series: - -- `next_only` - Used for the first article (has next article but no previous) -- `middle` - Used for articles with both previous and next articles -- `prev_only` - Used for the last article (has previous article but no next) -- `default` - Fallback template used when a specific position template isn't defined - -The system automatically determines which template to use based on the article's position. The templates are defined in the series configuration (`_index.md`), as `extra.series_intro_templates` and `extra.series_outro_templates`.: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -next_only = "Welcome to part 1! Next up: $NEXT_HTML_LINK" -middle = "Previous: $PREV_HTML_LINK | Next: $NEXT_HTML_LINK" -prev_only = "The final chapter! Previously: $PREV_HTML_LINK" -default = "Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER" -``` - -All templates are optional. Template selection follows a priority system: - -1. If a position-specific template exists (`next_only`, `middle`, or `prev_only`), it will be used -2. Otherwise, the `default` template is used -3. If no templates are defined at all, no series information will be displayed - -See the [template example](#template-example) for a more elaborate example. - -### Placement in Content - -By default: - -- Series introductions appear at the start of your article -- Series outro appears at the end (before footnotes, if any) - -You can control exactly where these appear using `` and `` in your Markdown: - -```markdown -This paragraph appears before the series introduction. - - - -Main content of the article. - - - -## Learning Resources - -Extra content… - -[^1]: Footnotes will always appear at the end. -``` - -## Variables - -Series templates use a flexible variable system that lets you: - -1. Reference series information (title, links) -2. Add navigation between articles -3. Show progress indicators -4. Include custom information using your own variables - -Variables are placeholders starting with `$` that get replaced with actual content when your site builds. For example, `$SERIES_HTML_LINK` becomes a clickable link to your series index page. - -There are three types of variables: - -- [**Basic Series Variables**](#basic-series-variables): General information about the series -- [**Navigation Variables**](#navigation-variables): Links to previous/next articles -- [**Custom Variables**](#custom-variables): Your own placeholders for additional information - -### Basic Series Variables - -{% wide_container() %} - -| Variable | Availability | Returns | Description | Example Usage | Example Output | -|----------|-------------|---------|-------------|---------------|----------------| -| `$SERIES_TITLE` | Always | Text | Plain text title of the series | `Part of $SERIES_TITLE` | Part of Learn Rust | -| `$SERIES_PERMALINK` | Always | Text | URL to series index | `[See all posts]($SERIES_PERMALINK)` | [See all posts](/series/learn-rust) | -| `$SERIES_HTML_LINK` | Always | HTML | Ready-to-use link to series | `Welcome to $SERIES_HTML_LINK!` | Welcome to Learn Rust! | -| `$SERIES_PAGES_NUMBER` | Always | Number | Total articles in series | `A $SERIES_PAGES_NUMBER part series` | A 5 part series | -| `$SERIES_PAGE_INDEX` | Always | Number | Current article's position | `Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER` | Part 3 of 5 | -| `$SERIES_PAGES_OLIST` | Always | HTML | Ordered list of all articles | `Articles in series: $SERIES_PAGES_OLIST` | Articles in series:
  1. Current article
  2. Other articles
| -| `$SERIES_PAGES_ULIST` | Always | HTML | Unordered list of all articles | `Articles in series: $SERIES_PAGES_ULIST` | Articles in series: | - -{% end %} - -### Navigation Variables - -{% wide_container() %} - -| Variable | Availability | Returns | Description | Example Usage | Example Output | -|----------|-------------|---------|-------------|---------------|----------------| -| `$PREV_TITLE` | Previous exists | Text | Previous article's title | `Previously: $PREV_TITLE` | Previously: Setting Up Your Environment | -| `$PREV_PERMALINK` | Previous exists | Text | URL to previous article | `[← Back]($PREV_PERMALINK)` | [← Back](/series/learn-rust/setup) | -| `$PREV_HTML_LINK` | Previous exists | HTML | Ready-to-use link to previous | `Read $PREV_HTML_LINK first` | Read Setting Up Your Environment first | -| `$PREV_DESCRIPTION` | Previous exists | Text | Description of previous article | `Recap: $PREV_DESCRIPTION` | Recap: Setting up Rust | -| `$NEXT_TITLE` | Next exists | Text | Next article's title | `Next up: $NEXT_TITLE` | Next up: Advanced Patterns | -| `$NEXT_PERMALINK` | Next exists | Text | URL to next article | `[Continue →]($NEXT_PERMALINK)` | [Continue →](/series/learn-rust/patterns) | -| `$NEXT_HTML_LINK` | Next exists | HTML | Ready-to-use link to next | `Continue with $NEXT_HTML_LINK` | Continue with Advanced Patterns | -| `$NEXT_DESCRIPTION` | Next exists | Text | Description of next article | `Coming up: $NEXT_DESCRIPTION` | Coming up: Learn about Rust's advanced pattern matching features | - -{% end %} - -### First Article Reference - -{% wide_container() %} - -| Variable | Availability | Returns | Description | Example Usage | Example Output | -|----------|-------------|---------|-------------|---------------|----------------| -| `$FIRST_TITLE` | Always | Text | First article's title | `Start with $FIRST_TITLE` | Start with Introduction to Rust | -| `$FIRST_HTML_LINK` | Always | HTML | Ready-to-use link to first article | `Begin at $FIRST_HTML_LINK` | Begin at Introduction to Rust | - -{% end %} - -### Template Example - -{{ admonition(type="tip", title="HTML vs text variables", text="Use HTML variables (ending in `_HTML_LINK`) when you want ready-made links. Use text variables (ending in `_TITLE` or `_PERMALINK`) when you want more control over the formatting.") }} - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -# Introduction. -[extra.series_intro_templates] -next_only = """ -Welcome to $SERIES_HTML_LINK! This $SERIES_PAGES_NUMBER-part series will teach you Rust from scratch. - -Up next: $NEXT_HTML_LINK - $NEXT_DESCRIPTION -""" - -middle = """ -📚 Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER in $SERIES_HTML_LINK - -Previously: $PREV_HTML_LINK -Next up: $NEXT_HTML_LINK -""" - -prev_only = """ -Welcome to the final part of $SERIES_HTML_LINK! -New here? Start with $FIRST_HTML_LINK to build a strong foundation. - -Previously: $PREV_HTML_LINK -""" - -# Fallback template. -default = "This article is part of the $SERIES_HTML_LINK series." - -# Outro. -[extra.series_outro_templates] -next_only = """ -Thanks for reading! 🙌 - -Continue your journey with $NEXT_HTML_LINK, where $NEXT_DESCRIPTION -Or check out the complete [$SERIES_TITLE]($SERIES_PERMALINK) series outline. -""" - -middle = """ ---- -📝 Series Navigation - -- Previous: $PREV_HTML_LINK -- Next: $NEXT_HTML_LINK -- [Series Overview]($SERIES_PERMALINK) -""" - -prev_only = """ -🎉 Congratulations! You've completed $SERIES_HTML_LINK. - -Want to review? Here's where we started: $FIRST_HTML_LINK -Or check what we just covered in $PREV_HTML_LINK. -""" - -# Fallback. -default = """ ---- -This article is part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER in $SERIES_HTML_LINK. -""" -``` - -### Custom Variables - -Series templates support custom variables for additional information you want to include across your series. The process takes two steps: - -1. First, define your **placeholders** in your series configuration (`_index.md`): - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra] -series = true -series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"] -``` - -2. Then, in each series article, provide the values for these placeholders in `series_template_variables`: - -{{ add_src_to_code_block(src="series/article.md") }} - -```toml -[extra.series_template_variables] -position = "first" -topic = "Variables and Types" -difficulty = "Beginner" -``` - -### Using Custom Variables - -You can use your custom variables in any template, alongside the built-in variables: - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -[extra.series_intro_templates] -default = """ -This is the $POSITION article in $SERIES_HTML_LINK. -Today's topic: $TOPIC -Difficulty level: $DIFFICULTY -""" -``` - -{{ admonition(type="warning", text="While placeholders are defined with uppercase (`$POSITION`), the variable names in `series_template_variables` must be lowercase (`position`).") }} - -### Example with Custom Variables - -{{ add_src_to_code_block(src="series/_index.md") }} - -```toml -# In the series configuration. -[extra] -series = true -series_template_placeholders = ["$LEARNING_TIME", "$KEY_CONCEPTS"] - -series_intro_templates.default = """ -📚 Part $SERIES_PAGE_INDEX of $SERIES_PAGES_NUMBER -⏱️ Estimated time: $LEARNING_TIME -🔑 Key concepts: $KEY_CONCEPTS -""" -``` - -{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }} - -```toml -# In an article of the series. -[extra.series_template_variables] -learning_time = "30 minutes" -key_concepts = "Functions, Error Handling, Pattern Matching" -``` - -This will output: - -```txt -📚 Part 2 of 5 -⏱️ Estimated time: 30 minutes -🔑 Key concepts: Functions, Error Handling, Pattern Matching -``` - -{{ admonition(type="warning", title="Missing Variables", text="If you use a placeholder in your templates but don't provide its value in `series_template_variables`, the build will fail with an error listing the missing variables.") }} diff --git a/content/blog/series/social_cards/blog_series.jpg b/content/blog/series/social_cards/blog_series.jpg deleted file mode 100644 index 0de6828..0000000 Binary files a/content/blog/series/social_cards/blog_series.jpg and /dev/null differ diff --git a/content/blog/series/social_cards/ca_blog_series.jpg b/content/blog/series/social_cards/ca_blog_series.jpg deleted file mode 100644 index 12ccc6c..0000000 Binary files a/content/blog/series/social_cards/ca_blog_series.jpg and /dev/null differ diff --git a/content/blog/series/social_cards/es_blog_series.jpg b/content/blog/series/social_cards/es_blog_series.jpg deleted file mode 100644 index 3a24a96..0000000 Binary files a/content/blog/series/social_cards/es_blog_series.jpg and /dev/null differ diff --git a/content/blog/shortcodes/img/amsterdam_by_oskerwyld.webp b/content/blog/shortcodes/img/amsterdam_by_oskerwyld.webp deleted file mode 100644 index 2e84a02..0000000 Binary files a/content/blog/shortcodes/img/amsterdam_by_oskerwyld.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/desert_by_oskerwyld.webp b/content/blog/shortcodes/img/desert_by_oskerwyld.webp deleted file mode 100644 index 71a0f12..0000000 Binary files a/content/blog/shortcodes/img/desert_by_oskerwyld.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/edited.webp b/content/blog/shortcodes/img/edited.webp deleted file mode 100644 index ab5ae7f..0000000 Binary files a/content/blog/shortcodes/img/edited.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/graph.webp b/content/blog/shortcodes/img/graph.webp deleted file mode 100644 index 5c2b9cd..0000000 Binary files a/content/blog/shortcodes/img/graph.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/mojave_day.webp b/content/blog/shortcodes/img/mojave_day.webp deleted file mode 100644 index dcba3fb..0000000 Binary files a/content/blog/shortcodes/img/mojave_day.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/mojave_night.webp b/content/blog/shortcodes/img/mojave_night.webp deleted file mode 100644 index 20267c5..0000000 Binary files a/content/blog/shortcodes/img/mojave_night.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/paris_day.webp b/content/blog/shortcodes/img/paris_day.webp deleted file mode 100644 index 5dc219c..0000000 Binary files a/content/blog/shortcodes/img/paris_day.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/paris_night.webp b/content/blog/shortcodes/img/paris_night.webp deleted file mode 100644 index d445112..0000000 Binary files a/content/blog/shortcodes/img/paris_night.webp and /dev/null differ diff --git a/content/blog/shortcodes/img/raw.webp b/content/blog/shortcodes/img/raw.webp deleted file mode 100644 index d005c95..0000000 Binary files a/content/blog/shortcodes/img/raw.webp and /dev/null differ diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md deleted file mode 100644 index 8160a5f..0000000 --- a/content/blog/shortcodes/index.ca.md +++ /dev/null @@ -1,409 +0,0 @@ -+++ -title = "Shortcodes personalitzats" -date = 2023-02-19 -updated = 2024-11-27 -description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran." - -[taxonomies] -tags = ["funcionalitat", "shortcodes"] - -[extra] -toc = true -toc_levels = 2 -quick_navigation_buttons = true -add_src_to_code_block = true -mermaid = true -social_media_card = "social_cards/ca_blog_shortcodes.jpg" -+++ - -## Shortcodes de diagrames - -### Diagrames de Mermaid - -[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics que utilitza text i codi per generar diagrames. Admet diagrames de flux, diagrames de seqüència, gràfics de Gantt i més. - -Per incloure un diagrama Mermaid a la teva publicació, cal fer dues coses: - -1. Estableix `mermaid = true` a la secció `[extra]` del front matter de la teva pàgina, secció o `config.toml`. Això carregarà el JavaScript necessari per renderitzar els diagrames. - -2. Utilitza el shortcode `mermaid()` per definir el teu diagrama. Per exemple: - -```txt -{%/* mermaid() */%} -classDiagram - class DistorsionsCognitives { - +PensamentTotORes() - +Sobregeneralitzacio() - +FiltreMental() - +TreureConclusionsPrecipitades() - } - class PensamentTotORes { - +VeureEnExtrems() - } - class Sobregeneralitzacio { - +GeneralitzarDUnic() - } - class FiltreMental { - +EnfocarseEnNegatiu() - } - class TreureConclusionsPrecipitades { - +FerSuposicions() - } - DistorsionsCognitives *-- PensamentTotORes - DistorsionsCognitives *-- Sobregeneralitzacio - DistorsionsCognitives *-- FiltreMental - DistorsionsCognitives *-- TreureConclusionsPrecipitades -{%/* end */%} -``` - -El diagrama es renderitzarà així: - -{% mermaid() %} -classDiagram - class DistorsionsCognitives { - +PensamentTotORes() - +Sobregeneralitzacio() - +FiltreMental() - +TreureConclusionsPrecipitades() - } - class PensamentTotORes { - +VeureEnExtrems() - } - class Sobregeneralitzacio { - +GeneralitzarDUnic() - } - class FiltreMental { - +EnfocarseEnNegatiu() - } - class TreureConclusionsPrecipitades { - +FerSuposicions() - } - DistorsionsCognitives *-- PensamentTotORes - DistorsionsCognitives *-- Sobregeneralitzacio - DistorsionsCognitives *-- FiltreMental - DistorsionsCognitives *-- TreureConclusionsPrecipitades -{% end %} - -El shortcode de Mermaid admet dos paràmetres: - -- `invertible`: Si s'estableix a `true` (per defecte), el diagrama invertirà els seus colors en mode fosc, igual que les [imatges invertibles](#imatge-invertible). -- `full_width`: Permet que el diagrama ocupi l'amplada de la capçalera. Mira [imatge d'amplada completa](#imatge-d-amplada-completa). - -{{ admonition(type="tip", title="CONSELL", text="Empra l'[editor de Mermaid](https://mermaid.live/) per crear i previsualitzar els teus diagrames.") }} - -#### Ús - -``` -{%/* mermaid(invertible=true, full_width=false) */%} - -El teu codi Mermaid va aquí. - -`invertible` or `full_width` poden ometre's per emprar els valors per defecte. - -{%/* end */%} -``` - -## Shortcodes d'imatge - -Tots els shortcodes d'imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre `src`. - -Tots els shortcodes d'imatge tenen els següents paràmetres opcionals: - -- `raw_path`. Per defecte és `false`. Si es configura a `true`, el paràmetre `src` s'utilitzarà tal qual. Útil per a actius ubicats a la mateixa carpeta que tenen un slug personalitzat (vegeu [Zola issue #2598](https://github.com/getzola/zola/issues/2598)). -- `inline`. Valor predeterminat: `false`. Si s'estableix a `true`, la imatge es mostrarà en línia amb el text. -- `full_width`. Valor predeterminat: `false` (vegeu [a sota](#imatge-d-amplada-completa)). -- `lazy_loading`. Valor predeterminat: `true`. - -### Imatges per a temes duals - -Útil si vols utilitzar una imatge diferent pels temes clar i fosc: - -{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }} - -#### Ús -``` -{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") */}} -``` - -### Imatge invertible - -Útil per a gràfics, dibuixos de línies, diagrames… Inverteix els colors de la imatge. La imatge original s'utilitzarà per al tema clar. - -{{ invertible_image(src="img/graph.webp", alt="Gràfic invertible") }} - -#### Ús - -``` -{{/* invertible_image(src="img/graph.webp", alt="Gràfic invertible") */}} -``` - -### Imatge regulable - -Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc. Aquí tens un exemple d'una fotografia que s'atenua quan s'activa el tema fosc. - -{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }} - -#### Ús - -``` -{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") */}} -``` - -### Canvi d'imatge en passar el cursor - -La imatge mostrada canvia quan l'usuari passa el cursor per sobre. Útil per a comparacions d'abans i després, per exemple. - -{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }} - -#### Ús - -``` -{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Foto editada", hovered_alt="Foto original") */}} -``` - -### Canvi d'imatge via clic - -Mostra una imatge i canvia a una diferent en fer clic. Ideal per destacar diferències o cridar l'atenció sobre detalls. - -{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }} - -#### Ús - -``` -{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") */}} -``` - -### Imatge d'amplada completa - -La imatge s'expandirà per coincidir amb l'amplada de la capçalera, que normalment és més ampla que el text de l'article (excepte en mòbil/finestres petites). - -Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant `true` al paràmetre opcional `full_width`. - -{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }} - -#### Ús - -``` -{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}} -``` - -## Shortcodes de codi - -### Mostrar ruta o URL - -Mostra una ruta o URL al següent bloc de codi trobat. Si comença amb "http", es convertirà en un enllaç. Particularment útil quan s'utilitza en conjunció amb el [shortcode de text remot](#text-remot). - -{{ admonition(type="warning", title="IMPORTANT", text="Aquesta funcionalitat requereix JavaScript. Per activar-la, configura `add_src_to_code_block = true` a la secció `[extra]` de la teva pàgina, secció, o `config.toml`.") }} - -{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }} - -```.gitignore -{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }} -``` - -#### Ús - -```` -{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}} - -```.gitignore -__pycache__/ -*coverage* -.vscode/ -dist/ -``` -```` - -## Shortcodes de text - -### Text remot - -Afegeix text des d'una URL remota o un arxiu local. - -El shortcode accepta tres paràmetres: - -- `src`: L'URL d'origen o ruta del fitxer (obligatori) -- `start`: Primera línia a mostrar (opcional, comença a 1) -- `end`: Número de l'última línia (opcional, per defecte és 0, l'última línia) - -{{ admonition(type="info", text="`start` i `end` són inclusius. `start=3, end=3` mostrarà només la tercera línia.") }} - -**Important**: - -- **Arxius remots VS arxius locals**: Si `src` comença amb "http", es tractarà com un arxiu remot. D'altra banda, s'assumeix que és una ruta d'arxiu local. -- **Accés a arxius**: Atès que utilitza la funció [`load_data`](https://www.getzola.org/documentation/templates/overview/#load-data) de Zola, els arxius locals han d'estar dins del directori de Zola —vegeu la [lògica de cerca d'arxius](https://www.getzola.org/documentation/templates/overview/#file-searching-logic). Desde [tabi 2.16.0](https://github.com/welpo/tabi/releases/tag/v2.16.0), el shortcode admet també rutes relatives. -- **Formateig de blocs de codi**: Per mostrar el text com un bloc de codi, has d'afegir manualment les tanques de codi Markdown (cometes inverses) i, opcionalment, especificar el llenguatge de programació per al ressaltat sintàctic. - -#### Ús - -Afegeix un script de Python remot dins d'un bloc de codi amb ressaltat sintàctic: - -```` -```python -{{/* remote_text(src="https://example.com/script.py") */}} -``` -```` - -Mostra el text d'un arxiu local: - -``` -{{/* remote_text(src="ruta/a/arxiu.txt") */}} -``` - -Mostreu només les línies 3 a 5 d'un arxiu local: - -``` -{{/* remote_text(src="ruta/a/arxiu.txt", start=3, end=5) */}} -``` - -### Advertències - -Destaca informació amb aquests shortcodes. Hi ha cinc tipus (`type`): `note`, `tip`, `info`, `warning`, i `danger`. - -{{ admonition(type="note", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }} - -{{ admonition(type="tip", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }} - -{{ admonition(type="info", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }} - -{{ admonition(type="warning", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }} - -{{ admonition(type="danger", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }} - -Pots canviar el `title` i la `icon` de l'advertència. Ambdós paràmetres accepten text i per defecte coincideixen amb el tipus d'advertència. `icon` pot ser qualsevol dels tipus d'advertència disponibles. - -{{ admonition(type="note", icon="tip", title="Títol i icona personalitzats", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }} - -#### Ús - -Pots utilitzar les advertències de dues maneres: - -1. En línia amb paràmetres: - -```md -{{/* admonition(type="danger", icon="tip", title="Un consell important", text="Mantingues-te hidratat") */}} -``` - -2. Amb contingut al cos: - -```md -{%/* admonition(type="danger", icon="tip", title="Un consell important") */%} -Mantingues-te hidratat - -Aquest mètode és especialment útil per a contingut llarg o múltiples paràgrafs. -{%/* end */%} -``` - -Ambdós mètodes admeten els mateixos paràmetres (`type`, `icon`, i `title`). - -### Cites multillenguatge - -Aquest shortcode permet mostrar una cita traduïda i en el llenguatge original: - -{{ multilingual_quote(original="Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.", translated="La lògica, encara que inquebrantable, no resisteix a un home que vol viure.", author="Franz Kafka") }} - -#### Ús - -``` -{{/* multilingual_quote(original="Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.", translated="La lògica, encara que inquebrantable, no resisteix a un home que vol viure.", author="Franz Kafka") */}} -``` - -### Referències amb sagnat invertit - -Aquest shortcode formata una secció de referència amb un sagnat invertit de la següent manera: - -{% references() %} - -Alderson, E. (2015). Ciberseguretat i justícia social: Una crítica a la hegemonia corporativa en un món digital. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6). - -Funkhouser, M. (2012). Les normes socials d'indecència: Un anàlisi del comportament desviat a la societat contemporània. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037). - -Schrute, D. (2005). La revolució de l'agricultura de remolatxa: Un anàlisi de la innovació agrícola. *Scranton Agricultural Quarterly, 38*(3), 67-81. - -Steinbrenner, G. (1997). L'anàlisi cost-benefici de George Costanza: Un anàlisi del comportament de presa de riscos en el lloc de treball. *New York Journal of Business, 12*(4), 112-125. - -Winger, J. A. (2010). L'art del debat: Un examen de la retòrica en el model de les Nacions Unides del Greendale Community College. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie). - -{% end %} - -#### Ús - -``` -{%/* references() */%} - -Les teves referències van aquí. - -Cada una en una nova línia. Es renderitzarà el Markdown (enllaços, cursiva…). - -{%/* end */%} -``` - -### Spoiler - -Aquest shortcode amaga el text fins que l'usuari fa clic per revelar-lo. Per exemple: A l'antiga Roma, el *vomitorium* era {{ spoiler(text="l'entrada a través de la qual les multituds entraven i sortien d'un estadi, no un espai especial utilitzat per a vomitar durant els àpats. Sí, [de debó](https://ca.wikipedia.org/wiki/Vomitori).") }} - -Com veus, el Markdown es renderitza. - -Aquest shortcode té l'opció `fixed_blur` per difuminar el text "SPOILER", en lloc de difuminar el contingut real. Per exemple: és {{ spoiler(text="innecessari", fixed_blur=true)}} esperar 24 hores abans de denunciar la desaparició d'una persona. - -#### Ús - -``` -{{/* spoiler(text="text a amagar", fixed_blur=false) */}} -``` - -## Contenidors - -### Contenidor ample - -Utilitza aquest codi curt si vols tenir una taula, paràgraf, bloc de codi… més ample. A l'escriptori, ocuparà l'amplada de la capçalera. A mòbils no tindrà efecte, excepte per les taules, que guanyaran scroll horitzontal. - -{% wide_container() %} - -| Títol | Any | Director | Director de fotografia | Gènere | IMDb | Durada | -|-------------------|-------|----------------------|-------------------------|----------------|-------|--------------| -| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Misteri | 7.5 | 148 min | -| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/Història | 7.1 | 137 min | -| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min | - -{% end %} - -#### Ús - -``` -{%/* wide_container() */%} - -Posa el teu bloc de codi, paràgraf, taula… aquí. - -El Markdown, per suposat, serà interpretat. - -{%/* end */%} -``` - -### Forçar direcció del text - -Força la direcció del text d'un bloc de contingut. Substitueix tant la configuració global `force_codeblock_ltr` com la direcció general del document. - -Accepta el paràmetre `direction`: la direcció de text desitjada. Pot ser "ltr" (d'esquerra a dreta) o "rtl" (de dreta a esquerra). Per defecte és "ltr". - -{% force_text_direction(direction="rtl") %} -```python -def مرحبا_بالعالم(): - print("مرحبا بالعالم!") -``` -{% end %} - -#### Ús - -En una pàgina LTR podem forçar que un bloc de codi sigui RTL (com es mostra a dalt) de la següent manera: - -```` -{%/* force_text_direction(direction="rtl") */%} - -```python -def مرحبا_بالعالم(): - print("مرحبا بالعالم!") -``` - -{%/* end */%} -```` diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md deleted file mode 100644 index 14de35a..0000000 --- a/content/blog/shortcodes/index.es.md +++ /dev/null @@ -1,409 +0,0 @@ -+++ -title = "Shortcodes personalizados" -date = 2023-02-19 -updated = 2024-11-27 -description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más." - -[taxonomies] -tags = ["funcionalidad", "shortcodes"] - -[extra] -toc = true -toc_levels = 2 -quick_navigation_buttons = true -add_src_to_code_block = true -mermaid = true -social_media_card = "social_cards/es_blog_shortcodes.jpg" -+++ - -## Shortcodes de diagramas - -### Diagramas de Mermaid - -[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos que usa texto y código para generar diagramas. Admite diagramas de flujo, diagramas de secuencia, gráficos de Gantt y más. - -Para incluir un diagrama Mermaid en tu publicación, sigue estos dos pasos: - -1. Establece `mermaid = true` en la sección `[extra]` del front matter de tu página, sección o `config.toml`. Esto cargará el JavaScript necesario para renderizar los diagramas. - -2. Usa el shortcode `mermaid()` para definir tu diagrama. Por ejemplo: - -```txt -{%/* mermaid() */%} -classDiagram - class DistorsionesCognitivas { - +PensamientoTodoONada() - +Sobregeneralizacion() - +FiltroMental() - +SacarConclusionesPrecipitadas() - } - class PensamientoTodoONada { - +VerEnExtremos() - } - class Sobregeneralizacion { - +GeneralizarDeUnicoEjemplo() - } - class FiltroMental { - +EnfocarseEnNegativo() - } - class SacarConclusionesPrecipitadas { - +HacerSuposiciones() - } - DistorsionesCognitivas *-- PensamientoTodoONada - DistorsionesCognitivas *-- Sobregeneralizacion - DistorsionesCognitivas *-- FiltroMental - DistorsionesCognitivas *-- SacarConclusionesPrecipitadas -{%/* end */%} -``` - -El diagrama se renderizará así: - -{% mermaid() %} -classDiagram - class DistorsionesCognitivas { - +PensamientoTodoONada() - +Sobregeneralizacion() - +FiltroMental() - +SacarConclusionesPrecipitadas() - } - class PensamientoTodoONada { - +VerEnExtremos() - } - class Sobregeneralizacion { - +GeneralizarDeUnicoEjemplo() - } - class FiltroMental { - +EnfocarseEnNegativo() - } - class SacarConclusionesPrecipitadas { - +HacerSuposiciones() - } - DistorsionesCognitivas *-- PensamientoTodoONada - DistorsionesCognitivas *-- Sobregeneralizacion - DistorsionesCognitivas *-- FiltroMental - DistorsionesCognitivas *-- SacarConclusionesPrecipitadas -{% end %} - -El shortcode de Mermaid admite dos parámetros: - -- `invertible`: Si se establece en `true` (por defecto), el diagrama se invertirá en modo oscuro, igual que las [imágenes invertibles](#imagen-invertible). -- `full_width`: Permite que el diagrama ocupe el ancho del encabezado. Mira [imagen a ancho completo](#imagen-a-ancho-completo). - -{{ admonition(type="tip", title="CONSEJO", text="Puedes usar el [editor de Mermaid](https://mermaid.live/) para crear y previsualizar tus diagramas.") }} - -#### Uso - -``` -{%/* mermaid(invertible=true, full_width=false) */%} - -Tu diagrama Mermaid va aquí. Puedes omitir los parámetros para usar los valores predeterminados. - -{%/* end */%} -``` - -## Shortcodes de imagen - -Todos los shortcodes de imagen admiten rutas absolutas, rutas relativas, y fuentes remotas en el parámetro `src`. - -Todos los shortcodes de imagen tienen los siguientes parámetros opcionales: - -- `raw_path`. Por defecto es `false`. Si se establece en `true`, el parámetro `src` se usará tal cual. Útil para activos ubicados en la misma carpeta que tienen un slug personalizado (ver [Zola issue #2598](https://github.com/getzola/zola/issues/2598)). -- `inline`. Valor predeterminado: `false`. Si se establece `true`, la imagen se mostrará en línea con el texto. -- `full_width`. Valor predeterminado: `false` (ver [más abajo](#imagen-a-ancho-completo)). -- `lazy_loading`. Valor predeterminado: `true`. - -### Imágenes de doble tema - -Útil si deseas usar una imagen diferente para los temas claro y oscuro: - -{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }} - -#### Uso -``` -{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") */}} -``` - -### Imagen invertible - -Ideal para gráficos, dibujos lineales, diagramas... Invierte los colores de la imagen. La imagen de origen se utilizará para el tema claro. - -{{ invertible_image(src="img/graph.webp", alt="Gráfico invertible") }} - -#### Uso - -``` -{{/* invertible_image(src="img/graph.webp", alt="Gráfico invertible") */}} -``` - - -### Imagen atenuable - -Las imágenes con demasiado brillo o contraste pueden ser demasiado discordantes en un fondo oscuro. Aquí tienes un ejemplo de una fotografía que se atenúa cuando el tema oscuro está activo. - -{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") }} - -#### Uso - -``` -{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") */}} -``` - -### Cambio de imagen al pasar el cursor - -La imagen mostrada cambia cuando el usuario pasa el cursor por encima. Útil para comparaciones de antes y después, por ejemplo. - -{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }} - -#### Uso - -``` -{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Imagen editada", hovered_alt="Toma original") */}} -``` - -### Cambio de imagen vía click - -Muestra una imagen y cambia a una diferente al hacer clic. Ideal para destacar diferencias o llamar la atención sobre detalles. - -{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") }} - -#### Uso - -``` -{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") */}} -``` - -### Imagen a ancho completo - -La imagen se expandirá para coincidir con el ancho del encabezado, que generalmente es más ancho que el texto del artículo (excepto en móvil/ventanas pequeñas). - -Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando el valor `true` al parámetro opcional `full_width`. - -{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }} - -#### Uso - -``` -{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}} -``` - -## Shortcodes de código - -### Mostrar ruta o URL - -Muestra una ruta o URL en el siguiente bloque de código encontrado. Si comienza con "http", se convertirá en un enlace. Particularmente útil cuando se usa junto con el [shortcode de texto remot](#texto-remoto). - -{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }} - -```.gitignore -{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }} -``` - -{{ admonition(type="warning", title="IMPORTANT", text="Esta característica requiere JavaScript. Para habilitarla, configura `add_src_to_code_block = true` en la sección `[extra]` de tu página, sección, o `config.toml`.") }} - -#### Uso - -```` -{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}} - -```.gitignore -__pycache__/ -*coverage* -.vscode/ -dist/ -``` -```` - -## Shortcodes de texto - -### Texto remoto - -Añade texto desde una URL remota o un archivo local. - -El shortcode acepta tres parámetros: - -- `src`: La URL de origen o ruta del archivo (obligatorio) -- `start`: Primera línea a mostrar (opcional, empieza en 1) -- `end`: Número de la última línea (opcional, por defecto es 0, la última línea) - -{{ admonition(type="info", text="`start` y `end` son inclusivos. `start=3, end=3` mostrará solo la tercera línea.") }} - -**Importante**: - -- **Archivos remotos VS archivos locales**: Si `src` empieza con "http", se tratará como un archivo remoto. De lo contrario, se asume que es una ruta de archivo local. -- **Acceso a archivos**: Dado que utiliza la función [`load_data`](https://www.getzola.org/documentation/templates/overview/#load-data) de Zola, los archivos locales deben estar dentro del directorio de Zola —ver la [lógica de búsqueda de archivos](https://www.getzola.org/documentation/templates/overview/#file-searching-logic). Desde [tabi 2.16.0](https://github.com/welpo/tabi/releases/tag/v2.16.0), el shortcode admite también rutas relativas. -- **Formateo de bloques de código**: Para mostrar el texto como un bloque de código, debes añadir manualmente las cercas de código Markdown (comillas invertidas) y, opcionalmente, especificar el lenguaje de programación para el resaltado sintáctico. - -#### Uso - -Añade un script de Python remoto dentro de un bloque de código con resaltado sintáctico: - -```` -```python -{{/* remote_text(src="https://example.com/script.py") */}} -``` -```` - -Visualización de texto de un archivo local: - -``` -{{/* remote_text(src="ruta/a/archivo.txt") */}} -``` - -Mostar sólo las líneas 3 a 5 de un archivo remoto: - -``` -{{/* remote_text(src="https://example.com/script.py", start=3, end=5) */}} -``` - -### Advertencias - -Destaca información con estos shortcodes. Hay cinco tipos (`type`): `note`, `tip`, `info`, `warning`, y `danger`. - -{{ admonition(type="note", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }} - -{{ admonition(type="tip", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }} - -{{ admonition(type="info", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }} - -{{ admonition(type="warning", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }} - -{{ admonition(type="danger", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }} - -Puedes cambiar el `title` y el `icon` de la advertencia. Ambos parámetros aceptan texto y por defecto coinciden con el tipo de advertencia. `icon` puede ser cualquiera de los tipos de advertencia disponibles. - -{{ admonition(type="note", icon="tip", title="Título e icono personalizados", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }} - -#### Uso - -Puedes usar las advertencias de dos formas: - -1. En línea con parámetros: - -```md -{{/* admonition(type="danger", icon="tip", title="Un consejo importante", text="Mantente hidratado") */}} -``` - -2. Con contenido en el cuerpo: - -```md -{%/* admonition(type="danger", icon="tip", title="Un consejo importante") */%} -Mantente hidratado - -Este método es especialmente útil para contenido largo o múltiples párrafos. -{%/* end */%} -``` - -Ambos métodos admiten los mismos parámetros (`type`, `icon`, y `title`). - -### Citas multilenguaje - -Este shortcode permite mostrar una cita traducida y en su lenguaje original: - -{{ multilingual_quote(original="Ce qui est terrible, ce n’est pas de souffrir ni de mourir, mais de mourir en vain.", translated="Lo terrible no es sufrir o morir, sino morir en vano.", author="Jean-Paul Sartre") }} - -#### Uso - -``` -{{/* multilingual_quote(original="Ce qui est terrible, ce n’est pas de souffrir ni de mourir, mais de mourir en vain.", translated="Lo terrible no es sufrir o morir, sino morir en vano.", author="Jean-Paul Sartre") */}} -``` - -### Referencias con sangría francesa - -Este shortcode formatea una sección de referencias con sangría francesa de la siguiente manera: - -{% references() %} - -Alderson, E. (2015). Ciberseguridad y justicia social: Una crítica a la hegemonía corporativa en un mundo digital. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6). - -Funkhouser, M. (2012). Las normas sociales de indecencia: Un análisis del comportamiento desviado en la sociedad contemporánea. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037). - -Schrute, D. (2005). La revolución de la agricultura de remolacha: Un análisis de la innovación agrícola. *Scranton Agricultural Quarterly, 38*(3), 67-81. - -Steinbrenner, G. (1997). El análisis costo-beneficio de George Costanza: Un examen del comportamiento de toma de riesgos en el lugar de trabajo. *New York Journal of Business, 12*(4), 112-125. - -Winger, J. A. (2010). El arte del debate: Un examen de la retórica en el modelo de las Naciones Unidas del Greendale Community College. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie). - -{% end %} - -#### Uso - -``` -{%/* references() */%} - -Tus referencias van aquí. - -Cada una en una línea nueva. Se renderizará Markdown (enlaces, cursivas…). - -{%/* end */%} -``` - -### Spoilers - -Este shortcode permite ocultar texto que se revelará al hacer clic. Por ejemplo: las galletas de la fortuna tiene su origen en {{ spoiler(text="Japón. Sí, [en serio](https://es.wikipedia.org/wiki/Galleta_de_la_suerte#Historia_y_origen).") }} - -Como ves, el Markdown se renderiza. - -Este shortcode tiene la opción `fixed_blur` para difuminar el texto "SPOILER", en lugar de difuminar el contenido real. Por ejemplo: es {{ spoiler(text="innecesario", fixed_blur=true)}} esperar 24 horas antes de denunciar la desaparición de una persona. - - -#### Uso - -``` -{{/* spoiler(text="texto que ocultar", fixed_blur=false) */}} -``` - -## Contenedores - -### Contenedor ancho - -Utiliza este código corto si deseas tener una tabla, párrafo, bloque de código… más ancho. En escritorio, ocupará el ancho del encabezado. En móviles no tendrá efecto, excepto para las tablas, que ganarán scroll horizontal. - -{% wide_container() %} - -| Título | Año | Director | Director de Fotografía| Género | IMDb | Duración | -|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------| -| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Misterio| 7.5 | 148 min | -| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/Historia| 7.1 | 137 min | -| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min | - -{% end %} - -#### Uso - -``` -{%/* wide_container() */%} - -Coloca tu bloque de código, párrafo, tabla… aquí. - -El Markdown, por supuesto, será interpretado. - -{%/* end */%} -``` - -### Forzar dirección del texto - -Fuerza la dirección del texto de un bloque de contenido. Anula tanto la configuración global `force_codeblock_ltr` como la dirección general del documento. - -Acepta el parámetro `direction`: la dirección de texto deseada. Puede ser "ltr" (de izquierda a derecha) o "rtl" (de derecha a izquierda). Por defecto es "ltr". - -{% force_text_direction(direction="rtl") %} -```python -def مرحبا_بالعالم(): - print("مرحبا بالعالم!") -``` -{% end %} - -#### Uso - -En una página LTR podemos forzar que un bloque de código sea RTL (como se muestra arriba) de la siguiente manera: - -```` -{%/* force_text_direction(direction="rtl") */%} - -```python -def مرحبا_بالعالم(): - print("مرحبا بالعالم!") -``` - -{%/* end */%} -```` diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md deleted file mode 100644 index 3ebcfee..0000000 --- a/content/blog/shortcodes/index.md +++ /dev/null @@ -1,409 +0,0 @@ -+++ -title = "Custom shortcodes" -date = 2023-02-19 -updated = 2024-11-27 -description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." - -[taxonomies] -tags = ["showcase", "shortcodes"] - -[extra] -toc = true -toc_levels = 2 -quick_navigation_buttons = true -add_src_to_code_block = true -mermaid = true -social_media_card = "social_cards/blog_shortcodes.jpg" -+++ - -## Diagram shortcode - -### Mermaid diagrams - -[Mermaid](https://github.com/mermaid-js/mermaid) is a a diagramming and charting tool that uses text and code to generate diagrams. It supports flowcharts, sequence diagrams, Gantt charts, and more. - -To include a Mermaid diagram in your post, there are two steps: - -1. Set `mermaid = true` in the `[extra]` section of the front matter of your page, section or `config.toml`. This will load the JavaScript needed to render the diagrams. - -2. Use the `mermaid()` shortcode to define your diagram in your posts. For example: - -```txt -{%/* mermaid() */%} -classDiagram - class CognitiveDistortions { - +AllOrNothingThinking() - +Overgeneralization() - +MentalFilter() - +JumpingToConclusions() - } - class AllOrNothingThinking { - +SeeInExtremes() - } - class Overgeneralization { - +GeneralizeFromSingle() - } - class MentalFilter { - +FocusOnNegative() - } - class JumpingToConclusions { - +MakeAssumptions() - } - CognitiveDistortions *-- AllOrNothingThinking - CognitiveDistortions *-- Overgeneralization - CognitiveDistortions *-- MentalFilter - CognitiveDistortions *-- JumpingToConclusions -{%/* end */%} -``` - -The diagram will be rendered as follows: - -{% mermaid() %} -classDiagram - class CognitiveDistortions { - +AllOrNothingThinking() - +Overgeneralization() - +MentalFilter() - +JumpingToConclusions() - } - class AllOrNothingThinking { - +SeeInExtremes() - } - class Overgeneralization { - +GeneralizeFromSingle() - } - class MentalFilter { - +FocusOnNegative() - } - class JumpingToConclusions { - +MakeAssumptions() - } - CognitiveDistortions *-- AllOrNothingThinking - CognitiveDistortions *-- Overgeneralization - CognitiveDistortions *-- MentalFilter - CognitiveDistortions *-- JumpingToConclusions -{% end %} - -The Mermaid shortcode supports two parameters: - -- `invertible`: If set to `true` (default), the diagram will be inverted in dark mode, just like [invertible images](#invertible-image). -- `full_width`: Allows the diagram to take up the width of the header. See [full-width image](#full-width-image). - -{{ admonition(type="tip", text="You can use the [Mermaid Live Editor](https://mermaid.live/) to create and preview your diagrams.") }} - -#### Usage - -``` -{%/* mermaid(invertible=true, full_width=false) */%} - -Your diagram goes here. - -`invertible` or `full_width` can be omitted if default values are used. - -{%/* end */%} -``` - -## Image shortcodes - -All image shortcodes support absolute paths, relative paths, and remote sources in the `src` parameter. - -All image shortcodes have these optional parameters: - -- `raw_path`. Defaults to `false`. If set to `true`, the `src` parameter will be used as is. Useful for colocated assets with a custom slug (see [Zola issue #2598](https://github.com/getzola/zola/issues/2598)). -- `inline`. Defaults to `false`. If set to `true`, the image will be displayed inline with the text. -- `full_width`. Defaults to `false` (see [below](#full-width-image)) -- `lazy_loading`. Defaults to `true`. - -### Dual theme images - -Useful if you want to use a different image for the light and dark themes: - -{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }} - -#### Usage -``` -{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") */}} -``` - -### Invertible image - -Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme. - -{{ invertible_image(src="img/graph.webp", alt="Invertible graph") }} - -#### Usage - -``` -{{/* invertible_image(src="img/graph.webp", alt="Invertible graph") */}} -``` - -### Dimmable image - -Images with too much brightness or contrast can be jarring against a dark background. Here's an example of a photograph that dims when the dark theme is active. - -{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }} - -#### Usage - -``` -{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}} -``` - -### Swap image on hover - -Povides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example. - -{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }} - -#### Usage - -``` -{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Edited picture", hovered_alt="Original shot") */}} -``` - -### Interactive image toggle - -Display an image and switch to a different one on click. Ideal for highlighting differences or drawing attention to details. - -{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }} - -#### Usage - -``` -{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") */}} -``` - -### Full-width image - -The image will expand to match the width of the header, which is usually wider than the article text (except on mobile/small windows). - -All other image shortcodes can be made into full-width by setting the optional parameter `full_width` to `true`. - -{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }} - -#### Usage - -``` -{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}} -``` - -## Code shortcodes - -### Show source or path - -Display a path or URL on the next code block found. If it starts with "http", it will become a link. Particularly useful when used in conjunction with the [remote text shortcode](#remote-text). - -{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }} - -```.gitignore -{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }} -``` - -{{ admonition(type="warning", title="IMPORTANT", text="This feature requires JavaScript. To enable it, set `add_src_to_code_block = true` on the `[extra]` section of your page, section, or `config.toml`.") }} - -#### Usage - -```` -{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}} - -```.gitignore -__pycache__/ -*coverage* -.vscode/ -dist/ -``` -```` - -## Text shortcodes - -### Remote text - -Embed text from a remote URL or a local file. To display the path or URL on the code block, see the [show source or path shortcode](#show-source-or-path). - -The shortcode accepts three parameters: - -- `src`: The source URL or file path (required) -- `start`: First line to display (optional, starts at 1) -- `end`: The ending line number (optional, defaults to 0, meaning the last line) - -{{ admonition(type="info", text="`start` and `end` are inclusive. `start=3, end=3` will display only the third line.") }} - -**Important**: - -- **Remote VS local files**: If `src` starts with "http", it will be treated as a remote file. Otherwise, it assumes a local file path. -- **Files access**: As it uses Zola's [`load_data`](https://www.getzola.org/documentation/templates/overview/#load-data), local files must be inside the Zola directory—see [File searching logic](https://www.getzola.org/documentation/templates/overview/#file-searching-logic). As of [tabi 2.16.0](https://github.com/welpo/tabi/releases/tag/v2.16.0), the shortcode supports both relative and absolute paths. -- **Code block formatting**: To display the text as a code block, you must manually add the Markdown code fences (backticks) and, optionally, specify the programming language for syntax highlighting. - -#### Usage - -Embedding a remote Python script within a code block with syntax highlighting: - -```` -```python -{{/* remote_text(src="https://example.com/script.py") */}} -``` -```` - -Displaying text from a local file: - -``` -{{/* remote_text(src="path/to/file.txt") */}} -``` - -Display lines 3 to 7 (both inclusive) of a local file: - -``` -{{/* remote_text(src="path/to/file.txt", start=3, end=7) */}} -``` - -### Admonitions - -Bring attention to information with these admonition shortcodes. They come in five `type`s: `note`, `tip`, `info`, `warning`, and `danger`. - -{{ admonition(type="note", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} - -{{ admonition(type="tip", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} - -{{ admonition(type="info", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} - -{{ admonition(type="warning", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} - -{{ admonition(type="danger", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} - -You can change the `title` and `icon` of the admonition. Both parameters take a string and default to the type of admonition. `icon` can be any of the available admonition types. - -{{ admonition(type="note", icon="tip", title="Custom title and icon", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }} - -#### Usage - -You can use admonitions in two ways: - -1. Inline with parameters: - -```md -{{/* admonition(type="danger", icon="tip", title="An important tip", text="Stay hydrated~") */}} -``` - -2. With a content body: - -```md -{%/* admonition(type="danger", icon="tip", title="An important tip") */%} -Stay hydrated~ - -This method is particularly useful for longer content or multiple paragraphs. -{%/* end */%} -``` - -Both methods support the same parameters (`type`, `icon`, and `title`), with the content either passed as the `text` parameter or as the body between tags. - -### Multilingual quotes - -This shortcode allows you to display both the translated and original text for a quote. The quotation marks will be added automatically: - -{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") }} - -#### Usage - -``` -{{/* multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") */}} -``` - -### References with hanging indent - -This shortcode formats a reference section with a hanging indent like so: - -{% references() %} - -Alderson, E. (2015). Cybersecurity and Social Justice: A Critique of Corporate Hegemony in a Digital World. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6). - -Funkhouser, M. (2012). The Social Norms of Indecency: An Analysis of Deviant Behavior in Contemporary Society. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037). - -Schrute, D. (2005). The Beet Farming Revolution: An Analysis of Agricultural Innovation. *Scranton Agricultural Quarterly, 38*(3), 67-81. - -Steinbrenner, G. (1997). The Cost-Benefit Analysis of George Costanza: An Examination of Risk-Taking Behavior in the Workplace. *New York Journal of Business, 12*(4), 112-125. - -Winger, J. A. (2010). The Art of Debate: An Examination of Rhetoric in Greendale Community College's Model United Nations. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie). - -{% end %} - -#### Usage - -``` -{%/* references() */%} - -Your references go here. - -Each in a new line. Markdown (links, italics…) will be rendered. - -{%/* end */%} -``` - -### Spoiler - -This shortcode allows you to blur text until the user clicks on it. Like this: Goldfish have a memory span of a few {{ spoiler(text="months. Yes, [really](https://en.wikipedia.org/wiki/Goldfish#Cognitive_abilities).") }} - -As you can see, Markdown is rendered. You can even add newlines with `
`. - -This shortcode has the optional flag `fixed_blur` to blur a fixed placeholder ("SPOILER"), instead of blurring the actual contents. Like this: it is {{ spoiler(text="not necessary", fixed_blur=true)}} to wait 24 hours before filing a missing person report. - -#### Usage - -``` -{{/* spoiler(text="text to hide", fixed_blur=false) */}} -``` - -## Containers - -### Wide container - -Use this shortcode if you want to have a wider table, paragraph, code block… On desktop, it will take up the width of the header. It will have no effect on mobile, except for tables, which will get a horizontal scroll. - -{% wide_container() %} - -| Title | Year | Director | Cinematographer | Genre | IMDb | Duration | -|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------| -| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Mystery | 7.5 | 148 min | -| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/History | 7.1 | 137 min | -| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min | - -{% end %} - -#### Usage - -``` -{%/* wide_container() */%} - -Place your code block, paragraph, table… here. - -Markdown will of course be rendered. - -{%/* end */%} -``` - -### Force text direction - -Force the text direction of a content block. Overrides both the global `force_codeblock_ltr` setting and the document's overall direction. - -Accepts the parameter `direction`: the desired text direction. This can be either "ltr" (left-to-right) or "rtl" (right-to-left). Defaults to "ltr". - -{% force_text_direction(direction="rtl") %} -```python -def مرحبا_بالعالم(): - print("مرحبا بالعالم!") -``` -{% end %} - -#### Usage - -In a LTR page we can force a code block to be RTL (as shown above) like so: - -```` -{%/* force_text_direction(direction="rtl") */%} - -```python -def مرحبا_بالعالم(): - print("مرحبا بالعالم!") -``` - -{%/* end */%} -```` diff --git a/content/blog/shortcodes/social_cards/blog_shortcodes.jpg b/content/blog/shortcodes/social_cards/blog_shortcodes.jpg deleted file mode 100644 index 3a60ea1..0000000 Binary files a/content/blog/shortcodes/social_cards/blog_shortcodes.jpg and /dev/null differ diff --git a/content/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg b/content/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg deleted file mode 100644 index d6daafb..0000000 Binary files a/content/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg and /dev/null differ diff --git a/content/blog/shortcodes/social_cards/es_blog_shortcodes.jpg b/content/blog/shortcodes/social_cards/es_blog_shortcodes.jpg deleted file mode 100644 index f9a36dc..0000000 Binary files a/content/blog/shortcodes/social_cards/es_blog_shortcodes.jpg and /dev/null differ diff --git a/content/blog/site-to-site-vpn-for-google-kubernetes-engine/index.md b/content/blog/site-to-site-vpn-for-google-kubernetes-engine/index.md new file mode 100644 index 0000000..09bbd9c --- /dev/null +++ b/content/blog/site-to-site-vpn-for-google-kubernetes-engine/index.md @@ -0,0 +1,253 @@ ++++ +title = "Site to Site VPN for Google Kubernetes Engine" +date = 2021-05-06 +updated = 2021-05-06 +description = "In this tutorial I will try to explain you briefly and concisely how you can set up a site-to-site VPN for the Google Cloud Network." + +[taxonomies] +tags = ["kubernetes", "openvpn", "google"] + +[extra] +toc = false +quick_navigation_buttons = true ++++ +In this tutorial I will try to explain you briefly and concisely how you can set up a site-to-site VPN for the Google Cloud Network. + +### Prerequisites + +We need 2 virtual machines. The first one on the side of our office and the other one on the side of Google. + +#### Setup OpenVPN Clients + +##### Site-to-Site Client Office Side + +We need to install OpenVPN, we do it as follows: + +```bash +apt install openvpn -y +``` + +After that we add our OpenVPN configuration under this path `/etc/openvpn/s2s.conf`. + +_s2s.conf_ + +``` +# Use a dynamic tun device. +# For Linux 2.2 or non-Linux OSes, +# you may want to use an explicit +# unit number such as "tun1". +# OpenVPN also supports virtual +# ethernet "tap" devices. +dev tun + +# Our OpenVPN peer is the Google gateway. +remote IP_GOOGLE_VPN_CLIENT + +ifconfig 4.1.0.2 4.1.0.1 + +route 10.156.0.0 255.255.240.0 # Google Cloud VM Network +route 10.24.0.0 255.252.0.0 # Google Kubernetes Pod Network + +push "route 192.168.10.0 255.255.255.0" # Office Network + +# Our pre-shared static key +#secret static.key + +# Cipher to use +cipher AES-256-CBC + +port 1195 + +user nobody +group nogroup + +# Uncomment this section for a more reliable detection when a system +# loses its connection. For example, dial-ups or laptops that +# travel to other locations. + ping 15 + ping-restart 45 + ping-timer-rem + persist-tun + persist-key + +# Verbosity level. +# 0 -- quiet except for fatal errors. +# 1 -- mostly quiet, but display non-fatal network errors. +# 3 -- medium output, good for normal operation. +# 9 -- verbose, good for troubleshooting +verb 3 + +log /etc/openvpn/s2s.log +``` + +We also have to enable the IPv4 forward function in the kernel, so we go to `/etc/sysctl.conf` and comment out the following line: + +``` +net.ipv4.ip_forward=1 +``` + +We can then start our OpenVPN client with this command: + +```bash +systemctl start openvpn@s2s +``` + +On the Office side we have to open the port for the OpenVPN client that the other side can connect. + +##### Site-to-Site Client Google Side + +When setting up the OpenVPN client on Google's site, we need to consider the following settings when creating it. When we create the machine, we need to enable this option in the network settings: + +![Google Cloud Network Settings](https://i.imgur.com/OXEkhxo.png) + +Also on this side we have to install the OpenVPN client again and then add this config under the path `/etc/openvpn/s2s.conf`: + +``` +# Use a dynamic tun device. +# For Linux 2.2 or non-Linux OSes, +# you may want to use an explicit +# unit number such as "tun1". +# OpenVPN also supports virtual +# ethernet "tap" devices. +dev tun + +# Our OpenVPN peer is the Office gateway. +remote IP_OFFICE_VPN_CLIENT + +ifconfig 4.1.0.2 4.1.0.1 + +route 192.168.10.0 255.255.255.0 # Office Network + +push "route 10.156.0.0 255.255.240.0" # Google Cloud VM Network +push "route 10.24.0.0 255.252.0.0" # Google Kubernetes Pod Network + +# Our pre-shared static key +#secret static.key + +# Cipher to use +cipher AES-256-CBC + +port 1195 + +user nobody +group nogroup + +# Uncomment this section for a more reliable detection when a system +# loses its connection. For example, dial-ups or laptops that +# travel to other locations. + ping 15 + ping-restart 45 + ping-timer-rem + persist-tun + persist-key + +# Verbosity level. +# 0 -- quiet except for fatal errors. +# 1 -- mostly quiet, but display non-fatal network errors. +# 3 -- medium output, good for normal operation. +# 9 -- verbose, good for troubleshooting +verb 3 + +log /etc/openvpn/s2s.log +``` + +We also have to enable the IPv4 forward function in the kernel, so we go to `/etc/sysctl.conf` and comment out the following line: + +``` +net.ipv4.ip_forward=1 +``` + +##### Connection test + +Now that both clients are basically configured we can test the connection. Both clients have to be started with systemctl. After that we look at the logs with `tail -f /etc/openvpn/s2s-log` and wait for this message: + +``` +Wed May 5 08:28:01 2021 /sbin/ip route add 10.28.0.0/20 via 4.1.0.1 +Wed May 5 08:28:01 2021 TCP/UDP: Preserving recently used remote address: [AF_INET]0.0.0.0:1195 +Wed May 5 08:28:01 2021 Socket Buffers: R=[212992->212992] S=[212992->212992] +Wed May 5 08:28:01 2021 UDP link local (bound): [AF_INET][undef]:1195 +Wed May 5 08:28:01 2021 UDP link remote: [AF_INET]0.0.0.0:1195 +Wed May 5 08:28:01 2021 GID set to nogroup +Wed May 5 08:28:01 2021 UID set to nobody +Wed May 5 08:28:11 2021 Peer Connection Initiated with [AF_INET]0.0.0.0:1195 +Wed May 5 08:28:12 2021 WARNING: this configuration may cache passwords in memory -- use the auth-nocache option to prevent this +Wed May 5 08:28:12 2021 Initialization Sequence Completed +``` + +If we can't establish a connection, we need to check if the ports are opened on both sides. + +#### Routing Google Cloud Network + +After our clients have finished installing and configuring, we need to set the routes on Google. I will not map the Office side, as this is always different. But you have to route the networks for the Google network there as well. + +To set the route on Google we go to the network settings and then to Routes. Here you have to specify your office network so that the clients in the Google network know what to do. + +![Google Cloud Network Route](https://i.imgur.com/6Q2Drf4.png) + +#### IP-Masquerade-Agent + +IP masquerading is a form of network address translation (NAT) used to perform many-to-one IP address translations, which allows multiple clients to access a destination using a single IP address. A GKE cluster uses IP masquerading so that destinations outside of the cluster only receive packets from node IP addresses instead of Pod IP addresses. This is useful in environments that expect to only receive packets from node IP addresses. + +You have to edit the ip-masq-agent and this configuration is responsible for letting the pods inside the nodes, reach other parts of the GCP VPC Network, more specifically the VPN. So, it allows pods to communicate with the devices that are accessible through the VPN. + +First of all we're gonna be working inside the kube-system namespace, and we're gonna put the configmap that configures our ip-masq-agent, put this in a config file: + +```yaml +nonMasqueradeCIDRs: + - 10.24.0.0/14 # The IPv4 CIDR the cluster is using for Pods (required) + - 10.156.0.0/20 # The IPv4 CIDR of the subnetwork the cluster is using for Nodes (optional, works without but I guess its better with it) +masqLinkLocal: false +resyncInterval: 60s +``` + +and run `kubectl create configmap ip-masq-agent --from-file config --namespace kube-system` + +afterwards, configure the ip-masq-agent, put this in a `ip-masq-agent.yml` file: + +```yaml +apiVersion: extensions/v1beta1 +kind: DaemonSet +metadata: + name: ip-masq-agent + namespace: kube-system +spec: + template: + metadata: + labels: + k8s-app: ip-masq-agent + spec: + hostNetwork: true + containers: + - name: ip-masq-agent + image: gcr.io/google-containers/ip-masq-agent-amd64:v2.4.1 + args: + - --masq-chain=IP-MASQ + # To non-masquerade reserved IP ranges by default, uncomment the line below. + # - --nomasq-all-reserved-ranges + securityContext: + privileged: true + volumeMounts: + - name: config + mountPath: /etc/config + volumes: + - name: config + configMap: + # Note this ConfigMap must be created in the same namespace as the daemon pods - this spec uses kube-system + name: ip-masq-agent + optional: true + items: + # The daemon looks for its config in a YAML file at /etc/config/ip-masq-agent + - key: config + path: ip-masq-agent + tolerations: + - effect: NoSchedule + operator: Exists + - effect: NoExecute + operator: Exists + - key: "CriticalAddonsOnly" + operator: "Exists" +``` + +and run `kubectl -n kube-system apply -f ip-masq-agent.yml`. + +Now our site-to-site VPN should be set up. You should now test if you can ping the pods and if all other services work as you expect them to. diff --git a/content/blog/toc/index.ca.md b/content/blog/toc/index.ca.md deleted file mode 100644 index ae9b361..0000000 --- a/content/blog/toc/index.ca.md +++ /dev/null @@ -1,137 +0,0 @@ -+++ -title = "Taula de contingut" -date = 2022-11-01 -updated = 2024-02-16 -description = "Una publicació que mostra la taula de contingut opcional i la seva configuració." - -[taxonomies] -tags = ["funcionalitat", "markdown", "tutorial"] - -[extra] -toc = true -quick_navigation_buttons = true -social_media_card = "social_cards/ca_blog_toc.jpg" -+++ - -## Documentació -### Habilitant (i posicionant) la Taula de Contingut - -Hi ha dues formes d'habilitar la Taula de Contingut (TdC). Si vols que estigui just a sota del capçalera (com en aquesta pàgina), configura aquesta variable en el front matter del teu post: - -```toml -[extra] -toc = true -``` - -Si prefereixes col·locar la TdC a un altre lloc (per exemple, després d'una introducció), pots fer-ho afegint una línia amb aquest contingut allà on vulguis que aparegui la TdC: - -```markdown - -``` - -També pots utilitzar el shortcode `{{/* toc() */}}`, que simplement inserirà aquest text per tu ([idea de Michael Clayton](https://github.com/getzola/zola/issues/584#issuecomment-1546086781)). - -Aquest mètode renderitzarà la TdC sense el capçalera "Taula de Contingut". Això et permet utilitzar un capçalera diferent (o cap) per la TdC, o fins i tot ocultar-la de forma predeterminada: - -
- TdC oculta - -
- -El codi per aconseguir-ho: - -```markdown -
- TdC oculta - -
-``` - -*Nota*: Si actives la TdC amb `toc = true` i també afegeixes `` en algun lloc del teu text, obtindràs múltiples TdCs. - -Si col·loques la TdC en un lloc diferent del predeterminat i li afegeixes un capçalera, segurament voldràs ocultar aquest capçalera de la TdC (consulta la [secció per ocultar capçaleres](#ocultant-capcaleres-de-la-tdc)). Pots fer-ho així: - -```markdown,hl_lines=06 11-13 -+++ -title = "El títol del teu post" -date = 2034-01-11 - -[extra] -toc_ignore_pattern = "^(Taula de contingut)" -+++ - -Aquí va algun text introductori. - -### Taula de contingut - - - -## Primer encapçalament de contingut -``` - -### Establint la profunditat màxima - -Pots establir la profunditat màxima per la TdC especificant la variable `toc_levels`, que accepta un número enter entre 1 i 4: - -```toml -[extra] -toc_levels = 2 -``` - -En aquest exemple, només els dos primers nivells d'encapçalaments s'inclourien a la TdC, independentment de les seves etiquetes HTML reals (`h1`, `h2`, `h3`, etc.). Si vols incloure només el nivell principal d'encapçalaments, estableix `toc_levels = 1`. El valor per defecte de `toc_levels` és `3`. - -Tingues en compte als teus lectors quan establertis `toc_levels`. Encara que pot ser temptador incloure molts nivells imbricats per a una navegació detallada, una TdC més curta i senzilla sovint és més amigable i menys aclaparadora. - -### Ocultant capçaleres de la TdC - -És possible que vulguis amagar certes capçaleres. Per exemple, si el teu article té moltes Figures o Taules, aquestes podrien saturar la TdC. Pots ocultar capçaleres específiques a la TdC configurant la variable `toc_ignore_pattern` en la secció `[extra]` del front matter del teu post. - -Aquesta variable espera una expressió regular (regex), ja que utilitza el test [matching](https://keats.github.io/tera/docs/#matching) de Tera. El `toc_ignore_pattern` es prova contra el text del capçalera. Per exemple, per a la capçalera `### Lectura addicional`, només el text `Lectura addicional` s'utilitzaria per comprovar si coincideix amb el patró. - -Aquí tens alguns valors d'exemple per a `toc_ignore_pattern` juntament amb les capçaleres que amagarien: - -| `toc_ignore_pattern` | Exclou capçaleres que… | -|----------------------------------|------------------------------------------------------------------------| -| `Taula` | continguin "Taula" | -| `^Figura` | comencin amb "Figura" | -| (?i)(taula\|figura) | comencin amb "Taula" o "Figura" (insensible a majúscules/minúscules) | -| `\[Esborrany\]$` | acabin amb "[Esborrany]". | - -Pots provar la teva expressió regular en plataformes com [regex101](https://regex101.com/r/2dI7U2/1) per assegurar-te que funciona com esperes. - -*Nota*: Les capacitats de "look-around", incloent look-ahead i look-behind, no estan suportades. - -# Capçalera 1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -## Capçalera 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Capçalera 3.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -### Capçalera 3.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -## Capçalera 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Capçalera 3.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -### Capçalera 3.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Capçalera 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. diff --git a/content/blog/toc/index.es.md b/content/blog/toc/index.es.md deleted file mode 100644 index c4df085..0000000 --- a/content/blog/toc/index.es.md +++ /dev/null @@ -1,137 +0,0 @@ -+++ -title = "Tabla de contenido" -date = 2022-11-01 -updated = 2024-02-16 -description = "Una publicación que muestra la tabla de contenido opcional así como su configuración." - -[taxonomies] -tags = ["funcionalidad", "markdown", "tutorial"] - -[extra] -toc = true -quick_navigation_buttons = true -social_media_card = "social_cards/es_blog_toc.jpg" -+++ - -## Documentación -### Habilitando (y posicionando) la Tabla de Contenido - -Hay dos formas de habilitar la Tabla de Contenido (TdC). Si quieres que esté justo debajo del encabezado (como en esta página), configura esta variable en el front matter de tu post: - -```toml -[extra] -toc = true -``` - -Si prefieres situar la TdC en otro lugar de tu post (por ejemplo, después de una introducción), puedes hacerlo añadiendo una línea con este contenido ahí donde quieras que aparezca la TdC: - -```markdown - -``` - -También puedes usar el shortcode `{{/* toc() */}}`, que simplemente insertará ese texto por ti ([idea de Michael Clayton](https://github.com/getzola/zola/issues/584#issuecomment-1546086781)). - -Este método renderizará la TdC sin el encabezado "Tabla de contenido". Esto te permite usar un encabezado diferente (o ninguno) para la TdC, o incluso ocultarla de forma predeterminada: - -
- TdC oculta - -
- -El código para lograr esto: - -```markdown -
- TdC oculta - -
-``` - -*Nota*: Si activas la TdC a través de `toc = true` y además añades `` en algún lugar de tu texto, obtendrás múltiples TdCs. - -Si colocas la TdC en algún lugar distinto al predeterminado y le añades un encabezado, seguramente quieras ocultar dicho encabezado de la TdC (consulta la [sección para ocultar encabezados](#ocultando-encabezados-de-la-tdc)). Puedes lograrlo así: - -```markdown,hl_lines=06 11-13 -+++ -title = "El título de tu post" -date = 2034-01-11 - -[extra] -toc_ignore_pattern = "^(Tabla de contenido)" -+++ - -Aquí va algún texto introductorio. - -### Tabla de contenido - - - -## Primer encabezado de contenido -``` - -### Estableciendo la profundidad máxima - -Puedes establecer la profundidad máxima para la TdC especificando la variable `toc_levels`, que acepta un número entero entre 1 y 4: - -```toml -[extra] -toc_levels = 2 -``` - -En este ejemplo, sólo los dos primeros niveles de encabezados se incluirían en la TdC, independientemente de sus etiquetas HTML reales (`h1`, `h2`, `h3`, etc.). Si quieres incluir sólo el nivel principal de encabezados, establece `toc_levels = 1`. El valor predeterminado de `toc_levels` es `3`. - -Ten en cuenta a tus lectores al establecer `toc_levels`. Aunque puede ser tentador incluir muchos niveles anidados para una navegación detallada, una TdC más corta y sencilla suele ser más amigable y menos abrumadora. - -### Ocultando encabezados de la TdC - -Es posible que quieras ocultar ciertos encabezados. Por ejemplo, si tu artículo tiene muchas Figuras o Tablas, éstas podrían saturar la TdC. Puedes ocultar encabezados específicos en la TdC configurando la variable `toc_ignore_pattern` en la sección `[extra]` del front matter de tu post. - -Esta variable espera una expresión regular (regex), ya que utiliza el test [matching](https://keats.github.io/tera/docs/#matching) de Tera. El `toc_ignore_pattern` se prueba contra el texto del encabezado. Por ejemplo, para el encabezado `### Lectura adicional`, sólo el texto `Lectura adicional` se usaría para comprobar si concuerda con el patrón. - -Aquí tienes algunos valores de ejemplo para `toc_ignore_pattern` junto con los encabezados que ocultarían: - -| `toc_ignore_pattern` | Excluye encabezados que… | -|----------------------------------|----------------------------------------------------------------------| -| `Tabla` | contengan "Tabla" | -| `^Figura` | empiecen por "Figura" | -| (?i)(tabla\|figura) | empiecen por "Tabla" o "Figura" (insensible a mayúsculas/minúsculas) | -| `\[Borrador\]$` | terminen con "[Borrador]". | - -Puedes probar tu expresión regular en plataformas como [regex101](https://regex101.com/r/2dI7U2/1) para asegurarte de que funciona como esperas. - -*Nota*: Las capacidades de "look-around", incluyendo look-ahead y look-behind, no están soportadas. - -# Encabezado 1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -## Encabezado 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Encabezado 3.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -### Encabezado 3.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -## Encabezado 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Encabezado 3.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -### Encabezado 3.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Encabezado 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. diff --git a/content/blog/toc/index.md b/content/blog/toc/index.md deleted file mode 100644 index 9dbcce3..0000000 --- a/content/blog/toc/index.md +++ /dev/null @@ -1,136 +0,0 @@ -+++ -title = "Table of Contents" -date = 2022-11-01 -updated = 2024-02-16 -description = "A post showcasing the optional Table of Contents and its options." - -[taxonomies] -tags = ["showcase", "markdown", "tutorial"] - -[extra] -toc = true -quick_navigation_buttons = true -social_media_card = "social_cards/blog_toc.jpg" -+++ - -## Documentation -### Enabling (and positioning) the Table of Contents - -There are two ways to enable the Table of Contents (ToC). If you want it to be right below the header (like in this page) set this variable on the post's front matter: - -```toml -[extra] -toc = true -``` -If you'd rather show the ToC elsewhere on your post (e.g. after an introduction), you can do so by adding a line with this content wherever you'd like the ToC to appear: - -```markdown - -``` - -You can also use the simple `{{/* toc() */}}` shortcode, which will simply write that string for you, effectively inserting the ToC ([Michael Clayton's idea](https://github.com/getzola/zola/issues/584#issuecomment-1546086781)). - -This method will render the ToC without the "Table of Contents" header. This allows you to use a different (or no) header for the ToC, or hide it like this: - -
- Hidden ToC - -
- -The code to achieve this: - -```markdown -
- Hidden ToC - -
-``` - -*Note*: If you both set `toc = true` and have `` somewhere in your text, you'll get multiple ToCs. - -If you set a custom position and a custom header for the ToC, you'll probably want to hide it (see the [section below](#hiding-headers-from-the-toc)) like this: - -```markdown,hl_lines=06 11-13 -+++ -title = "Your Post's Title" -date = 2034-01-11 - -[extra] -toc_ignore_pattern = "^(Table of Contents)" -+++ - -Here goes some introductory text. - -### Table of Contents - - - -## First content header -``` - -### Setting a maximum depth - -You can set the maximum depth for the ToC by specifying the `toc_levels` variable, which takes an integer between 1 and 4: - -```toml -[extra] -toc_levels = 2 -``` - -In this example, only the first two levels of headers would be included in the ToC, regardless of their actual HTML tags (`h1`, `h2`, `h3`, etc.). If you want to include only the main level of headers, set `toc_levels = 1`. The default `toc_levels` value is `3`. - -Keep your readers in mind when setting the `toc_levels`. While it can be tempting to include many nested levels for detailed navigation, a shorter and simpler ToC can often be more reader-friendly and less overwhelming. Adjust the depth according to the complexity and length of your content for the best reader experience. - -### Hiding headers from the ToC - -You might want to hide certain headers. For example, if your article has many Figures or Tables, they might clutter the ToC. You can hide specific headers in the ToC with the `toc_ignore_pattern` variable. - -This variable expects a regular expression (regex), as it's using Tera's [matching](https://keats.github.io/tera/docs/#matching) test. The `toc_ignore_pattern` is tested against the text of the header, excluding the `#` character(s). For example, for the header `### Further reading`, the text `Further reading` would be checked against. - -Here are some example values for `toc_ignore_pattern` along with the headers they can hide: - -| `toc_ignore_pattern` | Excludes headers which… | -|----------------------------------|---------------------------------------------------| -| `Table` | contain "Table" | -| `^Figure` | start with "Figure" | -| (?i)(table\|figure) | start with "Table" or "Figure" (case insensitive) | -| `\[Draft\]$` | end with "[Draft]". | - -You can test your regular expression on a site like [regex101](https://regex101.com/r/2dI7U2/1) to ensure it works as expected. - -*Note*: "Look-around" capabilities, including look-ahead and look-behind, are not supported. - -# Heading 1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -## Heading 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Heading 3.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -### Heading 3.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -## Heading 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -### Heading 3.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. - -### Heading 3.2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. -#### Heading 4.1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et. diff --git a/content/blog/toc/social_cards/blog_toc.jpg b/content/blog/toc/social_cards/blog_toc.jpg deleted file mode 100644 index 534e3cd..0000000 Binary files a/content/blog/toc/social_cards/blog_toc.jpg and /dev/null differ diff --git a/content/blog/toc/social_cards/ca_blog_toc.jpg b/content/blog/toc/social_cards/ca_blog_toc.jpg deleted file mode 100644 index bf6ca88..0000000 Binary files a/content/blog/toc/social_cards/ca_blog_toc.jpg and /dev/null differ diff --git a/content/blog/toc/social_cards/es_blog_toc.jpg b/content/blog/toc/social_cards/es_blog_toc.jpg deleted file mode 100644 index 355cc05..0000000 Binary files a/content/blog/toc/social_cards/es_blog_toc.jpg and /dev/null differ diff --git a/content/blog/why-docker-isnt-always-a-good-idea/index.md b/content/blog/why-docker-isnt-always-a-good-idea/index.md new file mode 100644 index 0000000..1ac873c --- /dev/null +++ b/content/blog/why-docker-isnt-always-a-good-idea/index.md @@ -0,0 +1,39 @@ ++++ +title = "Why Docker isn't always a good idea Part 1" +date = 2022-09-15 +updated = 2022-09-15 +description = "To briefly explain the situation. We have a **HAProxy** running on a Debian server as a Docker container. This is the entrance node to a **Docker Swarm** cluster." + +[taxonomies] +tags = ["docker", "network", "haproxy"] + +[extra] +toc = false +quick_navigation_buttons = true ++++ +To briefly explain the situation: +We have a **HAProxy** running on a Debian server as a Docker container. This is the entrance node to a **Docker Swarm** cluster. + +Now, in the last few days, there have been several small outages of the websites running in the **Docker Swarm** cluster. After getting an overview, we noticed that no new connections can be established. + +As soon as we restarted the **HAProxy**, everything went back to normal. After that I did some research on TCP connections and found out that there is a socket limit. + +In Linux we have a limit of sockets that can be opened at the same time. At this point, I unfortunately did not understand that this limit refers to a client connection. So we note that a client can establish a maximum of **65535** socket connections to a server. + +This limit refers to a range of ports that you release. We had about 35k sockets available on our server (**HAProxy**). Now the pages are always down when this limit is reached. Thinking back for a moment, we should never get to that limit as it relates to a client. But the problem with us was that Docker's softlayer network didn't route the client address cleanly through the NAT, so everything was coming from one client. + +After stopping the Docker container and installing **HAProxy** natively on the server, we were able to cross that boundary as well. + +## Assumption + +Because we NAT all the requests through the Docker network, the source address is always the same. This is how we reach the socket limit. If we omit the NAT and use HAProxy natively, we do not reach this limit, because the source address is no longer always the same. + +![Network Address Translation](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/NAT_Concept-en.svg/1920px-NAT_Concept-en.svg.png "Network Address Translation") + +## Conclusion + +With this setup, we get overhead into the system that we don't need. We have an extra abstraction layer, every request has to go through the Docker network and we reach the socket limit. All these points fall away when we use it natively. + +If we use a lot of micro services it is important that we use something like Docker, because then we can share the kernel and it makes the deployment much easier. + +But if we have only one application that is very important, it is better to keep it simple. diff --git a/content/ca.jpg b/content/ca.jpg deleted file mode 100644 index 985bb7c..0000000 Binary files a/content/ca.jpg and /dev/null differ diff --git a/content/es.jpg b/content/es.jpg deleted file mode 100644 index c56f364..0000000 Binary files a/content/es.jpg and /dev/null differ diff --git a/content/pages/_index.ca.md b/content/pages/_index.ca.md deleted file mode 100644 index 927d16f..0000000 --- a/content/pages/_index.ca.md +++ /dev/null @@ -1,7 +0,0 @@ -+++ -render = false -insert_anchor_links = "left" - -[extra] -hide_from_feed = true -+++ diff --git a/content/pages/_index.es.md b/content/pages/_index.es.md deleted file mode 100644 index 927d16f..0000000 --- a/content/pages/_index.es.md +++ /dev/null @@ -1,7 +0,0 @@ -+++ -render = false -insert_anchor_links = "left" - -[extra] -hide_from_feed = true -+++ diff --git a/content/pages/about/index.ca.md b/content/pages/about/index.ca.md deleted file mode 100644 index 4ecb30e..0000000 --- a/content/pages/about/index.ca.md +++ /dev/null @@ -1,26 +0,0 @@ -+++ -title = "Sobre mi" -template = "info-page.html" -path = "/ca/about" - -[extra] -quick_navigation_buttons = true -+++ - -Benvingut a la demo de [**tabi**](https://github.com/welpo/tabi), un tema per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics rapidíssim. - -**tabi** és una obra d'Óscar Fernández ([welpo](https://github.com/welpo/) a GitHub), inicialment creat per al [seu lloc personal](https://osc.garden/ca/). És un tema modern i ple de funcionalitats que ofereix configuracions predefinides raonables i segures. - -Busques instruccions detallades o consells sobre com utilitzar **tabi**? Les seccions del [blog](https://welpo.github.io/tabi/ca/blog/) i de l'[arxiu](https://welpo.github.io/tabi/ca/archive/) contenen la documentació del tema, que inclou des de mostres de funcions fins a guies detallades. - -## Característiques - -**tabi** ofereix suport per a [diversos idiomes](https://welpo.github.io/tabi/ca/blog/faq-languages/), [aparença personalitzable](https://welpo.github.io/tabi/ca/blog/customise-tabi/), [integració de comentaris](https://welpo.github.io/tabi/blog/comments/), i molt més, tot amb un enfocament en el rendiment ([tot el JavaScript és opcional](https://welpo.github.io/tabi/ca/blog/javascript/)) i la [seguretat](https://welpo.github.io/tabi/ca/blog/security/). - -## Contribucions - -Tota aportació és benvinguda! Agraïm els informes d'errors, millores en traduccions o documentació (per mínimes que siguin), sol·licituds de noves funcions… Consulta les [Pautes de Contribució](https://github.com/welpo/tabi/blob/main/CONTRIBUTING.md) per saber com pots contribuir. Gràcies! - -## Llicència - -El codi està disponible sota la [llicència MIT](https://choosealicense.com/licenses/mit/). diff --git a/content/pages/about/index.es.md b/content/pages/about/index.es.md deleted file mode 100644 index 8f74bef..0000000 --- a/content/pages/about/index.es.md +++ /dev/null @@ -1,26 +0,0 @@ -+++ -title = "Sobre mí" -template = "info-page.html" -path = "/es/about" - -[extra] -quick_navigation_buttons = true -+++ - -Bienvenido a la demo de [**tabi**](https://github.com/welpo/tabi), un tema para [Zola](https://www.getzola.org/), un rapidísimo generador de sitios estáticos. - -**tabi** es obra de Óscar Fernández ([welpo](https://github.com/welpo/) en GitHub), inicialmente creado para [su página personal](https://osc.garden/es/). Es un tema moderno y lleno de funcionalidades que ofrece configuraciones predeterminadas sensatas y seguras. - -¿Buscas instrucciones detalladas o consejos sobre cómo utilizar **tabi**? Las secciones del [blog](https://welpo.github.io/tabi/es/blog/) y del [archivo](https://welpo.github.io/tabi/es/archive/) contienen la documentación del tema, que incluye desde muestras de funciones hasta guías detalladas. - -## Características - -**tabi** ofrece soporte para [varios idiomas](https://welpo.github.io/tabi/es/blog/faq-languages/), [apariencia personalizable](https://welpo.github.io/tabi/es/blog/customise-tabi/), [integración de comentarios](https://welpo.github.io/tabi/es/blog/comments/), y mucho más, todo con un enfoque en el rendimiento ([todo el JavaScript es opcional](https://welpo.github.io/tabi/es/blog/javascript/)) y la [seguridad](https://welpo.github.io/tabi/es/blog/security/). - -## Contribuciones - -¡Toda aportación es bienvenida! Agradecemos los reportes de errores, mejoras en traducciones o documentación (por mínimas que sean), solicitudes de nuevas funciones… Consulta las [Pautas de Contribución](https://github.com/welpo/tabi/blob/main/CONTRIBUTING.md) para saber cómo puedes contribuir. ¡Gracias! - -## Licencia - -El código está disponible bajo la [licencia MIT](https://choosealicense.com/licenses/mit/). diff --git a/content/pages/about/index.md b/content/pages/about/index.md index 5db48c3..3b85f81 100644 --- a/content/pages/about/index.md +++ b/content/pages/about/index.md @@ -7,20 +7,14 @@ path = "about" quick_navigation_buttons = true +++ -Welcome to the demo of [**tabi**](https://github.com/welpo/tabi), a theme for [Zola](https://www.getzola.org/), a fast static site generator. +I'm Alex Wellnitz, a DevOps architect and software developer with a passion for sharing knowledge and experience. As a seasoned professional, I've had the privilege of working in various roles, including my current position as a DevOps Engineer at Materna. -**tabi** is the creation of Óscar Fernández ([welpo](https://github.com/welpo/) on GitHub), initially designed for [his personal site](https://osc.garden/). It is a feature-rich, modern theme that provides sane (and safe) defaults. +With expertise in web development, Kubernetes, network security, and more, I'm committed to helping others accelerate their web performance and tackle complex technical challenges. You can find me sharing my insights on various topics through blog posts and articles. -Looking for detailed instructions or tips on using **tabi**? The [blog](https://welpo.github.io/tabi/blog/) and [archive](https://welpo.github.io/tabi/archive/) sections feature the theme's documentation, offering a variety of articles from feature overviews to step-by-step guides. +### What drives me? -## Features +My drive is fueled by a desire to learn, grow, and help others succeed in the ever-evolving landscape of technology. When I'm not working or writing, you can find me exploring new projects, experimenting with innovative tools, or simply enjoying the beauty of the digital world. -**tabi** supports [multiple languages](https://welpo.github.io/tabi/blog/faq-languages/), [customisable appearance](https://welpo.github.io/tabi/blog/customise-tabi/), [comment integrations](https://welpo.github.io/tabi/blog/comments/), and much more, all with an emphasis on performance ([all JavaScript is optional](https://welpo.github.io/tabi/blog/javascript/)) and [security](https://welpo.github.io/tabi/blog/security/). +### Let's connect! -## Contributing - -Contributions are much appreciated! We appreciate bug reports, improvements to translations or documentation (however minor), feature requests… Check out the [Contributing Guidelines](https://github.com/welpo/tabi/blob/main/CONTRIBUTING.md) to learn how you can help. Thank you! - -## License - -The code is available under the [MIT license](https://choosealicense.com/licenses/mit/). +If you have any questions, topics you'd like to discuss, or just want to say hello, please feel free to reach out. diff --git a/content/pages/experience/index.md b/content/pages/experience/index.md new file mode 100644 index 0000000..955a68e --- /dev/null +++ b/content/pages/experience/index.md @@ -0,0 +1,87 @@ ++++ +title = "Experience" +template = "info-page.html" +path = "experience" + +[extra] +quick_navigation_buttons = true ++++ + +### DevOps Engineer, Materna SE + +**since 2023** + +As a key globally active IT service provider, Materna advise and assist you in all aspects of digitization and provide tailor-made technologies for agile, flexible and secure IT. + +- **Infrastructure as Code (IaC)**: + - Develop and maintain infrastructure as code scripts using tools like Terraform, Ansible, or CloudFormation to automate the provisioning of infrastructure resources. +- **Continuous Integration (CI) and Continuous Deployment (CD)**: + - Implement and manage CI/CD pipelines using tools like Jenkins, Travis CI, or GitLab CI to automate the software delivery process. +- **Containerization and Orchestration**: + - Work with Docker containers and container orchestration platforms like Kubernetes to improve scalability and resource utilization. +- **Monitoring and Logging**: + - Set up monitoring and logging solutions (e.g., Prometheus, ELK Stack) to track application performance, identify issues, and troubleshoot problems proactively. +- **Collaboration and Communication**: + - Foster collaboration between development and operations teams, ensuring effective communication and knowledge sharing. +- **Infrastructure Optimization**: + - Analyze and optimize infrastructure costs, resource utilization, and performance to achieve cost-efficiency and scalability. +- **Troubleshooting and Support**: + - Respond to incidents, diagnose problems, and provide support to ensure system reliability and availability. + +### DevOps Engineer, Apozin GmbH + +**until 2023** + +Apozin turns visions into a competitive advantage. Our team of pharmacists, PTA's, graphic designers, web designers, sales professionals, marketing specialists, and programmers realize holistic concepts that we constantly evolve and improve for our clients. + +- Operation and design of Kubernetes clusters at multiple locations +- Design and implementation of backup strategies +- Deployment of various services (including HAProxy, MariaDB, MongoDB, Elasticsearch, NGINX) +- Design and operation of comprehensive monitoring solutions (Zabbix, Grafana, Prometheus, Graylog) +- Design and setup of build pipelines with Jenkins, Docker, and FluxCD +- Administration of various servers in different environments (Google Cloud, Hetzner, AWS, Digital Ocean, Hosting.de) + +### Fullstack .Net Developer, prointernet + +**until 2019** + +Agency for internet and design founded in 1998, established in Kastellaun in the Hunsrück region, operating worldwide, and at home on the internet. A team of designers, developers, and consultants who love what they do. + +- Development of web applications (C#, Dotnet, JS) +- Design of websites (Composite C1) +- Company Website + +## Projects + +### DevOps Engineer, Cofinity-X + +**since 2023** + +Cofinity-X is the first operator of the Catena-X network, connecting automotive partners at every level of the value chain. As a DevOps engineer, I was responsible for the enablement services. + +- Deployment of various open source Projects with GitOps and ArgoCD +- Managing projects on a Kubernetes clusters +- Communication with end customers (support, troubleshooting) +- Analysis of problems and spikes in load +- Planning new projects and deploying to the Kubernetes clusters + +### DevOps Engineer, Amamed + +**until 2023** + +Just right for your pharmacy! amamed is the only digital solution on the market that puts your pharmacy at the center and makes you fully equipped, secure, and flexible online. + +- Provision of various services (including reverse proxies, databases, load balancers) +- Operation of Docker Swarm clusters +- Product Website + +### DevOps Engineer, deineApotheke + +**until 2021** + +"deine Apotheke" supports the pharmacies in your neighborhood and paves the way for you to access pharmacy services: through our app, you can select your pharmacy and pre-order medications, even with a prescription. + +- Provision of various services (including backend APIs, MariaDB clusters, NATs, Redis) +- Design and operation of Kubernetes clusters (3 locations) +- Management of automated pipelines via Bitbucket Pipelines (continuous integration) +- IT administration for 6 individuals (SysOps) \ No newline at end of file diff --git a/content/pages/privacy/index.ca.md b/content/pages/privacy/index.ca.md deleted file mode 100644 index e11071a..0000000 --- a/content/pages/privacy/index.ca.md +++ /dev/null @@ -1,97 +0,0 @@ -+++ -title = "Política de privacitat" -path = "/ca/privacy" -date = 2023-10-31 -updated = 2024-05-12 -+++ - -Aquesta política de privacitat detalla com recollim i processem les teves dades en aquest lloc web. - -{{ toc() }} - -## Quines dades recollim? - -### Navegació general {#what-general} - -Mentre navegues pel lloc, no es recull cap informació personal. - -### Comentaris {#what-comments} - -No recollim cap dada quan envieu un comentari o reacció, però GitHub sí que ho fa per proporcionar el servei. - -### Anàlisis {#what-analytics} - -Per a la millora del lloc web, es recullen les dades no personals següents: - -- **Referent**: la font que t'ha portat a aquest lloc. -- **URL sol·licitat**: la pàgina específica que visites. -- **Agent d'usuari**: identifica el navegador i el sistema operatiu que utilitzes (per exemple, "Safari 17.0, Mac OS X"). -- **Nom del país**: el país des d'on estàs visitant, determinat per la teva adreça IP. -- **Mida de pantalla**: les dimensions de la pantalla del teu dispositiu. -- **Data i hora**: quan accedeixes al lloc. -- **Sessió de navegació**: un codi d'identificació temporal generat a partir de la adreça IP, informació del navegador i un número aleatori. Aquest s'utilitza per reconèixer la sessió de navegació durant 8 hores. Passat aquest temps, el codi s'esborra de la memòria i no s'emmagatzema enlloc. - -No seguim els visitants únics a través de sessions, ni seguim quant de temps et quedes al lloc o on vas en marxar. - -## Com recollim aquestes dades? - -### Comentaris {#how-comments} - -Les dades associades als comentaris es recullen utilitzant [giscus](https://giscus.app/), una plataforma que permet comentaris basada en GitHub. - -### Anàlisis {#how-analytics} - -Les dades no personals es recullen utilitzant una instància autoallotjada de [GoatCounter](https://www.goatcounter.com/), una plataforma d'anàlisis web de codi obert i respectuosa amb la privacitat. - -## Com utilitzarem les dades? - -Les dades enviades a GitHub s'utilitzen per mostrar el teu comentari al lloc. - -Les dades no personals s'utilitzen per generar estadístiques sobre el lloc, com el nombre de visitants per dia, o les pàgines i referents més populars. Aquestes dades s'utilitzen per millorar aquest lloc de demostració i el tema tabi. Pots veure les estadístiques generades a partir d'aquestes dades a la [pàgina d'estadístiques públiques](https://tabi-stats.osc.garden/). - -Totes les dades recollides estan públicament disponibles, ja sigui en forma de comentaris o estadístiques. - -No utilitzem les dades per cap altre propòsit. - -## Com emmagatzemem les dades? - -Les dades dels comentaris no s'emmagatzemen per Giscus, tal com s'especifica a la seva [política de privacitat](https://github.com/giscus/giscus/blob/main/PRIVACY-POLICY.md#what-data-do-we-collect). Les dades s'emmagatzemen als servidors de GitHub. Vegeu la [política de privacitat de GitHub](https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement). - -Les dades d'anàlisis s'emmagatzemen en un servidor allotjat per [Vultr](https://www.vultr.com/). El servidor es troba a París, França. - -El servidor segueix les millors pràctiques de la indústria per a la seguretat, incloent actualitzacions de seguretat automàtiques, una política de seguretat de contingut estricta, un tallafocs, accés SSH basat en claus, etc. - -## Quant de temps emmagatzemarem les dades? - -Els comentaris s'emmagatzemen indefinidament, o fins que sol·licitis la seva eliminació. - -La resta de dades s'emmagatzemen indefinidament. - -## Quins són els teves drets de protecció de dades? - -Depenent del processament i de la base legal, hi ha diverses possibilitats disponibles per a que mantinguis el control sobre les teves dades personals: - -- Dret d'accés a les teves dades -- Dret de modificar les teves dades -- Dret d'oposar-se al processament de les teves dades personals -- Dret de limitar el processament de les teves dades -- Dret de supressió de les teves dades -- Dret de retirar el teu consentiment - -Si fas una sol·licitud, tenim un mes per respondre't. Si vols exercir algun d'aquests drets, si us plau, posa't en contacte amb nosaltres utilitzant la icona de correu electrònic al peu de pàgina del lloc. - -## Galetes (cookies) - -El lloc no utilitza galetes. - -## Polítiques de privacitat d'altres llocs web - -Aquest lloc web conté enllaços a altres llocs web. Aquesta política de privacitat només s'aplica a aquest lloc web, així que si cliques en un enllaç cap a un altre lloc web, hauries de llegir la seva política de privacitat. - -## Canvis a la política de privacitat - -Mantindrem aquesta política de privacitat sota revisió regular i col·locarem qualsevol actualització en aquesta pàgina web. Pots veure l'última data d'actualització d'aquesta política de privacitat, així com l'historial de canvis sota el títol d'aquesta pàgina. - -## Com posar-te en contacte amb nosaltres - -Si tens alguna pregunta sobre aquesta política de privacitat, les dades que tenim sobre tu, o vols exercir algun dels teus drets de protecció de dades, si us plau, no dubtis a posar-te en contacte amb nosaltres utilitzant la icona de correu electrònic al peu de pàgina del lloc. diff --git a/content/pages/privacy/index.es.md b/content/pages/privacy/index.es.md deleted file mode 100644 index 835ac60..0000000 --- a/content/pages/privacy/index.es.md +++ /dev/null @@ -1,97 +0,0 @@ -+++ -title = "Política de privacidad" -path = "/es/privacy" -date = 2023-10-31 -updated = 2024-05-12 -+++ - -Esta política de privacidad describe cómo recopilamos y procesamos tus datos en este sitio web. - -{{ toc() }} - -## ¿Qué datos recopilamos? - -### Navegación general {#what-general} - -Mientras navegas por el sitio, no se recopila ninguna información personal. - -### Comentarios {#what-comments} - -No recopilamos ningún dato cuando envías un comentario o reacción, pero GitHub sí lo hace para proporcionar el servicio. - -### Análisis {#what-analytics} - -Para mejorar el sitio web, se recopila la siguiente información no personal: - -- **Referente**: la fuente que te llevó a este sitio. -- **URL solicitado**: la página específica que visitas. -- **Agente de usuario**: identifica el navegador y el sistema operativo que utilizas (por ejemplo, "Safari 17.0, Mac OS X"). -- **Nombre del país**: el país desde el que estás visitando, determinado por tu dirección IP. -- **Tamaño de pantalla**: las dimensiones de la pantalla de tu dispositivo. -- **Fecha y hora**: cuándo accedes al sitio. -- **Sesión de navegación**: un código de identificación temporal generado a partir de tu dirección IP, información del navegador y un número aleatorio. Este código se utiliza para reconocer la sesión de navegación durante 8 horas. Después de ese tiempo, el código se elimina de la memoria y no se almacena en ningún lugar. - -No rastreamos visitantes únicos a través de sesiones, ni el tiempo que permaneces en el sitio o a dónde vas después de salir. - -## ¿Cómo recopilamos estos datos? - -### Comentarios {#how-comments} - -Los datos asociados con los comentarios se recopilan utilizando [giscus](https://giscus.app/), una plataforma que habilita comentarios basados en GitHub. - -### Análisis {#how-analytics} - -Los datos no personales se recopilan mediante una instancia autoalojada de [GoatCounter](https://www.goatcounter.com/), una plataforma de análisis web de código abierto y respetuosa con la privacidad. - -## ¿Cómo utilizaremos los datos? - -Los datos enviados a GitHub se utilizan para mostrar tu comentario en el sitio. - -Los datos no personales se utilizan para generar estadísticas sobre el sitio, como el número de visitantes por día o las páginas y referentes más populares. Estos datos se utilizan para mejorar este sitio de demostración y el tema tabi. Puedes ver las estadísticas generadas a partir de estos datos en la [página de estadísticas públicas](https://tabi-stats.osc.garden/). - -Todos los datos recopilados están públicamente disponibles, ya sea en forma de comentarios o estadísticas. - -No utilizamos los datos para ningún otro propósito. - -## ¿Cómo almacenamos los datos? - -Los datos de los comentarios no son almacenados por Giscus, como se especifica en su [política de privacidad](https://github.com/giscus/giscus/blob/main/PRIVACY-POLICY.md#what-data-do-we-collect). Los datos se almacenan en servidores de GitHub. Consulta la [política de privacidad de GitHub](https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement). - -Los datos de análisis se almacenan en un servidor alojado por [Vultr](https://www.vultr.com/). El servidor está ubicado en París, Francia. - -El servidor sigue las mejores prácticas de la industria en cuanto a seguridad, incluidas actualizaciones de seguridad automáticas, una estricta Política de Seguridad de Contenido, un cortafuegos, acceso SSH basado en clave, etc. - -## ¿Cuánto tiempo almacenaremos los datos? - -Los comentarios se almacenan indefinidamente o hasta que solicites su eliminación. - -El resto de los datos se almacena indefinidamente. - -## ¿Cuáles son tus derechos de protección de datos? - -Dependiendo del procesamiento y la base legal, dispones de varias opciones para mantener el control sobre tus datos personales: - -- Derecho a acceder a tus datos -- Derecho a enmendar tus datos -- Derecho a oponerte al procesamiento de tus datos personales -- Derecho a limitar el procesamiento de tus datos -- Derecho a que se eliminen tus datos -- Derecho a retirar tu consentimiento - -Si realizas una solicitud, tenemos un mes para responderte. Si deseas ejercer alguno de estos derechos, contáctanos utilizando el icono de correo electrónico en el pie de página del sitio. - -## Cookies - -El sitio no utiliza cookies. - -## Políticas de privacidad de otros sitios web - -Este sitio web contiene enlaces a otros sitios web. Esta política de privacidad sólo se aplica a este sitio web, por lo que si haces clic en un enlace a otro sitio web, debes leer su política de privacidad. - -## Cambios en la política de privacidad - -Mantenemos esta política de privacidad bajo revisión regular y colocamos cualquier actualización en esta página web. Puedes consultar la fecha de actualización de esta política de privacidad, así como el historial de cambios bajo el título de la página. - -## Cómo contactarnos - -Si tienes alguna pregunta sobre esta política de privacidad, los datos que tenemos sobre ti o si te gustaría ejercer alguno de tus derechos de protección de datos, no dudes en contactarnos utilizando el icono de correo electrónico en el pie de página del sitio. diff --git a/content/projects/_index.ca.md b/content/projects/_index.ca.md deleted file mode 100644 index b454ba3..0000000 --- a/content/projects/_index.ca.md +++ /dev/null @@ -1,11 +0,0 @@ -+++ -title = "Projectes" -sort_by = "weight" -template = "cards.html" -insert_anchor_links = "left" - -[extra] -social_media_card = "projects/ca_projects.jpg" -show_reading_time = false -quick_navigation_buttons = true -+++ diff --git a/content/projects/_index.es.md b/content/projects/_index.es.md deleted file mode 100644 index 93ab3fd..0000000 --- a/content/projects/_index.es.md +++ /dev/null @@ -1,11 +0,0 @@ -+++ -title = "Proyectos" -sort_by = "weight" -template = "cards.html" -insert_anchor_links = "left" - -[extra] -social_media_card = "projects/es_projects.jpg" -show_reading_time = false -quick_navigation_buttons = true -+++ diff --git a/content/projects/doteki/index.ca.md b/content/projects/doteki/index.ca.md deleted file mode 100644 index f4fa83c..0000000 --- a/content/projects/doteki/index.ca.md +++ /dev/null @@ -1,63 +0,0 @@ -+++ -title = "dōteki" -description = "Afegeix contingut dinàmic al teu perfil de GitHub amb un sistema intuïtiu de plugins." -weight = 30 - -[taxonomies] -tags = ["GitHub Actions", "automatització", "Python"] - -[extra] -local_image = "projects/doteki/doteki_logo.webp" -social_media_card = "social_cards/projects_doteki.jpg" -canonical_url = "https://osc.garden/ca/projects/doteki/" -add_src_to_code_block = true -+++ - -**dōteki** actualitza el teu perfil de GitHub automàticament. Afegeix les teves últimes publicacions del blog, la música que escoltes o qualsevol altre contingut dinàmic mitjançant plugins. - -![logo de dōteki: un riu passant per un bosc de bambú](https://cdn.jsdelivr.net/gh/welpo/doteki@main/website/static/img/logo.png) - -#### [GitHub](https://github.com/welpo/doteki) • [Lloc web](https://doteki.org/) • [Documentació](https://doteki.org/docs/) {.centered-text} - -## Com funciona - -1. Afegeix marcadors al teu README: - -{{ add_src_to_code_block(src="README.md") }} -```md - - -``` - -2. Configura què hi va: - -{{ add_src_to_code_block(src="doteki.toml") }} -```toml -[sections.blog] -plugin = "feed" -url = "https://osc.garden/atom.xml" # Substitueix amb el teu feed. - -[sections.last_updated] -plugin = "current_date" -inline = true -``` - -3. Configura l'[Acció de GitHub](https://github.com/welpo/doteki-action). - -Això és tot! El teu README s'actualitzarà automàticament. - -## Característiques - -- **Sistema de plugins**: Mostra [entrades del blog](https://doteki.org/docs/plugins/feed), [música](https://doteki.org/docs/plugins/lastfm), o [crea el teu propi plugin](https://doteki.org/docs/developer-guide/plugin-standard) -- **Configuració simple**: Un arxiu TOML, una Acció de GitHub -- **Flexible**: Cada plugin té les seves pròpies opcions (ordre, entrades màximes, format…) -- **[Documentació detallada](https://doteki.org/docs/)**: Informació detallada sobre com configurar i utilitzar **dōteki** i els seus plugins. Inclou [instruccions clares per als desenvolupadors](https://doteki.org/docs/developer-guide/) que vulguin contribuir. - -## Documentació - -Consulta la [documentació](https://doteki.org/docs/) per a: - -- [Guia d'inici](https://doteki.org/docs/) -- [Plugins disponibles](https://doteki.org/docs/category/plugins) -- [Desenvolupament de plugins](https://doteki.org/docs/developer-guide/) -- [Opcions de configuració](https://doteki.org/docs/configuration/) diff --git a/content/projects/doteki/index.es.md b/content/projects/doteki/index.es.md deleted file mode 100644 index f3bb455..0000000 --- a/content/projects/doteki/index.es.md +++ /dev/null @@ -1,63 +0,0 @@ -+++ -title = "dōteki" -description = "Añade contenido dinámico a tu perfil de GitHub con un sistema intuitivo de plugins." -weight = 30 - -[taxonomies] -tags = ["GitHub Actions", "automatización", "Python"] - -[extra] -local_image = "projects/doteki/doteki_logo.webp" -social_media_card = "social_cards/projects_doteki.jpg" -canonical_url = "https://osc.garden/es/projects/doteki/" -add_src_to_code_block = true -+++ - -**dōteki** actualiza tu perfil de GitHub automáticamente. Añade tus últimas publicaciones del blog, la música que escuchas o cualquier otro contenido dinámico mediante plugins. - -![logo de dōteki: un río pasando por un bosque de bambú](https://cdn.jsdelivr.net/gh/welpo/doteki@main/website/static/img/logo.png) - -#### [GitHub](https://github.com/welpo/doteki) • [Sitio web](https://doteki.org/) • [Documentación](https://doteki.org/docs/) {.centered-text} - -## Cómo funciona - -1. Añade marcadores a tu README: - -{{ add_src_to_code_block(src="README.md") }} -```md - - -``` - -2. Configura qué va ahí: - -{{ add_src_to_code_block(src="doteki.toml") }} -```toml -[sections.blog] -plugin = "feed" -url = "https://osc.garden/atom.xml" # Reemplaza con tu feed. - -[sections.last_updated] -plugin = "current_date" -inline = true -``` - -3. Configura la [Acción de GitHub](https://github.com/welpo/doteki-action). - -¡Eso es todo! Tu README se actualizará automáticamente. - -## Características - -- **Sistema de plugins**: Muestra [entradas del blog](https://doteki.org/docs/plugins/feed), [música](https://doteki.org/docs/plugins/lastfm), o [crea tu propio plugin](https://doteki.org/docs/developer-guide/plugin-standard) -- **Configuración simple**: Un archivo TOML, una Acción de GitHub -- **Flexible**: Cada plugin tiene sus propias opciones (orden, entradas máximas, formato…) -- **[Documentación detallada](https://doteki.org/docs/)**: Información detallada sobre cómo configurar y usar **dōteki** y sus plugins. Incluye [instrucciones claras para los desarrolladores](https://doteki.org/docs/developer-guide/) que quieran contribuir. - -## Documentación - -Consulta la [documentación](https://doteki.org/docs/) para: - -- [Guía de inicio rápido](https://doteki.org/docs/) -- [Plugins disponibles](https://doteki.org/docs/category/plugins) -- [Desarrollo de plugins](https://doteki.org/docs/developer-guide/) -- [Opciones de configuración](https://doteki.org/docs/configuration/) diff --git a/content/projects/git-sumi/git-sumi_logo.webp b/content/projects/git-sumi/git-sumi_logo.webp deleted file mode 100644 index 90fd11b..0000000 Binary files a/content/projects/git-sumi/git-sumi_logo.webp and /dev/null differ diff --git a/content/projects/git-sumi/index.ca.md b/content/projects/git-sumi/index.ca.md deleted file mode 100644 index cdee76e..0000000 --- a/content/projects/git-sumi/index.ca.md +++ /dev/null @@ -1,33 +0,0 @@ -+++ -title = "git-sumi" -description = "El linter de missatges de commit no opinat basat en Rust." -weight = 10 - -[taxonomies] -tags = ["Git", "Rust", "Continuous Integration", "GitHub Actions", "CLI", "automatització"] - -[extra] -local_image = "projects/git-sumi/git-sumi_logo.webp" -social_media_card = "social_cards/projects_git-sumi.jpg" -canonical_url = "https://osc.garden/ca/projects/git-sumi/" -+++ - -**git-sumi** és el linter de missatges de commit no opinat escrit en Rust. - -{% wide_container() %} - -{% end %} - -#### [GitHub](https://github.com/welpo/git-sumi) • [Lloc web](https://sumi.rs/) • [Documentació](https://sumi.rs/docs/) {.centered-text} - -## Característiques principals - -- **Regles personalitzables**: Configura regles per a Conventional Commits, límits de longitud, ús de [Gitmoji](https://gitmoji.dev/) i [més](https://sumi.rs/docs/rules). -- **Informe d'errors clar**: Proporciona errors detallats, fent que la correcció sigui senzilla i educativa. -- **Integració senzilla**: Com a binari únic, git-sumi s'integra fàcilment al teu flux de treball. També pots fer servir l'[Acció de GitHub](https://github.com/welpo/git-sumi-action) per validar commits (o títols de PR) sense instal·lar res. - -## Bones pràctiques de desenvolupament - -- **Cobertura de codi**: 98% de cobertura en tests; un linter ha de ser fiable. -- **[Integració](https://github.com/welpo/git-sumi/blob/main/.github/workflows/ci.yml) i [publicació](https://github.com/welpo/git-sumi/blob/main/.github/workflows/release.yml) contínua**: Fluxos automatitzats per a testing i publicació de binaris multiplataforma a crates.io, PyPI i GitHub releases. -- **Documentació**: [Documentació completa](https://sumi.rs/docs/) amb [guia ràpida](https://sumi.rs/docs/), [exemples](https://sumi.rs/docs/examples), [regles](https://sumi.rs/docs/rules), [integració](https://sumi.rs/docs/integration), [FAQ](https://sumi.rs/docs/faq)... diff --git a/content/projects/git-sumi/index.es.md b/content/projects/git-sumi/index.es.md deleted file mode 100644 index 5830eee..0000000 --- a/content/projects/git-sumi/index.es.md +++ /dev/null @@ -1,33 +0,0 @@ -+++ -title = "git-sumi" -description = "El linter de mensajes de commit no opinado basado en Rust." -weight = 10 - -[taxonomies] -tags = ["Git", "Rust", "Continuous Integration", "GitHub Actions", "CLI", "automatización"] - -[extra] -local_image = "projects/git-sumi/git-sumi_logo.webp" -social_media_card = "social_cards/projects_git-sumi.jpg" -canonical_url = "https://osc.garden/es/projects/git-sumi/" -+++ - -**git-sumi** es el linter de mensajes de commit no opinado escrito en Rust. - -{% wide_container() %} - -{% end %} - -#### [GitHub](https://github.com/welpo/git-sumi) • [Sitio web](https://sumi.rs/) • [Documentación](https://sumi.rs/docs/) {.centered-text} - -## Características principales - -- **Reglas personalizables**: Configura reglas para [Conventional Commits](https://www.conventionalcommits.org/), límites de longitud, uso de [Gitmoji](https://gitmoji.dev/) y [más](https://sumi.rs/docs/rules). -- **Reporte de errores claro**: Proporciona errores detallados, haciendo que la corrección sea sencilla y educativa. -- **Integración sencilla**: Al ser único binario, git-sumi se integra fácilmente en tu flujo de trabajo. Puedes usar la [Acción de GitHub](https://github.com/welpo/git-sumi-action) para validar commits (o títulos de PR) sin instalar nada. - -## Buenas prácticas de desarrollo - -- **Cobertura de código**: 98% de cobertura de código; un linter debe ser robusto. -- **[Integración](https://github.com/welpo/git-sumi/blob/main/.github/workflows/ci.yml) y [publicación](https://github.com/welpo/git-sumi/blob/main/.github/workflows/release.yml) continua**: Flujos automatizados para testing y publicación de binarios multiplataforma en crates.io, PyPI y GitHub releases. -- **Documentación**: [Documentación completa](https://sumi.rs/docs/) con [guía rápida](https://sumi.rs/docs/), [ejemplos](https://sumi.rs/docs/examples), [reglas](https://sumi.rs/docs/rules), [integración](https://sumi.rs/docs/integration), [FAQ](https://sumi.rs/docs/faq)... diff --git a/content/projects/git-sumi/index.md b/content/projects/git-sumi/index.md deleted file mode 100644 index 0cb59b8..0000000 --- a/content/projects/git-sumi/index.md +++ /dev/null @@ -1,33 +0,0 @@ -+++ -title = "git-sumi" -description = "The non-opinionated Rust-based commit message linter." -weight = 10 - -[taxonomies] -tags = ["Git", "Rust", "Continuous Integration", "GitHub Actions", "CLI", "automation"] - -[extra] -local_image = "projects/git-sumi/git-sumi_logo.webp" -social_media_card = "social_cards/projects_git-sumi.jpg" -canonical_url = "https://osc.garden/projects/git-sumi/" -+++ - -**git-sumi** is the non-opinionated commit message linter written in Rust. - -{% wide_container() %} - -{% end %} - -#### [GitHub](https://github.com/welpo/git-sumi) • [Website](https://sumi.rs/) • [Documentation](https://sumi.rs/docs/) {.centered-text} - -## Main features - -- **Customizable rules**: Configure rules to enforce [Conventional Commits](https://www.conventionalcommits.org/), length limits, [Gitmoji](https://gitmoji.dev/) usage, and [more](https://sumi.rs/docs/rules). -- **Clear error reporting**: Provides detailed error reporting, making fixing commit messages straightforward and educational. -- **Seamless integration**: As a single binary, git-sumi easily integrates into your existing workflow with minimal setup. You can even use the [GitHub Action](https://github.com/welpo/git-sumi-action) to lint your commits (or PR titles) without installing anything. - -## Development best practices - -- **Comprehensive code coverage**: 98% test coverage; linting needs to be reliable. -- **Continuous [integration](https://github.com/welpo/git-sumi/blob/main/.github/workflows/ci.yml) and [deployment](https://github.com/welpo/git-sumi/blob/main/.github/workflows/release.yml)**: Automated workflows for testing and releasing cross-compiled binaries to crates.io, PyPI and GitHub releases. -- **Documentation**: [Comprehensive documentation](https://sumi.rs/docs/) with a [quick start guide](https://sumi.rs/docs/), [examples](https://sumi.rs/docs/examples), [rules](https://sumi.rs/docs/rules), [integration](https://sumi.rs/docs/integration), [FAQ](https://sumi.rs/docs/faq)… diff --git a/content/projects/git-sumi/social_cards/projects_git-sumi.jpg b/content/projects/git-sumi/social_cards/projects_git-sumi.jpg deleted file mode 100644 index 3f609f8..0000000 Binary files a/content/projects/git-sumi/social_cards/projects_git-sumi.jpg and /dev/null differ diff --git a/content/projects/nani/index.ca.md b/content/projects/nani/index.ca.md deleted file mode 100644 index abd9663..0000000 --- a/content/projects/nani/index.ca.md +++ /dev/null @@ -1,85 +0,0 @@ -+++ -title = "nani" -description = "Script Bash per crear URLs públiques a partir d'arxius o text en servidors remots." -weight = 50 - -[taxonomies] -tags = ["bash", "CLI"] - -[extra] -local_image = "projects/nani/nani_logo.webp" -canonical_url = "https://osc.garden/ca/projects/tabi/" -social_media_card = "social_cards/ca_projects_nani.jpg" -+++ - -Si treballes en un servidor remot, saps que compartir arxius amb altres persones pot ser un procés feixuc. `nani` és un script en Bash dissenyat per simplificar aquesta tasca. Amb una sola comanda, pots convertir arxius locals o URLs en enllaços accessibles, facilitant el procés de compartir directament des del teu servidor. - -[![nani logo](nani_logo.webp)](https://github.com/welpo/nani/) - -#### [Veure a GitHub](https://github.com/welpo/nani) {.centered-text} - -## Característiques clau - -- **Tot tipus d'arxius**: gestiona directoris, arxius FLAC, arxius de text i fins i tot URLs a vídeos. -- **Personalitzable**: adapta els ajustos editant l'script o un arxiu de configuració. -- **Notificacions**: notificacions a l'escriptori i integració amb el portaretrats per a una millor experiència. - -## Inici ràpid - -1. Col·loca `nani` en un directori dins del teu PATH. -2. Fes que l'script sigui executable. - -Per a passos d'instal·lació més detallats, [consulta la documentació completa](https://github.com/welpo/nani#-install). - -## Ús - -```bash -$ nani Ruta/A/foto.png -https://example.com/nani/hjRGLZB.png -``` - -Compartir un directori mantenint el seu nom original: - -```bash -$ nani -o Ruta/A/Directori -https://example.com/nani/Directori.zip -``` - -Pots configurar diverses opcions a través dels paràmetres. Aquí tens la sortida de `nani --help`: - -{% wide_container() %} - -``` -Usage: nani [options] -Provides public URL from input. - -Input handling: - Directory Will be stored using zip (or symbolic link) - FLAC Can be transcoded to MP3 - Text (html, php...) Extension can be set to .txt - Other files New copy/hard link/symbolic link at output directory - URL to video (e.g: youtube) Downloaded using yt-dlp - Other URLs Downloaded using wget - -Modify the first lines of the script to change how nani behaves: quiet mode, -enabling/disabling transcoding, length of the string, extension truncation... - -Settings and options: - -a, --alias Revert the hard link setting - -c, --cleanup Remove all files on /nani/ except index.html - -h, --help Display this help and exit - -i, --insert Open nano to enter text. Saved in output directory as .txt - -k, --keep Output dir becomes /nani/k/, to set different cleanup rules - -l, --list List files in output directory /nani/ - -n, --name Use custom name (e.g. nani -n DesiredName ) - -N, --notify Revert the notify option - -o, --original Preserve original file name - -p, --push Send push notification - -q, --quiet Revert the quiet setting - -s, --string Force a certain string length (e.g. nani -s 32 ) - -t, --transcode Revert the transcode setting - -x, --xclip Revert the xclip setting - -y, --symbolic Create a symbolic link for files and directories -``` - -{% end %} diff --git a/content/projects/nani/index.es.md b/content/projects/nani/index.es.md deleted file mode 100644 index 0b338aa..0000000 --- a/content/projects/nani/index.es.md +++ /dev/null @@ -1,84 +0,0 @@ -+++ -title = "nani" -description = "Script Bash para crear URLs públicas a partir de archivos o texto en servidores remotos." -weight = 50 - -[taxonomies] -tags = ["bash", "CLI"] - -[extra] -local_image = "projects/nani/nani_logo.webp" -canonical_url = "https://osc.garden/es/projects/tabi/" -social_media_card = "social_cards/es_projects_nani.jpg" -+++ - -Si trabajas en un servidor remoto, sabrás que compartir archivos con otras personas puede ser un proceso tedioso. `nani` es un script en Bash diseñado para simplificar esta tarea. Con un solo comando, puedes convertir archivos locales en enlaces públicos, facilitando el proceso de compartir directamente desde tu servidor. - -[![nani logo](nani_logo.webp)](https://github.com/welpo/nani/) - -#### [Ver en GitHub](https://github.com/welpo/nani) {.centered-text} - -## Características clave - -- **Todo tipo de archivos**: maneja directorios, archivos FLAC, archivos de texto e incluso URLs a vídeos. -- **Personalizable**: adapta los ajustes editando el script o un archivo de configuración. -- **Notificaciones**: notificaciones en el escritorio e integración con el portapapeles para una mejor experiencia. - -## Inicio rápido - -1. Coloca `nani` en un directorio dentro de tu PATH. -2. Haz el script ejecutable. - -Para pasos de instalación más detallados, [consulta la documentación completa](https://github.com/welpo/nani#-install). - -## Uso - -```bash -$ nani Ruta/A/foto.png -https://example.com/nani/hjRGLZB.png -``` - -Compartir un directorio manteniendo su nombre original: - -```bash -$ nani -o Ruta/A/Directorio -https://example.com/nani/Directorio.zip -``` - -Puedes configurar varias opciones a través de los parámetros. Aquí tienes la salida de `nani` --help: -{% wide_container() %} - -``` -Usage: nani [options] -Provides public URL from input. - -Input handling: - Directory Will be stored using zip (or symbolic link) - FLAC Can be transcoded to MP3 - Text (html, php...) Extension can be set to .txt - Other files New copy/hard link/symbolic link at output directory - URL to video (e.g: youtube) Downloaded using yt-dlp - Other URLs Downloaded using wget - -Modify the first lines of the script to change how nani behaves: quiet mode, -enabling/disabling transcoding, length of the string, extension truncation... - -Settings and options: - -a, --alias Revert the hard link setting - -c, --cleanup Remove all files on /nani/ except index.html - -h, --help Display this help and exit - -i, --insert Open nano to enter text. Saved in output directory as .txt - -k, --keep Output dir becomes /nani/k/, to set different cleanup rules - -l, --list List files in output directory /nani/ - -n, --name Use custom name (e.g. nani -n DesiredName ) - -N, --notify Revert the notify option - -o, --original Preserve original file name - -p, --push Send push notification - -q, --quiet Revert the quiet setting - -s, --string Force a certain string length (e.g. nani -s 32 ) - -t, --transcode Revert the transcode setting - -x, --xclip Revert the xclip setting - -y, --symbolic Create a symbolic link for files and directories -``` - -{% end %} diff --git a/content/projects/nani/index.md b/content/projects/nani/index.md deleted file mode 100644 index 4372312..0000000 --- a/content/projects/nani/index.md +++ /dev/null @@ -1,85 +0,0 @@ -+++ -title = "nani" -description = "Bash script to create public URLs from files or text on remote servers." -weight = 50 - -[taxonomies] -tags = ["bash", "CLI"] - -[extra] -local_image = "projects/nani/nani_logo.webp" -canonical_url = "https://osc.garden/projects/tabi/" -social_media_card = "social_cards/projects_nani.jpg" -+++ - -If you're working on a remote server, you know that sharing files with others can often involve multiple steps. `nani` is a Bash script designed to streamline this process. By executing a single command, you can convert local files or URLs into accessible links, allowing for easier sharing right from your server. - -[![nani logo](nani_logo.webp)](https://github.com/welpo/nani/) - -#### [View on GitHub](https://github.com/welpo/nani) {.centered-text} - -## Key Features - -- **Multiple File Types**: Handles directories, FLAC files, text files, and even URLs to videos. -- **Customisable**: Tailor settings via a config file or runtime flags. -- **Notifications**: Desktop notifications and clipboard integration for a better experience. - -## Quick Start - -1. Place `nani` in a directory within your PATH. -2. Make the script executable. - -For detailed installation steps, [read the full documentation](https://github.com/welpo/nani#-install). - -## Usage - -```bash -$ nani Path/To/picture.png -https://example.com/nani/hjRGLZB.png -``` - -**Share a directory keeping its original name**: - -```bash -$ nani -o Path/To/Directory -https://example.com/nani/Directory.zip -``` - -Additional control is available through flags. Here's the output of `nani --help`: - -{% wide_container() %} - -``` -Usage: nani [options] -Provides public URL from input. - -Input handling: - Directory Will be stored using zip (or symbolic link) - FLAC Can be transcoded to MP3 - Text (html, php...) Extension can be set to .txt - Other files New copy/hard link/symbolic link at output directory - URL to video (e.g: youtube) Downloaded using yt-dlp - Other URLs Downloaded using wget - -Modify the first lines of the script to change how nani behaves: quiet mode, -enabling/disabling transcoding, length of the string, extension truncation... - -Settings and options: - -a, --alias Revert the hard link setting - -c, --cleanup Remove all files on /nani/ except index.html - -h, --help Display this help and exit - -i, --insert Open nano to enter text. Saved in output directory as .txt - -k, --keep Output dir becomes /nani/k/, to set different cleanup rules - -l, --list List files in output directory /nani/ - -n, --name Use custom name (e.g. nani -n DesiredName ) - -N, --notify Revert the notify option - -o, --original Preserve original file name - -p, --push Send push notification - -q, --quiet Revert the quiet setting - -s, --string Force a certain string length (e.g. nani -s 32 ) - -t, --transcode Revert the transcode setting - -x, --xclip Revert the xclip setting - -y, --symbolic Create a symbolic link for files and directories -``` - -{% end %} diff --git a/content/projects/nani/nani_logo.webp b/content/projects/nani/nani_logo.webp deleted file mode 100644 index 08d7175..0000000 Binary files a/content/projects/nani/nani_logo.webp and /dev/null differ diff --git a/content/projects/nani/social_cards/ca_projects_nani.jpg b/content/projects/nani/social_cards/ca_projects_nani.jpg deleted file mode 100644 index a5e960a..0000000 Binary files a/content/projects/nani/social_cards/ca_projects_nani.jpg and /dev/null differ diff --git a/content/projects/nani/social_cards/es_projects_nani.jpg b/content/projects/nani/social_cards/es_projects_nani.jpg deleted file mode 100644 index 520a876..0000000 Binary files a/content/projects/nani/social_cards/es_projects_nani.jpg and /dev/null differ diff --git a/content/projects/nani/social_cards/projects_nani.jpg b/content/projects/nani/social_cards/projects_nani.jpg deleted file mode 100644 index a454908..0000000 Binary files a/content/projects/nani/social_cards/projects_nani.jpg and /dev/null differ diff --git a/content/projects/ramu/index.ca.md b/content/projects/ramu/index.ca.md deleted file mode 100644 index 479eb7e..0000000 --- a/content/projects/ramu/index.ca.md +++ /dev/null @@ -1,33 +0,0 @@ -+++ -title = "ラム (ramu)" -description = "Una aplicació web per practicar la lectura i comprensió auditiva de nombres en japonès." -weight = 35 - -[taxonomies] -tags = ["Japonès", "interactiu", "web app", "web", "PWA", "JavaScript"] - -[extra] -local_image = "projects/ramu/ramu_logo.webp" -canonical_url = "https://osc.garden/ca/projects/ramu/" -social_media_card = "social_cards/projects_ramu.jpg" -+++ - -ramu és una aplicació web progressiva per practicar la lectura i comprensió auditiva de nombres en japonès. El nom reflecteix el seu propòsit: aconseguir accès aleatori (RAM; memòria d'accés aleatori) als nombres, en contraposició a una memòria seqüencial (1, 2, 3…). - -{% wide_container() %} - -{% end %} - -#### [Prova-la ara](https://ramu.osc.garden) • [GitHub](https://github.com/welpo/ramu) • [Article](https://osc.garden/ca/blog/ramu-japanese-numbers-practice-web-app/) {.centered-text} - -## Característiques - -- Pràctica amb nombres aràbics (123…) i japonesos (一二三…) -- Dos modes de pràctica: lectura i comprensió auditiva -- Rangs numèrics configurables (des de 0 fins a més de 100.000.000) -- Pràctica de comptadors (個、本、匹…) -- Funciona sense connexió com a aplicació web progressiva -- Control complet per teclat (espai/ per següent, esc per aturar) -- Compatible amb lectors de pantalla per a la pràctica amb nombres aràbics - -[![targeta social de ramu](social_cards/projects_ramu.jpg)](https://ramu.osc.garden) diff --git a/content/projects/ramu/index.es.md b/content/projects/ramu/index.es.md deleted file mode 100644 index 16eeb65..0000000 --- a/content/projects/ramu/index.es.md +++ /dev/null @@ -1,33 +0,0 @@ -+++ -title = "ラム (ramu)" -description = "Una aplicación web para practicar la lectura y comprensión auditiva de números en japonés." -weight = 35 - -[taxonomies] -tags = ["Japonés", "interactivo", "web app", "web", "PWA", "JavaScript"] - -[extra] -local_image = "projects/ramu/ramu_logo.webp" -canonical_url = "https://osc.garden/es/projects/ramu/" -social_media_card = "social_cards/projects_ramu.jpg" -+++ - -ramu es una aplicación web progresiva para practicar la lectura y comprensión auditiva de números en japonés. El nombre refleja su propósito: lograr acceso aleatorio (RAM; memoria de acceso aleatorio) a los números, en contraposición a una memoria secuencial (1, 2, 3…). - -{% wide_container() %} - -{% end %} - -#### [Pruébala ahora](https://ramu.osc.garden) • [GitHub](https://github.com/welpo/ramu) • [Artículo](https://osc.garden/es/blog/ramu-japanese-numbers-practice-web-app/) {.centered-text} - -## Características - -- Práctica con números arábigos (123…) y japoneses (一二三…) -- Dos modos de práctica: lectura y comprensión auditiva -- Rangos numéricos configurables (desde 0 hasta más de 100.000.000) -- Práctica de contadores (個、本、匹…) -- Funciona sin conexión como aplicación web progresiva -- Control por teclado (espacio/ para siguiente, esc para detener) -- Compatible con lectores de pantalla para la práctica con números arábigos - -[![tarjeta social de ramu](social_cards/projects_ramu.jpg)](https://ramu.osc.garden) diff --git a/content/projects/ramu/index.md b/content/projects/ramu/index.md deleted file mode 100644 index 8492384..0000000 --- a/content/projects/ramu/index.md +++ /dev/null @@ -1,33 +0,0 @@ -+++ -title = "ラム (ramu)" -description = "A web app to practice reading and listening to Japanese numbers." -weight = 35 - -[taxonomies] -tags = ["Japanese", "interactive", "web app", "web", "PWA", "JavaScript"] - -[extra] -local_image = "projects/ramu/ramu_logo.webp" -canonical_url = "https://osc.garden/projects/ramu/" -social_media_card = "social_cards/projects_ramu.jpg" -+++ - -ramu is a Progressive Web App to practice reading and listening to Japanese numbers. The name reflects its purpose: achieving RAM (Random Access Memory) to numbers, as opposed to sequential memory (1, 2, 3…). - -{% wide_container() %} - -{% end %} - -#### [Try it now](https://ramu.osc.garden) • [GitHub](https://github.com/welpo/ramu) • [Blog post](https://osc.garden/blog/ramu-japanese-numbers-practice-web-app/) {.centered-text} - -## Features - -- Practice with both Arabic (123…) and Japanese (一二三…) numerals -- Two practice modes: reading and listening comprehension -- Configurable number ranges (from 0 to over 100,000,000) -- Counter word practice (個、本、匹…) -- Works offline as a Progressive Web App -- Full keyboard control (space/ for next, esc to stop) -- Screen reader friendly for Arabic numeral practice - -[![ramu social media card](social_cards/projects_ramu.jpg)](https://ramu.osc.garden) diff --git a/content/projects/ramu/media/ラム_demo.mp4 b/content/projects/ramu/media/ラム_demo.mp4 deleted file mode 100644 index 0a96a11..0000000 Binary files a/content/projects/ramu/media/ラム_demo.mp4 and /dev/null differ diff --git a/content/projects/ramu/ramu_logo.webp b/content/projects/ramu/ramu_logo.webp deleted file mode 100644 index 1eee491..0000000 Binary files a/content/projects/ramu/ramu_logo.webp and /dev/null differ diff --git a/content/projects/ramu/social_cards/projects_ramu.jpg b/content/projects/ramu/social_cards/projects_ramu.jpg deleted file mode 100644 index 09757fd..0000000 Binary files a/content/projects/ramu/social_cards/projects_ramu.jpg and /dev/null differ diff --git a/content/projects/streaming-royalties-calculator/index.ca.md b/content/projects/streaming-royalties-calculator/index.ca.md deleted file mode 100644 index bfa69f8..0000000 --- a/content/projects/streaming-royalties-calculator/index.ca.md +++ /dev/null @@ -1,29 +0,0 @@ -+++ -title = "Calculadora de royalties de streaming" -description = "Una eina per calcular els royalties de streaming per a músics." -weight = 45 - -[taxonomies] -tags = ["música", "interactiu", "web app", "web", "JavaScript", "anàlisi de dades"] - -[extra] -local_image = "projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp" -canonical_url = "https://osc.garden/ca/projects/streaming-royalties-calculator/" -social_media_card = "social_cards/ca_projects_streaming_royalties_calculator.jpg" -+++ - -La Calculadora de royalties de streaming permet als músics estimar els seus guanys de plataformes com Spotify, Apple Music, Instagram, TikTok i més. - -Pots introduir una quantitat objectiu de guanys per veure quantes reproduccions es necessiten a cada plataforma, o introduir el nombre de reproduccions per servei per calcular les royalties esperades. Aquí tens una captura de pantalla: - - - {{ dual_theme_image(light_src="https://cdn.jsdelivr.net/gh/welpo/osc.garden@main/content/blog/data-analysis-music-streaming/img/calculator_light.ca.webp", dark_src="https://cdn.jsdelivr.net/gh/welpo/osc.garden@main/content/blog/data-analysis-music-streaming/img/calculator_dark.ca.webp" alt="Calculadora de royalties de streaming") }} - - -#### [Prova-la!](https://osc.garden/ca/royalties-calculator/) • [Codi font (JavaScript)](https://github.com/welpo/osc.garden/blob/main/content/pages/royalties-calculator/js/streamsMonthCalculator.js) {.centered-text} - -## Característiques principals - -- **Dades precises**: Basades en l'últim any de [les meves pròpies dades de royalties](https://osc.garden/ca/blog/data-analysis-music-streaming/). -- **Múltiples plataformes**: Inclou Tidal, Spotify, Apple Music, Facebook, Deezer, TikTok i més. -- **Modes de càlcul**: Utilitza la taxa de pagament mitjana, mediana, mínima o màxima per estimar els guanys. diff --git a/content/projects/streaming-royalties-calculator/index.es.md b/content/projects/streaming-royalties-calculator/index.es.md deleted file mode 100644 index a9f598f..0000000 --- a/content/projects/streaming-royalties-calculator/index.es.md +++ /dev/null @@ -1,29 +0,0 @@ -+++ -title = "Calculadora de royalties de streaming" -description = "Una herramienta para calcular los royalties de streaming para músicos." -weight = 45 - -[taxonomies] -tags = ["música", "interactivo", "web app", "web", "JavaScript", "análisis de datos"] - -[extra] -local_image = "projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp" -canonical_url = "https://osc.garden/es/projects/streaming-royalties-calculator/" -social_media_card = "social_cards/es_projects_streaming_royalties_calculator.jpg" -+++ - -La Calculadora de royalties de streaming permite a los músicos estimar sus ganancias de plataformas como Spotify, Apple Music, Instagram, TikTok y más. - -Puedes introducir una cantidad objetivo de ganancias para ver cuántas reproducciones se necesitan en cada plataforma, o introducir el número de reproducciones por servicio para calcular las royalties esperadas. Aquí tienes una captura de pantalla: - - - {{ dual_theme_image(light_src="https://cdn.jsdelivr.net/gh/welpo/osc.garden@main/content/blog/data-analysis-music-streaming/img/calculator_light.es.webp", dark_src="https://cdn.jsdelivr.net/gh/welpo/osc.garden@main/content/blog/data-analysis-music-streaming/img/calculator_dark.es.webp" alt="Calculadora de royalties de streaming") }} - - -#### [¡Pruébala!](https://osc.garden/es/royalties-calculator/) • [Código fuente (JavaScript)](https://github.com/welpo/osc.garden/blob/main/content/pages/royalties-calculator/js/streamsMonthCalculator.js) {.centered-text} - -## Características principales - -- **Datos precisos**: Basada en el último año de [mis propios datos de royalties](https://osc.garden/es/blog/data-analysis-music-streaming/). -- **Múltiples plataformas**: Incluye Tidal, Spotify, Apple Music, Facebook, Deezer, TikTok y más. -- **Modos de cálculo**: Utiliza la tasa de pago media, mediana, mínima o máxima para estimar las ganancias. diff --git a/content/projects/streaming-royalties-calculator/index.md b/content/projects/streaming-royalties-calculator/index.md deleted file mode 100644 index c531834..0000000 --- a/content/projects/streaming-royalties-calculator/index.md +++ /dev/null @@ -1,29 +0,0 @@ -+++ -title = "Streaming Royalties Calculator" -description = "A tool to calculate streaming royalties for musicians." -weight = 45 - -[taxonomies] -tags = ["music", "interactive", "web app", "web", "JavaScript", "data analysis"] - -[extra] -local_image = "projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp" -canonical_url = "https://osc.garden/projects/streaming-royalties-calculator/" -social_media_card = "social_cards/projects_streaming_royalties_calculator.jpg" -+++ - -The Streaming Royalties Calculator allows musicians to estimate their earnings from platforms like Spotify, Apple Music, Instagram, TikTok, and more. - -You can either input a target earnings amount to see how many streams are needed on each platform, or enter the number of streams per service to calculate the expected royalties. Here's a screenshot: - - - {{ dual_theme_image(light_src="https://cdn.jsdelivr.net/gh/welpo/osc.garden@main/content/blog/data-analysis-music-streaming/img/calculator_light.webp", dark_src="https://cdn.jsdelivr.net/gh/welpo/osc.garden@main/content/blog/data-analysis-music-streaming/img/calculator_dark.webp" alt="Streaming Royalties Calculator") }} - - -#### [Try it!](https://osc.garden/royalties-calculator/) • [JavaScript Source](https://github.com/welpo/osc.garden/blob/main/content/pages/royalties-calculator/js/streamsMonthCalculator.js) {.centered-text} - -## Main Features - -- **Accurate data**: Based on the last year of [my own royalties data](https://osc.garden/blog/data-analysis-music-streaming/). -- **Multiple platforms**: Includes Tidal, Spotify, Apple Music, Facebook, Deezer, TikTok, and more. -- **Calculation modes**: Use the mean, median, minimum or maximum values to estimate the earnings. diff --git a/content/projects/streaming-royalties-calculator/social_cards/ca_projects_streaming_royalties_calculator.jpg b/content/projects/streaming-royalties-calculator/social_cards/ca_projects_streaming_royalties_calculator.jpg deleted file mode 100644 index f2402a9..0000000 Binary files a/content/projects/streaming-royalties-calculator/social_cards/ca_projects_streaming_royalties_calculator.jpg and /dev/null differ diff --git a/content/projects/streaming-royalties-calculator/social_cards/es_projects_streaming_royalties_calculator.jpg b/content/projects/streaming-royalties-calculator/social_cards/es_projects_streaming_royalties_calculator.jpg deleted file mode 100644 index 228b063..0000000 Binary files a/content/projects/streaming-royalties-calculator/social_cards/es_projects_streaming_royalties_calculator.jpg and /dev/null differ diff --git a/content/projects/streaming-royalties-calculator/social_cards/projects_streaming_royalties_calculator.jpg b/content/projects/streaming-royalties-calculator/social_cards/projects_streaming_royalties_calculator.jpg deleted file mode 100644 index 3bb7530..0000000 Binary files a/content/projects/streaming-royalties-calculator/social_cards/projects_streaming_royalties_calculator.jpg and /dev/null differ diff --git a/content/projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp b/content/projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp deleted file mode 100644 index 19c8fe4..0000000 Binary files a/content/projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp and /dev/null differ diff --git a/content/projects/tabi/index.ca.md b/content/projects/tabi/index.ca.md deleted file mode 100644 index 64e0ea2..0000000 --- a/content/projects/tabi/index.ca.md +++ /dev/null @@ -1,70 +0,0 @@ -+++ -title = "tabi" -description = "Un tema de Zola ràpid, lleuger i modern amb suport multilingüe." -weight = 40 - -[taxonomies] -tags = ["web", "JavaScript"] - -[extra] -local_image = "projects/tabi/tabi.webp" -canonical_url = "https://osc.garden/ca/projects/tabi/" -social_media_card = "social_cards/ca_projects_tabi.jpg" -+++ - -[**tabi**](https://github.com/welpo/tabi) és un tema modern i ric en funcionalitat per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics molt ràpid. - -{{ full_width_image(src="https://cdn.jsdelivr.net/gh/welpo/tabi@main/light_dark_screenshot.png", alt="Modes clar i fosc de tabi") }} - -#### [Veure a GitHub](https://github.com/welpo/tabi) • [Demo i documentación](https://welpo.github.io/tabi/ca/) {.centered-text} - -## Característiques - -- [Estableix qualsevol idioma com a predeterminat](https://welpo.github.io/tabi/ca/blog/faq-languages/#com-estableixo-la-llengua-predeterminada-del-meu-lloc). Configura el teu lloc en xinès, espanyol, francès, hindi… o qualsevol [altre idioma compatible](https://welpo.github.io/tabi/ca/blog/faq-languages/#quines-llengues-admet-tabi). La interfície del tema es traduirà en conseqüència. -- [Integració amb repositoris remots](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings#integracio-amb-repositoris-git) a GitHub, GitLab, Gitea i Codeberg per a l'historial de commits i mostrar el codi font del lloc. -- Tema clar i fosc. S'adapta a la configuració del sistema operatiu, amb un interruptor a la barra de navegació. -- [Suport multilingüe complet](https://welpo.github.io/tabi/ca/blog/faq-languages/#com-gestiona-tabi-el-suport-multilingue). Afegeix tants idiomes com vulguis i deixa que els teus usuaris triin amb el selector d'idioma. -- [Suport per a sèries](https://welpo.github.io/tabi/ca/blog/series/) per crear contingut seqüencial com tutorials, cursos i històries multipart. -- Puntuació perfecta en Lighthouse (Rendiment, Accessibilitat, Millors Pràctiques i SEO). -- Suport per a [diagrames de Mermaid](https://welpo.github.io/tabi/ca/blog/shortcodes/#diagrames-de-mermaid) per a crear diagrames i gràfics amb text. -- Ressaltat de sintaxi de codi amb colors basats en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé. -- Suport per a [comentaris usant giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/ca/blog/comments/). -- [Cerca local](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#cerca) amb una interfície accessible i multilingüe. -- Tot el JavaScript es pot [deshabilitar completament](https://welpo.github.io/tabi/ca/blog/javascript/). -- [Codificació de correu](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#correu-electronic-codificat) per a protecció contra spam. -- [Mapa del lloc estilitzat i llegible per humans](https://welpo.github.io/tabi/sitemap.xml). -- [Capçaleres de seguretat personalitzables](https://welpo.github.io/tabi/ca/blog/security/). -- [Feed Atom estilitzat i llegible per humans](https://welpo.github.io/tabi/ca/atom.xml). -- [Enllaços de retrocés per a notes al peu](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#enllacos-de-retorn-a-les-notes-a-peu-de-pagina). -- [Taula de continguts personalitzable](https://welpo.github.io/tabi/ca/blog/toc/). -- [Avís de drets d'autor personalitzat](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#copyright). -- [Botó de copiar per a blocs de codi](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#boto-de-copiar-en-blocs-de-codi). -- [URL canòniques personalitzables](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#url-canonica). -- [Targetes per a xarxes socials](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#targetes-per-a-xarxes-socials). -- [Botons de navegació ràpida](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#botons-de-navegacio-rapida). -- [Shortcodes personalitzats](https://welpo.github.io/tabi/ca/blog/shortcodes/). -- [Skins personalitzables](https://welpo.github.io/tabi/ca/blog/customise-tabi/). -- [Publicacions fixades](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#fixar-entrades). -- [Pàgina de projectes](https://welpo.github.io/tabi/ca/projects/). -- Disseny responsive. -- Suport de [KaTeX](https://katex.org/). -- [Enllaços socials](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#icones-de-xarxes-socials). -- [Pàgina d'arxiu](https://welpo.github.io/tabi/ca/archive/). -- [Etiquetes](https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#etiquetes). - -## Pràctiques de desenvolupament - -- **[Conventional Commits](https://www.conventionalcommits.org) i [Gitmoji](https://gitmoji.dev/)**: els missatges de commit segueixen formats estandarditzats per facilitar la llegibilitat. -- **Seguiment d'incidències**: cada error o nova funcionalitat té el seu propi tiquet, que s'enllaça amb els commits de codi i PRs o problemes relacionats. -- **Comentaris detallats**: els tiquets es documenten amb imatges, vídeos i descripcions detallades per facilitar una comunicació i resolució de problemes efectives. -- **Referències creuades**: enllacem tots els tiquets amb els commits de codi, pull requests o problemes relacionats per a una traçabilitat completa. - -## Evolució del projecte - -**tabi** va néixer com a disseny per al meu lloc web personal, [osc.garden](https://osc.garden). Malgrat les seves arrels personals, des del principi es van implementar bones pràctiques per assegurar la qualitat i la mantenibilitat. Des d'aleshores, el tema ha aconseguit atraure una comunitat activa de col·laboradors a GitHub. - -## Inicia el teu recorregut com a escriptor amb tabi - -Tens alguna cosa a dir. Potser vols parlar sobre com els lingüistes encara no han acordat una [definició de "paraula"](https://ca.wikipedia.org/wiki/Mot), o sobre la teva experiència explorant els diferents [palos del flamenc](https://ca.wikipedia.org/wiki/Estils_flamencs), o de com vas aconseguir resoldre un error d'un projecte de codi obert popular. - -**tabi** t'ofereix la base ideal per al teu espai d'escriptura, permetent-te centrar-te en les teves paraules mentre Zola i tabi s'encarreguen de l'aspecte tècnic. Submergeix-te en el món dels blogs amb un sistema que fa que cada publicació sigui un plaer escriure i llegir. La teva veu té valor; comparteix-la amb el món. diff --git a/content/projects/tabi/index.es.md b/content/projects/tabi/index.es.md deleted file mode 100644 index da055e3..0000000 --- a/content/projects/tabi/index.es.md +++ /dev/null @@ -1,70 +0,0 @@ -+++ -title = "tabi" -description = "Un tema de Zola rápido, ligero y moderno con soporte multilingüe." -weight = 40 - -[taxonomies] -tags = ["web", "JavaScript"] - -[extra] -local_image = "projects/tabi/tabi.webp" -canonical_url = "https://osc.garden/es/projects/tabi/" -social_media_card = "social_cards/es_projects_tabi.jpg" -+++ - -[**tabi**](https://github.com/welpo/tabi) es un tema moderno y rico en funcionalidad para [Zola](https://www.getzola.org/), un generador de sitios web estáticos muy rápido. - -{{ full_width_image(src="https://cdn.jsdelivr.net/gh/welpo/tabi@main/light_dark_screenshot.png", alt="Modos claro y oscuro de tabi") }} - -#### [Ver en GitHub](https://github.com/welpo/tabi) • [Demo y documentación](https://welpo.github.io/tabi/es/) {.centered-text} - -## Características - -- [Establece cualquier idioma como predeterminado](https://welpo.github.io/tabi/es/blog/faq-languages/#como-establezco-el-idioma-predeterminado-de-mi-sitio). Configura tu sitio en chino, español, francés, hindi… o cualquier [otro idioma compatible](https://welpo.github.io/tabi/es/blog/faq-languages/#que-idiomas-admite-tabi). La interfaz del tema se traducirá en consecuencia. -- [Integración con repositorios remotos](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#integracion-con-repositorios-git) en GitHub, GitLab, Gitea y Codeberg para el historial de commits y mostrar el código fuente del sitio. -- [Soporte multilingüe completo](https://welpo.github.io/tabi/es/blog/faq-languages/#como-gestiona-tabi-el-soporte-multilingue). Añade tantos idiomas como desees y deja que tus usuarios elijan con un selector de idioma. -- Tema claro y oscuro. Se adapta a la configuración del sistema operativo, con un interruptor en la barra de navegación. -- [Soporte para series](https://welpo.github.io/tabi/es/blog/series/) para crear contenido secuencial como tutoriales, cursos e historias en varias partes. -- Puntuación perfecta en Lighthouse (Rendimiento, Accesibilidad, Mejores Prácticas y SEO). -- Soporte para [diagramas de Mermaid](https://welpo.github.io/tabi/es/blog/shortcodes/#diagramas-de-mermaid) para crear diagramas y gráficos con texto. -- Resaltado de sintaxis de código con colores basados en [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé. -- Soporte para [comentarios usando giscus, utterances, Hyvor Talk o Isso](https://welpo.github.io/tabi/es/blog/comments/). -- Todo el JavaScript se puede [deshabilitar completamente](https://welpo.github.io/tabi/es/blog/javascript/). -- [Búsqueda local](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#busqueda) con una interfaz accesible y multilingüe. -- [Codificación de correo](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#correo-electronico-codificado) para protección contra spam. -- [Mapa de sitio web estilizado y legible por humanos](https://welpo.github.io/tabi/sitemap.xml). -- [Feed de Atom estilizado y legible por humanos](https://welpo.github.io/tabi/es/atom.xml). -- [Aviso de derechos de autor personalizado](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#copyright). -- [Cabeceras de seguridad personalizables](https://welpo.github.io/tabi/es/blog/security/). -- [Botón de copiar para bloques de código](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#boton-de-copiar-en-bloques-de-codigo). -- [Enlaces de retroceso para notas al pie](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#enlaces-de-retorno-en-notas-al-pie). -- [Tabla de contenidos personalizable](https://welpo.github.io/tabi/es/blog/toc/). -- [URL canónicas personalizables](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#url-canonica). -- [Botones de navegación rápida](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#botones-de-navegacion-rapida). -- [Tarjetas para redes sociales](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#tarjetas-para-redes-sociales). -- [Shortcodes personalizados](https://welpo.github.io/tabi/es/blog/shortcodes/). -- [Skins personalizables](https://welpo.github.io/tabi/es/blog/customise-tabi/). -- [Publicaciones fijadas](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#fijar-publicaciones). -- [Página de proyectos](https://welpo.github.io/tabi/es/projects/). -- Diseño responsive. -- Soporte de [KaTeX](https://katex.org/). -- [Página de archivo](https://welpo.github.io/tabi/es/archive/). -- [Enlaces sociales](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#iconos-de-redes-sociales). -- [Etiquetas](https://welpo.github.io/tabi/es/blog/mastering-tabi-settings/#etiquetas). - -## Prácticas de desarrollo - -- **[Conventional Commits](https://www.conventionalcommits.org) y [Gitmoji](https://gitmoji.dev/)**: los mensajes de commit siguen formatos estandarizados para mejorar la legibilidad. -- **Seguimiento de problemas**: cada error o nueva funcionalidad tiene su propio ticket, que se vincula a los commits de código y PRs o problemas relacionados. -- **Comentarios detallados**: los tickets se documentan con imágenes, vídeos y descripciones detalladas para facilitar una comunicación y resolución de problemas efectivas. -- **Referencias cruzadas**: enlazamos todos los tickets con los commits de código, pull requests o problemas relacionados para una rastreabilidad completa. - -## Evolución del proyecto - -**tabi** nació como diseño para mi sitio personal, [osc.garden](https://osc.garden/es/). A pesar de sus raíces personales, desde el principio se implementaron buenas prácticas para asegurar la calidad y mantenibilidad. Desde entonces, el tema ha logrado atraer a una comunidad activa de contribuyentes en GitHub. - -## Empieza tu aventura escribiendo con tabi - -Tienes algo que decir. Tal vez se trate de cómo los lingüistas aún no han acordado una [definición de "palabra"](https://es.wikipedia.org/wiki/Palabra), o sobre tu experiencia explorando los diferentes [palos del flamenco](https://es.wikipedia.org/wiki/Flamenco#Palos), o de cómo lograste resolver un fallo de un proyecto de código abierto popular. - -**tabi** te ofrece la base ideal para tu espacio de escritura, permitiéndote centrarte en tus palabras mientras Zola y tabi se encargan del aspecto técnicos. Sumérgete en el mundo de los blogs con un sistema que hace que cada publicación sea un placer escribir y leer. Tu voz tiene valor; compártela con el mundo. diff --git a/content/projects/tabi/index.md b/content/projects/tabi/index.md deleted file mode 100644 index cf9c60b..0000000 --- a/content/projects/tabi/index.md +++ /dev/null @@ -1,70 +0,0 @@ -+++ -title = "tabi" -description = "A feature-rich modern Zola theme with first-class multi-language support." -weight = 40 - -[taxonomies] -tags = ["web", "JavaScript"] - -[extra] -local_image = "projects/tabi/tabi.webp" -social_media_card = "social_cards/projects_tabi.jpg" -+++ - -[**tabi**](https://github.com/welpo/tabi) is a modern, feature-rich theme for [Zola](https://www.getzola.org/), a fast static site generator. - -{{ full_width_image(src="https://cdn.jsdelivr.net/gh/welpo/tabi@main/light_dark_screenshot.png", alt="tabi light and dark mode") }} - -#### [View on GitHub](https://github.com/welpo/tabi) • [Demo & Documentation](https://welpo.github.io/tabi/) {.centered-text} - -## Features - -- [Set any language as default](https://welpo.github.io/tabi/blog/faq-languages/#how-do-i-set-a-default-language-for-my-site). Set your base site to Chinese, Spanish, French, Hindi… or any [other supported language](https://welpo.github.io/tabi/blog/faq-languages/#what-languages-does-tabi-support). The theme's interface will be translated accordingly. -- [Integration with remote repositories](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#git-repository-integration) on GitHub, GitLab, Gitea & Codeberg for commit history and showing the site source. -- [Series support](https://welpo.github.io/tabi/blog/series/) for creating sequential content like tutorials, courses, and multi-part stories. -- Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar. -- Thorough documentation. See [Mastering tabi Settings: A Comprehensive Guide](https://welpo.github.io/tabi/blog/mastering-tabi-settings/). -- Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO). -- [Comprehensive multi-language support](https://welpo.github.io/tabi/blog/faq-languages/#how-does-tabi-handle-multilingual-support). Add as many languages as you wish. -- Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/). -- Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé. -- [Mermaid support](https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams) to create diagrams and charts with text. -- [Local search](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search) with an accessible, multi-lingual interface. -- [Custom Twitter card](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards) and automatic Open Graph tags. -- [KaTeX](https://katex.org/) support for mathematical notation. -- [Stylized and human readable Atom feed](https://welpo.github.io/tabi/atom.xml). -- [Stylized and human readable sitemap](https://welpo.github.io/tabi/sitemap.xml). -- [Mail encoding](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#encoded-email) for spam protection. -- All JavaScript can be [fully disabled](https://welpo.github.io/tabi/blog/javascript/). -- [Customizable Table of Contents](https://welpo.github.io/tabi/blog/toc/). -- [Customizable secure headers](https://welpo.github.io/tabi/blog/security/). -- [Copy button for code blocks](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copy-button-on-code-blocks). -- [Quick navigation buttons](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons). -- [Custom copyright notice](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copyright). -- [Custom canonical URLs](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#canonical-url). -- [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/). -- [Custom shortcodes](https://welpo.github.io/tabi/blog/shortcodes/). -- [Social media cards](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards). -- Responsive design. -- [Projects page](https://welpo.github.io/tabi/projects/). -- [Archive page](https://welpo.github.io/tabi/archive/). -- [Pinned posts](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#pinning-posts). -- [Social links](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-icons). -- [Tags](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags). - -## Development Practices - -- **[Conventional Commits](https://www.conventionalcommits.org) & [Gitmoji](https://gitmoji.dev/)**: Commit messages follow standardised formats to enhance readability. -- **Issue Tracking**: Each bug or new feature has its dedicated ticket, which is linked to any consequent code commits and related PRs or issues. -- **Comprehensive Commentary**: Tickets are documented with images, videos, and detailed descriptions to facilitate effective communication and problem-solving. -- **Cross-Referencing**: We link all tickets to the relevant code commits, pull requests, or related issues for complete traceability. - -## Project Evolution - -**tabi** was originally designed for my personal website, [osc.garden](https://osc.garden). Despite its origins for personal use, best practices were implemented from the outset to ensure quality and maintainability. The theme has since grown to attract a vibrant community of contributors on GitHub. - -## Start Your Writing Journey with tabi - -You have something to say. Perhaps it's about how linguists haven't agreed on a [definition of "word"](https://en.wikipedia.org/wiki/Word) yet, or about your journey exploring the different [flamenco palos](https://en.wikipedia.org/wiki/Palo_(flamenco)), or about how you managed to solve a bug in a popular open-source project. - -**tabi** provides the ideal foundation for your writing space, letting you focus on your words while Zola and tabi take care of the technical side. Step into the world of blogging with a system that makes each post a joy to write and to read. Your voice has value—share it with the world. diff --git a/content/projects/tabi/social_cards/ca_projects_tabi.jpg b/content/projects/tabi/social_cards/ca_projects_tabi.jpg deleted file mode 100644 index 6fec2e6..0000000 Binary files a/content/projects/tabi/social_cards/ca_projects_tabi.jpg and /dev/null differ diff --git a/content/projects/tabi/social_cards/es_projects_tabi.jpg b/content/projects/tabi/social_cards/es_projects_tabi.jpg deleted file mode 100644 index 4d58e5b..0000000 Binary files a/content/projects/tabi/social_cards/es_projects_tabi.jpg and /dev/null differ diff --git a/content/projects/tabi/social_cards/projects_tabi.jpg b/content/projects/tabi/social_cards/projects_tabi.jpg deleted file mode 100644 index 11f51c8..0000000 Binary files a/content/projects/tabi/social_cards/projects_tabi.jpg and /dev/null differ diff --git a/content/projects/tabi/tabi.webp b/content/projects/tabi/tabi.webp deleted file mode 100644 index c05d2a7..0000000 Binary files a/content/projects/tabi/tabi.webp and /dev/null differ diff --git a/content/projects/zutsu/index.ca.md b/content/projects/zutsu/index.ca.md deleted file mode 100644 index eee28d3..0000000 --- a/content/projects/zutsu/index.ca.md +++ /dev/null @@ -1,51 +0,0 @@ -+++ -title = "ずつ (zutsu)" -description = "Una aplicació minimalista i privada de gestió de tasques." -weight = 32 - -[taxonomies] -tags = ["interactiu", "productivitat", "web app", "web", "JavaScript"] - -[extra] -local_image = "projects/zutsu/zutsu_logo.webp" -canonical_url = "https://osc.garden/ca/projects/zutsu/" -social_media_card = "social_cards/projects_zutsu.jpg" -+++ - -{% wide_container() %} - -{% end %} - -#### [Prova-la ara](https://zutsu.osc.garden) • [GitHub](https://github.com/welpo/zutsu) • [Article](https://osc.garden/ca/blog/zutsu-offline-task-planner-web-app/) {.centered-text} - -zutsu és una aplicació web de gestió de tasques dissenyada per ajudar-te a centrar-te en una tasca cada vegada. El nom ve de 一つhitotsuずつzutsu, que significa «d'un en un» en 日本語japonès. - -## Per què? - -Volia substituir els esdeveniments de calendari inflexibles per a les sessions d'estudi per alguna cosa senzilla i adaptable. Sense aplicacions de tercers, sense sincronització al núvol, només un espai centrat en a la gestió de tasques. - -## Funcionalitats - -### Principals - -- Gestió de tasques amb possibilitat de reordenar-les arrossegant -- Temporitzador amb durada personalitzable per tasca -- Privada i offline —sense comptes, seguiment ni emmagatzematge al servidor -- Importació/exportació de llistes de tasques (JSON) - -### Utilitats - -- Temporitzador Pomodoro -- Calendari d'activitat (vista de 30 dies) -- Comptador i cronòmetre -- Espai per prendre notes -- Selectors aleatoris - -### Qualitat de vida - -- Tema fosc i clar -- Notificacions del navegador i so -- Dreceres de teclat -- Disseny responsive - -[![targeta social de zutsu](social_cards/projects_zutsu.jpg)](https://zutsu.osc.garden) diff --git a/content/projects/zutsu/index.es.md b/content/projects/zutsu/index.es.md deleted file mode 100644 index ab56402..0000000 --- a/content/projects/zutsu/index.es.md +++ /dev/null @@ -1,51 +0,0 @@ -+++ -title = "ずつ (zutsu)" -description = "Una aplicación minimalista y privada de gestión de tareas." -weight = 32 - -[taxonomies] -tags = ["interactivo", "productividad", "web app", "web", "JavaScript"] - -[extra] -local_image = "projects/zutsu/zutsu_logo.webp" -canonical_url = "https://osc.garden/es/projects/zutsu/" -social_media_card = "social_cards/projects_zutsu.jpg" -+++ - -{% wide_container() %} - -{% end %} - -#### [Pruébala ahora](https://zutsu.osc.garden) • [GitHub](https://github.com/welpo/zutsu) • [Artículo](https://osc.garden/es/blog/zutsu-offline-task-planner-web-app/) {.centered-text} - -zutsu es una aplicación web de gestión de tareas diseñada para ayudarte a centrarte en una tarea a la vez. El nombre viene de 一つhitotsuずつzutsu, que significa «uno por uno» en 日本語japonés. - -## ¿Por qué? - -Quería sustituir la inflexibilidad del calendario para planificar las sesiones de estudio por algo simple y adaptable. Sin aplicaciones de terceros, sin sincronización en la nube —solo un espacio centrado en la gestión de tareas. - -## Funcionalidades - -### Principales - -- Gestión de tareas con posibilidad de reordenarlas arrastrando y soltando -- Temporizador con duración personalizable por tarea -- Privada y offline —sin cuentas, seguimiento ni almacenamiento en servidor -- Importación/exportación de listas de tareas (JSON) - -### Utilidades - -- Temporizador Pomodoro -- Calendario de actividad (vista de 30 días) -- Contador y cronómetro -- Espacio para tomar notas -- Selectores aleatorios - -### Calidad de vida - -- Tema oscuro y claro -- Notificaciones del navegador y sonido -- Atajos de teclado -- Diseño responsive - -[![tarjeta social de zutsu](social_cards/projects_zutsu.jpg)](https://zutsu.osc.garden) diff --git a/content/projects/zutsu/index.md b/content/projects/zutsu/index.md deleted file mode 100644 index 8786b43..0000000 --- a/content/projects/zutsu/index.md +++ /dev/null @@ -1,51 +0,0 @@ -+++ -title = "ずつ (zutsu)" -description = "A private minimalist task management app." -weight = 32 - -[taxonomies] -tags = ["interactive", "productivity", "web app", "web", "JavaScript"] - -[extra] -local_image = "projects/zutsu/zutsu_logo.webp" -canonical_url = "https://osc.garden/projects/zutsu/" -social_media_card = "social_cards/projects_zutsu.jpg" -+++ - -{% wide_container() %} - -{% end %} - -#### [Try it now](https://zutsu.osc.garden) • [GitHub](https://github.com/welpo/zutsu) • [Blog post](https://osc.garden/blog/zutsu-offline-task-planner-web-app/) {.centered-text} - -zutsu is a task management web app designed to help you focus on one task at a time. The name comes from 一つhitotsuずつzutsu which means "one at a time" in 日本語Japanese. - -## Why? - -I wanted to replace inflexible calendar events for study sessions with something simple and adaptable. No third-party apps, no cloud sync —just a focused space for task management. - -## Features - -### Core - -- Task management with drag-and-drop reordering -- Timer with customizable duration for each task -- Private & offline—no accounts, tracking, or server storage -- Import/export task lists (JSON) - -### Utilities - -- Pomodoro timer -- Activity calendar (30-day view) -- Counter & stopwatch -- Note-taking space -- Random choice makers - -### Quality of life - -- Dark and light theme support -- Browser and sound notifications -- Keyboard shortcuts -- Responsive design - -[![zutsu social media card](social_cards/projects_zutsu.jpg)](https://zutsu.osc.garden) diff --git a/content/projects/zutsu/social_cards/projects_zutsu.jpg b/content/projects/zutsu/social_cards/projects_zutsu.jpg deleted file mode 100644 index 9373a35..0000000 Binary files a/content/projects/zutsu/social_cards/projects_zutsu.jpg and /dev/null differ diff --git a/content/projects/zutsu/zutsu_logo.webp b/content/projects/zutsu/zutsu_logo.webp deleted file mode 100644 index 8432797..0000000 Binary files a/content/projects/zutsu/zutsu_logo.webp and /dev/null differ diff --git a/sass/main.scss b/sass/main.scss index 74b964c..833dada 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -55,7 +55,7 @@ --bg-2: #fefefe; --bg-3: #d8dcdd; --hover-color: white; - --primary-color: #087E96; + --primary-color: #ff6b01; --divider-color: #d7d7d7; --text-color: #222226; --text-color-high-contrast: #313333; @@ -73,7 +73,7 @@ --bg-2: #171717; --bg-3: #535555; --hover-color: black; - --primary-color: #91e0ee; + --primary-color: #ff6b01; --divider-color: #4a4a4a; --text-color: #D4D4D4; --text-color-high-contrast: #eceeef;