feat: multi-page docs (#8253)

* Rename markdown to blog

* Multi-page docs

* Ignore missing ID for now

* heading

* Add code snippets(temporary)

* /docs redirects to introduction

* Remove ukraine petition

* OnThisPage

* Remove console.log

* Update deps

* Fix accessibility warning

* Update site-kit

sites/svelte.dev/package.json

@@ -16,7 +16,7 @@
     "test": "uvu -r ts-node/register src/lib/server/markdown"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.7.0",
+    "@supabase/supabase-js": "^2.7.1",
     "@sveltejs/repl": "0.0.3",
     "cookie": "^0.5.0",
     "devalue": "^4.2.3",
@@ -25,27 +25,31 @@
     "sourcemap-codec": "^1.4.8"
   },
   "devDependencies": {
-    "@resvg/resvg-js": "^2.2.0",
-    "@sveltejs/adapter-auto": "^1.0.2",
-    "@sveltejs/kit": "^1.3.10",
-    "@sveltejs/site-kit": "^3.2.1",
+    "@resvg/resvg-js": "^2.3.1",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/site-kit": "^3.2.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@types/marked": "^4.0.8",
+    "@types/prismjs": "^1.26.0",
     "degit": "^2.8.4",
     "dotenv": "^16.0.3",
-    "jimp": "^0.16.2",
+    "jimp": "^0.22.4",
     "marked": "^4.2.12",
     "node-fetch": "^3.3.0",
     "prettier": "^2.8.3",
     "prettier-plugin-svelte": "^2.9.0",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
-    "satori": "^0.1.2",
+    "satori": "^0.2.3",
     "satori-html": "^0.3.2",
     "shelljs": "^0.8.5",
+    "shiki": "^0.14.0",
+    "shiki-twoslash": "^3.1.0",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.3",
     "typescript": "^4.9.5",
-    "vite": "^4.0.4",
+    "vite": "^4.1.1",
     "vite-imagetools": "^4.0.18"
   }
 }

sites/svelte.dev/src/lib/server/blog/index.js

@@ -0,0 +1,73 @@
+import fs from 'fs';
+import { extract_frontmatter } from '../markdown';
+import { transform } from './marked';
+
+/**
+ * @returns {import('./types').BlogPostSummary[]}
+ */
+export function get_index() {
+	return fs
+		.readdirSync('content/blog')
+		.reverse()
+		.map((file) => {
+			if (!file.endsWith('.md')) return;
+
+			const { date, slug } = get_date_and_slug(file);
+
+			const content = fs.readFileSync(`content/blog/${file}`, 'utf-8');
+			const { metadata } = extract_frontmatter(content);
+
+			return {
+				slug,
+				date,
+				title: metadata.title,
+				description: metadata.description,
+				draft: !!metadata.draft,
+			};
+		});
+}
+
+/**
+ * @param {string} slug
+ * @returns {import('./types').BlogPost}
+ */
+export function get_post(slug) {
+	for (const file of fs.readdirSync('content/blog')) {
+		if (!file.endsWith('.md')) continue;
+		if (file.slice(11, -3) !== slug) continue;
+
+		const { date, date_formatted } = get_date_and_slug(file);
+
+		const content = fs.readFileSync(`content/blog/${file}`, 'utf-8');
+		const { metadata, body } = extract_frontmatter(content);
+
+		return {
+			date,
+			date_formatted,
+			title: metadata.title,
+			description: metadata.description,
+			author: {
+				name: metadata.author,
+				url: metadata.authorURL,
+			},
+			draft: !!metadata.draft,
+			content: transform(body),
+		};
+	}
+}
+
+/** @param {string} filename */
+function get_date_and_slug(filename) {
+	const match = /^(\d{4}-\d{2}-\d{2})-(.+)\.md$/.exec(filename);
+	if (!match) throw new Error(`Invalid filename for blog: '${filename}'`);
+
+	const [, date, slug] = match;
+	const [y, m, d] = date.split('-');
+	const date_formatted = `${months[+m - 1]} ${+d} ${y}`;
+
+	return { date, date_formatted, slug };
+}
+
+const months = 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ');
+
+function format_date(date) {}