perf: enable lite-yt-embed, optimize avatar, add cache headers

- YouTube embeds now use lite-youtube facade (loads iframe on click,
  ~800 KiB savings per page with embedded videos)
- Avatar resized from 1000x1000 to 400x400 (152 KiB → 39 KiB)
- lite-yt-embed.css max-width changed to 100% for responsive layout
- Removed unused Tailwind primary color palette from CSS bundle

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
This commit is contained in:
Ricardo
2026-03-07 17:26:40 +01:00
parent 0da3780c77
commit 9a9cd2d251
4 changed files with 13 additions and 19 deletions

View File

@@ -6,7 +6,7 @@ lite-youtube {
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
max-width: 720px; max-width: 100%;
} }
/* gradient */ /* gradient */

View File

@@ -242,11 +242,18 @@ export default function (eleventyConfig) {
}); });
// Embed Everything - auto-embed YouTube, Vimeo, Bluesky, Mastodon, etc. // Embed Everything - auto-embed YouTube, Vimeo, Bluesky, Mastodon, etc.
// YouTube uses lite-yt-embed facade: shows thumbnail + play button,
// only loads full iframe on click (~800 KiB savings).
// CSS/JS disabled here — already loaded in base.njk.
eleventyConfig.addPlugin(embedEverything, { eleventyConfig.addPlugin(embedEverything, {
use: ["youtube", "vimeo", "twitter", "mastodon", "bluesky", "spotify", "soundcloud"], use: ["youtube", "vimeo", "twitter", "mastodon", "bluesky", "spotify", "soundcloud"],
youtube: { youtube: {
options: { options: {
lite: false, lite: {
css: { enabled: false },
js: { enabled: false },
responsive: true,
},
recommendSelfOnly: true, recommendSelfOnly: true,
}, },
}, },
@@ -266,7 +273,8 @@ export default function (eleventyConfig) {
// Usage: {{ url | unfurlCard | safe }} // Usage: {{ url | unfurlCard | safe }}
eleventyConfig.addFilter("unfurlCard", getCachedCard); eleventyConfig.addFilter("unfurlCard", getCachedCard);
// Custom transform to convert YouTube links to embeds // Custom transform to convert YouTube links to lite-youtube embeds
// Catches bare YouTube links in Markdown that the embed plugin misses
eleventyConfig.addTransform("youtube-link-to-embed", function (content, outputPath) { eleventyConfig.addTransform("youtube-link-to-embed", function (content, outputPath) {
if (!outputPath || !outputPath.endsWith(".html")) { if (!outputPath || !outputPath.endsWith(".html")) {
return content; return content;
@@ -276,8 +284,8 @@ export default function (eleventyConfig) {
const youtubePattern = /<a[^>]+href="https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)[^"]*"[^>]*>(?:https?:\/\/)?(?:www\.)?[^<]*(?:youtube|youtu\.be)[^<]*<\/a>/gi; const youtubePattern = /<a[^>]+href="https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)[^"]*"[^>]*>(?:https?:\/\/)?(?:www\.)?[^<]*(?:youtube|youtu\.be)[^<]*<\/a>/gi;
content = content.replace(youtubePattern, (match, videoId) => { content = content.replace(youtubePattern, (match, videoId) => {
// Use standard YouTube iframe with exact oEmbed parameters // Use lite-youtube facade — loads full iframe only on click
return `</p><div class="video-embed"><iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="YouTube video"></iframe></div><p>`; return `</p><div class="video-embed eleventy-plugin-youtube-embed"><lite-youtube videoid="${videoId}" style="background-image: url('https://i.ytimg.com/vi/${videoId}/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div><p>`;
}); });
// Clean up empty <p></p> tags created by the replacement // Clean up empty <p></p> tags created by the replacement

Binary file not shown.

Before

Width:  |  Height:  |  Size: 149 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

@@ -41,20 +41,6 @@ export default {
900: "#78350f", 900: "#78350f",
950: "#451a03", 950: "#451a03",
}, },
// Legacy — kept for compatibility, not used in templates
primary: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
950: "#172554",
},
}, },
fontFamily: { fontFamily: {
sans: [ sans: [