gallery (functionnal but need cleaning)

eleventy.config.js

@@ -1,9 +1,15 @@
 module.exports = function(eleventyConfig) {
 
+const fs = require('fs');
+const path = require('path');
+
 // add my css file from the root folder 
 eleventyConfig.addPassthroughCopy("bundle.css");
 eleventyConfig.addPassthroughCopy("img");
-// This line was to make sure my post.md weren't processed as Liquid, permitting this post here
+eleventyConfig.addPassthroughCopy({ "_data/images": "photos" });
+
+// This line was to make sure my post.md weren't processed as Liquid,
+// permitting this post here
 eleventyConfig.setTemplateFormats(["md", "njk", "html"]);
 eleventyConfig.addGlobalData("site.author", "unakt");
 // Double with the .eleventyignore file, but just in case
@@ -16,6 +22,52 @@ eleventyConfig.addCollection("postlist", function(collectionApi) {
     return collectionApi.getFilteredByGlob("./posts/*.md");
   });
 
+
+// Custom collection for mini images
+// It scans the ./src/_data/images/ folder for jpg files
+// and groups them by their parent folder name
+// Each image object contains its path, album name, and last modified date
+// ========================================================
+eleventyConfig.addCollection("miniImages", function(collectionApi) {
+    const files = [];
+    const baseDir = "./_data/images/";
+
+    // Recursive function to find all jpgs
+    const getFiles = (dir) => {
+      fs.readdirSync(dir).forEach(file => {
+        const fullPath = path.join(dir, file);
+        if (fs.statSync(fullPath).isDirectory()) {
+          getFiles(fullPath);
+        } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) {
+          const relativePath = path.relative("./_data/images", fullPath).replace(/\\/g, "/");
+          files.push({
+            path: "/photos/" + relativePath,
+            album: dir.split(path.sep).pop(), // Gets the folder name
+            date: fs.statSync(fullPath).mtime
+          });
+        }
+      });
+    };
+
+    getFiles(baseDir);
+    
+    // Group them by album name
+    const grouped = {};
+    files.forEach(f => {
+      if (!grouped[f.album]) grouped[f.album] = [];
+      grouped[f.album].push(f);
+    });
+
+    return grouped;
+  });
+// ========================================================
+
+// Date filter to format dates as YYYY-MM-DD
+eleventyConfig.addFilter("date", function(dateObj, format = "YYYY-MM-DD") {
+    const d = new Date(dateObj);
+    return d.toISOString().split('T')[0]; // Returns YYYY-MM-DD
+  });
+
 return {
 	// Ok idk this prevent markdown from being processed?
 	markdownTemplateEngine: false,

gallery.njk

@@ -0,0 +1,54 @@
+---
+layout: main_layout.njk
+pagination:
+  data: collections.miniImages
+  size: 1
+  alias: albumName
+  reverse: true
+permalink: "/gallery/{{ albumName | slugify }}/index.html"
+---
+    <nav class="breadcrumbs">
+        <a href="/gallery">Gallery</a>
+        {% for crumb in collections.miniImages %}
+        <span> / </span>
+        <span class="crumb">{{ crumb | capitalize }}</span>
+        {% endfor %}
+    </nav>
+
+<hr>
+
+<h2>Album: {{ albumName }}</h2>
+<div class="gallery-grid">
+  {% for photo in collections.miniImages[albumName] | sort(attribute='date') | reverse %}
+    <div class="mini-card">
+      <img src="{{ photo.path }}" alt="photo_{{ loop.index }}" loading="lazy">
+      <div class="meta">
+        <span>{{ photo.date | date('YYYY-MM-DD') }}</span>
+      </div>
+    </div>
+  {% else %}
+    <p>No photos found in this album.</p>
+  {% endfor %}
+</div>
+
+        <p class="pagination">
+            {% if page.url != pagination.href.last %}
+            <a href="{{ pagination.href.next }}">⬅️ Prev Page</a>{% endif %} -
+            {% if page.url != pagination.href.first %}
+            <a href="{{ pagination.href.previous }}">Next Page ➡️</a>{% endif %}
+        </p>
+<!--
+<p>Debug Info:</p>
+<ul>
+  <li>Current Page: {{ pagination.pageNumber }}</li>
+  <li>Next Link: {{ pagination.href.next }}</li>
+  <li>Previous Link: {{ pagination.href.previous }}</li>
+  <li>Total Pages: {{ pagination.pages.length }}</li>
+</ul>
+<h3>Total posts found in collection: {{ collections.postlist.length }}</h3>
+<ul>
+{% for p in collections.postlist %}
+  <li>{{ p.inputPath }}</li>
+{% endfor %}
+</ul>
+-->

gallery_index.njk

@@ -0,0 +1,15 @@
+---
+layout: main_layout.njk
+data: collections.miniImages
+permalink: "/galleryB/index.html"
+---
+<h2>Index</h2>
+<ul>
+  {% for name, photoList in collections.miniImages %}
+    <li>
+      <a href="/gallery/{{ name | slugify }}/">
+        {{ name | capitalize }} ({{ photoList.length }} photos)
+      </a>
+    </li>
+  {% endfor %}
+</ul>

includes/topbar.html

@@ -5,6 +5,7 @@
 
     <nav>
         <a href="/">Home</a>
+        <a href="/gallery">Photos</a>
         <a href="/about">About Me</a>
         <a href="/notes">Notes</a>
     </nav>

layouts/main_layout.njk

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include 'head.html' %}
+</head>
+<body>
+    {% include 'topbar.html' %}
+
+    <article>
+    {{ content | safe }}
+    </article>
+
+<footer class="page-footer">
+        <small>- {{ site.author }}</small>
+    </footer>
+</body>
+</html>