]> git.zndr.dk Git - zndr-11ty.git/commitdiff
Fixed blog
authorJannik ZANDER <jzander@grundfos.com>
Tue, 9 Sep 2025 15:46:44 +0000 (17:46 +0200)
committerJannik ZANDER <jzander@grundfos.com>
Tue, 9 Sep 2025 15:46:44 +0000 (17:46 +0200)
.eleventy.js
site/_includes/layouts/base.njk
site/_includes/layouts/blog.njk
site/assets/styles.css
site/blog/2019-01-02-garden.md
site/blog/2019-08-08-floating_dock.md
site/blog/index.njk

index ad3e2c59d9f18691be562e7d1c7a212df06c25dd..cdacd8ede2122e40c5fcab08d907d75e2b168c22 100644 (file)
@@ -1,51 +1,45 @@
+// .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"
   };
 };
index 3e9d70c315c36aa6d9f554dfa2968954dfb5a262..15ac479f7460f3988b71dc6557f663f886613bb8 100644 (file)
@@ -12,7 +12,7 @@
   <meta name="theme-color" content="#f7f7f8" media="(prefers-color-scheme: light)">
 
   <!-- LOAD YOUR CSS -->
-  <link rel="stylesheet" href="/assets/styles.css">
+  <link rel="stylesheet" href="/assets/styles.css?v=4">
 
   <!-- Favicons -->
   <link rel="icon" href="/zndr.svg" type="image/svg+xml">
@@ -39,7 +39,9 @@
       </a>
     </header>
 
-    {{ content | safe }}
+    {% block content %}
+      {{ content | safe }}
+    {% endblock %}
 
     <footer>
       <div>© 2025 Jannik • Tange</div>
index 2740a85e7385958ed8e13004ac52f4a289752f86..e0c8adcc1e0b3088f09180805f15eb193db6367a 100644 (file)
@@ -1,15 +1,15 @@
+{# site/_includes/layouts/blog.njk #}
 {% extends "layouts/base.njk" %}
 
 {% block content %}
+  <!-- USING layouts/blog.njk -->
   <article class="post">
-    <h1>{{ title }}</h1>
-    {% if date %}
-      <p class="post-meta">Published {{ date | date("yyyy-MM-dd") }}</p>
+    <h1>{{ title or page.fileSlug | title }}</h1>
+    {% if page.date %}
+      <p class="post-meta">Published {{ page.date | ymd }}</p>
     {% endif %}
-
     <div class="post-body">
       {{ content | safe }}
     </div>
   </article>
 {% endblock %}
-
index e04869202e86ae4688d81af7b82c66727a1e21d8..aaaab26a096d44044546803422552f8f3cf0cc46 100644 (file)
@@ -275,13 +275,41 @@ a:hover{ color: var(--accent-strong); }
   .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;
+}
+
+
index 8c79647b6da48a10cfa3c82f3729097cbace35b5..2990ca22a2d17256b4331b3b721a4dc2500eb970 100644 (file)
@@ -4,7 +4,7 @@ tag: house
 author: JZ 
 title: Small forrest in front of house
 location: Tange
-date: "2019-01-02"
+date: 2019-01-02
 ---
 
 
index 9440252d9f3758ab433ab4dc6a3cc0d1f4824b1d..49b4c5fd25b49ec4f93040d07bd575fc91aea601 100644 (file)
@@ -1,15 +1,9 @@
 ---
-layout: layouts/blog.njk
-tags: 
- - kayak
- - house
 title: Floating dock
-author: JZ 
-location: Tange
-date: "2019-08-08"
+date: 2019-08-08
+layout: layouts/blog.njk
 ---
 
-
 Here is a nice floating dock I built for children to play, and for me and my kayak.
 
 ![Floating Dock](/assets/img/floating_dock.jpg)
index 3b73bac03d19f819c5661a1eb5b08514f3634134..623d340f174e30616cea510b86e949035fa3f90e 100644 (file)
@@ -4,12 +4,11 @@ title: Blog — zndr.dk
 permalink: /blog/
 ---
 
-<h1>Blog</h1>
 <ul>
-  {% for post in collections.blog | reverse %}
+  {% for post in collections.blog %}
     <li>
       <a href="{{ post.url }}">{{ post.data.title }}</a>
+      <small> — {{ post.date | ymd }}</small>
     </li>
   {% endfor %}
 </ul>
-