Merge pull request #843 from Automattic/rules-page-improvements

Rules page improvements

Author: elijah-potter

packages/web/src/routes/docs/rules/+page.svelte

@@ -1,23 +1,46 @@
 <script module lang="ts">
-	import { LocalLinter } from 'harper.js';
+	import { LocalLinter, type LintConfig } from 'harper.js';
+	import {
+		Table,
+		TableBody,
+		TableBodyCell,
+		TableBodyRow,
+		TableHead,
+		TableHeadCell
+	} from 'flowbite-svelte';
 
 	export const prerender = true;
 	export const frontmatter = {
 		title: 'Rules'
 	};
 
-	let info: Record<string, string> = $state({});
+	let descriptions: Record<string, string> = $state({});
+	let default_config: LintConfig = $state({});
 
 	let linter = new LocalLinter();
 	linter.getLintDescriptions().then(async (v) => {
-		info = v;
-		console.log(v);
+		descriptions = v;
+	});
+	linter.getDefaultLintConfig().then(async (v) => {
+		default_config = v;
 	});
 </script>
 
 <p>This page is an incomplete list of the various grammatical rules Harper checks for.</p>
 
-{#each Object.entries(info) as [name, description]}
-	<h2>{name}</h2>
-	<p>{description}</p>
-{/each}
+<Table>
+	<TableHead>
+		<TableHeadCell>Name</TableHeadCell>
+		<TableHeadCell>Enabled by Default</TableHeadCell>
+		<TableHeadCell>Description</TableHeadCell>
+	</TableHead>
+	<TableBody>
+		{#each Object.entries(descriptions) as [name, description]}
+			<TableBodyRow>
+				<TableBodyCell>{name}</TableBodyCell>
+				<TableBodyCell>{default_config[name] ? '✔️' : '❌'}</TableBodyCell>
+				<TableBodyCell tdClass="px-6 py-4 font-medium">{description}</TableBodyCell>
+			</TableBodyRow>
+		{/each}
+	</TableBody>
+</Table>