feat: add h-card microformat to hero, simplify homepage to builder-only
- hero.njk: add h-card/p-name/u-url/u-photo/p-job-title/p-note markup - home.njk: remove tier-2 fallback, always use homepage-builder Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
svemagie
@@ -11,33 +11,36 @@
|
||||
{% set authorBio = id.bio if (id.bio is defined) else site.author.bio %}
|
||||
{% set siteDescription = id.description if (id.description is defined) else site.description %}
|
||||
{% set socialLinks = id.social if (id.social is defined) else site.social %}
|
||||
{% set authorUrl = id.url if (id.url is defined and id.url) else (site.author.url or site.url) %}
|
||||
|
||||
<section class="mb-8 sm:mb-12">
|
||||
<section class="h-card mb-8 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
|
||||
{# Avatar #}
|
||||
{% if heroConfig.showAvatar != false %}
|
||||
<img
|
||||
src="{{ authorAvatar }}"
|
||||
alt="{{ authorName }}"
|
||||
width="96"
|
||||
height="96"
|
||||
class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
|
||||
loading="eager"
|
||||
>
|
||||
<a href="{{ authorUrl }}" class="u-url u-uid flex-shrink-0" rel="me">
|
||||
<img
|
||||
src="{{ authorAvatar }}"
|
||||
alt="{{ authorName }}"
|
||||
width="96"
|
||||
height="96"
|
||||
class="u-photo w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg"
|
||||
loading="eager"
|
||||
>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{# Introduction #}
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
|
||||
{{ authorName }}
|
||||
<a href="{{ authorUrl }}" class="p-name u-url hover:text-accent-600 dark:hover:text-accent-400" rel="me">{{ authorName }}</a>
|
||||
</h1>
|
||||
{% if authorTitle %}
|
||||
<p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
|
||||
<p class="p-job-title text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
|
||||
{{ authorTitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if authorBio %}
|
||||
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
|
||||
<p class="p-note text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
|
||||
{{ authorBio }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
@@ -3,175 +3,4 @@ layout: layouts/base.njk
|
||||
withSidebar: true
|
||||
---
|
||||
|
||||
{# Homepage content — two-tier fallback: #}
|
||||
{# 1. Plugin config (homepageConfig) — homepage builder controls everything #}
|
||||
{# 2. Default — show recent posts with default hero #}
|
||||
|
||||
{# Default hero — only shown for Tier 2 (plugin controls its own hero) #}
|
||||
{% if not (homepageConfig and homepageConfig.sections) %}
|
||||
<section class="mb-8 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
|
||||
{# Avatar #}
|
||||
<img
|
||||
src="{{ site.author.avatar }}"
|
||||
alt="{{ site.author.name }}"
|
||||
width="96"
|
||||
height="96"
|
||||
class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
|
||||
loading="eager"
|
||||
>
|
||||
|
||||
{# Introduction #}
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
|
||||
{{ site.author.name }}
|
||||
</h1>
|
||||
<p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
|
||||
{{ site.author.title }}
|
||||
</p>
|
||||
{% if site.author.bio %}
|
||||
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
|
||||
{{ site.author.bio }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if site.description %}
|
||||
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
|
||||
{{ site.description }}
|
||||
<a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more →</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# Social Links #}
|
||||
{% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{% for link in site.social %}
|
||||
<a
|
||||
href="{{ link.url }}"
|
||||
rel="{{ link.rel }} noopener"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-sm bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
|
||||
target="_blank"
|
||||
>
|
||||
<span class="{{ socialIconColorClass(link.icon) }}">{{ socialIcon(link.icon, "w-5 h-5") }}</span>
|
||||
<span class="text-sm font-medium">{{ link.name }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# --- Tier 1: Plugin-driven layout --- #}
|
||||
{% if homepageConfig and homepageConfig.sections %}
|
||||
{% include "components/homepage-builder.njk" %}
|
||||
|
||||
{# --- Tier 2: Default — recent posts and explore links --- #}
|
||||
{% else %}
|
||||
|
||||
{# Recent Posts #}
|
||||
{% if collections.posts and collections.posts.length %}
|
||||
<section class="mb-8 sm:mb-12">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Recent Posts</h2>
|
||||
<ul class="post-list">
|
||||
{% for post in collections.posts | head(10) %}
|
||||
{% set likedUrl = post.data.likeOf or post.data.like_of %}
|
||||
{% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
|
||||
{% set repostedUrl = post.data.repostOf or post.data.repost_of %}
|
||||
{% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
|
||||
|
||||
{% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
|
||||
{% if likedUrl %}
|
||||
{% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
|
||||
{% elif bookmarkedUrl %}
|
||||
{% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
|
||||
{% elif repostedUrl %}
|
||||
{% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
|
||||
{% elif replyToUrl %}
|
||||
{% set borderClass = "border-l-[3px] border-l-sky-400 dark:border-l-sky-500" %}
|
||||
{% endif %}
|
||||
|
||||
{% set postTitle = ((post.data.title or post.data.name or "") | trim) %}
|
||||
<li class="h-entry post-card {{ borderClass }}">
|
||||
{% if postTitle %}
|
||||
<h3 class="text-xl font-semibold mb-1">
|
||||
<a href="{{ post.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
|
||||
{{ postTitle }}
|
||||
</a>
|
||||
</h3>
|
||||
{% endif %}
|
||||
|
||||
{% if post.data.summary %}
|
||||
<p class="p-summary text-surface-700 dark:text-surface-300 mt-2 mb-2">
|
||||
{{ post.data.summary }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="post-meta">
|
||||
<time class="dt-published font-mono text-sm" datetime="{{ post.data.published or post.date }}">
|
||||
{{ (post.data.published or post.date) | date("MMM d, yyyy") }}
|
||||
</time>
|
||||
{% if postTitle %}
|
||||
<a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Read more →</a>
|
||||
{% else %}
|
||||
<a href="{{ post.url }}" class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
|
||||
View all posts
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Explore — quick links to key sections #}
|
||||
<section class="mb-8 sm:mb-12">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Explore</h2>
|
||||
<div class="grid gap-3 sm:grid-cols-3">
|
||||
<a href="/blog/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
|
||||
<div class="text-2xl mb-2">
|
||||
<svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-surface-900 dark:text-surface-100">Blog</span>
|
||||
<p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Articles, notes, and photos</p>
|
||||
</a>
|
||||
<a href="/cv/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
|
||||
<div class="text-2xl mb-2">
|
||||
<svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-surface-900 dark:text-surface-100">CV</span>
|
||||
<p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Experience and projects</p>
|
||||
</a>
|
||||
<a href="/about/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
|
||||
<div class="text-2xl mb-2">
|
||||
<svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-semibold text-surface-900 dark:text-surface-100">About</span>
|
||||
<p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Who I am and what I do</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Posting Activity — contribution graph (Tier 2 default only) #}
|
||||
{% if collections.posts and collections.posts.length %}
|
||||
<section class="mb-8 sm:mb-12">
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Posting Activity</h2>
|
||||
{% postGraph collections.posts %}
|
||||
<a href="/graph/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
|
||||
View full history
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% endif %} {# end two-tier fallback #}
|
||||
{% include "components/homepage-builder.njk" %}
|
||||
|
||||
Reference in New Issue
Block a user