colour pages in toolbar by colour

salient-lang · Apr 17, 2024 · a048246 · a048246
1 parent f6b0d2b
commit a048246
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 80 deletions.
diff --git a/builder/index.ts b/builder/index.ts
@@ -1,4 +1,4 @@
-import { CreateFolderPage, CreatePage } from "./page";
+import { CreateFolderPage, RenderInnerPage, WritePage } from "./page";
 import { readdir, stat, mkdir, writeFile } from "fs/promises";
 import { CreateToolbar } from "./toolbar";
 import * as Search from "./search";
@@ -27,8 +27,10 @@ async function BuildDir(path: string) {
 	if (path !== "./docs") await mkdir(`./public/${path.slice(7)}`, { recursive: true });
 
 	const { files, folders } = await GroupPaths(paths);
-	const toolbar = CreateToolbar(path, folders, files);
-	await Promise.all(files.map(f => CreatePage(toolbar, f)));
+	const pageFragments = await Promise.all(files.map(RenderInnerPage));
+	const toolbar = CreateToolbar(path, folders, pageFragments);
+
+	await Promise.all(pageFragments.map(f => WritePage(f, toolbar)));
 	await CreateFolderPage(toolbar, path);
 
 	await Promise.all(folders.map(BuildDir));

diff --git a/builder/markdown.ts b/builder/markdown.ts
@@ -6,35 +6,13 @@ const md = new MarkdownIt({
 	// linkify: true,  // Autoconvert URL-like text to links
 });
 
-// Function to handle custom syntax {@type ???}
-function TypeInsert(md: MarkdownIt) {
-	// Regex to match {@type ???}
-
-
-	md.core.ruler.push('custom_type', (state) => {
-		state.tokens.forEach(token => {
-			if (token.type !== 'inline' || !token.children) return;
-
-			token.children.forEach(child => {
-				if (child.type !== 'text') return;
-
-				child.content = child.content.replace(typeRegex, (match, typeName) => {
-					// determine url from context
-					return `<a href="/types/${typeName}">${typeName}</a>`;
-				});
-			});
-		});
-	});
-}
-
-md.use(TypeInsert);
-
-const typeRegex = /\{@type ([^\}]+)\}/g;
+const typeRegex = /\{@(type|function) ([^\}]+)\}/g;
 export function RenderMarkdown(ctx: TypeDefMap, source: string) {
-	return md.render(source.replace(typeRegex, (match, typeName) => {
+	return md.render(source.replace(typeRegex, (match, mode, typeName) => {
+		console.log(12, mode, typeName);
 		const href = ctx.get(typeName);
 		if (!href) return typeName;
 
-		return `<a class="type" href="${href}" entry>${typeName}</a>`;
+		return `<a class="${mode === "type" ? "type" : "name"}" href="${href}" entry>${typeName}</a>`;
 	}));
 }
diff --git a/builder/page.ts b/builder/page.ts
@@ -17,44 +17,36 @@ const search = `<div id="search">
 	<div class="results"></div>
 </div>`;
 
-export async function CreatePage(toolbar: string, path: string) {
-	const extIndex = path.lastIndexOf(".");
-	const ext = path.slice(extIndex);
-	if (ext != ".md") return;
+export async function WritePage(frag: PageFragment, toolbar: string) {
+	const { path, html } = frag;
 
+	const extIndex = path.lastIndexOf(".");
 	const name = Path2Name(path);
 	const href  = Reroute(path);
 
-	const data = await readFile(path, "utf8");
-	const { html, type } = RenderPage(path, data);
-
-	AddIndex({ href, name, text: data });
-
 	const document = `<!DOCTYPE html>
-<html>
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-		<title>${name}</title>
-		<meta property="og:title" content="${name}"/>
-		<link rel="stylesheet" href="/main.css"/>
-		<script src="/index.js"></script>
-	</head>
-	<body>
-		${toolbar}
-		<div class="dashboard">
-			${search}
-			<div class="stash">
-				<div class="entry" style="view-transition-name: ${href.replaceAll("/", "_")}" data-src="${href}" open>`
-					+ html
-				+`</div>
+	<html>
+		<head>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>${name}</title>
+			<meta property="og:title" content="${name}"/>
+			<link rel="stylesheet" href="/main.css"/>
+			<script src="/index.js"></script>
+		</head>
+		<body>
+			${toolbar}
+			<div class="dashboard">
+				${search}
+				<div class="stash">
+					<div class="entry" style="view-transition-name: ${href.replaceAll("/", "_")}" data-src="${href}" open>`
+						+ html
+					+`</div>
+				</div>
 			</div>
-		</div>
-	</body>
-</html>`;
+		</body>
+	</html>`;
 
-	writeFile(`./public/${path.slice(7, extIndex)}.html`, document);
-
-	return type;
+	writeFile(`./public/${frag.path.slice(7, extIndex)}.html`, document);
 }
 
 
@@ -79,10 +71,27 @@ export async function CreateFolderPage(toolbar: string, path: string) {
 }
 
 
+export type PageFragment = Awaited<ReturnType<typeof RenderInnerPage>>;
+export async function RenderInnerPage(path: string) {
+	const extIndex = path.lastIndexOf(".");
+	const ext = path.slice(extIndex);
+	if (ext != ".md") throw new Error(`Cannot render ${path}`);
+
+	const name = Path2Name(path);
+	const href  = Reroute(path);
+
+	const data = await readFile(path, "utf8");
+	const { html, type } = RenderPage(path, data);
+
+	AddIndex({ href, name, text: data });
+
+	return { html, type, path }
+}
+
 
 function RenderPage(path: string, data: string) {
 	const pathFrag = path.split("/").slice(2);
-	const { summary, details } = IngestPage(data);
+	const { summary, details, definitions } = IngestPage(data);
 
 	const html = `<div class="expander" onclick="Expander(event)">`
 		+ `<span class="comment">${pathFrag.slice(0, -1).join("/")}</span>`
@@ -99,21 +108,21 @@ function RenderPage(path: string, data: string) {
 				+ `<div class="cluster">`
 					+ summary.params.map(p => ``
 						+ `<span class="argument">${p.name}</span>`
-						+ `<span>: <span>${p.type}</span></span>`
-						+ `<span class="comment inline-details">${p.description}</span>`
+						+ `<span style="text-wrap: nowrap;">: <span>${p.type}</span></span>`
+						+ `<span class="comment inline-details">${p.description.trim()}</span>`
 					+``).join("")
 				+ `</div>`
 				+ (summary.type == "function"
 					? (") => "
 						+ `<div style="display: inline-block;">${summary.returns.map(p => ``
 							+ `<span class="argument">${p.name}</span>`
-							+ `<span>: <span>${p.type}</span></span>`
+							+ `<span style="text-wrap: nowrap;">: <span>${p.type}</span></span>`
 							+ `<span class="comment inline-details">&nbsp;${p.description}</span>`
 						).join("")}</div>`
 					) : "}")
 			+ `</div>`
 		+ `</div>`
-	+ `<div class="details">${RenderMarkdown(details)}</div>`;
+	+ `<div class="details">${RenderMarkdown(definitions, details)}</div>`;
 
 	return { html, type: summary.type };
 }
@@ -163,12 +172,13 @@ function IngestPage(data: string) {
 	}
 
 	return {
+		definitions,
 		summary: {
 			type,
 			params, returns,
-			text: summary.slice(1)
+			text: summary.slice(1).trim()
 		},
-		details: secondary
+		details: secondary.trim()
 	}
 }
 
@@ -180,7 +190,7 @@ function ProcessSignatureLine(ctx: TypeDefMap, line: string) {
 		? `<a class="type" href="${ctx.get(typeStr)}" entry>${typeStr}</a>`
 		: `<span class="type">${typeStr}</span>`;
 
-	return { name, type, description }
+	return {name, type, description }
 }
 
 function IngestReferal(ctx: TypeDefMap, line: string) {

diff --git a/builder/toolbar.ts b/builder/toolbar.ts
@@ -1,7 +1,7 @@
 import { Path2Name, Reroute } from "./helper";
+import { PageFragment } from "./page";
 
-export function CreateToolbar(href: string, folders: string[], files: string[]) {
-
+export function CreateToolbar(href: string, folders: string[], files: PageFragment[]) {
 	const pathFrags = href.split("/").slice(2); // ignore ./docs
 	const parents = pathFrags.map((x, i) => i == 0
 		? {
@@ -26,8 +26,8 @@ export function CreateToolbar(href: string, folders: string[], files: string[])
 	</a>`).join("\n\t")}
 
 	${files.map(x =>
-	`<a href="${Reroute(x)}" entry>
-		${Path2Name(x)}
+	`<a class="${x.type == "structure" ? "type" : "name"}" href="${Reroute(x.path)}" entry>
+		${Path2Name(x.path)}
 	</a>`).join("\n\t")}
 </div>`;
 }
diff --git a/docs/template.md b/docs/template.md
@@ -0,0 +1,7 @@
+@refer i32 /web-assembly/type/i32
+
+@param fd: i32 - 
+@return error: i32
+---
+
+[Read More](https://wasix.org/docs/api-reference/wasi/)
diff --git a/docs/wasi/filestat.md b/docs/wasi/filestat.md
@@ -1,3 +1,5 @@
+@refer path_filestat_get /wasi/path_filestat_get
+
 @structure
 File attributes
 @param dev: u64 - Device ID of device containing the file
@@ -8,4 +10,5 @@ File attributes
 @param atim: u64 - Last data access timestamp
 @param mtim: u64 - Last data modification timestamp
 @param ctim: u64 - Last file status change timestamp
----
+---
+Used by {@function path_filestat_get}
diff --git a/docs/wasi/iovec.md b/docs/wasi/iovec.md
@@ -2,4 +2,5 @@
 A region of memory for scatter/gather reads
 @param start: i32 - The address of the buffer
 @param bytes: i32 - The length of the buffer
----
+---
+Use namely for file and networking io
diff --git a/public/main.css b/public/main.css
@@ -7,13 +7,15 @@ body {
 	grid-template-columns: auto 1fr;
 	justify-items: center;
 
-	min-height: 100vh;
 	font-size: 0.8rem;
+	height: 100vh;
 
 	background-color: var(--bg);
 	font-family: Fira Code;
 	color: var(--fg);
 
+	overflow: hidden;
+
 	--bg:   #272822;
 	--bg_h: #3e3d32;
 	--bg_c: #75715e;
@@ -28,6 +30,20 @@ body {
 	--green:   #a6e22e;
 }
 
+table {
+	border-spacing: 10px 2px;
+}
+
+code {
+	padding: 1px 2px;
+
+	font-family: Fira Code;
+	color: var(--fg);
+
+	background-color: var(--bg_h);
+	border-radius: 5px;
+}
+
 a, a:visited {
 	color: inherit;
 }
@@ -38,8 +54,9 @@ a, a:visited {
 	min-width: 170px;
 
 	background-color: #1e1f1c;
-
 	padding: 0;
+
+	overflow-y: auto;;
 }
 
 .toolbar a {
@@ -83,6 +100,8 @@ a[folder][parent] + a[folder]:not([parent]) {
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
+
+	overflow-y: auto;
 }
 
 .stash {
@@ -160,6 +179,7 @@ a[folder][parent] + a[folder]:not([parent]) {
 .entry .cluster {
 	display: inline-flex;
 	flex-direction: row;
+	flex-wrap: wrap;
 	gap: 0;
 }
 
@@ -179,18 +199,20 @@ a[folder][parent] + a[folder]:not([parent]) {
 }
 
 
-.name {
-	color: var(--green);
-}
-
 .argument {
 	color: var(--orange);
 	font-style: italic;
 }
 
+.name {
+	color: var(--green) !important;
+	text-wrap: nowrap;
+}
+
 .type {
 	color: var(--blue) !important;
 	font-style: italic;
+	text-wrap: nowrap;
 }
 
 .comment {