deepState/tabi-lean
3
0
Fork 0
forked from deepStateMirrors/tabi
Code Issues 1 Pull requests Activity

remove bloat

Browse source
This commit is contained in:
Fabian Montero 2025-09-13 13:58:37 -06:00
parent 57277a0f23
commit 95c8796964
Signed by: fabian
GPG key ID: 3EDA9AE3937CCDE3
271 changed files with 0 additions and 14641 deletions
Download patch file Download diff file Expand all files Collapse all files

25
.githooks/commit-msg
View file

@ -1,25 +0,0 @@
#!/usr/bin/env bash
# Commit-msg hook generated by git-sumi.
# For more information and documentation, visit: https://sumi.rs
set -e # Exit on any error.
# Get the current branch name.
current_branch=$(git rev-parse --abbrev-ref HEAD)
# Check if the current branch is 'main'.
if [ "$current_branch" != "main" ]; then
exit 0 # Exit successfully without running git-sumi.
fi
# Check if git-sumi is installed.
if ! command -v git-sumi &> /dev/null
then
echo "git-sumi is not installed. Please install it. See https://sumi.rs for instructions."
echo "Alternatively, edit or remove the commit-msg hook in .git/hooks/commit-msg."
exit 1
fi
# Run git-sumi on the commit message if on the 'main' branch.
git-sumi -- "$(cat $1)" # Exit with error if linting fails.

281
.githooks/pre-commit
View file

@ -1,281 +0,0 @@
#!/usr/bin/env bash
#################################################################################
# This script is run by git before a commit is made. #
# To use it, copy it to .git/hooks/pre-commit and make it executable. #
# Alternatively, run the following command from the root of the repo: #
# git config core.hooksPath .githooks #
# #
# FEATURES #
# Updates the "updated" field in the front matter of .md files. #
# Compresses PNG files with either oxipng or optipng if available. #
# Runs subset_font if config.toml has been modified. #
# #
# Stops you from commiting: #
# - a draft .md file #
# - a file with a "TODO" #
# - a JS file without a minified version #
# - a minified JS file that isn't as small as it can be #
# - a config.toml and theme.toml with different amounts of lines in [extra] #
#################################################################################
# Function to exit the script with an error message.
function error_exit() {
echo "ERROR: $1" >&2
exit "${2:-1}"
}
# Function to extract the date from the front matter.
function extract_date() {
local file="$1"
local field="$2"
grep -m 1 "^$field =" "$file" | sed -e "s/$field = //" -e 's/ *$//'
}
# Function to check if the .md file is a draft.
function is_draft() {
local file="$1"
awk '/^\+\+\+$/,/^\+\+\+$/ { if(/draft = true/) exit 0 } END { exit 1 }' "$file"
}
# Check if the file contains "TODO".
function contains_todo() {
local file="$1"
grep -q "TODO" "$file"
}
# Check for changes outside of the front matter.
function has_body_changes() {
local file="$1"
local in_front_matter=1
local triple_plus_count=0
diff_output=$(git diff --unified=999 --cached --output-indicator-new='%' --output-indicator-old='&' "$file")
while read -r line; do
if [[ "$line" =~ ^\+\+\+$ ]]; then
triple_plus_count=$((triple_plus_count + 1))
if [[ $triple_plus_count -eq 2 ]]; then
in_front_matter=0
fi
elif [[ $in_front_matter -eq 0 ]]; then
if [[ "$line" =~ ^[\%\&] ]]; then
return 0
fi
fi
done <<< "$diff_output"
return 1
}
# Function to update the social media card for a post or section.
function generate_and_commit_card {
local file=$1
social_media_card=$(social-cards-zola -o static/img/social_cards -b http://127.0.0.1:1111 -u -p -i "$file") || {
echo "Failed to update social media card for $file"
exit 1
}
git add "$social_media_card" || {
echo "Failed to add social media card $social_media_card"
exit 1
}
git add "$file" || {
echo "Failed to add $file"
exit 1
}
}
export -f generate_and_commit_card
function has_minified_version() {
local file="$1"
local extension="${file##*.}"
local minified_file="${file%.*}.min.$extension"
[ -f "$minified_file" ]
}
function is_minified() {
local file="$1"
# Check if terser and uglifyjs are installed.
if ! command -v terser &> /dev/null || ! command -v uglifyjs &> /dev/null; then
echo "Either terser or uglifyjs is not installed. Skipping minification check."
return 0
fi
# Original file size.
local original_size=$(wc -c < "$file")
# File size after compression with terser.
local terser_size=$(terser --compress --mangle -- "$file" | wc -c)
# File size after compression with uglifyjs.
local uglifyjs_size=$(uglifyjs --compress --mangle -- "$file" | wc -c)
# Check if the file is already as small as or smaller than both minified versions.
if (( original_size <= terser_size && original_size <= uglifyjs_size )); then
return 0
fi
# If the file isn't as small as it can be, suggest the better compressor in the error message
if (( terser_size < uglifyjs_size )); then
error_exit "Minified JS file $file isn't as small as it can be! Try using terser for better compression."
else
error_exit "Minified JS file $file isn't as small as it can be! Try using uglifyjs for better compression."
fi
}
# Check if the script is being run from the root of the repo.
if [[ ! $(git rev-parse --show-toplevel) == $(pwd) ]]; then
error_exit "This script must be run from the root of the repo."
fi
# Check if oxipng is installed.
png_compressor=""
if command -v oxipng &> /dev/null; then
png_compressor="oxipng -o max"
elif command -v optipng &> /dev/null; then
png_compressor="optipng -o 7"
fi
##################################################################
# Compress PNG files with either oxipng or optipng if available. #
# Update the "updated" field in the front matter of .md files. #
# https://osc.garden/blog/zola-date-git-hook/ #
# Ensure the [extra] section from config.toml and theme.toml #
# have the same amount of lines. #
# Ensure JavaScript files are minified. #
##################################################################
# Get the newly added and modified files, but not deleted files.
mapfile -t all_changed_files < <(git diff --cached --name-only --diff-filter=d)
script_name=$(basename "$0")
# Loop through all newly added or modified files.
for file in "${all_changed_files[@]}"; do
file_name=$(basename "$file")
# Ignore this script and the changelog.
if [[ "$file_name" == "$script_name" ]] || [[ "$file_name" == "CHANGELOG.md" ]]; then
continue
fi
# If the file is a PNG and png_compressor is set, compress it and add it to the commit.
if [[ "$file" == *.png ]] && [[ -n "$png_compressor" ]]; then
$png_compressor "$file" || error_exit "Failed to compress PNG file $file"
git add --force "$file" || error_exit "Failed to add compressed PNG file $file"
continue
fi
# If the file contains "TODO", abort the commit.
if contains_todo "$file"; then
error_exit "File $file contains TODO! Remove or complete the TODO before committing."
fi
# If the file is a JS file and it doesn't have a minified version, abort the commit.
if [[ "$file" == *.js ]] && [[ "$file" != *.min.js ]] && ! has_minified_version "$file"; then
error_exit "JS file $file doesn't have a minified version!"
fi
# If the file is a minified JS file and it isn't as small as it can be, abort the commit.
# Error message shows which minifier is best for the file.
if [[ "$file" == *.min.js ]]; then
is_minified "$file"
fi
# Ensure the [extra] section from config.toml and theme.toml have the same amount of lines.
if [[ "$file" == "config.toml" ]] || [[ "$file" == "theme.toml" ]]; then
# Get the line number where [extra] starts in config.toml.
extra_line_config=$(grep -n "^\[extra\]$" "config.toml" | cut -d: -f1)
# Get the line number where [extra] starts in theme.toml.
extra_line_theme=$(grep -n "^\[extra\]$" "theme.toml" | cut -d: -f1)
# Get the number of lines in the [extra] section in config.toml.
extra_lines_config=$(tail -n +"$extra_line_config" "config.toml" | wc -l)
# Get the number of lines in the [extra] section in theme.toml.
extra_lines_theme=$(tail -n +"$extra_line_theme" "theme.toml" | wc -l)
# Abort the commit if the number of lines in the [extra] section don't match.
if [[ "$extra_lines_config" -ne "$extra_lines_theme" ]]; then
error_exit "The [extra] section in config.toml and theme.toml don't have the same amount of lines!"
fi
fi
done
# Get the modified .md to update the "updated" field in the front matter.
modified_md_files=$(git diff --cached --name-only --diff-filter=M | grep -E '\.md$' | grep -v '_index.md$')
# Loop through each modified .md file.
for file in $modified_md_files; do
echo $file
# If the file is an .md file and it's a draft, abort the commit.
if is_draft "$file"; then
error_exit "Draft file $file is being committed!"
fi
# If changes are only in the front matter, skip the file.
if ! has_body_changes "$file"; then
continue
fi
# Modify the "updated" date, if necessary.
# Get the last modified date from the filesystem.
last_modified_date=$(date -r "$file" +'%Y-%m-%d')
# Extract the "date" field from the front matter.
date_value=$(extract_date "$file" "date")
# Skip the file if the last modified date is the same as the "date" field.
if [[ "$last_modified_date" == "$date_value" ]]; then
continue
fi
# Update the "updated" field with the last modified date.
# If the "updated" field doesn't exist, create it below the "date" field.
if ! awk -v date_line="$last_modified_date" 'BEGIN{FS=OFS=" = "; first = 1} {
if (/^date =/ && first) {
print; getline;
if (!/^updated =/) print "updated" OFS date_line;
first=0;
}
if (/^updated =/ && !first) gsub(/[^ ]*$/, date_line, $2);
print;
}' "$file" > "${file}.tmp"
then
error_exit "Failed to process $file with AWK"
fi
mv "${file}.tmp" "$file" || error_exit "Failed to overwrite $file with updated content"
# Stage the changes.
git add "$file"
done
# Use `social-cards-zola` to create/update the social media card for Markdown files.
# See https://osc.garden/blog/automating-social-media-cards-zola/ for context.
# Use parallel to create the social media cards in parallel and commit them.
# echo "$modified_md_files" | parallel -j 8 generate_and_commit_card
#########################################################
# Run subset_font if config.toml has been modified. #
# https://welpo.github.io/tabi/blog/custom-font-subset/ #
#########################################################
if git diff --cached --name-only | grep -q "config.toml"; then
echo "config.toml modified. Attempting to run subset_font…"
# Check if subset_font is available and exit early if not.
if ! command -v subset_font &> /dev/null; then
echo "subset_font command not found. Skipping this step."
exit 0
fi
# 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

2
.github/CODEOWNERS vendored
View file

@ -1,2 +0,0 @@
* @welpo
i18n/ar.toml @TheAwiteb

1
.github/FUNDING.yml vendored
View file

@ -1 +0,0 @@
github: welpo

62
.github/ISSUE_TEMPLATE/2_bug_report.yml vendored
View file

@ -1,62 +0,0 @@
name: "🐛 Bug report"
description: "Did you run into an issue while using tabi?"
labels: ["bug"]
body:
- type: textarea
attributes:
label: "System information"
description: |
Please provide the following information:
- Zola version: Run `zola --version`
- tabi version or commit hash
placeholder: |
Zola version:
tabi version or commit:
validations:
required: true
- type: textarea
attributes:
label: "Expected behaviour"
description: "Tell us what should have happened."
placeholder: "Describe what you expected tabi to do…"
validations:
required: true
- type: textarea
attributes:
label: "Actual behaviour"
description: "Tell us what happens instead of the expected behavior."
placeholder: "Describe what actually happened…"
validations:
required: true
- type: textarea
attributes:
label: "Steps to reproduce"
description: "Please provide detailed steps to reproduce the issue."
placeholder: |
1. Set up `config.toml` with these settings: …
2. Create content with this structure: …
3. Run Zola with these arguments: …
4. See the following error: …
validations:
required: true
- type: textarea
attributes:
label: "Additional context"
description: >
Please provide any relevant configuration files, error messages, or screenshots that might help us understand the issue.
You can drag and drop files here to attach them.
validations:
required: false
- type: checkboxes
attributes:
label: "Final checklist"
options:
- label: "I've checked that the issue isn't already reported."
required: true
- label: "I've tested with the latest version of tabi to check if the issue has already been fixed."
required: true

34
.github/ISSUE_TEMPLATE/3_feature_request.yml vendored
View file

@ -1,34 +0,0 @@
name: "✨ Feature request"
description: "Suggest an idea for tabi"
labels: ["enhancement"]
body:
- type: textarea
attributes:
label: "Summary and motivation"
description: "Briefly describe the feature and why it would be valuable for tabi users."
placeholder: |
Describe:
- What the feature is
- Why it would be useful
- Any examples from other projects
validations:
required: true
- type: textarea
attributes:
label: "Implementation details"
description: "Share any ideas you have about how this could be implemented."
placeholder: "Technical suggestions, potential approaches, or specific requirements."
validations:
required: false
- type: checkboxes
attributes:
label: "Checklist"
options:
- label: "I've searched existing issues to make sure this feature hasn't already been requested."
required: true
- label: "This feature aligns with tabi's philosophy (minimal JS, accessible…)"
required: true
- label: "I'm willing to contribute to the implementation of this feature."
required: false

5
.github/ISSUE_TEMPLATE/config.yml vendored
View file

@ -1,5 +0,0 @@
blank_issues_enabled: false
contact_links:
- name: 💬 tabi discussions
url: https://github.com/welpo/tabi/discussions
about: If you have questions or need help, feel free to ask here~

67
.github/PULL_REQUEST_TEMPLATE.md vendored
View file

@ -1,67 +0,0 @@
<!--
Thank you for contributing to tabi!
This template is designed to guide you through the pull request process.
Please fill out the sections below as applicable.
Don't worry if your PR is not complete or you're unsure about something;
feel free to submit it and ask for feedback. We appreciate all contributions, big or small!
Feel free to remove any section or checklist item that does not apply to your changes.
If it's a quick fix (for example, fixing a typo), a Summary is enough.
-->
## Summary
<!-- Please provide a brief description of the changes made in this PR -->
### Related issue
<!-- Mention any relevant issues like #123 -->
## Changes
<!-- Please provide some more detail regarding the changes.
Add any additional information, configuration, or data that might be necessary for the review -->
### Accessibility
<!-- Have you taken steps to make your changes accessible? This could include:
- Semantic HTML
- ARIA attributes
- Keyboard navigation
- Voiceover or screen reader compatibility
- Colour contrast
Please elaborate on the actions taken.
If you need help, please ask! -->
### Screenshots
<!-- If applicable, add screenshots to help explain the changes made. Consider if a before/after is helpful -->
### Type of change
<!-- Mark the relevant option with an `x` like so: `[x]` (no spaces) -->
- [ ] Bug fix (fixes an issue without altering functionality)
- [ ] New feature (adds non-breaking functionality)
- [ ] Breaking change (alters existing functionality)
- [ ] UI/UX improvement (enhances user interface without altering functionality)
- [ ] Refactor (improves code quality without altering functionality)
- [ ] Documentation update
- [ ] Other (please describe below)
---
## Checklist
- [ ] I have verified the accessibility of my changes
- [ ] I have tested all possible scenarios for this change
- [ ] I have updated `theme.toml` with a sane default for the feature
- [ ] I have updated `config.toml` in [tabi-start](https://github.com/welpo/tabi-start)
- [ ] I have made corresponding changes to the documentation:
- [ ] Updated `config.toml` comments
- [ ] Updated `theme.toml` comments
- [ ] Updated "Mastering tabi" post in English
- [ ] (Optional) Updated "Mastering tabi" post in Spanish
- [ ] (Optional) Updated "Mastering tabi" post in Catalan

29
.github/renovate.json vendored
View file

@ -1,29 +0,0 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": ["config:recommended", ":automergeMinor", ":disableDependencyDashboard"],
"commitMessagePrefix": "⬆️",
"commitMessageAction": "chore(deps): update",
"commitMessageTopic": "{{{depName}}}",
"labels": ["dependencies"],
"git-submodules": {
"enabled": true
},
"packageRules": [
{
"updateTypes": ["pin"],
"commitMessagePrefix": "📌"
},
{
"updateTypes": ["major", "minor", "patch", "digest", "bump"],
"commitMessagePrefix": "⬆️"
},
{
"updateTypes": ["rollback"],
"commitMessagePrefix": "⬇️"
},
{
"matchFileNames": ["scripts/release/**"],
"automerge": true
}
]
}

36
.github/workflows/cd.yml vendored
View file

@ -1,36 +0,0 @@
name: Continuous Deployment
on:
push:
tags:
- 'v*.*.*'
jobs:
deploy:
name: Deploy and release
runs-on: ubuntu-24.04
permissions:
contents: write
steps:
- name: Checkout
uses: actions/checkout@v5
with:
fetch-depth: 0
- name: Generate the changelog
uses: orhun/git-cliff-action@main
id: git-cliff
with:
config: cliff.toml
args: --latest --strip all
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
OUTPUT: CHANGES.md
- name: Create GitHub release
run: |
gh release create ${{ github.ref_name }} \
--title "Release ${{ github.ref_name }}" \
--notes-file CHANGES.md
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

44
.github/workflows/ci.yml vendored
View file

@ -1,44 +0,0 @@
name: Build Site
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
check_and_build_pr:
name: Check and Build for Pull Requests
runs-on: ubuntu-latest
if: github.event_name == 'pull_request'
steps:
- name: Checkout Code
uses: actions/checkout@v5
- name: Zola Build
uses: shalzz/zola-deploy-action@v0.21.0
env:
BUILD_ONLY: true
- name: Zola Check
uses: shalzz/zola-deploy-action@v0.21.0
env:
BUILD_ONLY: true
CHECK_LINKS: true
build_and_deploy:
name: Build and Deploy on Main Push
runs-on: ubuntu-24.04
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
steps:
- name: Checkout Code
uses: actions/checkout@v5
- name: Build and Deploy
uses: shalzz/zola-deploy-action@v0.21.0
env:
PAGES_BRANCH: gh-pages
TOKEN: ${{ secrets.TOKEN }}
BUILD_THEMES: false

28
.github/workflows/git-sumi.yml vendored
View file

@ -1,28 +0,0 @@
name: Lint pull request title
on:
pull_request:
types:
- opened
- edited
- synchronize
- ready_for_review
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
cancel-in-progress: true
permissions:
pull-requests: read
jobs:
main:
name: Run git-sumi
runs-on: ubuntu-24.04
steps:
- name: Set header length for dependency updates
if: contains(github.event.pull_request.title, 'chore(deps)')
run: echo "GIT_SUMI_MAX_HEADER_LENGTH=80" >> $GITHUB_ENV
- uses: welpo/git-sumi-action@main
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

89
.github/workflows/upgrade-deps.yml vendored
View file

@ -1,89 +0,0 @@
name: Dependency upgrade
on:
workflow_dispatch:
inputs:
dependency:
description: 'Dependency to upgrade'
required: true
type: choice
options:
- all
- mermaid
- katex
schedule:
- cron: '32 4 * * *'
jobs:
upgrade-dependency:
name: Upgrade dependency
runs-on: ubuntu-24.04
permissions:
contents: write
pull-requests: write
strategy:
matrix:
dependency: ${{ github.event_name == 'schedule' && fromJson('["mermaid", "katex"]') || fromJson(format('["{0}"]', github.event.inputs.dependency)) }}
steps:
- name: Checkout repository
uses: actions/checkout@v5
with:
fetch-depth: 0
- name: Set up environment
run: |
sudo apt-get update
sudo apt-get install -y jq npm curl git
npm install uglify-js -g
uglifyjs --version
- name: Configure GPG key
run: |
echo -n ${{ secrets.GPG_PRIVATE_KEY }} | base64 --decode | gpg --import
- name: Configure Git
run: |
git config --global user.signingkey 33EACFE956484C3940BFEEDCE4EC28F8DFB57474
git config --global commit.gpgsign true
git config --global user.name "welpo"
git config --global user.email "welpo@users.noreply.github.com"
- name: Check for existing branch
id: check_branch
run: |
if git ls-remote --heads origin deps/upgrade-${{ matrix.dependency }} | grep -q deps/upgrade-${{ matrix.dependency }}; then
echo "branch_exists=true" >> $GITHUB_OUTPUT
else
echo "branch_exists=false" >> $GITHUB_OUTPUT
fi
- name: Handle existing branch
if: steps.check_branch.outputs.branch_exists == 'true'
run: |
echo "Branch deps/upgrade-${{ matrix.dependency }} already exists."
echo "Skipping upgrade as there's already an open PR"
exit 0
- name: Create and switch to new branch
run: |
git checkout -b deps/upgrade-${{ matrix.dependency }}
- name: Run upgrade script
shell: bash
run: |
if [[ "${{ matrix.dependency }}" == "all" ]]; then
bash scripts/upgrade-deps --all
else
bash scripts/upgrade-deps --${{ matrix.dependency }}
fi
- name: Push changes and create PR
shell: bash
run: |
if git diff --quiet HEAD origin/main; then
echo "No changes to push for ${{ matrix.dependency }}"
exit 0
fi
git push -u origin deps/upgrade-${{ matrix.dependency }}
gh pr create --fill --base main --head deps/upgrade-${{ matrix.dependency }} --label "dependencies"
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

3
.gitmodules vendored
View file

@ -1,3 +0,0 @@
[submodule "scripts/release"]
path = scripts/release
url = https://github.com/welpo/release.git

1
.prettierignore
View file

@ -1 +0,0 @@
*.min.*

11
.prettierrc.toml
View file

@ -1,11 +0,0 @@
semi = true
trailingComma = "es5"
singleQuote = true
printWidth = 88
tabWidth = 4
useTabs = false
arrowParens = "always"
bracketSpacing = true
jsxBracketSameLine = false
jsxSingleQuote = true
endOfLine = "lf"

1298
CHANGELOG.md
View file

File diff suppressed because it is too large Load diff

128
CODE_OF_CONDUCT.md
View file

@ -1,128 +0,0 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
tabi@osc.garden.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.

122
CONTRIBUTING.md
View file

@ -1,122 +0,0 @@
# Contributing to tabi
Halló!
Thanks for contributing to [tabi](https://github.com/welpo/tabi). Before implementing new features and changes, please [submit an issue](https://github.com/welpo/tabi/issues/new) so that we can discuss it.
We welcome contributions in many forms, including:
- Bug reports;
- New translations;
- Improvements to existing translations;
- Feature requests;
- Code patches;
- Documentation improvements;
- UI/UX suggestions.
If you're not sure how to contribute or need help with something, please don't hesitate to reach out via the [issue tracker](https://github.com/welpo/tabi/issues) or [mail](mailto:tabi@osc.garden?subject=[GitHub]%20tabi).
## Pull Requests
Working on your first Pull Request? You can learn how from this free video series:
[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
Please make sure the following is done when submitting a pull request:
1. **Keep your PR small**. Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
2. **Use descriptive titles**. It is recommended to follow this [commit message style](#conventional-commit-messages-with-gitmoji).
3. **Test your changes**. Make sure to test different configurations that might affect your changes.
4. **Fill the PR template**. The template will guide you through the process of submitting a PR.
### Conventional Commit Messages with Gitmoji
See how a minor change to your commit message style can make you a better programmer.
Format: `<gitmoji> <type>(<scope>): <description>`
`<gitmoji>` is an emoji from the [gitmoji](https://gitmoji.dev/) list. It makes it easier to visually scan the commit history and quickly grasp the purpose of changes.
`<scope>` is optional. If your change affects a specific part of the codebase, consider adding the scope. Scopes should be brief but recognizable, e.g. `config`, `feed`, or `search`.
The various types of commits:
- `feat`: a new API or behaviour **for the end user**.
- `fix`: a bug fix **for the end user**.
- `style`: changes to the visual appearance of the theme, e.g. CSS, fonts, images…
- `docs`: a change to the website or other Markdown documents.
- `refactor`: a change to code that doesn't change behaviour, e.g. splitting files, renaming internal variables, improving code style…
- `chore`: upgrading dependencies, releasing new versions… Chores that are **regularly done** for maintenance purposes.
- `misc`: anything else that doesn't change production code, yet is not `chore`. e.g. updating GitHub actions workflow.
The commits within your PR don't need to follow this convention (we'll [squash them](https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/configuring-pull-request-merges/configuring-commit-squashing-for-pull-requests)). However, the PR title should be in this format. If you're not sure about the title, don't worry, we'll help you fix it. Your code is more important than conventions!
Example:
```text
🐛 fix(i18n): localise date in single taxonomy listing
^ ^-^^----^ ^--------------------------------------^
| | | |
| | | +-> Description in imperative and lowercase.
| | |
| | +-> The scope of the change.
| |
| +-------> Type: see above for the list we use.
|
+----------> A valid gitmoji.
```
## Coding Style Guidelines
While we don't enforce a strict coding style, we appreciate it when contributions follow the existing code style of the project (e.g. indenting with 4 spaces). This makes the codebase easier to read and maintain. If you are making significant changes or additions, please try to maintain consistency with the current coding patterns and idioms.
For JavaScript files, we use [Prettier](https://prettier.io/) to format the code.
The CSS properties are sorted following [Concentric-CSS](https://github.com/brandon-rhodes/Concentric-CSS). If you use VSCode, the [Sort CSS](https://marketplace.visualstudio.com/items?itemName=piyushsarkar.sort-css-properties) extension makes this super easy.
## Pre-commit Githook
### Introduction
We use a pre-commit githook to maintain code and file quality. [This script](https://github.com/welpo/tabi/blob/main/.githooks/pre-commit) performs a series of checks and updates before a commit is made.
### Setting Up
To use the pre-commit githook, run the following command from the root of the repository to configure the git hooks path and make the script executable:
```bash
git config core.hooksPath .githooks
chmod +x .githooks/pre-commit
```
### Features
The pre-commit githook performs the following actions:
#### Automatic Updates
- **Front Matter in Markdown Files**: Automatically updates the "updated" field in the front matter of `.md` files.
- **PNG Compression**: Compresses PNG files using either [`oxipng`](https://github.com/shssoichiro/oxipng) or [`optipng`](https://optipng.sourceforge.net/), whichever is available on your system.
- **Font Subsetting**: Runs `subset_font` if `config.toml` has been modified.
#### Commit Checks
The script prevents you from committing if:
- The `.md` file is marked as a draft.
- Any file contains a "TODO".
- A JavaScript file is being committed without a corresponding minified version.
- A minified JavaScript file is not as small as it could be. Requires installing [UglifyJS](https://github.com/mishoo/UglifyJS) and/or [terser](https://github.com/terser/terser).
- `config.toml` and `theme.toml` have different numbers of lines in their `[extra]` sections.
These checks are in place to ensure code quality and consistency throughout the project.
## Code of Conduct
We expect all contributors to follow our [Code of Conduct](./CODE_OF_CONDUCT.md). Please be respectful and professional when interacting with other contributors.
## License
The code is available under the [MIT license](./LICENSE).
Thank you for your contributions!

249
README.md
View file

@ -1,249 +0,0 @@
<p align="center">
<a href="CONTRIBUTING.md#pull-requests">
<img src="https://img.shields.io/badge/PRs-welcome-0?style=flat-square&labelColor=202b2d&color=087e96" alt="PRs welcome"></a>
<a href="https://github.com/welpo/tabi/graphs/contributors">
<img src="https://img.shields.io/github/contributors/welpo/tabi?style=flat-square&labelColor=202b2d&color=087e96" alt="Contributors"></a>
<a href="https://github.com/welpo/tabi/forks">
<img src="https://img.shields.io/github/forks/welpo/tabi?style=flat-square&labelColor=202b2d&color=087e96" alt="Forks"></a>
<a href="https://github.com/welpo/tabi/commits/main/">
<img src="https://img.shields.io/github/last-commit/welpo/tabi?style=flat-square&labelColor=202b2d&color=087e96" alt="Last commit"></a>
<br>
<a href="https://github.com/welpo/tabi/releases">
<img src="https://img.shields.io/github/v/release/welpo/tabi?style=flat-square&labelColor=202b2d&color=087e96" alt="Latest release"></a>
<a href="https://welpo.github.io/tabi/blog/mastering-tabi-settings/">
<img src="https://img.shields.io/website?url=https%3A%2F%2Fwelpo.github.io%2Ftabi&style=flat-square&label=docs&labelColor=202b2d" alt="Documentation"></a>
<a href="https://github.com/welpo/tabi/blob/main/LICENSE">
<img src="https://img.shields.io/github/license/welpo/tabi?style=flat-square&labelColor=202b2d&color=087e96" alt="License"></a>
<a href="https://github.com/welpo/git-sumi">
<img src="https://img.shields.io/badge/clean_commits-git--sumi-0?style=flat-square&labelColor=202b2d&color=087e96" alt="Clean commits"></a>
<a href="https://isitmaintained.com/project/welpo/tabi">
<img src="https://isitmaintained.com/badge/resolution/welpo/tabi.svg" alt="Average time to resolve an issue"></a>
<a href="https://isitmaintained.com/project/welpo/tabi">
<img src="https://isitmaintained.com/badge/open/welpo/tabi.svg" alt="Percentage of issues still open"></a>
</p>
# 🌱 tabi
An accessible [Zola](https://www.getzola.org) theme with [search](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search), [multi-language support](https://welpo.github.io/tabi/blog/faq-languages/), [optional JavaScript](https://welpo.github.io/tabi/blog/javascript/), a perfect Lighthouse score, and [comprehensive documentation](https://welpo.github.io/tabi). Crafted for personal websites and blogs.
> [!TIP]
> Want to start blogging right away? Use the [tabi-start template](https://github.com/welpo/tabi-start) to get a complete site up and running in minutes.
See a live preview (and the theme's documentation) [here](https://welpo.github.io/tabi).
Explore the [Sites Using tabi section](#sites-using-tabi) to see real-world applications.
> tabi (旅, /<span title="/t/: 't' in 'sty'">t</span><span title="/ɐ/: a sound between 'a' in 'sofa' and 'u' in 'nut'">ɐ</span><span title="/ˈ/: primary stress mark, indicating that the following syllable is pronounced with greater emphasis">ˈ</span><span title="/b/: 'b' in 'cab'">b</span><span title="/i/: 'i' in 'fleece'">i</span>/): Journey.
![tabi](https://github.com/welpo/tabi/raw/main/light_dark_screenshot.png)
tabi has a perfect score on Google's Lighthouse audit:
![lighthouse](https://raw.githubusercontent.com/welpo/tabi/main/lighthouse_score.png)
## Features
- [X] [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](/i18n). The theme's interface will be translated accordingly.
- [X] [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.
- [X] [Series support](https://welpo.github.io/tabi/blog/series/) for creating sequential content like tutorials, courses, and multi-part stories.
- [X] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
- [X] Thorough documentation. See [Mastering tabi Settings: A Comprehensive Guide](https://welpo.github.io/tabi/blog/mastering-tabi-settings/).
- [X] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
- [X] [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.
- [X] Support for [comments using giscus, utterances, Hyvor Talk, or Isso](https://welpo.github.io/tabi/blog/comments/).
- [X] [Indieweb](https://indieweb.org/) ready with microformats, [hcard](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#representative-h-card) and [webmentions](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#webmentions) support.
- [X] Code syntax highlighting with colours based on [Catppuccin](https://github.com/catppuccin/catppuccin) Frappé.
- [X] [Mermaid support](https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams) to create diagrams and charts with text.
- [X] [Local search](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search) with an accessible, multi-lingual interface.
- [X] [Custom Twitter card](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards) and automatic Open Graph tags.
- [X] Anonymous [like buttons](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#iine) powered by [iine](https://iine.to).
- [X] [KaTeX](https://katex.org/) support for mathematical notation.
- [X] [Stylized and human readable Atom feed](https://welpo.github.io/tabi/atom.xml).
- [X] [Stylized and human readable sitemap](https://welpo.github.io/tabi/sitemap.xml).
- [X] [Mail encoding](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#encoded-email) for spam protection.
- [X] All JavaScript can be [fully disabled](https://welpo.github.io/tabi/blog/javascript/).
- [X] [Customizable Table of Contents](https://welpo.github.io/tabi/blog/toc/).
- [X] [Customizable secure headers](https://welpo.github.io/tabi/blog/security/).
- [X] [Copy button for code blocks](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copy-button-on-code-blocks).
- [X] [Quick navigation buttons](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons).
- [X] [Custom copyright notice](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copyright).
- [X] [Custom canonical URLs](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#canonical-url).
- [X] [Custom shortcodes](https://welpo.github.io/tabi/blog/shortcodes/).
- [X] [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/).
- [X] [Social media cards](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards).
- [X] Responsive design.
- [X] [Projects page](https://welpo.github.io/tabi/projects/).
- [X] [Archive page](https://welpo.github.io/tabi/archive/).
- [X] [Pinned posts](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#pinning-posts).
- [X] [Social links](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-icons).
- [X] [Tags](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#tags).
## Installation
> [!NOTE]
> The fastest way to create a new site is to use the [tabi-start template](https://github.com/welpo/tabi-start). This gives you a complete blog setup with all the essential configuration ready to go.
### Manual installation
To add tabi to you existing Zola site:
0. Initialize a Git repository in your project directory (if you haven't already):
```
git init
```
1. Add the theme as a git submodule:
```
git submodule add https://github.com/welpo/tabi.git themes/tabi
```
Or clone the theme into your themes directory:
```
git clone https://github.com/welpo/tabi.git themes/tabi
```
### Required configuration
2. Enable the theme in your `config.toml`:
```
theme = "tabi"
```
3. Set a `title` in your `config.toml`:
```
title = "Your Site Title"
```
4. Configure code block highlighting in your `config.toml`:
```toml
[markdown]
highlight_code = true
highlight_theme = "css"
```
5. Create a `content/_index.md` file. This file controls how your home page looks and behaves. Choose one of the following options:
**Option A: Serve posts from `/`**:
```
+++
title = "Home"
paginate_by = 5 # Show 5 posts per page.
+++
```
- This will display posts in `content/` with pagination.
**Option B: Serve posts from a different path (e.g., `blog/`)**:
```
+++
title = "Home"
# Note we're not setting `paginate_by` here.
[extra]
section_path = "blog/_index.md" # Where to find your posts.
max_posts = 5 # Show 5 posts on the home page.
+++
```
- This will display the latest 5 posts from the `blog/` section.
- Do not set `paginate_by` if you choose this option.
- Use the full path to the section's `_index.md` file. Using `section_path = "blog/"` will not work.
> [!WARNING]
> Do not set both `paginate_by` and `section_path` in `content/_index.md`.
>
> These settings are mutually exclusive and using both may result in no posts being displayed.
6. If you want an introduction section (see screenshot above), add these lines to `content/_index.md`:
```
[extra]
header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" }
```
The content outside the front matter will be rendered between the header title and the posts listing. In the screenshot above, it's the text that reads "tabi is a fast, lightweight, and modern Zola theme…".
7. If you want a multilingual site, you will need to set up each language. In `config.toml`, set the title and taxonomies for each language, like:
```toml
[languages.es]
title = "~/tabi"
taxonomies = [{name = "tags", feed = true}]
```
You will need an `_index.{language_code}.md` per language for each section (e.g. /blog or /projects) that you want to enable in that language.
The same is true for individual posts, which should have the exact same name as the default language, with an extra `.{code}` before the extension (e.g. the Spanish version of `security.md` would be `security.es.md`).
This configuration allows the language switcher to take the user to the translation of the current URL. If a translation doesn't exist, the 404 page will be displayed, with an explanation in each language set in the config.
To learn more about multilingual support, see the [Frequently Asked Questions](https://welpo.github.io/tabi/blog/faq-languages/).
### Updating tabi
If you added the theme as a git submodule, run:
```bash
git submodule update --remote themes/tabi
```
If you cloned it:
```bash
cd themes/tabi
git pull
```
## Sites using tabi
| Website | Creator | Description | Site Source |
| - | - | - | - |
| [osc.garden](https://osc.garden) | Óscar Fernández ([welpo](https://github.com/welpo)) | Data science, psychology, and Zola | [Source](https://github.com/welpo/osc.garden) |
| [seadve.github.io](https://seadve.github.io/) | Dave Patrick Caberto ([SeaDve](https://github.com/SeaDve/)) | Personal blog and portfolio with custom CSS | [Source](https://github.com/SeaDve/seadve.github.io) |
| [mikufan.page](https://mikufan.page) | [Nadia](https://github.com/nyadiia) | Personal blog | [Source](https://github.com/nyadiia/mikufan.page) |
| [tim-boettcher.online](https://tim-boettcher.online/) | [Tim Böttcher](https://codeberg.org/Tim-Boettcher/) | Insights and ramblings of a deafblind programmer | [Source](https://codeberg.org/Tim-Boettcher/tim-boettcher-online/) |
| [www.richtman.au](https://www.richtman.au) | [Ariel Richtman](https://github.com/arichtman) | Personal tech blog | [Source](https://github.com/arichtman/www.richtman.au) |
| [Ponderosa Games](https://ponderosagames.com/) | John Burak ([JVimes](https://github.com/jvimes)) | A friendly indie game company | &mdash; |
| [jmbhughes.com](https://jmbhughes.com/) | Marcus Hughes ([jmbhughes](https://github.com/jmbhughes)) | Personal blog | [Source](https://github.com/jmbhughes/jmbhughes.github.io) |
| [szabolcs.me](https://szabolcs.me) | Szabolcs Fazekas ([szabolcsf](https://github.com/szabolcsf)) | Personal blog | [Source](https://github.com/szabolcsf/szabolcs.me) |
| [Nizzlay](https://nizzlay.com) | Niels Gouman ([Nizzlay](https://github.com/Nizzlay)) | Personal blog | [Source](https://github.com/Nizzlay/nizzlay.com) |
| [ZzMzaw's blog](https://zzmzaw.github.io/) | ZzMzaw ([ZzMzaw](https://github.com/ZzMzaw)) | Personal blog | [Source](https://github.com/ZzMzaw/zzmzaw.github.io) |
| [idle-ti.me](https://idle-ti.me/) | Jérôme Ramette ([be-next](https://github.com/be-next)) | Personal blog | [Source](https://github.com/be-next/idle-ti.me) |
| [tzinm.me](https://tzinm.me/) | [Tzinm](https://github.com/tzinm) | Personal blog | [Source](https://codeberg.org/tzinm/blog) |
| [b1n.io](https://b1n.io) | [b1nhack](https://github.com/b1nhack) | Linux kernel vulnerability researcher | [Source](https://github.com/b1nhack/blog) |
Using tabi? Feel free to create a PR and add your site to this list.
## Inspiration
This theme was inspired by:
- [shadharon](https://github.com/syedzayyan/shadharon) — tabi started as a fork of [syedzayyan](https://github.com/syedzayyan)'s theme
- [tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog)
- [abridge](https://github.com/Jieiku/abridge)
## Support
Something not working? Have an idea? Let us know!
- Questions? → [Start a discussion](https://github.com/welpo/tabi/discussions)
- Found a bug? → [Report it here](https://github.com/welpo/tabi/issues/new?&labels=bug&template=2_bug_report.yml)
- Feature request? → [Tell us more!](https://github.com/welpo/tabi/issues/new?&labels=feature&template=3_feature_request.yml)
## Contributing
Please do! We appreciate bug reports, improvements to translations or documentation (however minor), feature requests…
Take a look at the [Contributing Guidelines](/CONTRIBUTING.md) to learn more.
## License
The code is available under the [MIT license](./LICENSE).

148
cliff.toml
View file

@ -1,148 +0,0 @@
# git-cliff ~ default configuration file
# https://git-cliff.org/docs/configuration
#
# Lines starting with "#" are comments.
# Configuration options are organized into tables and keys.
# See documentation for more information on available options.
[remote.github]
owner = "welpo"
repo = "tabi"
[changelog]
# changelog header
header = """
# Changelog
Welcome to the changelog for tabi. This document aims to provide a comprehensive list of all notable changes made to the project, organised chronologically by release version.
We use Semantic Versioning (SemVer) for our version numbers, formatted as MAJOR.MINOR.PATCH. Major version changes involve significant (breaking) changes, minor versions introduce features and improvements in a backward compatible manner, and patch versions are for bug fixes and minor tweaks.\n
"""
# template for the changelog body
# https://keats.github.io/tera/docs/#introduction
body = """
{%- macro remote_url() -%}
https://github.com/{{ remote.github.owner }}/{{ remote.github.repo }}
{%- endmacro -%}
{% if version %}\
{% if previous.version %}\
## [{{ version | trim_start_matches(pat="v") }}]({{ self::remote_url() }}/compare/{{ previous.version }}..{{ version }}) - {{ timestamp | date(format="%Y-%m-%d") }}
{% else %}\
## {{ version | trim_start_matches(pat="v") }} - {{ timestamp | date(format="%Y-%m-%d") }}
{% endif %}\
{% else %}\
## unreleased
{% endif %}\
{% macro commit(commit, in_breaking_section=false) -%}
- {% if commit.scope %}*({{ commit.scope }})* {% endif %}{% if commit.breaking and not in_breaking_section %}[**‼️BREAKING‼️**] {% endif %}\
{{ commit.message | upper_first }}\
{% if not commit.remote.pr_number %} ([{{ commit.id | truncate(length=7, end="") }}]({{ self::remote_url() }}/commit/{{ commit.id }})){%- endif -%}{% if commit.remote.username %} by @{{ commit.remote.username }} \
{%- set co_authors = commit.footers | filter(attribute="token", value="Co-authored-by") | map(attribute="value") -%}
{%- set number_of_co_authors = co_authors | length -%}
{%- for co_author in co_authors -%}
{%- if not loop.last %}, {% else %} and {% endif %}@{{ co_author | split(pat=" <") | first | trim }}
{%- endfor -%}
{%- endif -%}
{% endmacro -%}
{%- set breaking_header_shown = false -%}
{% for commit in commits -%}
{% if commit.breaking and not breaking_header_shown -%}
{% raw %}\n### 💥 BREAKING CHANGES 💥\n{% endraw %}
{%- set_global breaking_header_shown = true -%}
{%- endif -%}
{%- if commit.breaking %}
{{ self::commit(commit=commit, in_breaking_section=true) -}}
{% endif -%}
{%- endfor -%}
{%- if breaking_header_shown == true -%}
{% raw %}\n{% endraw %}\
{%- endif -%}
{% for group, commits in commits | group_by(attribute="group") %}
### {{ group | striptags | trim | upper_first }}
{% for commit in commits
| filter(attribute="scope")
| sort(attribute="scope") %}
{{ self::commit(commit=commit) }}
{%- endfor -%}
{% raw %}\n{% endraw %}\
{%- for commit in commits %}
{%- if not commit.scope -%}
{{ self::commit(commit=commit) }}
{% endif -%}
{% endfor -%}
{% endfor %}
{%- if github.contributors | filter(attribute="is_first_time", value=true) | length != 0 -%}
{% raw %}\n{% endraw %}### 👥 New contributors
{% raw -%}\n{% endraw -%}
{% for contributor in github.contributors | filter(attribute="is_first_time", value=true) %}
🫶 @{{ contributor.username }} made their first contribution
{%- if contributor.pr_number %} in \
[#{{ contributor.pr_number }}]({{ self::remote_url() }}/pull/{{ contributor.pr_number }}) \
{%- endif %}
{% endfor %}
{%- endif %}
{% raw -%}\n{% endraw -%}
"""
# remove the leading and trailing whitespace from the template
trim = true
# changelog footer
footer = """
<!-- generated by git-cliff -->
"""
# postprocessors
postprocessors = [
# { pattern = " @([a-zA-Z0-9](?:[a-zA-Z0-9]+-?)*[a-zA-Z0-9])", replace = " [@$1](https://github.com/$1)"}, # add link to GitHub usernames (done in release script instead)
]
[git]
# parse the commits based on https://www.conventionalcommits.org
conventional_commits = true
# filter out the commits that are not conventional
filter_unconventional = true
# process each line of a commit as an individual commit
split_commits = false
# regex for preprocessing the commit messages
commit_preprocessors = [
# Replace the issue number with the link.
{ pattern = "\\(#([0-9]+)\\)", replace = "([#${1}](https://github.com/welpo/tabi/issues/${1}))" },
# Remove trailing whitespace.
{ pattern = ' +$', replace = "" },
# Replace multiple spaces with a single space.
{ pattern = ' +', replace = " " },
# Remove gitmoji, both actual UTF emoji and :emoji:
{ pattern = ' *(:\w+:|[\p{Emoji_Presentation}\p{Extended_Pictographic}](?:\u{FE0F})?\u{200D}?) *', replace = "" },
]
# regex for parsing and grouping commits
commit_parsers = [
{ message = "^feat", group = "<!-- 0 -->✨ Features" },
{ message = "^fix", group = "<!-- 1 -->🐛 Bug fixes" },
{ message = "^style", group = "<!-- 2 -->💄 Styling" },
{ message = "^doc", group = "<!-- 3 -->📝 Documentation" },
{ message = "^refactor", group = "<!-- 4 -->♻️ Refactor" },
{ message = "^test", group = "<!-- 5 -->✅ Testing" },
{ message = "^misc", group = "<!-- 6 -->🔧 Miscellaneous tasks" },
{ message = "^deprecate", group = "<!-- 7 -->🗑️️ Deprecations" },
{ message = "^chore", skip = true },
]
# protect breaking changes from being skipped due to matching a skipping commit_parser
protect_breaking_commits = true
# filter out the commits that are not matched by commit parsers
filter_commits = true
# regex for matching git tags
tag_pattern = "v[0-9].*"
# regex for skipping tags
skip_tags = "v0.1.0-beta.1"
# regex for ignoring tags
ignore_tags = ""
# sort the tags topologically
topo_order = false
# sort the commits inside sections by oldest/newest order
sort_commits = "newest"
# limit the number of commits included in the changelog.
# limit_commits = 42

18
content/_index.ar.md
View file

@ -1,18 +0,0 @@
+++
title = "أخر التدوينات"
sort_by = "date"
template = "section.html"
[extra]
header = {title = "اهلاً انا تابي~", img = "img/main.webp", img_alt = "أوسكار فرنانديز, كاتب السمة" }
section_path = "blog/_index.ar.md"
max_posts = 4
projects_path = "projects/_index.ar.md"
max_projects = 3
show_projects_first = false
social_media_card = "ar.jpg"
+++
تابي هو قالب Zola سريع وعصري. يهدف ليكون صفحة ومدونة شخصية. يتميز بتقييم مثالي في Lighthouse، وتصميم متجاوب، وسمات داكنة وفاتحة، وشِفرات قصيرة مخصصة، والعديد من المميزات الأخرى.
> ملاحظة: هذه الصفحة هي عرض توضيحي لدعم اللغة العربية في تابي. للحصول على التوثيق الكامل، يرجى الرجوع إلى [النسخة الإنجليزية](@/_index.md).

15
content/_index.ca.md
View file

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

15
content/_index.es.md
View file

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

15
content/_index.md
View file

@ -1,15 +0,0 @@
+++
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" }
section_path = "blog/_index.md"
max_posts = 4
projects_path = "projects/_index.md"
max_projects = 3
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.

BIN
content/ar.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 54 KiB

4
content/archive/_index.ar.md
View file

@ -1,4 +0,0 @@
+++
title = "الأرشيف"
template = "archive.html"
+++

7
content/archive/_index.ca.md
View file

@ -1,7 +0,0 @@
+++
title = "Arxiu"
template = "archive.html"
[extra]
social_media_card = "ca_archive.jpg"
+++

7
content/archive/_index.es.md
View file

@ -1,7 +0,0 @@
+++
title = "Archivo"
template = "archive.html"
[extra]
social_media_card = "es_archive.jpg"
+++

7
content/archive/_index.md
View file

@ -1,7 +0,0 @@
+++
title = "Archive"
template = "archive.html"
[extra]
social_media_card = "archive.jpg"
+++

BIN
content/archive/archive.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
content/archive/ca_archive.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 51 KiB

BIN
content/archive/es_archive.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 52 KiB

10
content/blog/_index.ar.md
View file

@ -1,10 +0,0 @@
+++
paginate_by = 5
title = "التدوينات"
sort_by = "date"
template = "section.html"
insert_anchor_links = "right"
[extra]
show_previous_next_article_links = true
+++

10
content/blog/_index.ca.md
View file

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

10
content/blog/_index.es.md
View file

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

10
content/blog/_index.md
View file

@ -1,10 +0,0 @@
+++
paginate_by = 5
title = "Blog"
sort_by = "date"
insert_anchor_links = "left"
[extra]
social_media_card = "blog.jpg"
show_previous_next_article_links = true
+++

BIN
content/blog/blog.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
content/blog/ca_blog.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 43 KiB

136
content/blog/comments/index.ca.md
View file

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

138
content/blog/comments/index.es.md
View file

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

137
content/blog/comments/index.md
View file

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

BIN
content/blog/comments/social_cards/blog_comments.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 51 KiB

BIN
content/blog/comments/social_cards/ca_blog_comments.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 55 KiB

BIN
content/blog/comments/social_cards/es_blog_comments.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 57 KiB

197
content/blog/custom-font-subset/index.ca.md
View file

@ -1,197 +0,0 @@
+++
title = "Optimitza la càrrega amb un subconjunt de font personalitzat"
date = 2023-04-29
updated = 2025-01-12
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.
{% admonition(type="tip") %}
Si estàs fent servir una font personalitzada, pots crear el teu propi subconjunt (segueix llegint) o desactivar completament els subconjunts predeterminats amb `enable_subset = false` a `config.toml`.
{% end %}
Per a una optimització addicional, a continuació t'expliquem com 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`.

198
content/blog/custom-font-subset/index.es.md
View file

@ -1,198 +0,0 @@
+++
title = "Optimiza la carga con un subconjunto de fuente personalizado"
date = 2023-04-29
updated = 2025-01-12
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.
{% admonition(type="tip") %}
Si estás usando una fuente personalizada, puedes crear tu propio subconjunto (ver más abajo) o desactivar completamente los subconjuntos predeterminados con `enable_subset = false` en tu `config.toml`.
{% end %}
Para una optimización adicional, a continuación verás cómo 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`.

200
content/blog/custom-font-subset/index.md
View file

@ -1,200 +0,0 @@
+++
title = "Optimise loading times with a custom font subset"
date = 2023-04-29
updated = 2025-01-12
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.
{% admonition(type="tip") %}
If you're using a custom font, either create your custom subset (see below) or disable the built-in subsets completely with `enable_subset = false` in your `config.toml`.
{% end %}
Here's how you can create a custom font subset that only includes the characters used in your header, for maximum efficiency.
## 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.

BIN
content/blog/custom-font-subset/social_cards/blog_custom_font_subset.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 53 KiB

BIN
content/blog/custom-font-subset/social_cards/ca_blog_custom_font_subset.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 61 KiB

BIN
content/blog/custom-font-subset/social_cards/es_blog_custom_font_subset.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 62 KiB

204
content/blog/customise-tabi/index.ca.md
View file

@ -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.
<hr>
### 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) }}
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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) }}
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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.
<hr>
### 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"`.
<hr>
### 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`.

207
content/blog/customise-tabi/index.es.md
View file

@ -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.
<hr>
### 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) }}
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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.
<hr>
### 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"`.
<hr>
### 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`.

216
content/blog/customise-tabi/index.md
View file

@ -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.
<hr>
### 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) }}
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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) }}
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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"`.
<hr>
### 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`.

BIN
content/blog/customise-tabi/skins/blue_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/blue_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
content/blog/customise-tabi/skins/evangelion_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
content/blog/customise-tabi/skins/evangelion_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
content/blog/customise-tabi/skins/indigo_ingot_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
content/blog/customise-tabi/skins/indigo_ingot_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
content/blog/customise-tabi/skins/lavender_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
content/blog/customise-tabi/skins/lavender_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/lowcontrast_orange_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
content/blog/customise-tabi/skins/lowcontrast_orange_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
content/blog/customise-tabi/skins/lowcontrast_peach_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
content/blog/customise-tabi/skins/lowcontrast_peach_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/lowcontrast_pink_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/lowcontrast_pink_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/mint_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/mint_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/monochrome_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
content/blog/customise-tabi/skins/monochrome_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
content/blog/customise-tabi/skins/red_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/red_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/sakura_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
content/blog/customise-tabi/skins/sakura_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/teal_dark.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/skins/teal_light.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
content/blog/customise-tabi/social_cards/blog_customise_tabi.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
content/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
content/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
content/blog/es_blog.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 44 KiB

149
content/blog/faq-languages/index.ca.md
View file

@ -1,149 +0,0 @@
+++
title = "Lost in Translation? Explora les capacitats multilingües de tabi"
date = 2023-09-12
updated = 2025-08-07
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
<!-- toc -->
## Quines llengües admet tabi?
tabi admet les següents llengües:
- Alemany
- Àrab
- Anglès
- Català
- Coreà
- Espanyol
- Estonià
- Finès
- 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.
## Com personalitzo els formats de data per a diferents idiomes?
Pots establir formats de data específics per idioma al teu `config.toml` utilitzant la matriu `date_formats`:
```toml
date_formats = [
{ lang = "es", long = "%d de %B de %Y", short = "%-d %b %Y", archive = "%d de %b" },
{ lang = "de", long = "%d. %B %Y", short = "%d.%m.%Y", archive = "%d. %b" },
]
```
Això permet que cada idioma mostri les dates segons les convencions locals. Per exemple, l'espanyol mostrarà «3 de febrero de 2024» mentre que l'alemany mostrarà «3. Februar 2024». Si no es defineix un format específic per a un idioma, tabi utilitzarà la configuració global `long_date_format`, `short_date_format` i `archive_date_format`.
## 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.

149
content/blog/faq-languages/index.es.md
View file

@ -1,149 +0,0 @@
+++
title = "¿Lost in Translation? Explora las capacidades multilingües de tabi"
date = 2023-09-12
updated = 2025-08-07
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
<!-- toc -->
## ¿Qué idiomas admite tabi?
tabi admite los siguientes idiomas:
- Alemán
- Árabe
- Catalán
- Chino (Simplificado)
- Coreano
- Español
- Estonio
- Finlandés
- 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.
## ¿Cómo personalizo los formatos de fecha para diferentes idiomas?
Puedes establecer formatos de fecha específicos por idioma en tu `config.toml` usando la matriz `date_formats`:
```toml
date_formats = [
{ lang = "es", long = "%d de %B de %Y", short = "%-d %b %Y", archive = "%d de %b" },
{ lang = "de", long = "%d. %B %Y", short = "%d.%m.%Y", archive = "%d. %b" },
]
```
Esto permite que cada idioma muestre las fechas según las convenciones locales. Por ejemplo, el español mostrará «3 de febrero de 2024» mientras que el alemán mostrará «3. Februar 2024». Si no se define un formato específico para un idioma, tabi usará la configuración global `long_date_format`, `short_date_format` y `archive_date_format`.
## ¿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.

150
content/blog/faq-languages/index.md
View file

@ -1,150 +0,0 @@
+++
title = "Lost in Translation? Not with tabi's Multilingual Capabilities"
date = 2023-09-12
updated = 2025-08-07
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
<!-- toc -->
## What languages does tabi support?
tabi supports the following languages:
- Arabic
- Catalan
- Chinese (Simplified)
- Chinese (Traditional)
- English
- Estonian
- Finnish
- 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.
## How do I customize date formats for different languages?
You can set language-specific date formats in your `config.toml` using the `date_formats` array:
```toml
date_formats = [
{ lang = "es", long = "%d de %B de %Y", short = "%-d %b %Y", archive = "%d de %b" },
{ lang = "de", long = "%d. %B %Y", short = "%d.%m.%Y", archive = "%d. %b" },
]
```
This allows each language to display dates according to local conventions. For example, Spanish will show "3 de febrero de 2024" while German will show "3. Februar 2024". If no language-specific format is defined, tabi will use the global `long_date_format`, `short_date_format` and `archive_date_format` settings.
## 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.

BIN
content/blog/faq-languages/social_cards/blog_faq_languages.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 74 KiB

BIN
content/blog/faq-languages/social_cards/ca_blog_faq_languages.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 80 KiB

BIN
content/blog/faq-languages/social_cards/es_blog_faq_languages.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 81 KiB

48
content/blog/javascript/index.ca.md
View file

@ -1,48 +0,0 @@
+++
title = "Sense JavaScript obligatori"
date = 2023-01-06
updated = 2025-02-21
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)
- [**Noms de blocs de codi clicables**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `code_block_name_links = 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`.

48
content/blog/javascript/index.es.md
View file

@ -1,48 +0,0 @@
+++
title = "Sin JavaScript obligatorio"
date = 2023-01-06
updated = 2025-02-21
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).
- [**Nombres de bloques de código clicables**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `code_block_name_links = 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`.

48
content/blog/javascript/index.md
View file

@ -1,48 +0,0 @@
+++
title = "No mandatory JavaScript"
date = 2023-01-06
updated = 2025-02-21
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)
- [**Clickable code block names**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `code_block_name_links = 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`.

BIN
content/blog/javascript/social_cards/blog_javascript.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
content/blog/javascript/social_cards/ca_blog_javascript.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 68 KiB

BIN
content/blog/javascript/social_cards/es_blog_javascript.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 71 KiB

93
content/blog/markdown/index.ar.md
View file

@ -1,93 +0,0 @@
+++
title = "أمثلة على ماركداون"
date = 2023-01-31
updated = 2023-09-01
description = "تعرض هذه التدوينة بعض الأمثلة على تنسيق ماركداون، بما في ذلك الجداول، والشِفرات البرمجية والوسوم، والاقتباسات، والهوامش."
[taxonomies]
tags = ["ماركداون", "توضيحي"]
[extra]
katex = true
+++
{% admonition(type="note", title="ملاحظة عن الاتجاه", icon="info") %}
يدعم تابي الكتابة من اليمين إلى اليسار (RTL) بشكل كامل، مما يجعله مثالياً للغة العربية.
الشفرات البرمجية والمعادلات الرياضية تبقى من اليسار إلى اليمين كما هو متوقع.
{% end %}
## الرياضيات مع $\KaTeX$
{{ aside(text="تأتي كلمة *ماركداون* من الإنجليزية *Markdown*، وهي لغة ترميز بسيطة صممها جون غروبر وآرون سوارتز في عام 2004.") }}
[$\KaTeX$](https://katex.org/) هي مكتبة سريعة وسهلة الاستخدام تمكن من عرض الرموز الرياضية باستخدام صيغة LaTeX.
يمكنك استخدام $\KaTeX$ **ضمن السطر** عن طريق وضع التعبير بين `$` أو بين `\\(` و `\\)`.
على سبيل المثال، `$ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $` سيظهر هكذا: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $
لعرض التعبير **في سطر منفصل ومتوسط**، ضعه بين `$$` أو بين `\\[` و `\\]`.
على سبيل المثال، `\\[ 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}} \\]` سيظهر هكذا: \\[ 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}} \\]
لتفعيل $\KaTeX$ لتدوينة أو قسم كامل، أضف `katex = true` داخل قسم `[extra]` في المقدمة. على سبيل المثال:
```toml,hl_lines=5-6
title = "تجربة KaTeX"
date = 2002-11-30
[extra]
katex = true
```
يمكنك أيضاً تفعيله بشكل عام عن طريق تعيين `katex = true` في قسم `[extra]` في ملف `config.toml` الخاص بك.
لتحسين الأداء والأمان، يتم استضافة ملفات جافا سكريبت و CSS والخطوط الخاصة بـ $\KaTeX$ محلياً.
**ملاحظة**: بعد تفعيل $\KaTeX$، إذا أردت استخدام \$ بدون عرض تعبير رياضي، استخدم شرطة مائلة للخلف قبلها: `\$`.
## جدول
هذا مثال على جدول[^1]. تتغير ألوانه حسب سمة التدوينة.
| الرمز | العنصر | العدد الذري |
|--------|----------|--------------|
| H | هيدروجين| 1 |
| C | كربون | 6 |
| Fe | حديد | 26 |
| Au | ذهب | 79 |
## الشِفرات البرمجية
```rust
fn main() {
println!("مرحباً يا عالم") -> ();
}
```
### من اليمين إلى اليسار
{% force_text_direction(direction="rtl") %}
```
نص قل_مرحباً(نص الاسم) {
أرجع تنسيق("مرحباً {الاسم}")؛
}
```
{% end %}
## سطر برمجي
في Rust، تعلن عن متغير متغير باستخدام `let mut x = 5`، بينما في Python، تستخدم ببساطة `x = 5`. وبالمثل، لطباعة قيمة في Rust، تستخدم `println!("القيمة: {}", x)`، ولكن في Python، الأمر بسيط مثل `print(f"القيمة: {x}")`
وفي لغة البرمجة العربية هو `مهنة = "صائد فئران"`
## اقتباس
> وابِطُكَ قابِضِ الأَرواحِ يَرمي ... بِسَهمِ المَوتِ مِن تَحتِ الثِيابِ
>
> شَرابُكَ في السَرابِ إِذا عَطِشنا ... وَخُبزُكَ عِندَ مُنقَطِعِ التُرابِ
>
> — أبو الشمقمق، العصر العباسي
[^1]: وهذا مثال على الهامش!

110
content/blog/markdown/index.ca.md
View file

@ -1,110 +0,0 @@
+++
title = "Exemples de Markdown"
date = 2023-01-31
updated = 2025-02-21
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!

110
content/blog/markdown/index.es.md
View file

@ -1,110 +0,0 @@
+++
title = "Ejemplos de Markdown"
date = 2023-01-31
updated = 2025-02-21
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!

110
content/blog/markdown/index.md
View file

@ -1,110 +0,0 @@
+++
title = "Markdown examples"
date = 2023-01-31
updated = 2025-02-21
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!

BIN
content/blog/markdown/social_cards/blog_markdown.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 59 KiB

BIN
content/blog/markdown/social_cards/ca_blog_markdown.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 63 KiB

Some files were not shown because too many files have changed in this diff Show more