Pages for ADRs and "About" page

Adds pages for ADRs with code styling and mermaid diagrams.

About page has some minimal information about the project that can be
expanded in the future.

Signed-off-by: Rodrigo Pinto <[email protected]>

Author: Rodrigoplp-work

.gitignore

@@ -5,6 +5,7 @@
 !examples/*/scripts/
 *.log
 *.tsbuildinfo
+.DS_Store
 .browser_modules/
 /.venv/
 /packages/base/lib/

doc/web-doc/.gitignore

@@ -1,11 +1,11 @@
 # LC_COLLATE=C sort .gitignore
-!.env.example
 .DS_Store
 .env
 .env.*
 /.svelte-kit
 /build
 /package
+doc-sources
 node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

doc/web-doc/.prettierignore

@@ -1,4 +1,5 @@
 .DS_Store
+doc-sources
 node_modules
 /build
 /.svelte-kit

doc/web-doc/doc-loader.js

@@ -13,7 +13,7 @@ const errorCallback = (err) => {
 const comparisonOptions = {
 	excludeFilter: '.DS_Store',
 	compareSize: true,
-  compareContent: true
+	compareContent: true
 };
 
 // Sanitizer of markdown files
@@ -46,7 +46,7 @@ const processLineByLine = async (file) => {
 				result += line + '\n';
 			}
 
-      if (line.includes('```mermaid')) {
+			if (line.includes('```mermaid')) {
 				mermaid = true;
 			}
 		});
@@ -62,10 +62,10 @@ const processLineByLine = async (file) => {
 // Compare folders
 
 if (!fs.existsSync('doc-sources')) {
-  fs.mkdirSync('doc-sources');
-  fs.mkdirSync(dest);
+	fs.mkdirSync('doc-sources');
+	fs.mkdirSync(dest);
 } else if (!fs.existsSync(dest)) {
-  fs.mkdirSync(dest);
+	fs.mkdirSync(dest);
 }
 
 const comparison = compareSync(src, dest, comparisonOptions);
@@ -76,10 +76,10 @@ if (!comparison.same) {
 	comparison.diffSet.forEach(async (dif) => {
 		if ((dif.state === 'left' || dif.state === 'distinct') && dif.path1 === src) {
 			if (dif.type1 === 'file' && dif.name1.slice(-3) === '.md') {
-        // Remove outdated file
-        if (dif.state === 'distinct') {
-          fs.rmSync(dest + dif.name2, { force: true })
-        }
+				// Remove outdated file
+				if (dif.state === 'distinct') {
+					fs.rmSync(dest + dif.name2, { force: true });
+				}
 
 				// Sanitize Markdown files
 				const file = fs.createReadStream(src + dif.name1, 'utf8');

doc/web-doc/mdsvex.config.js

@@ -0,0 +1,14 @@
+import remarkMermaid from '@ysuzuki19/remark-mermaid';
+
+const config = {
+	extensions: ['.svelte.md', '.md', '.svx'],
+
+	smartypants: {
+		dashes: 'oldschool'
+	},
+
+	remarkPlugins: [remarkMermaid],
+	rehypePlugins: []
+};
+
+export default config;

doc/web-doc/src/lib/components/Header.svelte

@@ -6,7 +6,7 @@
 
 <header>
 	<div class="corner">
-    <a href="https://projects.eclipse.org/projects/tools.tracecompass">
+		<a href="https://projects.eclipse.org/projects/tools.tracecompass">
 			<img src={logo} alt="Trace Compass" />
 		</a>
 	</div>

doc/web-doc/src/lib/components/Sidebar.svelte

@@ -1,6 +1,9 @@
 <script>
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+
+	export let adrs;
+	let showAdrs = false;
 </script>
 
 <div class="sidebar">
@@ -11,12 +14,27 @@
 		<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 			<button on:click={() => goto('/about')}>About</button>
 		</li>
+		<li>
+			<button class:selected={showAdrs} on:click={() => (showAdrs = !showAdrs)}>ADRs</button>
+		</li>
+		{#if showAdrs}
+			{#each adrs as adr}
+				<li aria-current={$page.url.pathname === '/adr/' + adr.slug ? 'page' : undefined}>
+					<button class="adr">
+						<a href={'/adr/' + adr.slug} target="_self">
+							<div class="link-holder">{adr.slug}</div>
+						</a>
+					</button>
+				</li>
+			{/each}
+		{/if}
 	</ul>
 </div>
 
 <style>
 	.sidebar {
 		width: 10em;
+		min-width: 10em;
 	}
 
 	ul {
@@ -31,6 +49,37 @@
 	button {
 		width: 100%;
 		height: 100%;
-		background: none;
+	}
+
+	button.adr {
+		display: flex;
+		padding: 0;
+	}
+
+	button.adr a {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		color: black;
+		text-decoration: none;
+	}
+
+	button.adr a:visited,
+	button.adr a:link,
+	button.adr a:focus {
+		color: black;
+	}
+
+	button.selected {
+		background: lightgrey;
+		border-width: 0;
+	}
+
+	button:hover {
+		cursor: pointer;
+	}
+
+	.link-holder {
+		margin: auto;
 	}
 </style>

doc/web-doc/src/lib/process-files.js

@@ -0,0 +1,62 @@
+const allAdrFiles = import.meta.glob('/doc-sources/adr-source/*.md');
+const iterableAdrFiles = Object.entries(allAdrFiles);
+
+export const getAdrsContent = async () => {
+	const allAdrs = await Promise.all(
+		iterableAdrFiles.map(async ([path, resolver]) => {
+			const element = await resolver();
+			const metadata = element.metadata;
+			const content = element.default.render();
+			const slug = path.slice(0, -3).split('/').pop();
+
+			return {
+				metadata,
+				slug,
+				path,
+				content
+			};
+		})
+	);
+
+	return allAdrs;
+};
+
+export const getAdr = async (slug) => {
+	const adr = iterableAdrFiles?.filter(([path]) => {
+		const fileSlug = path.slice(0, -3).split('/').pop();
+
+		return fileSlug === slug;
+	});
+
+	if (adr.length > 0) {
+		const resolver = adr[0][1];
+		const element = await resolver();
+		console.log('resolver', element);
+		//   const content = element.default.render()
+
+		//   return content
+	}
+
+	return adr;
+};
+
+export const getOneAdr = async (slug) => {
+	const allAdrs = await Promise.all(
+		iterableAdrFiles.map(async ([path, resolver]) => {
+			const fileSlug = path.slice(0, -3).split('/').pop();
+			let content = 'empty';
+			if (fileSlug === slug) {
+				console.log('equal', slug, path, resolver);
+				const element = await resolver();
+				content = element.default.render();
+			}
+
+			return {
+				content
+			};
+		})
+	);
+
+	console.log('all adrs', allAdrs);
+	return allAdrs;
+};