From 06c55da7b73c9ed547c240c029c6712659d362ac Mon Sep 17 00:00:00 2001 From: Lee Kai Ze Date: Sat, 8 Nov 2025 23:06:22 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(micro):=20add=20microblogging?= =?UTF-8?q?=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 4d1dbe6..4e28208 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 0000000..1dcc191 --- /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 0000000..1e502f2 --- /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 0000000..e2a27d6 --- /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 0000000..e4d8630 --- /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 0000000..b224aaa --- /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 d1470ff..3b3b763 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 0000000..8f41db3 --- /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 0000000..db333ce --- /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 3739461..bfe1c9b 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" -%}