svemagie.net/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

feat: add AI usage homepage section with stats and contribution graph

Browse Source 
Full-width section for homepage builder showing 4-column stats grid,
level breakdown pills, AI-involved post-graph, and link to /ai/ page.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
This commit is contained in:
Ricardo
2026-03-06 12:35:40 +01:00
parent d1a8ee7ec2
commit 81ea22ac34
2 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/components/homepage-section.njk
+2
View File
@@ -51,6 +51,8 @@
{% include "components/sections/lastfm.njk" ignore missing %}
{% elif section.type == "posting-activity" %}
{% include "components/sections/posting-activity.njk" ignore missing %}
{% elif section.type == "ai-usage" %}
{% include "components/sections/ai-usage.njk" ignore missing %}
{% else %}
<!-- Unknown section type: {{ section.type }} -->
{% endif %}
_includes/components/sections/ai-usage.njk
+66
View File
@@ -0,0 +1,66 @@
{# AI Usage Section — full-width AI transparency stats and contribution graph #}
{% set sectionConfig = section.config or {} %}
{% set sectionTitle = sectionConfig.title or "AI Transparency" %}
{% set stats = collections.posts | aiStats %}
{% set aiPostsList = collections.posts | aiPosts %}
{% if stats and stats.total > 0 %}
<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">
{{ sectionTitle }}
</h2>
<div class="p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
{# Stats grid — 4 columns #}
<div class="grid gap-4 sm:grid-cols-4 mb-6">
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
<div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
</div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
<div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
</div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
<div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
</div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
<div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
<div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
</div>
</div>
{# Level breakdown #}
<div class="flex flex-wrap gap-3 text-sm mb-6">
<span class="px-3 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-300">
Level 0 (None): {{ stats.byLevel[0] }}
</span>
<span class="px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300">
Level 1 (Editorial): {{ stats.byLevel[1] }}
</span>
<span class="px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-200">
Level 2 (Co-drafted): {{ stats.byLevel[2] }}
</span>
<span class="px-3 py-1 rounded-full bg-amber-200 dark:bg-amber-900/60 text-amber-900 dark:text-amber-100">
Level 3 (AI-generated): {{ stats.byLevel[3] }}
</span>
</div>
{# Post graph — AI-involved posts highlighted #}
{% if aiPostsList and aiPostsList.length %}
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3>
<p class="text-sm text-surface-500 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p>
{% set graphLimit = sectionConfig.limit or 1 %}
{% postGraph aiPostsList, { prefix: "ai-section", limit: graphLimit, highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %}
{% endif %}
</div>
<a href="/ai/" class="text-sm text-amber-600 dark:text-amber-400 hover:underline mt-4 inline-flex items-center gap-1">
View full AI transparency report
<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 %}