From 1d9ddb5ccff39d8ce34dccf446eb6aa4cc23dec6 Mon Sep 17 00:00:00 2001 From: Lee Kai Ze Date: Sat, 8 Nov 2025 23:06:22 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20feat(micro):=20add=20microblogg?= =?UTF-8?q?ing=20section=20to=20homepage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add micro section display on homepage with RSS feed - Support configurable section name via micro_section_name - Add toggle via show_micro config option - Create templates/partials/main_page_micro_list.html - Add sass/parts/_micro.scss for styling - Include RSS icon next to section heading Closes #1 --- content/_index.md | 4 + content/micro/2025-11-08-1430.md | 6 + content/micro/2025-11-08-2211.md | 6 + content/micro/2025-11-08-2226.md | 6 + content/micro/2025-11-08-2300.md | 6 + content/micro/_index.md | 8 ++ sass/main.scss | 1 + sass/parts/_micro.scss | 138 +++++++++++++++++++ scripts/new-micro.sh | 29 ++++ templates/partials/main_page_micro_list.html | 48 +++++++ templates/section.html | 4 + 11 files changed, 256 insertions(+) create mode 100644 content/micro/2025-11-08-1430.md create mode 100644 content/micro/2025-11-08-2211.md create mode 100644 content/micro/2025-11-08-2226.md create mode 100644 content/micro/2025-11-08-2300.md create mode 100644 content/micro/_index.md create mode 100644 sass/parts/_micro.scss create mode 100755 scripts/new-micro.sh create mode 100644 templates/partials/main_page_micro_list.html diff --git a/content/_index.md b/content/_index.md index 4d1dbe67..4e282089 100644 --- a/content/_index.md +++ b/content/_index.md @@ -10,6 +10,10 @@ projects_path = "projects/_index.md" max_projects = 3 show_projects_first = false social_media_card = "index.jpg" +micro_path = "micro/_index.md" +max_micro = 3 +micro_section_name = "Latest Thoughts" +show_micro = true +++ 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. diff --git a/content/micro/2025-11-08-1430.md b/content/micro/2025-11-08-1430.md new file mode 100644 index 00000000..1dcc191c --- /dev/null +++ b/content/micro/2025-11-08-1430.md @@ -0,0 +1,6 @@ ++++ +title = "2025-11-08 14:30" +date = 2025-11-08T14:30:00+08:00 ++++ + +Why Microblog: Thoughts decay without capture; short posts reduce friction between idea and publication. \ No newline at end of file diff --git a/content/micro/2025-11-08-2211.md b/content/micro/2025-11-08-2211.md new file mode 100644 index 00000000..1e502f21 --- /dev/null +++ b/content/micro/2025-11-08-2211.md @@ -0,0 +1,6 @@ ++++ +title = "2025-11-08 22:11" +date = 2025-11-08T22:11:53+08:00 ++++ + +Writing clarifies thinking and compounds your expertise into searchable, permanent knowledge capital. diff --git a/content/micro/2025-11-08-2226.md b/content/micro/2025-11-08-2226.md new file mode 100644 index 00000000..e2a27d64 --- /dev/null +++ b/content/micro/2025-11-08-2226.md @@ -0,0 +1,6 @@ ++++ +title = "2025-11-08 22:26" +date = 2025-11-08T22:26:37+08:00 ++++ + +Why use SSG: Pre-rendered HTML eliminates servers, databases, and runtime vulnerabilities while maximizing speed. diff --git a/content/micro/2025-11-08-2300.md b/content/micro/2025-11-08-2300.md new file mode 100644 index 00000000..e4d86303 --- /dev/null +++ b/content/micro/2025-11-08-2300.md @@ -0,0 +1,6 @@ ++++ +title = "2025-11-08 23:00" +date = 2025-11-08T23:00:00+08:00 ++++ + +Shipping code is better than perfect code. Ship it. \ No newline at end of file diff --git a/content/micro/_index.md b/content/micro/_index.md new file mode 100644 index 00000000..b224aaa6 --- /dev/null +++ b/content/micro/_index.md @@ -0,0 +1,8 @@ ++++ +title = "Micro" +description = "Short blogs" +sort_by = "date" +template = "section.html" +paginate_by = 20 +generate_feeds = true ++++ \ No newline at end of file diff --git a/sass/main.scss b/sass/main.scss index d1470ff3..3b3b7637 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -12,6 +12,7 @@ @use 'parts/_image-hover.scss'; @use 'parts/_image-toggler.scss'; @use 'parts/_image.scss'; +@use 'parts/_micro.scss'; @use 'parts/_misc.scss'; @use 'parts/_multilingual_quote.scss'; @use 'parts/_pagination.scss'; diff --git a/sass/parts/_micro.scss b/sass/parts/_micro.scss new file mode 100644 index 00000000..8f41db3e --- /dev/null +++ b/sass/parts/_micro.scss @@ -0,0 +1,138 @@ +// Micro posts section - force left alignment +#micro-posts { + margin-top: 4rem; + margin-left: 0; + margin-right: auto; +} + +// Card container - left aligned, no centering +.micro-card { + display: grid; + grid-template-columns: 200px 1fr; + gap: 3rem; + margin: 2rem 0; + margin-left: 0; + background-color: var(--navbar-color); + border: 1px solid var(--divider-color); + border-radius: 8px; + padding: 2rem; +} + +// Left column header +.micro-header { + h2 { + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0; + color: var(--text-color-high-contrast); + font-family: var(--header-font); + font-weight: 550; + font-size: 1.5rem; + line-height: 1.3; + } + + .feed-link { + display: inline-flex; + align-items: center; + text-decoration: none; + } + + .feed-icon { + display: block; + width: 1rem; + height: 1rem; + fill: var(--meta-color); + transition: fill 0.2s ease; + + &:hover { + fill: var(--primary-color); + } + } +} + +// Right column content +.micro-content-column { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +// Individual micro post +.micro-item { + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--divider-color); + + &:last-child { + padding-bottom: 0; + border-bottom: none; + } + + time { + display: block; + margin-bottom: 0.5rem; + color: var(--meta-color); + font-family: var(--sans-serif-font); + font-weight: 300; + font-size: 0.85rem; + } +} + +// Micro post text +.micro-text { + color: var(--text-color); + font-family: var(--sans-serif-font); + font-weight: 400; + font-size: 0.9rem; + line-height: 1.5rem; + + p { + margin: 0.5rem 0 1rem; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: var(--primary-color); + text-decoration: none; + + &:hover { + color: var(--hover-color); + } + } + + strong { + font-weight: 580; + } +} + +// Mobile responsive +@media only screen and (max-width: 1100px) { + #micro-posts { + margin-top: 3rem; + } + + .micro-card { + grid-template-columns: 1fr; + gap: 1.5rem; + padding: 1.5rem; + } + + .micro-header h2 { + font-size: 1.3rem; + } + + .micro-content-column { + gap: 1.2rem; + } + + .micro-item { + padding-bottom: 1.2rem; + } +} \ No newline at end of file diff --git a/scripts/new-micro.sh b/scripts/new-micro.sh new file mode 100755 index 00000000..db333cec --- /dev/null +++ b/scripts/new-micro.sh @@ -0,0 +1,29 @@ +#!/usr/bin/env bash +# Quick micro post generator - eliminates title/date friction + +set -euo pipefail + +# Get current timestamp +NOW=$(date +"%Y-%m-%dT%H:%M:%S%:z") +FILENAME=$(date +"%Y-%m-%d-%H%M") +TITLE=$(date +"%Y-%m-%d %H:%M") + +# Get content from stdin or prompt +if [ -t 0 ]; then + echo "Enter micro post content (Ctrl+D when done):" + CONTENT=$(cat) +else + CONTENT=$(cat) +fi + +# Create post +cat > "content/micro/${FILENAME}.md" < +
+
+

+ {{ section_name }} + {%- if micro_section.generate_feeds -%} + + + + + + + {%- endif -%} +

+
+
+ {% for post in show_pages | slice(end=max_micro) %} +
+ +
+ {{ post.content | safe }} +
+
+ {% endfor %} +
+
+ + {%- if show_pages | length > max_micro -%} +
+ All {{ section_name | lower }} ⟶ +
+ {%- endif -%} + + {%- endif -%} + {% endif %} +{% endif %} \ No newline at end of file diff --git a/templates/section.html b/templates/section.html index 3739461b..bfe1c9ba 100644 --- a/templates/section.html +++ b/templates/section.html @@ -52,6 +52,10 @@ {%- include "partials/main_page_posts_list.html" -%} {%- include "partials/main_page_projects_list.html" -%} {%- endif -%} + +{# Add micro posts section #} +{%- include "partials/main_page_micro_list.html" -%} + {%- include "partials/extra_features.html" -%} From 63fa698b5237469ae45e46e031608a0a079582cd Mon Sep 17 00:00:00 2001 From: welpo Date: Mon, 2 Feb 2026 01:33:11 +0100 Subject: [PATCH 2/3] update styling + add iine integration --- config.toml | 4 +- sass/parts/_micro.scss | 163 +++++------------- .../partials/content_security_policy.html | 2 + templates/partials/extra_features.html | 2 +- templates/partials/main_page_micro_list.html | 50 +++--- templates/section.html | 1 - theme.toml | 2 + 7 files changed, 73 insertions(+), 151 deletions(-) diff --git a/config.toml b/config.toml index 9a6a90e7..e484a44c 100644 --- a/config.toml +++ b/config.toml @@ -57,7 +57,7 @@ title = "~/tabi" description = "tabi es un tema accesible para Zola con búsqueda, soporte multilingüe, JavaScript opcional, una puntuación perfecta en Lighthouse y documentación exhaustiva. Diseñado para sitios web y blogs personales." generate_feeds = true taxonomies = [{name = "tags", feed = true}] -build_search_index = true +build_search_index = false [languages.ca] title = "~/tabi" @@ -178,6 +178,8 @@ iine_icon = "thumbs_up" # See https://iine.to/#customise # Unify like counts across all language versions of the same page. # When enabled, likes on /es/blog/hello/ will count towards /blog/hello/ (default language). iine_unified_languages = true +# Enable iine like buttons on micro posts. +micro_iine = true # Show "Jump to posts" link next to series' title. # By default, the link appears automatically when a series description exceeds 2000 characters. diff --git a/sass/parts/_micro.scss b/sass/parts/_micro.scss index 8f41db3e..ca04e557 100644 --- a/sass/parts/_micro.scss +++ b/sass/parts/_micro.scss @@ -1,138 +1,65 @@ -// Micro posts section - force left alignment #micro-posts { margin-top: 4rem; - margin-left: 0; - margin-right: auto; } -// Card container - left aligned, no centering -.micro-card { - display: grid; - grid-template-columns: 200px 1fr; - gap: 3rem; - margin: 2rem 0; - margin-left: 0; - background-color: var(--navbar-color); - border: 1px solid var(--divider-color); - border-radius: 8px; - padding: 2rem; -} +.micro-list { + .micro-entry { + border-bottom: 0.5px solid var(--divider-color); + padding: 1.3rem 0; -// Left column header -.micro-header { - h2 { + &:last-child { + border-bottom: none; + } + } + + .micro-date { + display: inline-block; + transition: color 0.15s; + color: var(--meta-color); + font-weight: 300; + font-size: 0.85rem; + text-decoration: none; + + &:hover { + background-color: transparent; + color: var(--primary-color); + } + } + + .micro-meta { display: flex; align-items: center; gap: 0.5rem; - margin: 0; - color: var(--text-color-high-contrast); - font-family: var(--header-font); - font-weight: 550; - font-size: 1.5rem; - line-height: 1.3; + margin-bottom: 0.35rem; + + .iine-button { + color: var(--meta-color); + font-size: 0.85rem; + } } - .feed-link { - display: inline-flex; - align-items: center; - text-decoration: none; - } + .micro-text { + color: var(--text-color); + font-weight: 350; + font-size: 0.95rem; + line-height: 1.6; - .feed-icon { - display: block; - width: 1rem; - height: 1rem; - fill: var(--meta-color); - transition: fill 0.2s ease; + p { + margin: 0.5rem 0 1rem; - &:hover { - fill: var(--primary-color); + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } } -// Right column content -.micro-content-column { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -// Individual micro post -.micro-item { - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--divider-color); - - &:last-child { - padding-bottom: 0; - border-bottom: none; - } - - time { - display: block; - margin-bottom: 0.5rem; - color: var(--meta-color); - font-family: var(--sans-serif-font); - font-weight: 300; - font-size: 0.85rem; - } -} - -// Micro post text -.micro-text { - color: var(--text-color); - font-family: var(--sans-serif-font); - font-weight: 400; - font-size: 0.9rem; - line-height: 1.5rem; - - p { - margin: 0.5rem 0 1rem; - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - - a { - color: var(--primary-color); - text-decoration: none; - - &:hover { - color: var(--hover-color); - } - } - - strong { - font-weight: 580; - } -} - -// Mobile responsive @media only screen and (max-width: 1100px) { #micro-posts { margin-top: 3rem; } - - .micro-card { - grid-template-columns: 1fr; - gap: 1.5rem; - padding: 1.5rem; - } - - .micro-header h2 { - font-size: 1.3rem; - } - - .micro-content-column { - gap: 1.2rem; - } - - .micro-item { - padding-bottom: 1.2rem; - } -} \ No newline at end of file +} diff --git a/templates/partials/content_security_policy.html b/templates/partials/content_security_policy.html index e8fa0623..5efb8685 100644 --- a/templates/partials/content_security_policy.html +++ b/templates/partials/content_security_policy.html @@ -9,6 +9,8 @@ content="default-src 'self' {%- set isso_enabled = config.extra.isso.enabled_for_all_posts or page.extra.isso -%} {%- if page -%} {%- set iine_enabled = macros_settings::evaluate_setting_priority(setting="iine", page=page, default_global_value=false) == "true" -%} + {%- elif section and section.extra.show_micro | default(value=false) and config.extra.micro_iine | default(value=false) -%} + {%- set iine_enabled = true -%} {%- endif -%} {%- if page -%} {%- set mermaid_enabled = macros_settings::evaluate_setting_priority(setting="mermaid", page=page, default_global_value=false) == "true" -%} diff --git a/templates/partials/extra_features.html b/templates/partials/extra_features.html index 6a085c08..f38c2d9e 100644 --- a/templates/partials/extra_features.html +++ b/templates/partials/extra_features.html @@ -86,6 +86,6 @@ {%- endif -%} {# Add iine.js for the like button #} -{%- if page and macros_settings::evaluate_setting_priority(setting="iine", page=page_s, section=section_s, default_global_value=false) == "true" -%} +{%- if (page and macros_settings::evaluate_setting_priority(setting="iine", page=page_s, section=section_s, default_global_value=false) == "true") or (section and section.extra.show_micro | default(value=false) and config.extra.micro_iine | default(value=false)) -%} {%- endif -%} diff --git a/templates/partials/main_page_micro_list.html b/templates/partials/main_page_micro_list.html index ff60b251..dc4f2129 100644 --- a/templates/partials/main_page_micro_list.html +++ b/templates/partials/main_page_micro_list.html @@ -1,42 +1,32 @@ -{% if section.extra.show_micro | default(value=true) %} +{% if section.extra.show_micro | default(value=false) %} {% if section.extra.micro_path %} {%- set micro_section = get_section(path=section.extra.micro_path) -%} {%- if micro_section -%} {%- set show_pages = micro_section.pages -%} {%- set max_micro = section.extra.max_micro | default(value=5) -%} {%- set section_name = section.extra.micro_section_name | default(value="Latest Thoughts") -%} -
-
-
-

- {{ section_name }} - {%- if micro_section.generate_feeds -%} - - - - - +

{{ section_name }}

+
+ {% for post in show_pages | slice(end=max_micro) %} +
+
+ + - {%- endif -%} -

-
-
- {% for post in show_pages | slice(end=max_micro) %} -
- -
- {{ post.content | safe }} -
+ {%- if config.extra.micro_iine | default(value=false) -%} + {%- set slug = post.path -%} + {%- include "partials/iine_button.html" -%} + {%- endif -%}
- {% endfor %} -
+
+ {{ post.content | safe }} +
+
+ {% endfor %}
- {%- if show_pages | length > max_micro -%}
All {{ section_name | lower }} ⟶ @@ -45,4 +35,4 @@
{%- endif -%} {% endif %} -{% endif %} \ No newline at end of file +{% endif %} diff --git a/templates/section.html b/templates/section.html index bfe1c9ba..4d996650 100644 --- a/templates/section.html +++ b/templates/section.html @@ -55,7 +55,6 @@ {# Add micro posts section #} {%- include "partials/main_page_micro_list.html" -%} - {%- include "partials/extra_features.html" -%} diff --git a/theme.toml b/theme.toml index c48f287c..c19d4599 100644 --- a/theme.toml +++ b/theme.toml @@ -124,6 +124,8 @@ iine_icon = "heart" # See https://iine.to/#customise # Unify like counts across all language versions of the same page. # When enabled, likes on /es/blog/hello/ will count towards /blog/hello/ (default language). iine_unified_languages = true +# Enable iine like buttons on micro posts. +micro_iine = false # Show "Jump to posts" link next to series' title. # By default, the link appears automatically when a series description exceeds 2000 characters. From 742d9ea1fcd1aeedbff3baebebe4aca9786ea4d8 Mon Sep 17 00:00:00 2001 From: Lee Kai Ze Date: Mon, 2 Feb 2026 23:41:42 +0800 Subject: [PATCH 3/3] update microblog examples title --- content/_index.md | 2 +- content/micro/2025-11-08-1430.md | 2 +- content/micro/2025-11-08-2211.md | 2 +- content/micro/2025-11-08-2226.md | 2 +- content/micro/2025-11-08-2300.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/content/_index.md b/content/_index.md index 4e282089..72bbe673 100644 --- a/content/_index.md +++ b/content/_index.md @@ -12,7 +12,7 @@ show_projects_first = false social_media_card = "index.jpg" micro_path = "micro/_index.md" max_micro = 3 -micro_section_name = "Latest Thoughts" +micro_section_name = "Latest thoughts" show_micro = true +++ diff --git a/content/micro/2025-11-08-1430.md b/content/micro/2025-11-08-1430.md index 1dcc191c..8224e9a5 100644 --- a/content/micro/2025-11-08-1430.md +++ b/content/micro/2025-11-08-1430.md @@ -1,5 +1,5 @@ +++ -title = "2025-11-08 14:30" +title = "Start microblogs to capture ideas" date = 2025-11-08T14:30:00+08:00 +++ diff --git a/content/micro/2025-11-08-2211.md b/content/micro/2025-11-08-2211.md index 1e502f21..1ec52246 100644 --- a/content/micro/2025-11-08-2211.md +++ b/content/micro/2025-11-08-2211.md @@ -1,5 +1,5 @@ +++ -title = "2025-11-08 22:11" +title = "Start writing" date = 2025-11-08T22:11:53+08:00 +++ diff --git a/content/micro/2025-11-08-2226.md b/content/micro/2025-11-08-2226.md index e2a27d64..dc490a19 100644 --- a/content/micro/2025-11-08-2226.md +++ b/content/micro/2025-11-08-2226.md @@ -1,5 +1,5 @@ +++ -title = "2025-11-08 22:26" +title = "SSG is simple" date = 2025-11-08T22:26:37+08:00 +++ diff --git a/content/micro/2025-11-08-2300.md b/content/micro/2025-11-08-2300.md index e4d86303..9fdf4199 100644 --- a/content/micro/2025-11-08-2300.md +++ b/content/micro/2025-11-08-2300.md @@ -1,5 +1,5 @@ +++ -title = "2025-11-08 23:00" +title = "Just ship the code" date = 2025-11-08T23:00:00+08:00 +++