feat: allow document assets (#1601)

Co-authored-by: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>

Author: paoloricciuti

apps/svelte.dev/src/lib/server/content.ts

@@ -17,6 +17,11 @@ const assets = import.meta.glob<string>(
 		import: 'default'
 	}
 );
+// we need a separate glob import for document assets because we need to use `read` so it needs the actual import, not `?url`
+const documents_assets = import.meta.glob<string>(['../../../content/docs/**/+assets/**'], {
+	eager: true,
+	import: 'default'
+});
 
 const registry_docs = import.meta.glob<string>(
 	'../../../src/lib/server/generated/registry/*.json',
@@ -28,7 +33,13 @@ const registry_docs = import.meta.glob<string>(
 );
 
 // https://github.com/vitejs/vite/issues/17453
-export const index = await create_index(documents, assets, '../../../content', read);
+export const index = await create_index(
+	documents,
+	assets,
+	documents_assets,
+	'../../../content',
+	read
+);
 
 const months = 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ');
 

apps/svelte.dev/src/routes/docs/[topic]/assets/[name]/+server.ts

@@ -0,0 +1,12 @@
+import { read } from '$app/server';
+import { docs } from '$lib/server/content';
+import { error } from '@sveltejs/kit';
+
+export async function GET({ params: { name, topic } }) {
+	const assets = docs.topics[`docs/${topic}`].assets;
+	if (!assets) {
+		error(404, 'No assets found for this topic');
+	}
+
+	return read(assets[name]);
+}

packages/site-kit/src/lib/components/Text.svelte

@@ -91,6 +91,11 @@
 			}
 		}
 
+		img {
+			max-width: 100%;
+			object-fit: contain;
+		}
+
 		h2 {
 			margin-top: 7rem;
 		}

packages/site-kit/src/lib/server/content/index.ts

@@ -4,6 +4,7 @@ import type { Document } from '../../types';
 export async function create_index(
 	documents: Record<string, string>,
 	assets: Record<string, string>,
+	documents_assets: Record<string, string>,
 	base: string,
 	read: (asset: string) => Response
 ): Promise<Record<string, Document>> {
@@ -99,6 +100,15 @@ export async function create_index(
 		(document.assets ??= {})[file] = assets[key];
 	}
 
+	for (const key in documents_assets) {
+		const path = key.slice(base.length + 1);
+		const slug = path.slice(0, path.indexOf('+assets') - 1).replace(/(^|\/)\d+-/g, '$1');
+		const file = path.slice(path.indexOf('+assets') + 8);
+		const document = content[slug];
+
+		(document.assets ??= {})[file] = documents_assets[key];
+	}
+
 	let prev: Document | null = null;
 
 	for (const document of roots) {