Skip to content

Commit

Permalink
✨ feat: add support for social media cards (#130)
Browse files Browse the repository at this point in the history
  • Loading branch information
welpo authored Sep 6, 2023
1 parent ab4b523 commit d53b847
Show file tree
Hide file tree
Showing 77 changed files with 162 additions and 35 deletions.
74 changes: 64 additions & 10 deletions .githooks/pre-commit
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,48 @@ function contains_todo() {
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:1025 -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
}
}

function has_minified_version() {
local file="$1"
local extension="${file##*.}"
Expand Down Expand Up @@ -94,7 +136,9 @@ 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/ #
# Interrupt the commit if a draft .md file is being committed. #
# 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.
Expand All @@ -114,13 +158,6 @@ for file in $all_changed_files; do
continue
fi

# If the file is an .md file and it's a draft, abort the commit.
if [[ "$file" == *.md ]]; then
if is_draft "$file"; then
error_exit "Draft file $file is being committed!"
fi
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."
Expand Down Expand Up @@ -159,10 +196,21 @@ for file in $all_changed_files; do
done

# Get the modified .md to update the "updated" field in the front matter.
modified_files=$(git diff --cached --name-only --diff-filter=M | grep -E '\.md$' | grep -v '_index.md$')
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_files; do
for file in $modified_md_files; do
# 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')

Expand Down Expand Up @@ -193,8 +241,14 @@ for file in $modified_files; do

# 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/ #
Expand Down
7 changes: 5 additions & 2 deletions config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -222,8 +222,11 @@ favicon = "img/seedling.png"
# Compatibility: https://caniuse.com/link-icon-svg
favicon_emoji = "🌱"

# This header image is used for SEO. For example if you were to share an image via Messenger/Instagram/Twitter a preview picture is also presented
headerImage = ""
# Path to the fallback image for social media cards (the preview image shown when sharing a link on WhatsApp, LinkedIn…).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://github.com/welpo/tabi/pull/128
# Learn how to create these images in batch and automatically:
# https://osc.garden/blog/automating-social-media-cards-zola/
social_media_card = "img/social_cards/index.jpg"

menu = [
{ name = "blog", url = "blog", trailing_slash = true },
Expand Down
1 change: 1 addition & 0 deletions content/_index.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ template = "section.html"
header = {title = "Hola! Soc tabi~", img = "img/main.webp" }
section_path = "blog/_index.ca.md"
max_posts = 4
social_media_card = "img/social_cards/ca.jpg"
+++

tabi és un tema de [Zola](https://getzola.org) ràpid, lleuger i modern. Té com a objectiu ser una pàgina personal i llar d'entrades de blog. Compta amb una puntuació perfecta de Lighthouse, disseny responsive, tema fosc i clar, shortcodes personalitzats i molt més.
1 change: 1 addition & 0 deletions content/_index.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ template = "section.html"
header = {title = "¡Hola! Soy tabi~", img = "img/main.webp" }
section_path = "blog/_index.es.md"
max_posts = 4
social_media_card = "img/social_cards/es.jpg"
+++

tabi es un tema de [Zola](https://getzola.org) rápido, ligero y moderno. Su objetivo es ser una página personal y hogar para publicaciones de blogs. Cuenta con una puntuación perfecta en Lighthouse, diseño responsive, tema oscuro y claro, shortcodes personalizados y mucho más.
1 change: 1 addition & 0 deletions content/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ template = "section.html"
header = {title = "Hello! I'm tabi~", img = "img/main.webp" }
section_path = "blog/_index.md"
max_posts = 4
social_media_card = "img/social_cards/index.jpg"
+++

tabi is a fast, lightweight, and modern [Zola](https://getzola.org) theme. It aims to be a personal page and home to blog posts. It features a perfect Lighthouse score, responsive design, dark and light themes, custom shortcodes, and much more.
3 changes: 3 additions & 0 deletions content/archive/_index.ca.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
+++
title = "Arxiu"
template = "archive.html"

[extra]
social_media_card = "img/social_cards/ca_archive.jpg"
+++
3 changes: 3 additions & 0 deletions content/archive/_index.es.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
+++
title = "Archivo"
template = "archive.html"

[extra]
social_media_card = "img/social_cards/es_archive.jpg"
+++
3 changes: 3 additions & 0 deletions content/archive/_index.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
+++
title = "Archive"
template = "archive.html"

[extra]
social_media_card = "img/social_cards/archive.jpg"
+++
3 changes: 3 additions & 0 deletions content/blog/_index.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,7 @@ title = "Blog"
sort_by = "date"
template = "section.html"
insert_anchor_links = "left"

[extra]
social_media_card = "img/social_cards/ca_blog.jpg"
+++
3 changes: 3 additions & 0 deletions content/blog/_index.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,7 @@ title = "Blog"
sort_by = "date"
template = "section.html"
insert_anchor_links = "left"

[extra]
social_media_card = "img/social_cards/es_blog.jpg"
+++
3 changes: 3 additions & 0 deletions content/blog/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,7 @@ title = "Blog"
sort_by = "date"
template = "section.html"
insert_anchor_links = "left"

[extra]
social_media_card = "img/social_cards/blog.jpg"
+++
1 change: 1 addition & 0 deletions content/blog/comments.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags = ["funcionalitat", "tutorial"]
giscus = true
quick_navigation_buttons = true
toc = true
social_media_card = "img/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/).
Expand Down
1 change: 1 addition & 0 deletions content/blog/comments.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags = ["funcionalidad", "tutorial"]
giscus = true
quick_navigation_buttons = true
toc = true
social_media_card = "img/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/).
Expand Down
1 change: 1 addition & 0 deletions content/blog/comments.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags = ["showcase", "tutorial"]
giscus = true
quick_navigation_buttons = true
toc = true
social_media_card = "img/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/).
Expand Down
3 changes: 3 additions & 0 deletions content/blog/custom-font-subset.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ description = "Aprèn com crear un subconjunt personalitzat que només inclogui

[taxonomies]
tags = ["funcionalitat", "tutorial"]

[extra]
social_media_card = "img/social_cards/ca_blog_custom_font_subset.jpg"
+++

## El problema
Expand Down
3 changes: 3 additions & 0 deletions content/blog/custom-font-subset.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ description = "Aprende cómo crear un subconjunto personalizado que solo incluya

[taxonomies]
tags = ["funcionalidad", "tutorial"]

[extra]
social_media_card = "img/social_cards/es_blog_custom_font_subset.jpg"
+++

## El problema
Expand Down
3 changes: 3 additions & 0 deletions content/blog/custom-font-subset.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ description = "Learn how to create a custom subset that only includes the necess

[taxonomies]
tags = ["showcase", "tutorial"]

[extra]
social_media_card = "img/social_cards/blog_custom_font_subset.jpg"
+++

## The problem
Expand Down
1 change: 1 addition & 0 deletions content/blog/customise-tabi.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["funcionalitat", "tutorial"]
[extra]
toc = true
quick_navigation_buttons = true
social_media_card = "img/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").
Expand Down
1 change: 1 addition & 0 deletions content/blog/customise-tabi.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["funcionalidad", "tutorial"]
[extra]
toc = true
quick_navigation_buttons = true
social_media_card = "img/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").
Expand Down
1 change: 1 addition & 0 deletions content/blog/customise-tabi.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["showcase", "tutorial"]
[extra]
toc = true
quick_navigation_buttons = true
social_media_card = "img/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).
Expand Down
1 change: 1 addition & 0 deletions content/blog/javascript.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ tags = ["funcionalitat", "tutorial"]

[extra]
footnote_backlinks = true
social_media_card = "img/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.
Expand Down
1 change: 1 addition & 0 deletions content/blog/javascript.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ tags = ["funcionalidad", "tutorial"]

[extra]
footnote_backlinks = true
social_media_card = "img/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.
Expand Down
1 change: 1 addition & 0 deletions content/blog/javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ tags = ["showcase", "tutorial"]

[extra]
footnote_backlinks = true
social_media_card = "img/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.
Expand Down
1 change: 1 addition & 0 deletions content/blog/markdown.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["markdown", "funcionalitat"]
[extra]
katex = true
footnote_backlinks = true
social_media_card = "img/social_cards/ca_blog_markdown.jpg"
+++

## $\KaTeX$
Expand Down
1 change: 1 addition & 0 deletions content/blog/markdown.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["markdown", "funcionalidad"]
[extra]
katex = true
footnote_backlinks = true
social_media_card = "img/social_cards/es_blog_markdown.jpg"
+++

## $\KaTeX$
Expand Down
1 change: 1 addition & 0 deletions content/blog/markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["markdown", "showcase"]
[extra]
katex = true
footnote_backlinks = true
social_media_card = "img/social_cards/blog_markdown.jpg"
+++

## $\KaTeX$
Expand Down
3 changes: 3 additions & 0 deletions content/blog/security.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment

[taxonomies]
tags = ["seguretat", "funcionalitat"]

[extra]
social_media_card = "img/social_cards/ca_blog_security.jpg"
+++

La configuració per defecte del tema obté una puntuació A+ a l'[Observatori de Mozilla](https://observatory.mozilla.org).[^1]
Expand Down
3 changes: 3 additions & 0 deletions content/blog/security.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilme

[taxonomies]
tags = ["seguridad", "funcionalidad"]

[extra]
social_media_card = "img/social_cards/es_blog_security.jpg"
+++

La configuración predeterminada del tema obtiene una calificación de A+ en [Mozilla Observatory](https://observatory.mozilla.org).[^1]
Expand Down
3 changes: 3 additions & 0 deletions content/blog/security.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ description = "tabi has an easily customizable Content Security Policy (CSP) wit

[taxonomies]
tags = ["security", "showcase"]

[extra]
social_media_card = "img/social_cards/blog_security.jpg"
+++

The default configuration of the theme gets an A+ score on [Mozilla Observatory](https://observatory.mozilla.org).[^1]
Expand Down
1 change: 1 addition & 0 deletions content/blog/shortcodes.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags = ["funcionalitat", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
social_media_card = "img/social_cards/ca_blog_shortcodes.jpg"
+++

## Shortcodes d'imatge
Expand Down
1 change: 1 addition & 0 deletions content/blog/shortcodes.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags = ["funcionalidad", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
social_media_card = "img/social_cards/es_blog_shortcodes.jpg"
+++

## Shortcodes de imagen
Expand Down
1 change: 1 addition & 0 deletions content/blog/shortcodes.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ tags = ["showcase", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
social_media_card = "img/social_cards/blog_shortcodes.jpg"
+++

## Image shortcodes
Expand Down
1 change: 1 addition & 0 deletions content/blog/toc.ca.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["funcionalitat", "markdown", "tutorial"]
[extra]
toc = true
quick_navigation_buttons = true
social_media_card = "img/social_cards/ca_blog_toc.jpg"
+++

## Documentació
Expand Down
1 change: 1 addition & 0 deletions content/blog/toc.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ tags = ["funcionalidad", "markdown", "tutorial"]
[extra]
toc = true
quick_navigation_buttons = true
social_media_card = "img/social_cards/es_blog_toc.jpg"
+++

## Documentación
Expand Down
Loading

0 comments on commit d53b847

Please sign in to comment.