feat: support front-matter in md docs

AmadeusITGroup · Mar 21, 2024 · df32859 · df32859
1 parent 6a6f82b
commit df32859
Show file tree

Hide file tree

Showing 17 changed files with 111 additions and 20 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -29,10 +29,7 @@
 		"dev": {
 			"command": "vite dev",
 			"dependencies": [
-				"generate:doc",
-				"../angular/demo:dev",
-				"../react/demo:dev",
-				"../svelte/demo:dev"
+				"generate:doc"
 			],
 			"service": true
 		},
@@ -93,6 +90,7 @@
 		"bootstrap-icons": "^1.11.3",
 		"compare-versions": "^6.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
+		"front-matter": "^4.0.2",
 		"prettier-plugin-svelte": "^3.2.2",
 		"shiki": "^1.2.0",
 		"svelte": "^4.2.12",

diff --git a/demo/src/lib/server/index.ts b/demo/src/lib/server/index.ts
@@ -1,21 +1,34 @@
 import {componentsMetadata} from '../components-metadata';
+import frontMatter from 'front-matter';
 
 const validMdRegex = /^\d{2}-[a-zA-Z-]*\.md$/g;
 
 const componentsSubMenu = [
-	{...componentsMetadata.Accordion, slug: 'components/accordion/', subpath: 'examples'},
-	{...componentsMetadata.Alert, slug: `components/alert/`, subpath: 'examples'},
-	{...componentsMetadata.Modal, slug: `components/modal/`, subpath: 'examples'},
-	{...componentsMetadata.Pagination, slug: `components/pagination/`, subpath: 'examples'},
-	{...componentsMetadata.Progressbar, slug: `components/progressbar/`, subpath: 'examples'},
-	{...componentsMetadata.Rating, slug: `components/rating/`, subpath: 'examples'},
-	{...componentsMetadata.Select, slug: `components/select/`, subpath: 'examples'},
-	{...componentsMetadata.Slider, slug: `components/slider/`, subpath: 'examples'},
-	{...componentsMetadata.Toast, slug: `components/toast/`, subpath: 'examples'},
+	{...componentsMetadata.Accordion, slug: 'components/accordion/', subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Alert, slug: `components/alert/`, subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Modal, slug: `components/modal/`, subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Pagination, slug: `components/pagination/`, subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Progressbar, slug: `components/progressbar/`, subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Rating, slug: `components/rating/`, subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Select, slug: `components/select/`, subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Slider, slug: `components/slider/`, subpath: 'examples', attributes: {}},
+	{...componentsMetadata.Toast, slug: `components/toast/`, subpath: 'examples', attributes: {}},
 ];
 
-const docFiles = import.meta.glob('../../../../docs/*/*.md', {query: '?raw', eager: true, import: 'default'});
-const docs: {name: string; files: {slug: string; content?: string; title: string; subpath: string; status: string}[]}[] = [];
+interface Doc {
+	name: string;
+	files: {
+		slug: string;
+		content?: string;
+		title: string;
+		subpath: string;
+		status: string;
+		attributes: Record<string, string>;
+	}[];
+}
+
+const docFiles = import.meta.glob<string>('../../../../docs/*/*.md', {query: '?raw', eager: true, import: 'default'});
+const docs: Doc[] = [];
 for (const [key, value] of Object.entries(docFiles)) {
 	const name = key.substring(20, key.indexOf('/', 20));
 	if (name === 'Components') {
@@ -35,12 +48,20 @@ for (const [key, value] of Object.entries(docFiles)) {
 		docs.push(docToPush);
 	}
 	const normalizedFileName = key.substring(key.indexOf('/', 20) + 1).slice(3, -3);
+
+	const fmData = frontMatter<Record<string, string>>(value);
+	for (const key of Object.keys(fmData.attributes)) {
+		if (typeof fmData.attributes[key] === 'string' && fmData.attributes[key]) {
+			fmData.attributes[key] = fmData.attributes[key].trim();
+		}
+	}
 	docToPush.files.push({
 		slug: `${name.toLowerCase()}/${normalizedFileName.toLowerCase()}`,
-		content: value as string,
+		content: fmData.body,
 		title: normalizedFileName.replace('-', ' '),
 		subpath: '',
 		status: '',
+		attributes: fmData.attributes,
 	});
 }
 
@@ -93,5 +114,5 @@ export function retrieveMarkdown(slug: string, framework: string) {
 			}
 		}
 	}
-	return file ? {prev, next, content: preparseMarkdown(file.content!, framework)} : undefined;
+	return file ? {prev, next, content: preparseMarkdown(file.content!, framework), ...file.attributes} : undefined;
 }
diff --git a/demo/src/routes/docs/[framework]/[...slug]/+page.server.ts b/demo/src/routes/docs/[framework]/[...slug]/+page.server.ts
@@ -6,10 +6,8 @@ export const load = async ({params}) => {
 	if (!file) error(404);
 	else {
 		return {
-			content: file.content,
-			prev: file.prev,
-			next: file.next,
 			slug: params.slug,
+			...file,
 		};
 	}
 };
diff --git a/docs/00-Getting-started/00-Introduction.md b/docs/00-Getting-started/00-Introduction.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Introduction
 
 AgnosUI is a versatile widget library designed for various frameworks, providing a consistent user interface across platforms. Its core (also referred to as headless), written in pure TypeScript, serves as a foundation that can be utilized by any framework to generate a user interface.

diff --git a/docs/00-Getting-started/01-Features.md b/docs/00-Getting-started/01-Features.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Features
 
 ## Agnostic core

diff --git a/docs/00-Getting-started/02-Installation.md b/docs/00-Getting-started/02-Installation.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Installation
 
 ## Prerequisites

diff --git a/docs/01-Headless/00-Introduction.md b/docs/01-Headless/00-Introduction.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Introduction to Headless
 
 A headless component is a design pattern where the component applies a separation of concerns between the logic (or "head") and the user interface (or "body").

diff --git a/docs/01-Headless/01-Configuration.md b/docs/01-Headless/01-Configuration.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Configuration
 
 ## Overview

diff --git a/docs/01-Headless/02-Slots.md b/docs/01-Headless/02-Slots.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Slots
 
 ## What are Slots ?

diff --git a/docs/01-Headless/03-Directives.md b/docs/01-Headless/03-Directives.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Directives
 
 ## Overview

diff --git a/docs/04-Services/00-Introduction.md b/docs/04-Services/00-Introduction.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Introduction to Services
 
 ## Overview

diff --git a/docs/04-Services/01-Focustrack.md b/docs/04-Services/01-Focustrack.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Focus track
 
 ## Motivation

diff --git a/docs/04-Services/02-Floating-UI.md b/docs/04-Services/02-Floating-UI.md
@@ -1,3 +1,7 @@
+---
+since: 0.1.1
+---
+
 # Floating UI
 
 ## Service Overview

diff --git a/docs/04-Services/03-Resize-Observer.md b/docs/04-Services/03-Resize-Observer.md
@@ -1,3 +1,7 @@
+---
+since: 0.2.0
+---
+
 # Resize Observer
 
 ## Service Overview

diff --git a/docs/04-Services/04-Transition.md b/docs/04-Services/04-Transition.md
@@ -1,3 +1,7 @@
+---
+since: 0.2.0
+---
+
 # Transition
 
 ## Service Overview

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,6 +80,9 @@
 	"wireit": {
 		"dev": {
 			"dependencies": [
+				"./angular/demo:dev",
+				"./react/demo:dev",
+				"./svelte/demo:dev",
 				"./demo:dev"
 			]
 		},