docs: How Runtime Logger works (#184)

Fryuni · Dec 31, 2024 · 3a8a17d · 3a8a17d
1 parent a1f3936
commit 3a8a17d
Show file tree

Hide file tree

Showing 20 changed files with 1,290 additions and 356 deletions.
diff --git a/docs/astro.config.ts b/docs/astro.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import type { StarlightConfig } from '@astrojs/starlight/types';
-import vercel from '@astrojs/vercel/serverless';
+import vercel from '@astrojs/vercel';
 import starWarp from '@inox-tools/star-warp';
 import starlightLinksValidator from 'starlight-links-validator';
 
@@ -135,4 +135,7 @@ export default defineConfig({
 		'/content-utils/git-time': '/content-utils/git',
 		'/modular-station': '/modular-station/api',
 	},
+	image: {
+		domains: ['mermaid.ink'],
+	},
 });
diff --git a/docs/package.json b/docs/package.json
@@ -12,6 +12,7 @@
     "validate": "astro check"
   },
   "dependencies": {
+    "@astrojs/node": "^9.0.0",
     "@astrojs/starlight": "catalog:",
     "@astrojs/vercel": "^8.0.1",
     "@croct/plug": "^0.16.5",
@@ -20,11 +21,14 @@
     "@vercel/analytics": "^1.4.1",
     "astro": "catalog:",
     "sharp": "^0.33.5",
-    "starlight-links-validator": "^0.13.4",
+    "starlight-links-validator": "^0.14.1",
     "starlight-package-managers": "^0.8.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
+    "@types/pako": "^2.0.3",
+    "js-base64": "^3.7.7",
+    "pako": "^2.1.0",
     "typescript": "catalog:"
   }
 }
diff --git a/docs/src/components/Mermaid.astro b/docs/src/components/Mermaid.astro
@@ -0,0 +1,35 @@
+---
+import { deflate } from 'pako';
+import { fromUint8Array } from 'js-base64';
+import { Image } from 'astro:assets';
+
+export interface Props {
+	code: string;
+	alt?: string;
+}
+
+function imgUrlFor(config: any): string {
+	const encodedState = new TextEncoder().encode(
+		JSON.stringify({
+			mermaid: JSON.stringify(config),
+			code: Astro.props.code,
+		})
+	);
+	const compressed = deflate(encodedState, { level: 9 });
+	const encoded = fromUint8Array(compressed, true);
+	return `https://mermaid.ink/img/pako:${encoded}?type=webp`;
+}
+---
+
+<Image
+	class:list={['light:sl-hidden']}
+	alt={Astro.props.alt || 'Mermaid Diagram'}
+	src={imgUrlFor({ theme: 'dark' })}
+	inferSize
+/>
+<Image
+	class:list={['dark:sl-hidden']}
+	alt={Astro.props.alt || 'Mermaid Diagram'}
+	src={imgUrlFor({ theme: 'default' })}
+	inferSize
+/>
diff --git a/docs/src/components/PageTitle.astro b/docs/src/components/PageTitle.astro
@@ -10,35 +10,42 @@ import Default from '@astrojs/starlight/components/PageTitle.astro';
 import Version from './Version.astro';
 
 const { data } = Astro.props.entry;
-const { packageName } = data;
+const { packageName, howItWorks } = data;
 
 const gitHubURL =
 	'https://github.com/Fryuni/inox-tools/tree/main/packages/' +
 	packageName?.replace(/^@inox-tools\//, '');
+
+const hasMeta = !!packageName || !!howItWorks;
 ---
 
 {
-	packageName !== undefined ? (
+	hasMeta ? (
 		<div class="wrapper">
 			<h1 id="_top">
-				<>
-					<span>{data.title}</span>
-				</>
+				<span>{data.title}</span>
 			</h1>
 			<div class="integration-metadata">
-				<Version pkgName={packageName} />
-				<a href={gitHubURL}>
-					<Icon size="1rem" name="github" /> GitHub
-				</a>
-				<a href={'https://www.npmjs.com/package/' + packageName}>
-					<svg width="16" height="16" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true">
-						<path d="M288 288h-32v-64h32v64zm288-128v192H288v32H160v-32H0V160h576zm-416 32H32v128h64v-96h32v96h32V192zm160 0H192v160h64v-32h64V192zm224 0H352v128h64v-96h32v96h32v-96h32v96h32V192z" />
-					</svg>
-					npm
-				</a>
-				<a href={gitHubURL + '/CHANGELOG.md'}>
-					<Icon size="1rem" name="list-format" /> Changelog
-				</a>
+				{!!packageName && (
+					<Version pkgName={packageName} />
+					<a href={gitHubURL}>
+						<Icon size="1rem" name="github" /> GitHub
+					</a>
+					<a href={'https://www.npmjs.com/package/' + packageName}>
+						<svg width="16" height="16" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true">
+							<path d="M288 288h-32v-64h32v64zm288-128v192H288v32H160v-32H0V160h576zm-416 32H32v128h64v-96h32v96h32V192zm160 0H192v160h64v-32h64V192zm224 0H352v128h64v-96h32v96h32v-96h32v96h32V192z" />
+						</svg>
+						npm
+					</a>
+					<a href={gitHubURL + '/CHANGELOG.md'}>
+						<Icon size="1rem" name="list-format" /> Changelog
+					</a>
+				)}
+				{!!howItWorks && (
+					<a href={howItWorks}>
+						<Icon size="1rem" name="information" /> How it works
+					</a>
+				)}
 			</div>
 		</div>
 	) : (

diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
@@ -6,6 +6,7 @@ export const collections = {
 		schema: docsSchema({
 			extend: z.object({
 				packageName: z.string().optional(),
+				howItWorks: z.string().optional(),
 			}),
 		}),
 	}),