mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
feat: add dedicated /cv page and simplify homepage fallback
Move CV content to a standalone /cv page that reuses the section partials from the homepage builder. Simplify home.njk from a 3-tier to 2-tier fallback (plugin config OR recent posts + explore links). Add /cv to the slash pages navigation dropdown. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ricardo
@@ -127,6 +127,7 @@
|
||||
</a>
|
||||
<div class="nav-dropdown-menu" x-show="open" x-transition x-cloak>
|
||||
<a href="/slashes/">All Pages</a>
|
||||
<a href="/cv/">/cv</a>
|
||||
{% for item in collections.pages %}
|
||||
<a href="{{ item.url }}">/{{ item.fileSlug }}</a>
|
||||
{% endfor %}
|
||||
@@ -213,6 +214,7 @@
|
||||
</button>
|
||||
<div class="mobile-nav-submenu" x-show="slashOpen" x-collapse>
|
||||
<a href="/slashes/">All Pages</a>
|
||||
<a href="/cv/">/cv</a>
|
||||
{% for item in collections.pages %}
|
||||
<a href="{{ item.url }}">/{{ item.fileSlug }}</a>
|
||||
{% endfor %}
|
||||
|
||||
@@ -3,12 +3,11 @@ layout: layouts/base.njk
|
||||
withSidebar: true
|
||||
---
|
||||
|
||||
{# Homepage content — three-tier fallback: #}
|
||||
{# Homepage content — two-tier fallback: #}
|
||||
{# 1. Plugin config (homepageConfig) — homepage builder controls everything #}
|
||||
{# 2. CV data — show experience/projects/skills with default hero #}
|
||||
{# 3. Default — show recent posts and activity with default hero #}
|
||||
{# 2. Default — show recent posts with default hero #}
|
||||
|
||||
{# Default hero — only shown for Tier 2 and Tier 3 (plugin controls its own 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">
|
||||
@@ -67,173 +66,11 @@ withSidebar: true
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% set hasCvData = (cv.experience and cv.experience.length) or
|
||||
(cv.projects and cv.projects.length) or
|
||||
(cv.skills and (cv.skills | dictsort | length)) %}
|
||||
|
||||
{# --- Tier 1: Plugin-driven layout --- #}
|
||||
{% if homepageConfig and homepageConfig.sections %}
|
||||
{% include "components/homepage-builder.njk" %}
|
||||
|
||||
{# --- Tier 2: CV-based layout --- #}
|
||||
{% elif hasCvData %}
|
||||
|
||||
{# Work Experience Timeline - only show if data exists #}
|
||||
{% if cv.experience and cv.experience.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">Experience</h2>
|
||||
|
||||
<div class="timeline">
|
||||
{% for job in cv.experience %}
|
||||
<article class="timeline-item">
|
||||
<div class="flex flex-wrap items-baseline gap-2 mb-2">
|
||||
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100">
|
||||
{{ job.title }}
|
||||
</h3>
|
||||
<span class="text-primary-600 dark:text-primary-400">@ {{ job.company }}</span>
|
||||
{% if job.type != "full-time" %}
|
||||
<span class="text-xs px-2 py-0.5 bg-surface-200 dark:bg-surface-700 rounded">{{ job.type }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-surface-600 dark:text-surface-400 mb-2">
|
||||
<time datetime="{{ job.startDate }}">{{ job.startDate }}</time> -
|
||||
{% if job.endDate %}
|
||||
<time datetime="{{ job.endDate }}">{{ job.endDate }}</time>
|
||||
{% else %}
|
||||
Present
|
||||
{% endif %}
|
||||
· {{ job.location }}
|
||||
</p>
|
||||
|
||||
{% if job.description %}
|
||||
<p class="text-surface-700 dark:text-surface-300 mb-2">{{ job.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if job.highlights %}
|
||||
<ul class="list-disc list-inside text-sm text-surface-600 dark:text-surface-400 space-y-1">
|
||||
{% for highlight in job.highlights %}
|
||||
<li>{{ highlight }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Projects Section - only show if data exists #}
|
||||
{% if cv.projects and cv.projects.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">Projects</h2>
|
||||
|
||||
<div class="grid gap-3 sm:gap-4 md:grid-cols-2">
|
||||
{% for project in cv.projects %}
|
||||
<article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
|
||||
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
|
||||
{% if project.url %}
|
||||
<a href="{{ project.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
|
||||
{{ project.name }}
|
||||
</a>
|
||||
{% else %}
|
||||
{{ project.name }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
|
||||
<p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ project.description }}</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{% for tech in project.technologies %}
|
||||
<span class="skill-badge">{{ tech }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if project.status == "active" %}
|
||||
<span class="inline-block mt-3 text-xs px-2 py-0.5 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">Active</span>
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Skills Section - only show if data exists #}
|
||||
{% if cv.skills and (cv.skills | dictsort | 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">Skills</h2>
|
||||
|
||||
<div class="grid gap-4 sm:gap-6 md:grid-cols-2">
|
||||
{% for category, skills in cv.skills %}
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
|
||||
{{ category }}
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{% for skill in skills %}
|
||||
<span class="skill-badge">{{ skill }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Education & Languages - only show if data exists #}
|
||||
{% if (cv.education and cv.education.length) or (cv.languages and cv.languages.length) %}
|
||||
<section class="mb-8 sm:mb-12 grid gap-6 sm:gap-8 md:grid-cols-2">
|
||||
{# Education #}
|
||||
{% if cv.education and cv.education.length %}
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Education</h2>
|
||||
{% for edu in cv.education %}
|
||||
<article class="mb-4 last:mb-0">
|
||||
<h3 class="font-semibold text-surface-900 dark:text-surface-100">{{ edu.degree }}</h3>
|
||||
<p class="text-primary-600 dark:text-primary-400">{{ edu.institution }}</p>
|
||||
<p class="text-sm text-surface-600 dark:text-surface-400">{{ edu.year }} · {{ edu.location }}</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Languages #}
|
||||
{% if cv.languages and cv.languages.length %}
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-6">Languages</h2>
|
||||
<ul class="space-y-2">
|
||||
{% for lang in cv.languages %}
|
||||
<li class="flex justify-between items-center">
|
||||
<span class="text-surface-900 dark:text-surface-100">{{ lang.name }}</span>
|
||||
<span class="text-sm text-surface-600 dark:text-surface-400">{{ lang.level }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Interests - only show if data exists #}
|
||||
{% if cv.interests and cv.interests.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">Interests</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{% for interest in cv.interests %}
|
||||
<span class="skill-badge">{{ interest }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Last Updated - only show if CV has content #}
|
||||
{% if cv.lastUpdated and (cv.experience.length or cv.projects.length) %}
|
||||
<p class="text-sm text-surface-500 text-center">
|
||||
Last updated: {{ cv.lastUpdated }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{# --- Tier 3: Default — recent activity when no CV and no plugin --- #}
|
||||
{# --- Tier 2: Default — recent posts and explore links --- #}
|
||||
{% else %}
|
||||
|
||||
{# Recent Posts #}
|
||||
@@ -269,46 +106,38 @@ withSidebar: true
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{# Getting Started — onboarding guide for new deployments #}
|
||||
<section class="mb-8 sm:mb-12 p-6 bg-primary-50 dark:bg-primary-900/20 rounded-lg border border-primary-200 dark:border-primary-800">
|
||||
<h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-4">Getting Started</h2>
|
||||
|
||||
<div class="space-y-4 text-surface-700 dark:text-surface-300">
|
||||
<div class="flex gap-3">
|
||||
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-600 text-white text-sm flex items-center justify-center font-bold">1</span>
|
||||
<div>
|
||||
<strong class="text-surface-900 dark:text-surface-100">Create your first post</strong>
|
||||
<p class="text-sm mt-1">
|
||||
<a href="/session/login" class="text-primary-600 dark:text-primary-400 hover:underline">Sign in</a>,
|
||||
then visit <a href="/create" class="text-primary-600 dark:text-primary-400 hover:underline">/create</a>
|
||||
to publish notes, articles, bookmarks, and photos.
|
||||
</p>
|
||||
{# 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-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors text-center">
|
||||
<div class="text-2xl mb-2">
|
||||
<svg class="w-8 h-8 mx-auto text-primary-600 dark:text-primary-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>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-600 text-white text-sm flex items-center justify-center font-bold">2</span>
|
||||
<div>
|
||||
<strong class="text-surface-900 dark:text-surface-100">Set up syndication</strong>
|
||||
<p class="text-sm mt-1">
|
||||
Cross-post to Mastodon, Bluesky, and LinkedIn automatically.
|
||||
Add your credentials to the <code class="text-xs bg-surface-200 dark:bg-surface-700 px-1 py-0.5 rounded">.env</code> file and restart.
|
||||
</p>
|
||||
<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-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors text-center">
|
||||
<div class="text-2xl mb-2">
|
||||
<svg class="w-8 h-8 mx-auto text-primary-600 dark:text-primary-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>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-600 text-white text-sm flex items-center justify-center font-bold">3</span>
|
||||
<div>
|
||||
<strong class="text-surface-900 dark:text-surface-100">Enable interactions</strong>
|
||||
<p class="text-sm mt-1">
|
||||
Receive likes, replies, and reposts from across the web.
|
||||
Register at <a href="https://webmention.io" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">webmention.io</a>
|
||||
and add the token to <code class="text-xs bg-surface-200 dark:bg-surface-700 px-1 py-0.5 rounded">.env</code> as <code class="text-xs bg-surface-200 dark:bg-surface-700 px-1 py-0.5 rounded">WEBMENTION_IO_TOKEN</code>.
|
||||
</p>
|
||||
<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-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors text-center">
|
||||
<div class="text-2xl mb-2">
|
||||
<svg class="w-8 h-8 mx-auto text-primary-600 dark:text-primary-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>
|
||||
</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>
|
||||
|
||||
{% endif %} {# end three-tier fallback #}
|
||||
{% endif %} {# end two-tier fallback #}
|
||||
|
||||
Reference in New Issue
Block a user