mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-04-02 08:44:56 +02:00
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:
@@ -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 */
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
BIN
images/rick.jpg
BIN
images/rick.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB After Width: | Height: | Size: 38 KiB |
@@ -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: [
|
||||||
|
|||||||
Reference in New Issue
Block a user