+// .eleventy.js
module.exports = function(eleventyConfig) {
- // Passthrough static files
- eleventyConfig.addPassthroughCopy({ "site/public": "/" }); // favicon.svg → /favicon.svg
- eleventyConfig.addPassthroughCopy({ "site/assets": "assets" });
- eleventyConfig.addNunjucksFilter("year", () => new Date().getFullYear());
+ // --- Passthroughs (copy as-is to output) ---
+ eleventyConfig.addPassthroughCopy({ "site/public": "/" }); // favicons, manifest, etc.
+ eleventyConfig.addPassthroughCopy({ "site/assets": "assets" }); // /assets/*
- return {
- dir: {
- input: "site",
- includes: "_includes",
- data: "_data",
- output: "dist"
- },
- htmlTemplateEngine: "njk",
- markdownTemplateEngine: "njk"
- },
-
- // ---- Collections ----
+ // --- Collections ---
eleventyConfig.addCollection("blog", (api) =>
- api.getFilteredByGlob("site/blog/*.md")
+ api.getFilteredByGlob("site/blog/*.md").sort((a, b) => b.date - a.date)
);
- // ---- Date filter (works in Nunjucks & Liquid) ----
- function dateFmt(value, fmt = "yyyy-MM-dd") {
+ // --- Filters ---
+ // year (simple)
+ eleventyConfig.addFilter("year", () => new Date().getFullYear());
+
+ // date formatter (use a new name to avoid Liquid’s built-in 'date' behavior)
+ function ymd(value, fmt = "yyyy-MM-dd") {
if (!value) return "";
const d = value instanceof Date ? value : new Date(value);
const pad = (n) => String(n).padStart(2, "0");
- const yyyy = d.getFullYear();
- const MM = pad(d.getMonth() + 1);
- const dd = pad(d.getDate());
- const HH = pad(d.getHours());
- const mm = pad(d.getMinutes());
- const map = { yyyy, MM, dd, HH, mm };
+ const map = {
+ yyyy: d.getFullYear(),
+ MM: pad(d.getMonth() + 1),
+ dd: pad(d.getDate()),
+ HH: pad(d.getHours()),
+ mm: pad(d.getMinutes()),
+ };
return fmt.replace(/yyyy|MM|dd|HH|mm/g, (t) => map[t]);
}
+ eleventyConfig.addFilter("ymd", ymd); // universal
+ eleventyConfig.addNunjucksFilter("ymd", ymd); // explicit for Nunjucks
+ eleventyConfig.addLiquidFilter("ymd", ymd); // explicit for Liquid
- // Register for all template engines to be safe
- eleventyConfig.addFilter("date", dateFmt); // universal
- eleventyConfig.addNunjucksFilter("date", dateFmt); // Nunjucks
- eleventyConfig.addLiquidFilter("date", dateFmt); // Liquid
-
- // Copy the whole assets tree (css/js/img/fonts…) to /assets
- eleventyConfig.addPassthroughCopy({ "site/assets": "assets" });
-
- // Engines + dirs
+ // --- Engines + dirs ---
return {
- dir: { input: "site", output: "dist", includes: "_includes" },
+ dir: {
+ input: "site",
+ includes: "_includes",
+ data: "_data",
+ output: "dist",
+ },
+ htmlTemplateEngine: "njk",
markdownTemplateEngine: "njk",
- htmlTemplateEngine: "njk"
};
};
.card:hover { transform: none; box-shadow: none; }
}
-/* Blog content images */
-.post-body img {
- max-width: 100%; /* never overflow the text column */
- height: auto; /* keep aspect ratio */
- display: block; /* remove inline gap */
- margin: 12px auto; /* space + center */
- border-radius: 8px; /* optional: soften corners */
- box-shadow: 0 2px 8px rgba(0,0,0,.15); /* optional: subtle depth */
+/* Narrow reading column for blog posts */
+.post{
+ max-width: 800px; /* <= change to taste: 680–840px works well */
+ margin: 2rem auto; /* center it */
+ padding: 1.25rem 1.25rem 2rem;
+ background: var(--panel);
+ border: 1px solid var(--ring);
+ border-radius: 12px;
}
+/* Scale images (and images inside links/picture/figure) to column width */
+.post-body :where(img, a img, picture img, figure img){
+ max-width: 100% !important;
+ height: auto !important;
+ display: block;
+ margin: 12px auto;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0,0,0,.15);
+}
+
+/* Optional: figure captions */
+.post-body figure{ margin: 1rem 0; text-align: center; }
+.post-body figcaption{ color: var(--muted); font-size: .9rem; margin-top: .4rem; }
+
+/* Mobile nicety: reduce padding on small screens */
+@media (max-width: 640px){
+ .post{ padding: 1rem; border-radius: 10px; }
+}
+
+/* Safe default so images never overflow */
+.container :where(img, picture img, figure img){
+ max-width: 100% !important;
+ height: auto !important;
+ display: block;
+ margin: 12px auto;
+}
+
+