mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 16:44:56 +02:00
fix: audit fixes for /slashes/ — font-mono dates, depth, h-entry, section borders
1. Add font-mono to <time> elements (design system typography rule) 2. Add shadow-sm to inspiration box and empty-state box (depth rule) 3. Add h-entry + p-name/u-url microformats to all cards (RSS-ready) 4. Add border-l-4 visual differentiation: amber for Pages, emerald for Activity Feeds, surface for Site Pages Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
80
slashes.njk
80
slashes.njk
@@ -14,7 +14,7 @@ eleventyImport:
|
||||
</p>
|
||||
|
||||
{# Dynamic pages (created via Indiekit) #}
|
||||
<div class="mb-8">
|
||||
<div class="mb-8 pl-4 border-l-4 border-accent-500 dark:border-accent-400">
|
||||
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Pages</h2>
|
||||
{% if collections.pages.length > 0 %}
|
||||
<ul class="post-list">
|
||||
@@ -34,14 +34,14 @@ eleventyImport:
|
||||
{% endif %}
|
||||
{% if page.data.updated %}
|
||||
<p class="text-sm text-surface-500 mt-2">
|
||||
Updated: <time datetime="{{ page.data.updated | isoDate }}">{{ page.data.updated | dateDisplay }}</time>
|
||||
Updated: <time class="font-mono text-sm" datetime="{{ page.data.updated | isoDate }}">{{ page.data.updated | dateDisplay }}</time>
|
||||
</p>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
|
||||
<div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
|
||||
<p class="text-surface-600 dark:text-surface-400 text-sm mb-2">
|
||||
No root pages yet. To create pages like <code>/now</code>, <code>/uses</code>, or <code>/colophon</code>, you need two plugins:
|
||||
</p>
|
||||
@@ -65,74 +65,74 @@ eleventyImport:
|
||||
(blogrollStatus and blogrollStatus.source == "indiekit") or
|
||||
(podrollStatus and podrollStatus.source == "indiekit") %}
|
||||
{% if hasActivityPages %}
|
||||
<div class="mb-8">
|
||||
<div class="mb-8 pl-4 border-l-4 border-emerald-500 dark:border-emerald-400">
|
||||
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Activity Feeds</h2>
|
||||
<ul class="post-list">
|
||||
{% if blogrollStatus and blogrollStatus.source == "indiekit" %}
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/blogroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blogroll</a>
|
||||
<a href="/blogroll/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blogroll</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Sites I follow</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if funkwhaleActivity and funkwhaleActivity.source == "indiekit" %}
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/funkwhale/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/funkwhale</a>
|
||||
<a href="/funkwhale/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/funkwhale</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Funkwhale activity</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if githubActivity and githubActivity.source != "error" %}
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/github/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github</a>
|
||||
<a href="/github/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">GitHub activity</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if lastfmActivity and lastfmActivity.source == "indiekit" %}
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/listening/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/listening</a>
|
||||
<a href="/listening/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/listening</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Last.fm scrobbles</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if newsActivity and newsActivity.source == "indiekit" %}
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/news/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/news</a>
|
||||
<a href="/news/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/news</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">RSS feed aggregator</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if podrollStatus and podrollStatus.source == "indiekit" %}
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/podroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/podroll</a>
|
||||
<a href="/podroll/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/podroll</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Podcasts I listen to</p>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if youtubeChannel and youtubeChannel.source == "indiekit" %}
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/youtube/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/youtube</a>
|
||||
<a href="/youtube/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/youtube</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">YouTube channel</p>
|
||||
@@ -143,88 +143,88 @@ eleventyImport:
|
||||
{% endif %}
|
||||
|
||||
{# Site pages — theme-provided .njk pages not in collections.pages or activity feeds #}
|
||||
<div class="mb-8">
|
||||
<div class="mb-8 pl-4 border-l-4 border-surface-300 dark:border-surface-600">
|
||||
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Site Pages</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
|
||||
Theme-provided pages for content aggregation, search, and site info.
|
||||
</p>
|
||||
<ul class="post-list">
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/blog/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blog</a>
|
||||
<a href="/blog/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blog</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">All posts chronologically</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/cv/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/cv</a>
|
||||
<a href="/cv/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/cv</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Curriculum vitae</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/changelog/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/changelog</a>
|
||||
<a href="/changelog/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/changelog</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Site changes and updates</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/digest/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/digest</a>
|
||||
<a href="/digest/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/digest</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Content digest</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/featured/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/featured</a>
|
||||
<a href="/featured/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/featured</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Featured posts</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/graph/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/graph</a>
|
||||
<a href="/graph/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/graph</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Content graph visualization</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/interactions/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/interactions</a>
|
||||
<a href="/interactions/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/interactions</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Social interactions (likes, reposts, replies)</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/readlater/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/readlater</a>
|
||||
<a href="/readlater/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/readlater</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Read later queue</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/search/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/search</a>
|
||||
<a href="/search/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/search</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Full-text search</p>
|
||||
</li>
|
||||
<li class="post-card">
|
||||
<li class="h-entry post-card">
|
||||
<div class="post-header">
|
||||
<h3 class="text-xl font-semibold">
|
||||
<a href="/github/starred/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github/starred</a>
|
||||
<a href="/github/starred/" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github/starred</a>
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-surface-600 dark:text-surface-400 mt-2">Starred GitHub repositories</p>
|
||||
@@ -233,7 +233,7 @@ eleventyImport:
|
||||
</div>
|
||||
|
||||
{# Inspiration section #}
|
||||
<div class="mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
|
||||
<div class="mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
|
||||
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-2">Want more slash pages?</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 text-sm">
|
||||
Check out <a href="https://slashpages.net" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>
|
||||
|
||||
Reference in New Issue
Block a user