Merge pull request #562 from fronteers/aankondigingen-events-2026

Author: anneke

.eleventy.js

@@ -13,8 +13,9 @@ const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 
 module.exports = function (eleventyConfig) {
   const quick = Boolean(process.env.BUILD_QUICK);
+  const isDev = process.env.ELEVENTY_ENV === "development" || process.argv.includes("--serve") || process.argv.includes("--watch");
   const now = new Date();
-
+ // 
   /**
    * There is a quick build function (npm run start:quick) that only loads the
    * recent content (YTD and previous year), by excluding all year folders from
@@ -53,35 +54,92 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.ignores.add("src/nl/vereniging/bestuur/notulen");
   }
 
+  /**
+   * Read .eleventyignore file and apply ignores programmatically for faster builds.
+   * This is more effective than relying on Eleventy's built-in ignore file reading
+   * because it happens earlier in the process.
+   */
+  if (isDev || quick) {
+    const ignoreFile = ".eleventyignore";
+    if (fs.existsSync(ignoreFile)) {
+      const ignoreContent = fs.readFileSync(ignoreFile, "utf-8");
+      const ignorePatterns = ignoreContent
+        .split("\n")
+        .map((line) => line.trim())
+        .filter((line) => line && !line.startsWith("#"));
+
+      ignorePatterns.forEach((pattern) => {
+        // Convert glob pattern to actual file paths
+        const files = glob.sync(pattern, { cwd: process.cwd() });
+        files.forEach((file) => {
+          eleventyConfig.ignores.add(file);
+        });
+      });
+      console.debug(`[ignore] Applied ${ignorePatterns.length} ignore patterns from .eleventyignore`);
+    }
+  }
+
   // Custom date filter
   eleventyConfig.addFilter("localizedDate", function (dateObj, locale = "en") {
     return DateTime.fromJSDate(dateObj)
       .setLocale(locale)
       .toFormat("d LLLL yyyy");
   });
 
+  // Event date filter that handles tentative dates (hides day if tentative)
+  // Usage: {{ activity.data.eventdate | eventDate: locale, activity.data.eventdateTentative }}
+  eleventyConfig.addFilter("eventDate", function (dateObj, locale = "en", isTentative = false) {
+    const dateTime = DateTime.fromJSDate(dateObj).setLocale(locale);
+    
+    if (!dateTime.isValid) {
+      return String(dateObj);
+    }
+    
+    // If tentative, show only month and year
+    if (isTentative) {
+      if (locale === "nl") {
+        return dateTime.toFormat("LLLL yyyy"); // "april 2026"
+      } else {
+        return dateTime.toFormat("LLLL yyyy"); // "April 2026"
+      }
+    }
+    
+    // Otherwise show full date
+    if (locale === "nl") {
+      return dateTime.toFormat("d LLLL yyyy"); // "1 april 2026"
+    } else {
+      return dateTime.toFormat("LLLL d, yyyy"); // "April 1, 2026"
+    }
+  });
+
   /* Add id to heading elements */
   eleventyConfig.addPlugin(pluginAddIdToHeadings);
 
-  eleventyConfig.addPlugin(brokenLinksPlugin, {
-    redirect: "warn",
-    broken: "warn",
-    cacheDuration: "1d",
-    loggingLevel: 1,
-    excludeUrls: [
-      "https://www.openstreetmap.org*",
-      "https://www.youtube.com*",
-      "http://www.example.com*",
-      "https://codepen.io*",
-      "https://twitter.com*",
-      "http://api.dojotoolkit.org*",
-      "http://www.webdesignermagazine.nl/*",
-      "http://meetup.com*",
-      "https://github.com/fronteers/website*",
-    ],
-    excludeInputs: [],
-    callback: null,
-  });
+  // Only run broken links plugin in production builds (it's very slow)
+  if (!isDev) {
+    eleventyConfig.addPlugin(brokenLinksPlugin, {
+      redirect: "warn",
+      broken: "warn",
+      cacheDuration: "1d",
+      loggingLevel: 1,
+      excludeUrls: [
+        "https://www.openstreetmap.org*",
+        "https://www.youtube.com*",
+        "http://www.example.com*",
+        "https://codepen.io*",
+        "https://twitter.com*",
+        "http://api.dojotoolkit.org*",
+        "http://www.webdesignermagazine.nl/*",
+        "http://meetup.com*",
+        "https://github.com/fronteers/website*",
+        "https://www.w3.org/*"
+      ],
+      excludeInputs: [],
+      callback: null,
+    });
+  } else {
+    console.debug("[dev] Skipping broken links plugin for faster builds");
+  }
 
   eleventyConfig.addPlugin(pluginRss);
 
@@ -220,63 +278,68 @@ module.exports = function (eleventyConfig) {
     return lines;
   });
 
-  eleventyConfig.on('afterBuild', async () => {
-    async function convertSvgToJpeg(inputDir, outputDir) {
-      const browser = await puppeteer.launch();
-      const page = await browser.newPage();
-
-      // Read all files in the input directory
-      const files = fs.readdirSync(inputDir);
-
-      for (const filename of files) {
-        if (filename.endsWith(".svg")) {
-          const inputPath = path.join(inputDir, filename);
-          const outputPath = path.join(outputDir, filename.replace('.svg', '.jpg'));
-
-          // Read the SVG content
-          const svgContent = fs.readFileSync(inputPath, 'utf8');
-
-          // Extract width and height from SVG (Optional: If SVG has explicit size)
-          const matchWidth = svgContent.match(/width="([0-9]+)"/);
-          const matchHeight = svgContent.match(/height="([0-9]+)"/);
-
-          const width = matchWidth ? parseInt(matchWidth[1], 10) : 1200; // Default to 1200px
-          const height = matchHeight ? parseInt(matchHeight[1], 10) : 675; // Default to 630px
-
-          // Set the viewport size to match SVG size
-          await page.setViewport({ width, height });
-
-          // Set SVG content inside an HTML wrapper
-          await page.setContent(`
-                    <html>
-                        <body style="margin:0;padding:0;overflow:hidden;">
-                            <div style="width:${width}px; height:${height}px;">
-                                ${svgContent}
-                            </div>
-                        </body>
-                    </html>
-                `);
-
-          // Take a screenshot and save as JPEG
-          await page.screenshot({
-            path: outputPath,
-            type: 'jpeg',
-            quality: 100,
-            clip: { x: 0, y: 0, width, height } // Ensure clipping matches viewport
-          });
-
-          console.log(`Converted: ${filename} -> ${outputPath}`);
+  // Only run SVG to JPEG conversion in production builds (puppeteer is slow)
+  if (!isDev) {
+    eleventyConfig.on('afterBuild', async () => {
+      async function convertSvgToJpeg(inputDir, outputDir) {
+        const browser = await puppeteer.launch();
+        const page = await browser.newPage();
+
+        // Read all files in the input directory
+        const files = fs.readdirSync(inputDir);
+
+        for (const filename of files) {
+          if (filename.endsWith(".svg")) {
+            const inputPath = path.join(inputDir, filename);
+            const outputPath = path.join(outputDir, filename.replace('.svg', '.jpg'));
+
+            // Read the SVG content
+            const svgContent = fs.readFileSync(inputPath, 'utf8');
+
+            // Extract width and height from SVG (Optional: If SVG has explicit size)
+            const matchWidth = svgContent.match(/width="([0-9]+)"/);
+            const matchHeight = svgContent.match(/height="([0-9]+)"/);
+
+            const width = matchWidth ? parseInt(matchWidth[1], 10) : 1200; // Default to 1200px
+            const height = matchHeight ? parseInt(matchHeight[1], 10) : 675; // Default to 630px
+
+            // Set the viewport size to match SVG size
+            await page.setViewport({ width, height });
+
+            // Set SVG content inside an HTML wrapper
+            await page.setContent(`
+                      <html>
+                          <body style="margin:0;padding:0;overflow:hidden;">
+                              <div style="width:${width}px; height:${height}px;">
+                                  ${svgContent}
+                              </div>
+                          </body>
+                      </html>
+                  `);
+
+            // Take a screenshot and save as JPEG
+            await page.screenshot({
+              path: outputPath,
+              type: 'jpeg',
+              quality: 100,
+              clip: { x: 0, y: 0, width, height } // Ensure clipping matches viewport
+            });
+
+            console.log(`Converted: ${filename} -> ${outputPath}`);
+          }
         }
-      }
 
-      await browser.close();
-    }
+        await browser.close();
+      }
 
-    // Execute conversion
-    const inputDir = 'dist/assets/images/social-preview-images/';
-    const outputDir = 'dist/assets/images/social-preview-images/';
-    await convertSvgToJpeg(inputDir, outputDir);
-  });
+      // Execute conversion
+      const inputDir = 'dist/assets/images/social-preview-images/';
+      const outputDir = 'dist/assets/images/social-preview-images/';
+      await convertSvgToJpeg(inputDir, outputDir);
+    });
+  } else {
+    console.debug("[dev] Skipping SVG to JPEG conversion for faster builds");
+  }
 
   // Allows you to debug a json object in eleventy templates data | stringify
   eleventyConfig.addFilter("stringify", (data) => {
@@ -300,9 +363,15 @@ module.exports = function (eleventyConfig) {
   });
 
   /* This log will appear before the first build. It is tied to the plugin that checks broken links. */
-  console.debug(
-    "Eleventy will now generate RSS feeds and then look for broken links. This may take a while. When its done, you should see logs appear."
-  );
+  if (!isDev) {
+    console.debug(
+      "Eleventy will now generate RSS feeds and then look for broken links. This may take a while. When its done, you should see logs appear."
+    );
+  } else {
+    console.debug(
+      "[dev] Running in development mode - broken links checking and SVG conversion disabled for faster builds"
+    );
+  }
 
   /* All templates in the content directory are parsed and copied to the dist directory */
   return {

src/_assets/css/common/colors.css

@@ -2,8 +2,14 @@
   --purple: #646ee0;
   --purple-wcag-darker: #192280;
   --yellow: #ffce2e;
+  --yellow-light: #fae190;
   --lilac: #b7b7fd;
   --lilac-light: #e5e5ff;
   --red: #fe796a;
+  --red-light: #ffaba1;
+  --green: #5dd9c1;
+  --green-light: #b3f1e5;
+  --blue: #75bbfd;
+  --blue-light: #c2e1ff;
   --page-background: #f2f2f2;
 }

src/_assets/css/common/layout.css

@@ -77,6 +77,10 @@ main section > .h {
     background-color: white;
 }
 
+.page-content--activity {
+    padding: 0;
+}
+
 .page-content:has(> .visually-hidden:only-child) {
     background-color: transparent;
 }
@@ -151,7 +155,7 @@ main section > .h {
 
 .list-item--job,
 .list-item--blog {
-    margin-block: var(--spacing-double);
+    margin-block: var(--spacing-half);
 }
 
 @media all and (min-width: 46.875em) {

src/_assets/css/common/typography.css

@@ -59,6 +59,8 @@ a:focus {
   color: white;
   background-color: var(--purple-wcag-darker);
   text-decoration: none;
+
+  box-shadow: 0 0 0 7px var(--purple-wcag-darker);
 }
 
 .tag-link {
@@ -77,11 +79,13 @@ a:focus {
 }
 
 .tag-link--large .tag {
-  font-size: var(--font-size-14);
+  font-size: var(--font-size-16);
 }
 
-.tag-link--active .tag {
-  background-color: black;
+.tag-link--active .tag,
+.tag-link[aria-current="page"] .tag {
+  background-color: var(--purple-wcag-darker);
+  color: white;
 }
 
 .tag {

src/_assets/css/elements/category-list.css

@@ -5,8 +5,10 @@
 **/
 
 .categories {
-  margin-block-end: 3em;
   text-align: center;
+  max-width: var(--inner-width);
+  padding: var(--spacing);
+  margin-inline: auto;
 }
 
 .category-list {

src/_assets/css/style.css

@@ -49,6 +49,7 @@
 @import "../_includes/partials/page-header/navigation-triggers.css";
 @import "../_includes/partials/page-header/translate.css";
 @import "../_includes/partials/activity.css";
+@import "../_includes/partials/activity-calendar-item.css";
 @import "../_includes/partials/blogpost.css";
 @import "../_includes/partials/job.css";
 @import "../_includes/partials/member.css";