Modernize showcase collection

.env.example

@@ -1 +1,5 @@
-THEMES_API_URL=https://portal.astro.build
+# GitHub token used for running CI scripts, e.g. `pnpm update:showcase`
+GITHUB_TOKEN=
+
+# Optionally override the default theme catalogue URL to test against development data
+# THEMES_API_URL=https://portal.astro.build

package.json

@@ -18,7 +18,7 @@
 		"typecheck": "astro check",
 		"update:integrations": "node -r dotenv/config ./scripts/update-integrations.mjs",
 		"update:showcase": "node -r dotenv/config ./scripts/update-showcase.mjs",
-		"audit:showcase": "node -r dotenv/config .scripts/audit-showcase.mjs"
+		"audit:showcase": "node -r dotenv/config ./scripts/audit-showcase.mjs"
 	},
 	"dependencies": {
 		"@astro-community/astro-embed-youtube": "^0.5.3",
@@ -35,7 +35,6 @@
 		"@biomejs/biome": "1.8.3",
 		"@iconify-json/ri": "^1.1.20",
 		"@netlify/plugin-lighthouse": "^6.0.0",
-		"@types/json-to-pretty-yaml": "1.2.1",
 		"@types/node": "^20.10.4",
 		"astro": "^4.14.6",
 		"astro-expressive-code": "^0.35.6",
@@ -59,13 +58,13 @@
 		"@actions/core": "^1.10.1",
 		"@octokit/graphql": "^7.0.2",
 		"gray-matter": "^4.0.3",
-		"json-to-pretty-yaml": "^1.2.2",
 		"linkedom": "^0.16.4",
 		"mdast-util-from-markdown": "^2.0.1",
 		"mdast-util-to-string": "^4.0.0",
 		"puppeteer": "^21.6.0",
 		"slugify": "^1.6.6",
-		"tiny-glob": "^0.2.9"
+		"tiny-glob": "^0.2.9",
+		"yaml": "^2.5.1"
 	},
 	"packageManager": "pnpm@9.4.0"
 }

scripts/migrate-integrations.mjs

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import yaml from 'json-to-pretty-yaml';
 import slugify from 'slugify';
+import * as yaml from 'yaml';
 
 function main() {
 	const blob = fs.readFileSync('./integrations.json', 'utf-8');

scripts/update-integrations.mjs

@@ -2,9 +2,9 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import matter from 'gray-matter';
-import yaml from 'json-to-pretty-yaml';
 import slugify from 'slugify';
 import glob from 'tiny-glob';
+import * as yaml from 'yaml';
 import {
 	allowlist,
 	badgeForPackage,

scripts/update-showcase.mjs

@@ -2,11 +2,11 @@
 import fs from 'node:fs/promises';
 import ghActions from '@actions/core';
 import octokit from '@octokit/graphql';
-import matter from 'gray-matter';
 import { parseHTML } from 'linkedom';
 import puppeteer from 'puppeteer';
 import { downloadBrowser } from 'puppeteer/lib/esm/puppeteer/node/install.js';
 import sharp from 'sharp';
+import * as yaml from 'yaml';
 
 await downloadBrowser();
 
@@ -301,14 +301,13 @@ class ShowcaseScraper {
 	static async #getLiveShowcaseUrls() {
 		const showcaseDir = './src/content/showcase';
 		const showcaseFilePaths = await fs.readdir(showcaseDir);
-		const showcaseFiles = (
-			await Promise.all(
-				showcaseFilePaths
-					.filter((path) => path.endsWith('.md'))
-					.map((path) => fs.readFile(`${showcaseDir}/${path}`, 'utf-8')),
-			)
-		).map((fileString) => matter(fileString));
-		return new Set(showcaseFiles.map((file) => new URL(file.data.url).origin));
+		const rawShowcaseFiles = await Promise.all(
+			showcaseFilePaths
+				.filter((path) => path.endsWith('.yml'))
+				.map((path) => fs.readFile(`${showcaseDir}/${path}`, 'utf-8')),
+		);
+		const showcaseFiles = rawShowcaseFiles.map((fileString) => yaml.parse(fileString));
+		return new Set(showcaseFiles.map((file) => new URL(file.url).origin));
 	}
 
 	/**
@@ -324,7 +323,7 @@ class ShowcaseScraper {
 		let success = false;
 		try {
 			const site = await ShowcaseScraper.#scrapeSite(url, browser);
-			await ShowcaseScraper.#saveScreenshots(url, site.screenshot);
+			await ShowcaseScraper.#saveScreenshot(url, site.screenshot);
 			await ShowcaseScraper.#saveDataFile(url, site);
 			title = site.title;
 			success = true;
@@ -387,38 +386,33 @@ class ShowcaseScraper {
 	 * @param {Buffer} screenshot PNG image buffer
 	 * @returns {Promise<void>}
 	 */
-	static async #saveScreenshots(url, screenshot) {
+	static async #saveScreenshot(url, screenshot) {
 		const { hostname } = new URL(url);
-		const pipeline = sharp(screenshot);
-		await pipeline
-			.clone()
-			.resize(1600)
-			.webp()
-			.toFile(`src/content/showcase/_images/${hostname}@2x.webp`);
-		console.log('Wrote', `src/content/showcase/_images/${hostname}@2x.webp`);
-		await pipeline.resize(800).webp().toFile(`src/content/showcase/_images/${hostname}.webp`);
-		console.log('Wrote', `src/content/showcase/_images/${hostname}.webp`);
+		const path = `src/content/showcase/${hostname}.webp`;
+		await sharp(screenshot).resize(1600).webp().toFile(path);
+		console.log('Wrote', path);
 	}
 
 	/**
-	 * Create a Markdown file in the showcase content collection.
+	 * Create a YAML file in the showcase content collection.
 	 * @param {string} url URL of the showcase entry to link to
 	 * @param {{ title: string; isStarlight: boolean }} site Metadata for the showcase site
 	 * @returns {Promise<void>}
 	 */
 	static async #saveDataFile(url, { title, isStarlight }) {
 		const { hostname } = new URL(url);
 		/** @type {Record<string, any>} */
-		const frontmatter = {
+		const data = {
 			title,
-			image: `/src/content/showcase/_images/${hostname}.webp`,
+			image: `./${hostname}.webp`,
 			url,
 			dateAdded: new Date(),
 		};
-		if (isStarlight) frontmatter.categories = ['starlight'];
-		const file = matter.stringify('', frontmatter);
-		await fs.writeFile(`src/content/showcase/${hostname}.md`, file, 'utf-8');
-		console.log('Wrote', `src/content/showcase/${hostname}.md`);
+		if (isStarlight) data.categories = ['starlight'];
+		const path = `src/content/showcase/${hostname}.yml`;
+		const file = yaml.stringify(data);
+		await fs.writeFile(path, file, 'utf-8');
+		console.log('Wrote', path);
 	}
 }
 

src/content/config.ts

@@ -153,30 +153,32 @@ export const collections = {
 			published: z.date(),
 		}),
 	},
-	showcase: {
-		schema: z.object({
-			title: z.string().min(1),
-			image: z.string(),
-			url: z.string().url(),
-			featured: z.number().min(1).optional(),
-			highlight: z.boolean().default(false),
-			dateAdded: z.date(),
-			categories: z
-				.enum([
-					'starlight',
-					'personal',
-					'tech',
-					'marketing',
-					'entertainment',
-					'landing',
-					'blog',
-					'portfolio',
-					'docs',
-					'e-commerce',
-					'other',
-				])
-				.array()
-				.default([]),
-		}),
-	},
+	showcase: defineCollection({
+		type: 'data',
+		schema: ({ image }) =>
+			z.object({
+				title: z.string().min(1),
+				image: image(),
+				url: z.string().url(),
+				featured: z.number().min(1).optional(),
+				highlight: z.boolean().default(false),
+				dateAdded: z.date(),
+				categories: z
+					.enum([
+						'starlight',
+						'personal',
+						'tech',
+						'marketing',
+						'entertainment',
+						'landing',
+						'blog',
+						'portfolio',
+						'docs',
+						'e-commerce',
+						'other',
+					])
+					.array()
+					.default([]),
+			}),
+	}),
 };

src/content/showcase/0no.co.yml

@@ -0,0 +1,5 @@
+title: 0No Co.
+image: ./0no.co.webp
+url: 'https://0no.co/'
+highlight: true
+dateAdded: 2023-07-10T14:49:29.000Z

src/content/showcase/31more.saidhasyim.com.yml

@@ -0,0 +1,6 @@
+title: 31More - A Better Way to Showcase Anything Elegantly
+image: ./31more.saidhasyim.com.webp
+url: 'https://31more.saidhasyim.com/'
+dateAdded: 2024-09-09T12:39:36.010Z
+categories:
+  - landing