diff --git a/config/scripts/generate-screenshots.mjs b/config/scripts/generate-screenshots.mjs
new file mode 100644
index 0000000..3770c4e
--- /dev/null
+++ b/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();
diff --git a/package.json b/package.json
index 58bcf93..4541ac6 100644
--- a/package.json
+++ b/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:*",
diff --git a/src/_data/builtwith.json b/src/_data/builtwith.json
index b8d098a..18e720a 100644
--- a/src/_data/builtwith.json
+++ b/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/"
}
]
diff --git a/src/assets/css/blocks/grid-card.css b/src/assets/css/blocks/grid-card.css
index b22f0f1..7af5c29 100644
--- a/src/assets/css/blocks/grid-card.css
+++ b/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;
}
diff --git a/src/assets/images/screenshots/andystitt.jpg b/src/assets/images/screenshots/andystitt.jpg
new file mode 100644
index 0000000..64ef63d
Binary files /dev/null and b/src/assets/images/screenshots/andystitt.jpg differ
diff --git a/src/assets/images/screenshots/andystitt.png b/src/assets/images/screenshots/andystitt.png
deleted file mode 100644
index f72ae2e..0000000
Binary files a/src/assets/images/screenshots/andystitt.png and /dev/null differ
diff --git a/src/assets/images/screenshots/badwebsites-rip.jpg b/src/assets/images/screenshots/badwebsites-rip.jpg
new file mode 100644
index 0000000..218a383
Binary files /dev/null and b/src/assets/images/screenshots/badwebsites-rip.jpg differ
diff --git a/src/assets/images/screenshots/cantautor-es.jpg b/src/assets/images/screenshots/cantautor-es.jpg
new file mode 100644
index 0000000..235ce49
Binary files /dev/null and b/src/assets/images/screenshots/cantautor-es.jpg differ
diff --git a/src/assets/images/screenshots/cantautores.jpg b/src/assets/images/screenshots/cantautores.jpg
deleted file mode 100644
index e0b48be..0000000
Binary files a/src/assets/images/screenshots/cantautores.jpg and /dev/null differ
diff --git a/src/assets/images/screenshots/colegio-marpe.jpg b/src/assets/images/screenshots/colegio-marpe.jpg
new file mode 100644
index 0000000..4368ca3
Binary files /dev/null and b/src/assets/images/screenshots/colegio-marpe.jpg differ
diff --git a/src/assets/images/screenshots/colegio-marpe.png b/src/assets/images/screenshots/colegio-marpe.png
deleted file mode 100644
index d28ff6a..0000000
Binary files a/src/assets/images/screenshots/colegio-marpe.png and /dev/null differ
diff --git a/src/assets/images/screenshots/deimidis.jpg b/src/assets/images/screenshots/deimidis.jpg
new file mode 100644
index 0000000..2cf5485
Binary files /dev/null and b/src/assets/images/screenshots/deimidis.jpg differ
diff --git a/src/assets/images/screenshots/deimidis.png b/src/assets/images/screenshots/deimidis.png
deleted file mode 100644
index 8b63518..0000000
Binary files a/src/assets/images/screenshots/deimidis.png and /dev/null differ
diff --git a/src/assets/images/screenshots/elan.jpg b/src/assets/images/screenshots/elan.jpg
index 0a487be..aa58099 100644
Binary files a/src/assets/images/screenshots/elan.jpg and b/src/assets/images/screenshots/elan.jpg differ
diff --git a/src/assets/images/screenshots/estherzecco.jpg b/src/assets/images/screenshots/estherzecco.jpg
index 46f4e31..d4e8f38 100644
Binary files a/src/assets/images/screenshots/estherzecco.jpg and b/src/assets/images/screenshots/estherzecco.jpg differ
diff --git a/src/assets/images/screenshots/figcat.jpg b/src/assets/images/screenshots/figcat.jpg
index 6c608d6..3f4840c 100644
Binary files a/src/assets/images/screenshots/figcat.jpg and b/src/assets/images/screenshots/figcat.jpg differ
diff --git a/src/assets/images/screenshots/flamedfury.jpg b/src/assets/images/screenshots/flamedfury.jpg
new file mode 100644
index 0000000..5d9640d
Binary files /dev/null and b/src/assets/images/screenshots/flamedfury.jpg differ
diff --git a/src/assets/images/screenshots/flamedfury.png b/src/assets/images/screenshots/flamedfury.png
deleted file mode 100644
index 6ce063f..0000000
Binary files a/src/assets/images/screenshots/flamedfury.png and /dev/null differ
diff --git a/src/assets/images/screenshots/httpsterio.jpg b/src/assets/images/screenshots/httpsterio.jpg
new file mode 100644
index 0000000..944e5bd
Binary files /dev/null and b/src/assets/images/screenshots/httpsterio.jpg differ
diff --git a/src/assets/images/screenshots/httpsterio.png b/src/assets/images/screenshots/httpsterio.png
deleted file mode 100644
index 823c7f5..0000000
Binary files a/src/assets/images/screenshots/httpsterio.png and /dev/null differ
diff --git a/src/assets/images/screenshots/joewrites.jpg b/src/assets/images/screenshots/joewrites.jpg
index a0b8377..467692e 100644
Binary files a/src/assets/images/screenshots/joewrites.jpg and b/src/assets/images/screenshots/joewrites.jpg differ
diff --git a/src/assets/images/screenshots/krgr.jpg b/src/assets/images/screenshots/krgr.jpg
index 8aa0ee9..2946ec9 100644
Binary files a/src/assets/images/screenshots/krgr.jpg and b/src/assets/images/screenshots/krgr.jpg differ
diff --git a/src/assets/images/screenshots/lene-dev.jpg b/src/assets/images/screenshots/lene-dev.jpg
new file mode 100644
index 0000000..424197a
Binary files /dev/null and b/src/assets/images/screenshots/lene-dev.jpg differ
diff --git a/src/assets/images/screenshots/lenesaile.jpg b/src/assets/images/screenshots/lenesaile.jpg
index d7d5ebe..16f2957 100644
Binary files a/src/assets/images/screenshots/lenesaile.jpg and b/src/assets/images/screenshots/lenesaile.jpg differ
diff --git a/src/assets/images/screenshots/manuclavijo.jpg b/src/assets/images/screenshots/manuclavijo.jpg
new file mode 100644
index 0000000..cddad57
Binary files /dev/null and b/src/assets/images/screenshots/manuclavijo.jpg differ
diff --git a/src/assets/images/screenshots/manuclavijo.png b/src/assets/images/screenshots/manuclavijo.png
deleted file mode 100644
index 3650ce3..0000000
Binary files a/src/assets/images/screenshots/manuclavijo.png and /dev/null differ
diff --git a/src/assets/images/screenshots/misremembered.jpg b/src/assets/images/screenshots/misremembered.jpg
index 6e5c17a..df534b9 100644
Binary files a/src/assets/images/screenshots/misremembered.jpg and b/src/assets/images/screenshots/misremembered.jpg differ
diff --git a/src/assets/images/screenshots/projectmb.jpg b/src/assets/images/screenshots/projectmb.jpg
new file mode 100644
index 0000000..734f8d9
Binary files /dev/null and b/src/assets/images/screenshots/projectmb.jpg differ
diff --git a/src/assets/images/screenshots/projectmb.png b/src/assets/images/screenshots/projectmb.png
deleted file mode 100644
index 8350f06..0000000
Binary files a/src/assets/images/screenshots/projectmb.png and /dev/null differ
diff --git a/src/assets/images/screenshots/refugiolibertad.jpg b/src/assets/images/screenshots/refugiolibertad.jpg
new file mode 100644
index 0000000..7942a0a
Binary files /dev/null and b/src/assets/images/screenshots/refugiolibertad.jpg differ
diff --git a/src/assets/images/screenshots/refugiolibertad.png b/src/assets/images/screenshots/refugiolibertad.png
deleted file mode 100644
index 9ebf0fa..0000000
Binary files a/src/assets/images/screenshots/refugiolibertad.png and /dev/null differ
diff --git a/src/assets/images/screenshots/woodenchips.jpg b/src/assets/images/screenshots/woodenchips.jpg
new file mode 100644
index 0000000..95b343e
Binary files /dev/null and b/src/assets/images/screenshots/woodenchips.jpg differ
diff --git a/src/assets/images/screenshots/woodenchips.png b/src/assets/images/screenshots/woodenchips.png
deleted file mode 100644
index 5382bc2..0000000
Binary files a/src/assets/images/screenshots/woodenchips.png and /dev/null differ
diff --git a/src/pages/built-with.njk b/src/pages/built-with.njk
index 882e3be..843b963 100644
--- a/src/pages/built-with.njk
+++ b/src/pages/built-with.njk
@@ -9,24 +9,32 @@ widths: [400, 520]
A list of sites based on / built with Eleventy Excellent. Add yours by submitting a
+ A list of sites based on / built with Eleventy Excellent.
+ This uses Eleventy's screenshot API . New screenshots are fetched in development only.
+
+
+
+ Have you built a site with this starer? Please let me know or create a
pull request!pull request
:)
+ and add it to the list! You find the data in src/_data/builtwith.json (Not related to "Build
+ with Jason" 🥁).
-
{% include 'svg/divider-soft-top.svg' %}
Based on, or built with Eleventy Excellent:
-
+
{% for site in builtwith | reverse %}
-
- {% 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 %}
{{ site.description }}