svemagie/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-04-02 16:44:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: generate sparkline SVG inline instead of using external service

Browse Source 
The v1.sparkline.11ty.dev service returns 429 errors. Generate the
sparkline polyline SVG at build time and inline it directly.
This commit is contained in:
Ricardo
2026-02-18 11:42:09 +01:00
parent c3eb04570c
commit 113d0d55dd
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
blog.njk
View File

@@ -11,9 +11,9 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
<div class="h-feed">
<div class="flex flex-wrap items-center gap-4 mb-2">
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
{% set sparklineData = collections.posts | postingFrequency %}
{% if sparklineData %}
<img src="https://v1.sparkline.11ty.dev/{{ sparklineData }}/" alt="Posting frequency over the last 12 months" width="200" height="30" class="opacity-60 dark:invert dark:opacity-40" loading="lazy">
{% set sparklineSvg = collections.posts | postingFrequency %}
{% if sparklineSvg %}
<span class="opacity-60 dark:opacity-40 text-surface-500 dark:text-surface-400">{{ sparklineSvg | safe }}</span>
{% endif %}
</div>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">

12
eleventy.config.js
View File

@@ -456,7 +456,17 @@ export default function (eleventyConfig) {
counts[11 - monthsAgo]++;
}
}
return counts.join(",");
const max = Math.max(...counts, 1);
const w = 200;
const h = 30;
const pad = 2;
const step = w / (counts.length - 1);
const points = counts.map((v, i) => {
const x = i * step;
const y = h - pad - ((v / max) * (h - pad * 2));
return `${x.toFixed(1)},${y.toFixed(1)}`;
}).join(" ");
return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Posting frequency over the last 12 months"><polyline fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="${points}"/></svg>`;
});
// Collections for different post types