automize screenshot creation

config/scripts/generate-screenshots.mjs

@@ -0,0 +1,45 @@
+import fetch from '@11ty/eleventy-fetch';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+const dataPath = './src/_data/builtwith.json';
+const screenshotDir = path.join(
+  path.dirname(new URL(import.meta.url).pathname),
+  '../../src/assets/images/screenshots'
+);
+
+async function fetchScreenshot(url, filePath) {
+  const waitCondition = 'wait:2';
+  const timeout = 'timeout:5';
+  const apiUrl = `https://v1.screenshot.11ty.dev/${encodeURIComponent(url)}/opengraph/_${waitCondition}_${timeout}/`;
+
+  const buffer = await fetch(apiUrl, {
+    duration: '1d',
+    type: 'buffer'
+  });
+
+  await fs.writeFile(filePath, buffer);
+  console.log(`Screenshot saved to ${filePath}`);
+}
+
+async function generateScreenshots() {
+  const jsonData = JSON.parse(await fs.readFile(dataPath, 'utf-8'));
+
+  try {
+    await fs.access(screenshotDir);
+  } catch {
+    await fs.mkdir(screenshotDir, {recursive: true});
+  }
+
+  for (const item of jsonData) {
+    const {name, link, filename} = item;
+    const filePath = path.join(screenshotDir, `${filename}.jpg`);
+    try {
+      await fetchScreenshot(link, filePath);
+    } catch (error) {
+      console.error(`Error processing ${name}: ${error.message}`);
+    }
+  }
+}
+
+generateScreenshots();

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "clean": "rimraf dist",
+    "screenshots": "node ./config/scripts/generate-screenshots.mjs",
     "dev:11ty": "eleventy --serve --watch",
     "build:11ty": "eleventy",
     "start": "run-p dev:*",

src/_data/builtwith.json

@@ -2,103 +2,127 @@
   {
     "name": "Lene Saile",
     "description": "My personal site! Really, this website came before the starter, and I built the starter based on it.",
-    "screenshot": "./src/assets/images/screenshots/lenesaile.jpg",
+    "filename": "lenesaile",
     "link": "https://www.lenesaile.com"
   },
   {
     "name": "Refugio Libertad",
     "description": "Organización de trabajadores y trabajadoras de la economía popular que habitamos en pequeños pueblos y zonas rurales de la provincia de Córdoba (Argentina).",
-    "screenshot": "./src/assets/images/screenshots/refugiolibertad.png",
+    "filename": "refugiolibertad",
     "link": "https://refugio.libre.org.ar"
   },
+  {
+    "name": "Lene Saile",
+    "description": "My personal site! Really, this website came before the starter, and I built the starter based on it.",
+    "filename": "lenesaile",
+    "link": "https://www.lenesaile.com"
+  },
   {
     "name": "Old man yelling at tech",
     "description": "Former software engineer turned manager rediscovers his love for coding and infrastructure.",
-    "screenshot": "./src/assets/images/screenshots/krgr.jpg",
+    "filename": "krgr",
     "link": "https://krgr.dev"
   },
   {
     "name": "FigCat",
     "description": "FigCat is a repository of lists of creative works, games, and other items, compiled by hand from various sources.",
-    "screenshot": "./src/assets/images/screenshots/figcat.jpg",
+    "filename": "figcat",
     "link": "https://figcat.com"
   },
   {
     "name": "Andy Stitt",
     "description": "Web developer specializing in accessibility",
-    "screenshot": "./src/assets/images/screenshots/andystitt.png",
+    "filename": "andystitt",
     "link": "https://andystitt.com"
   },
   {
     "name": "deimidis.me",
     "description": "Apuntes del mundo con medio siglo de vida",
-    "screenshot": "./src/assets/images/screenshots/deimidis.png",
+    "filename": "deimidis",
     "link": "https://deimidis.me"
   },
   {
     "name": "fLaMEdFURY",
     "description": "Personal website of 'fLaMEd'. Thoughts about the current and past state of the web.",
-    "screenshot": "./src/assets/images/screenshots/flamedfury.png",
+    "filename": "flamedfury",
     "link": "https://flamedfury.com"
   },
   {
     "name": "Joe writes",
     "description": "Joe works on the Technical Content team at Starburst Data and contribute to the Trino OSS project.",
-    "screenshot": "./src/assets/images/screenshots/joewrites.jpg",
+    "filename": "joewrites",
     "link": "https://joewrites.io"
   },
   {
     "name": "Manu Clavijo",
     "description": "Manu Clavijo is an experienced violinist who also performs his own repertoire of songs as a singer-songwriter",
-    "screenshot": "./src/assets/images/screenshots/manuclavijo.png",
+    "filename": "manuclavijo",
     "link": "https://www.manuclavijo.com"
   },
   {
     "name": "Misremembered",
     "description": "Misremembered is the brain-child of Jon Michaels, a long-time sound editor, maker of tacos, and generally tech-minded fellow",
-    "screenshot": "./src/assets/images/screenshots/misremembered.jpg",
+    "filename": "misremembered",
     "link": "https://misremembe.red"
   },
   {
     "name": "Esther Zecco",
     "description": "Official website of Esther Zecco. Singer and songwriter of pop music from Segovia with influences of American folk and country.",
-    "screenshot": "./src/assets/images/screenshots/estherzecco.jpg",
+    "filename": "estherzecco",
     "link": "https://estherzecco.com"
   },
   {
     "name": "Project MB",
     "description": "My personal website.I write about productivity, PKM, team happiness, agile, technology and whatever happens to be interested of..",
-    "screenshot": "./src/assets/images/screenshots/projectmb.png",
+    "filename": "projectmb",
     "link": "https://www.projectmb.com/"
   },
   {
     "name": "httpster.io",
     "description": "httpster's personal website. Silly articles, rants, art and everything in between. ",
-    "screenshot": "./src/assets/images/screenshots/httpsterio.png",
+    "filename": "httpsterio",
     "link": "https://httpster.io/"
   },
   {
     "name": "ELAN",
     "description": "Demo project for a fictional Berlin-based event agency.",
-    "screenshot": "./src/assets/images/screenshots/elan.jpg",
-    "link": "https://elan.maltebaer.vercel.app/"
+    "filename": "elan",
+    "link": "https://elan.maltebaer.vercel.app"
+  },
+  {
+    "name": "Manu Clavijo",
+    "description": "Manu Clavijo is an experienced violinist who also performs his own repertoire of songs as a singer-songwriter",
+    "filename": "manuclavijo",
+    "link": "https://www.manuclavijo.com/"
   },
   {
     "name": "Colegio Marpe Ciudad Jardín",
     "description": "Website for a primary school in Las Palmas.",
-    "screenshot": "./src/assets/images/screenshots/colegio-marpe.png",
-    "link": "https://colegiomarpeciudadjardin.com/"
+    "filename": "colegio-marpe",
+    "link": "https://colegiomarpeciudadjardin.com"
   },
   {
     "name": "The Wooden Chips Handyman Service",
     "description": "A a website for local virginia handyman built with Netlify CMS and 11ty",
-    "screenshot": "./src/assets/images/screenshots/woodenchips.png",
-    "link": "https://thewoodenchips.com"
+    "filename": "woodenchips",
+    "link": "https://thewoodenchips.com/"
+  },
+  {
+    "name": "lene.dev",
+    "description": "My developer profile. I occasinally try new CSS features here.",
+    "filename": "lene-dev",
+    "link": "https://www.lene.dev/"
   },
   {
     "name": "cantautor.es",
-    "description": "A curated collection of Spanish singer-songwriters, dedicated to supporting their artistry and helping you discover the authentic and diverse voices of talented musicians",
-    "screenshot": "./src/assets/images/screenshots/cantautores.jpg",
-    "link": "https://cantautor.es"
+    "description": "cantautor.es is a place where you can listen to excerpts of selected songs from Spanish singer-songwriters.",
+    "filename": "cantautor-es",
+    "link": "https://cantautor.es/"
+  },
+  {
+    "name": "badwebsites.rip",
+    "description": "I colaborate with Berlin-based designer Daniela Grau to develop websites that think about their visitors while keeping in mind the core values that make the web a good place to be.",
+    "filename": "badwebsites-rip",
+    "link": "https://badwebsites.rip/"
   }
 ]

src/assets/css/blocks/grid-card.css

@@ -8,7 +8,7 @@
 .grid-card img {
   max-inline-size: var(--max-img-width, 100%);
   block-size: auto;
-  aspect-ratio: 12/9;
+  aspect-ratio: 16/9;
   object-fit: cover;
   object-position: center;
 }

src/pages/built-with.njk

@@ -9,24 +9,32 @@ widths: [400, 520]
 
 <p>
   A list of sites based on / built with Eleventy Excellent. Add yours by submitting a
+  A list of sites based on / built with <span class="font-display">Eleventy Excellent</span>. <br />
+  This uses Eleventy's <a href="https://www.11ty.dev/docs/services/screenshots/">screenshot API </a>. New screenshots are fetched in development only.
+</p>
+
+<p>
+  Have you built a site with this starer? Please let me know or create a
   <a
     href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request"
     rel="noopener"
     >pull request!</a
+    >pull request</a
   >
   :)
+  and add it to the list! You find the data in <code>src/_data/builtwith.json</code> (Not related to "Build
+  with Jason" 🥁).
 </p>
-
 <article class="full section" style="--spot-color: var(--color-bg-accent)">
   {% include 'svg/divider-soft-top.svg' %}
 
   <section class="section__inner wrapper">
     <h2>Based on, or built with Eleventy Excellent:</h2>
-    <ul class="grid" role="list" style="--gutter: var(--space-xl) var(--space-m)">
+    <ul class="feature grid" role="list" style="--gutter: var(--space-xl) var(--space-m)">
       <!-- you find tha data for that in src/_data/builtwith.json -->
       {% for site in builtwith | reverse %}
         <li class="grid-card | text-step-min-1">
-          {% eleventyImage site.screenshot, site.name, null, "lazy", null, sizes, widths %}
+          {% eleventyImage "./src/assets/images/screenshots/" + site.filename + ".jpg", site.name, null, "lazy", null, sizes, widths %}
 
           <p>{{ site.description }}</p>