feat(site): site-kit renderer (#8757)

* Push

* Weirdass fix

* Unified renderer

* Move a bit

* Accomodate to new renderer

* update site-kit

* bump site-kit

* Fix script

* Bump site-kit

---------

Co-authored-by: Ben McCann <[email protected]>

Author: PuruVJ

documentation/blog/2017-09-06-the-zen-of-just-writing-css.md

@@ -44,9 +44,10 @@ Let's see what that looks like in practice.
 		<source type='video/mp4' src='https://svelte-technology-assets.surge.sh/just-write-css.mp4'>
 	</video>
 
-    <figcaption>
-    	Is this what they mean by 'use the platform'?
-    </figcaption>
+<!-- prettier-ignore -->
+<figcaption>
+	Is this what they mean by 'use the platform'?
+</figcaption>
 
 </figure>
 

documentation/docs/03-runtime/02-svelte-store.md

@@ -62,6 +62,7 @@ Note that the value of a `writable` is lost when it is destroyed, for example wh
 Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
 
 ```js
+<!--- file: App.svelte --->
 // ---cut---
 import { readable } from 'svelte/store';
 

pnpm-lock.yaml

@@ -30,7 +30,7 @@
 		"@resvg/resvg-js": "^2.4.1",
 		"@sveltejs/adapter-vercel": "^3.0.1",
 		"@sveltejs/kit": "^1.20.4",
-		"@sveltejs/site-kit": "6.0.0-next.8",
+		"@sveltejs/site-kit": "6.0.0-next.11",
 		"@sveltejs/vite-plugin-svelte": "^2.4.1",
 		"@types/marked": "^5.0.0",
 		"@types/node": "^20.3.1",

sites/svelte.dev/package.json

@@ -146,7 +146,7 @@ function munge_type_element(member, depth = 1) {
 	// @ts-ignore
 	const doc = member.jsDoc?.[0];
 
-	if (/private api/i.test(doc?.comment)) return;
+	if (/(private api|do not use)/i.test(doc?.comment)) return;
 
 	/** @type {string[]} */
 	const children = [];
@@ -304,7 +304,7 @@ fs.writeFileSync(
 	`
 /* This file is generated by running \`pnpm generate\`
    in the sites/svelte.dev directory — do not edit it */
-export const modules = /** @type {import('../generated/types').Modules} */ (${JSON.stringify(
+export const modules = /** @type {import('@sveltejs/site-kit/markdown').Modules} */ (${JSON.stringify(
 		modules,
 		null,
 		'  '

sites/svelte.dev/scripts/type-gen/index.js

@@ -1,23 +1,24 @@
 // @ts-check
-import { modules } from '$lib/generated/type-info.js';
+import { extractFrontmatter } from '@sveltejs/site-kit/markdown';
 import fs from 'node:fs';
 import { CONTENT_BASE_PATHS } from '../../../constants.js';
-import { extract_frontmatter } from '../markdown/index.js';
-import { render_markdown } from '../markdown/renderer.js';
+import { render_content } from '../renderer.js';
 
 /**
  * @param {import('./types').BlogData} blog_data
  * @param {string} slug
  */
 export async function get_processed_blog_post(blog_data, slug) {
-	const post = blog_data.find((post) => post.slug === slug);
-
-	if (!post) return null;
+	for (const post of blog_data) {
+		if (post.slug === slug) {
+			return {
+				...post,
+				content: await render_content(post.file, post.content)
+			};
+		}
+	}
 
-	return {
-		...post,
-		content: await render_markdown(post.file, post.content, { modules })
-	};
+	return null;
 }
 
 const BLOG_NAME_REGEX = /^(\d{4}-\d{2}-\d{2})-(.+)\.md$/;
@@ -31,7 +32,7 @@ export function get_blog_data(base = CONTENT_BASE_PATHS.BLOG) {
 		if (!BLOG_NAME_REGEX.test(file)) continue;
 
 		const { date, date_formatted, slug } = get_date_and_slug(file);
-		const { metadata, body } = extract_frontmatter(fs.readFileSync(`${base}/${file}`, 'utf-8'));
+		const { metadata, body } = extractFrontmatter(fs.readFileSync(`${base}/${file}`, 'utf-8'));
 
 		blog_posts.push({
 			date,

sites/svelte.dev/src/lib/generated/types.d.ts

@@ -1,15 +1,16 @@
 import { base as app_base } from '$app/paths';
 import { modules } from '$lib/generated/type-info.js';
-import fs from 'node:fs';
-import { CONTENT_BASE_PATHS } from '../../../constants.js';
 import {
 	escape,
-	extract_frontmatter,
+	extractFrontmatter,
+	markedTransform,
 	normalizeSlugify,
 	removeMarkdown,
-	transform
-} from '../markdown/index.js';
-import { render_markdown } from '../markdown/renderer.js';
+	replaceExportTypePlaceholders
+} from '@sveltejs/site-kit/markdown';
+import fs from 'node:fs';
+import { CONTENT_BASE_PATHS } from '../../../constants.js';
+import { render_content } from '../renderer';
 
 /**
  * @param {import('./types').DocsData} docs_data
@@ -21,7 +22,7 @@ export async function get_parsed_docs(docs_data, slug) {
 			if (page.slug === slug) {
 				return {
 					...page,
-					content: await render_markdown(page.file, page.content, { modules })
+					content: await render_content(page.file, page.content)
 				};
 			}
 		}
@@ -62,7 +63,7 @@ export function get_docs_data(base = CONTENT_BASE_PATHS.DOCS) {
 
 			const page_slug = match[1].replace('.md', '');
 
-			const page_data = extract_frontmatter(
+			const page_data = extractFrontmatter(
 				fs.readFileSync(`${base}/${category_dir}/${filename}`, 'utf-8')
 			);
 
@@ -105,10 +106,12 @@ function get_sections(markdown) {
 	const secondLevelHeadings = [];
 	let match;
 
-	while ((match = headingRegex.exec(markdown)) !== null) {
+	const placeholders_rendered = replaceExportTypePlaceholders(markdown, modules);
+
+	while ((match = headingRegex.exec(placeholders_rendered)) !== null) {
 		secondLevelHeadings.push({
 			title: removeMarkdown(
-				escape(transform(match[1], { paragraph: (txt) => txt }))
+				escape(markedTransform(match[1], { paragraph: (txt) => txt }))
 					.replace(/<\/?code>/g, '')
 					.replace(/&#39;/g, "'")
 					.replace(/&quot;/g, '"')

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

@@ -6,11 +6,15 @@ import fs from 'node:fs';
  * @param {string} slug
  */
 export function get_example(examples_data, slug) {
-	const example = examples_data
-		.find((section) => section.examples.find((example) => example.slug === slug))
-		?.examples.find((example) => example.slug === slug);
+	for (const section of examples_data) {
+		for (const example of section.examples) {
+			if (example.slug === slug) {
+				return example;
+			}
+		}
+	}
 
-	return example;
+	return null;
 }
 
 /**