Holistic technical website cleanup

docs/.vitepress/config.mts

@@ -1,3 +1,4 @@
+/* eslint-disable @stylistic/max-len */
 import { withMermaid } from 'vitepress-plugin-mermaid';
 import footnote from 'markdown-it-footnote';
 import tailwindcss from '@tailwindcss/vite';
@@ -7,9 +8,12 @@ import { HeadConfig } from 'vitepress';
 // @ts-ignore This file gets generated once docs:generate is run
 import apiRoutes from '../api/index.json';
 import m3u8Grammar from './m3u8-grammar.json' with { type: 'json' };
+import fs from 'node:fs/promises';
+import path from 'node:path';
 
 const DESCRIPTION = 'A JavaScript library for reading, writing, and converting media files. Directly in the browser,'
 	+ ' and faster than anybunny else.';
+const ORIGIN = 'https://mediabunny.dev';
 
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
@@ -17,22 +21,31 @@ export default withMermaid({
 	description: DESCRIPTION,
 	cleanUrls: true,
 	sitemap: {
-		hostname: 'https://mediabunny.dev',
+		hostname: ORIGIN,
+		transformItems: async (items) => {
+			const entries = await fs.readdir('./examples');
+			for (const entry of entries) {
+				const isDirectory = await fs.stat(path.join('./examples', entry)).then(stat => stat.isDirectory());
+				if (isDirectory) {
+					items.push({
+						url: `/examples/${entry}/`, // With trailing slash
+					});
+				}
+			}
+
+			return items;
+		},
 	},
-	lastUpdated: true,
+	// lastUpdated: true,
 	head: [
 		['link', { rel: 'icon', type: 'image/png', href: '/mediabunny-logo.png' }],
 		['link', { rel: 'icon', type: 'image/svg+xml', href: '/mediabunny-logo.svg' }],
-		['meta', { property: 'og:type', content: 'website' }],
 		['meta', { property: 'og:site_name', content: 'Mediabunny' }],
-		['meta', { property: 'og:url', content: 'https://mediabunny.dev/' }],
-		['meta', { property: 'og:image', content: 'https://mediabunny.dev/mediabunny-og-image.png' }],
+		['meta', { property: 'og:image', content: `${ORIGIN}/mediabunny-og-image.png` }],
 		['meta', { property: 'og:locale', content: 'en-US' }],
-		['meta', { property: 'og:description', content: DESCRIPTION }],
-		['meta', { name: 'twitter:image', content: 'https://mediabunny.dev/mediabunny-og-image.png' }],
+		['meta', { name: 'twitter:image', content: `${ORIGIN}/mediabunny-og-image.png` }],
 		['meta', { name: 'twitter:card', content: 'summary_large_image' }],
 		['meta', { name: 'twitter:site', content: '@vanilagy' }],
-		['meta', { name: 'twitter:description', content: DESCRIPTION }],
 	],
 	themeConfig: {
 		logo: '/mediabunny-logo.svg',
@@ -40,12 +53,12 @@ export default withMermaid({
 		// https://vitepress.dev/reference/default-theme-config
 		nav: [
 			{ text: 'Guide', link: '/guide/introduction', activeMatch: '/guide' },
-			{ text: 'API', link: '/api', activeMatch: '/api' },
+			{ text: 'API', link: '/api/', activeMatch: '/api/' }, // Trailing slash because it's index.html from there
 			{ text: 'LLMs', link: '/llms', activeMatch: '/llms' },
 			{ text: 'Examples', link: '/examples', activeMatch: '/examples' },
 			{ text: 'Blog', link: '/blog', activeMatch: '/blog' },
 			{ text: 'Sponsors', link: '/#sponsors', activeMatch: '/#sponsors' },
-			{ text: 'License', link: 'https://github.com/Vanilagy/mediabunny#license' },
+			{ text: 'License', link: 'https://github.com/Vanilagy/mediabunny#license', rel: 'noopener' },
 			{
 				text: 'More',
 				items: [
@@ -186,6 +199,8 @@ export default withMermaid({
 			llmstxt({
 				ignoreFiles: [
 					'api/*',
+					'examples.md',
+					'llms.md',
 				],
 			}),
 		],
@@ -196,14 +211,96 @@ export default withMermaid({
 		if (title !== 'Mediabunny') {
 			title += ' | Mediabunny';
 		}
-		const canonicalUrl = `https://mediabunny.dev/${pageData.relativePath}`
+
+		const canonicalUrl = `${ORIGIN}/${pageData.relativePath}`
 			.replace(/index\.md$/, '')
 			.replace(/\.md$/, '');
+		const isBlogPost = canonicalUrl.includes('/blog/');
+
+		const breadcrumbs: object[] = [];
+
+		if (canonicalUrl.includes('/guide/')) {
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'Guide',
+				'item': `${ORIGIN}/guide`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
+
+		if (canonicalUrl.includes('/api/')) {
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'API docs',
+				'item': `${ORIGIN}/api/`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
+
+		if (canonicalUrl.includes('/codec-registry/')) {
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'Codec registry',
+				'item': `${ORIGIN}/codec-registry/overview`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
 
 		((pageData.frontmatter['head'] ??= []) as HeadConfig[]).push(
+			['meta', { property: 'og:type', content: isBlogPost ? 'article' : 'website' }],
 			['meta', { property: 'og:title', content: title }],
-			['meta', { property: 'twitter:title', content: title }],
+			['meta', { property: 'og:description', content: pageData.description || DESCRIPTION }],
+			['meta', { property: 'og:url', content: canonicalUrl }],
+			['meta', { name: 'twitter:title', content: title }],
+			['meta', { name: 'twitter:description', content: pageData.description || DESCRIPTION }],
 			['link', { rel: 'canonical', href: canonicalUrl }],
 		);
+
+		if (isBlogPost) {
+			((pageData.frontmatter['head'] ??= []) as HeadConfig[]).push(
+				['meta', { property: 'article:published_time', content: String(pageData.frontmatter['publishedOnIso']) }],
+				['meta', { property: 'article:author', content: String(pageData.frontmatter['author']) }],
+			);
+
+			breadcrumbs.push({
+				'@type': 'ListItem',
+				'position': 1,
+				'name': 'Blog posts',
+				'item': `${ORIGIN}/blog`,
+			}, {
+				'@type': 'ListItem',
+				'position': 2,
+				'name': pageData.title,
+			});
+		}
+
+		if (breadcrumbs.length > 0) {
+			((pageData.frontmatter['head'] ??= []) as HeadConfig[]).push(
+				['script', { type: 'application/ld+json' }, JSON.stringify({
+					'@context': 'https://schema.org',
+					'@type': 'BreadcrumbList',
+					'itemListElement': breadcrumbs,
+				})],
+			);
+		}
+	},
+	buildEnd: async () => {
+		const files = await fs.readdir('./docs/api');
+
+		for (const file of files) {
+			await fs.copyFile('./docs/api/' + file, './dist-docs/api/' + file);
+		}
 	},
 });