Merge branch 'master' into uhi

ignatiusmb · Jan 23, 2024 · 2295482 · 2295482
2 parents 73a4735 + 8c959f5
commit 2295482
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 90 deletions.
diff --git a/workspace/marqua/src/artisan/brush.js b/workspace/marqua/src/artisan/brush.js
@@ -1,5 +1,5 @@
 import { getHighlighter, bundledLanguages } from 'shikiji';
-import { escape, generate } from '../utils.js';
+import { escape } from '../utils.js';
 
 /**
  * @typedef {{
@@ -46,8 +46,8 @@ export function transform(source, dataset) {
 		class="mrq ${file ? '' : 'empty'}"
 	>${file ? `<span>${file}</span>` : ''}
 		<div data-mrq="toolbar" class="mrq">
-			${generate.icon('list', 'Toggle\nNumbering')}
-			${generate.icon('clipboard', 'Copy')}
+			${icon('list', 'Toggle\nNumbering')}
+			${icon('clipboard', 'Copy')}
 		</div>
 	</header>
 
@@ -58,3 +58,12 @@ export function transform(source, dataset) {
 	>${highlighted.trim()}</div>
 </pre>`;
 }
+
+/**
+ * @param {'clipboard' | 'list'} name
+ * @param {string} tooltip
+ */
+function icon(name, tooltip) {
+	const span = `<span data-mrq="tooltip" class="mrq">${tooltip}</span>`;
+	return `<button data-mrq-toolbar="${name}" class="mrq">${span}</button>`;
+}
diff --git a/workspace/website/src/lib/Index.svelte b/workspace/website/src/lib/Index.svelte
@@ -11,24 +11,23 @@
 		<span>&ndash;</span>
 		<a href="https://github.com/ignatiusmb/marqua/releases/v{version}">Changelog</a>
 	</summary>
-	<p>
-		{#each items as { slug, title }, i}
-			<a
-				href={slug}
-				data-index={`${i + 1}`.padStart(2, '0')}
-				class:current={$page.url.pathname === `/docs/${slug}`}>{title}</a
-			>
+	<div>
+		{#each items as { slug, title }}
+			<a href={slug} class:current={$page.url.pathname === `/docs/${slug}`}>{title}</a>
 		{/each}
-	</p>
+	</div>
 </details>
 
 <style>
 	details {
 		--radius: calc(var(--mrq-rounding));
 
+		z-index: 2;
+		position: sticky;
+		top: 1rem;
 		margin-bottom: 1rem;
 		border-radius: var(--radius);
-		background: rgba(255, 255, 255, 0.1);
+		background: rgb(42, 42, 42);
 	}
 	summary {
 		padding: 0.5rem 1rem;
@@ -38,29 +37,20 @@
 		letter-spacing: 2px;
 		font-family: var(--font-monospace);
 	}
-	p {
+	div {
 		display: grid;
 		margin: 0;
 		font-size: 1rem;
 	}
-	p a {
+	div a {
 		padding: 0.5rem 1rem;
 	}
-	p a[data-index]::before {
-		content: attr(data-index);
-		margin-right: 0.75rem;
-		font-family: var(--font-monospace);
-	}
-	p a[data-index].current,
-	p a[data-index]:hover {
-		background: rgba(255, 255, 255, 0.2);
-	}
-	p a:last-child {
+	div a:last-child {
 		border-bottom-right-radius: var(--radius);
 		border-bottom-left-radius: var(--radius);
 	}
-	p a:hover {
-		background: rgba(255, 255, 255, 0.1);
+	div a.current {
+		background: rgba(255, 255, 255, 0.15);
 	}
 
 	details[open] {

diff --git a/workspace/website/src/lib/content/index.ts b/workspace/website/src/lib/content/index.ts
@@ -0,0 +1,34 @@
+import * as fs from 'node:fs';
+import { traverse } from 'marqua/fs';
+import { chain } from 'marqua/transform';
+
+const ROOT = `${process.cwd()}/static/uploads`;
+
+export const DATA = {
+	get 'docs/'() {
+		return traverse(
+			{ entry: '../content' },
+			({ breadcrumb: [filename], buffer, marker, parse, siblings }) => {
+				const { body, metadata } = parse(buffer.toString('utf-8'));
+
+				fs.mkdirSync(ROOT, { recursive: true });
+				const content = siblings.reduce((content, { type, breadcrumb: [name], buffer }) => {
+					if (type !== 'file' || name.endsWith('.md')) return content;
+					fs.writeFileSync(`${ROOT}/${name}`, buffer);
+					return content.replace(`./${name}`, `/uploads/${name}`);
+				}, body);
+
+				return {
+					slug: filename.match(/^(\d{2})-(.+).md$/)![2],
+					title: metadata.title,
+					table: metadata.table,
+					path: `workspace/content/${filename}`,
+					content: marker.render(content),
+				};
+			},
+			chain({
+				base: '/docs/',
+			}),
+		);
+	},
+};
diff --git a/workspace/website/src/routes/content/docs.json/+server.ts b/workspace/website/src/routes/content/docs.json/+server.ts
@@ -1,53 +1,17 @@
-import * as fs from 'node:fs';
 import { json } from '@sveltejs/kit';
-import { traverse } from 'marqua/fs';
-import { chain } from 'marqua/transform';
+import { DATA } from '$lib/content';
 
 export const prerender = true;
 
 export interface Schema {
-	items: Array<{
-		slug: string;
-		title: string;
-		path: string;
-		content: string;
-		flank?: {
-			back?: { slug: string; title: string };
-			next?: { slug: string; title: string };
-		};
-	}>;
+	items: (typeof DATA)['docs/'];
 	metadata: {
 		pages: Array<{ slug: string; title: string }>;
 	};
 }
 
-const ROOT = `${process.cwd()}/static/uploads`;
-
 export async function GET() {
-	const items = traverse(
-		{ entry: '../content' },
-		({ breadcrumb: [filename], buffer, marker, parse, siblings }) => {
-			const { body, metadata } = parse(buffer.toString('utf-8'));
-
-			fs.mkdirSync(ROOT, { recursive: true });
-			const content = siblings.reduce((content, { type, breadcrumb: [name], buffer }) => {
-				if (type !== 'file' || name.endsWith('.md')) return content;
-				fs.writeFileSync(`${ROOT}/${name}`, buffer);
-				return content.replace(`./${name}`, `/uploads/${name}`);
-			}, body);
-
-			return {
-				slug: filename.match(/^(\d{2})-(.+).md$/)![2],
-				title: metadata.title,
-				path: `workspace/content/${filename}`,
-				content: marker.render(content),
-			};
-		},
-		chain({
-			base: '/docs/',
-		}),
-	);
-
+	const items = DATA['docs/'];
 	const metadata = {
 		pages: items.map((i) => ({ slug: i.slug, title: i.title })),
 	};

diff --git a/workspace/website/src/routes/docs/+layout.svelte b/workspace/website/src/routes/docs/+layout.svelte
@@ -1,15 +1,27 @@
 <script lang="ts">
-	import Edit from '$lib/Edit.svelte';
 	import { hydrate } from 'marqua/browser';
 	import { navigating, page } from '$app/stores';
 </script>
 
 <header>
 	<h1>{$page.data.title}</h1>
 	<p>Marqua • Data Authoring Framework</p>
-	<Edit repo="ignatiusmb/marqua" path={$page.data.path}>
-		<span>Edit this page on GitHub</span>
-	</Edit>
+	<div class="links">
+		<a href="https://github.com/ignatiusmb/marqua">
+			<svg
+				width="34"
+				height="34"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="#ffffff"
+				stroke-width="1.5"
+			>
+				<path
+					d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+				/>
+			</svg>
+		</a>
+	</div>
 </header>
 
 <main use:hydrate={$navigating}>
@@ -32,6 +44,15 @@
 	h1 {
 		font-size: 4rem;
 	}
+	.links {
+		display: grid;
+		gap: 0.5rem;
+		grid-auto-flow: column;
+		justify-content: center;
+	}
+	.links a {
+		display: flex;
+	}
 
 	main {
 		display: grid;
@@ -40,7 +61,7 @@
 		align-items: flex-start;
 		justify-content: center;
 		padding: 0 2rem;
-		margin: 4rem auto;
+		margin: 3rem auto;
 	}
 
 	@media only screen and (min-width: 769px) {
@@ -53,5 +74,8 @@
 			padding: 0 1rem;
 			grid-template-columns: minmax(12rem, 16rem) minmax(0, 60rem);
 		}
+		.links {
+			justify-content: start;
+		}
 	}
 </style>
diff --git a/workspace/website/src/routes/docs/[slug]/+page.server.ts b/workspace/website/src/routes/docs/[slug]/+page.server.ts
@@ -15,6 +15,7 @@ export async function load({ fetch, params }) {
 		path: docs.path,
 		content: docs.content,
 		flank: docs.flank,
+		table: docs.table,
 		pages: metadata.pages,
 		meta: {
 			title: docs.title,

diff --git a/workspace/website/src/routes/docs/[slug]/+page.svelte b/workspace/website/src/routes/docs/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Divider from '$lib/Divider.svelte';
+	import Edit from '$lib/Edit.svelte';
 	import Index from '$lib/Index.svelte';
 	import Flank from './Flank.svelte';
 
@@ -21,25 +22,33 @@
 		{version}
 	</a>
 
-	{#each data.pages as { slug, title }, i}
-		<a
-			href="/docs/{slug}"
-			data-index={`${i + 1}`.padStart(2, '0')}
-			class:current={$page.url.pathname === `/docs/${slug}`}
-		>
+	{#each data.pages as { slug, title }}
+		<a href="/docs/{slug}" class:current={$page.url.pathname === `/docs/${slug}`}>
 			{title}
 		</a>
 	{/each}
+
+	<Divider type="horizontal" spacing="0.5rem" />
+
+	{#each data.table as { id, title, level }}
+		<a href="#{id}" style:padding-left="{level * 0.5}rem">{title}</a>
+	{/each}
 </aside>
 
 <article>
 	<Index items={data.pages} />
 
 	{@html data.content}
 
-	<Divider type="horizontal" spacing="1rem" />
+	<footer>
+		<Edit repo="ignatiusmb/marqua" path={data.path}>
+			<span>Suggest changes to this page</span>
+		</Edit>
+
+		<Divider type="horizontal" spacing="1rem" />
 
-	<Flank flank={data.flank} />
+		<Flank flank={data.flank} />
+	</footer>
 </article>
 
 <style>
@@ -52,22 +61,23 @@
 		align-content: flex-start;
 	}
 	aside a {
-		padding-left: 1rem;
+		padding: 0.25rem 0.375rem 0.25rem 1rem;
 		border-radius: 0.5rem;
-		line-height: 4ch;
+		line-height: 2;
 	}
 	aside a[data-prefix]::before {
 		content: attr(data-prefix);
 		margin: 0 0.75rem 0 0.25rem;
 	}
-	aside a[data-index]::before {
-		content: attr(data-index);
-		margin-right: 0.75rem;
-		font-family: var(--font-monospace);
+	aside a:hover {
+		background: rgba(255, 255, 255, 0.1);
 	}
-	aside a[data-index].current,
-	aside a[data-index]:hover {
-		background: rgba(255, 255, 255, 0.2);
+	aside a.current {
+		background: rgba(255, 255, 255, 0.15);
+	}
+
+	footer {
+		margin-top: 2rem;
 	}
 
 	/* ---- @html content ---- */
@@ -132,5 +142,9 @@
 		article > :global(#index) {
 			display: none;
 		}
+		aside,
+		article {
+			padding-top: 1rem;
+		}
 	}
 </style>
diff --git a/workspace/website/src/routes/docs/[slug]/Flank.svelte b/workspace/website/src/routes/docs/[slug]/Flank.svelte
@@ -4,7 +4,7 @@
 </script>
 
 {#if flank}
-	<footer>
+	<div>
 		{#if flank.back}
 			<a href={flank.back.slug}>
 				<span class="chevron">&lsaquo;</span>
@@ -19,11 +19,11 @@
 				<span class="title">{flank.next.title}</span>
 			</a>
 		{/if}
-	</footer>
+	</div>
 {/if}
 
 <style>
-	footer {
+	div {
 		display: flex;
 		gap: 1rem;
 		justify-content: space-between;