refactor: make lint rule docs better looking

lint/_data.ts

@@ -1,7 +1,7 @@
-import { Sidebar, SidebarLink } from "../types.ts";
+import { extractYaml } from "jsr:@std/[email protected]";
 import { walk } from "jsr:@std/fs";
 import { basename } from "jsr:@std/path";
-import { extractYaml } from "jsr:@std/[email protected]";
+import { Sidebar, SidebarLink } from "../types.ts";
 
 async function generateSidebarItems() {
   const sidebarItems = [];
@@ -43,9 +43,9 @@ export const lintRulePages = await generateSidebarItems();
 
 export const sidebar = [
   {
-    title: "Lint rules",
+    title: "Deno lint rules",
     items: lintRulePages,
   },
 ] satisfies Sidebar;
 
-export const sectionTitle = "Lint rules";
+export const sectionTitle = "Deno lint rules";

lint/index.tsx

@@ -0,0 +1,65 @@
+type LintIconType = "jsr" | "react" | "jsx" | "recommended" | "fresh";
+
+export const title = "Lint rules";
+export const toc = [];
+
+const getReadableIconName = (iconType: LintIconType) => {
+  if (["jsx", "jsr"].includes(iconType)) {
+    return iconType.toUpperCase();
+  }
+  return iconType.charAt(0).toUpperCase() + iconType.slice(1);
+};
+
+const getLintIcon = (
+  type: LintIconType,
+) => {
+  const svgFileName = type === "recommended" ? "checkmark" : type;
+  return (
+    <img
+      src={`/img/${svgFileName}.svg`}
+      class="size-6"
+      alt={type}
+    />
+  );
+};
+
+export default function LintRulesIndex(
+  data: Lume.Data,
+  _helpers: Lume.Helpers,
+) {
+  const TYPES = [
+    "recommended",
+    "fresh",
+    "jsx",
+    "react",
+    "jsr",
+  ] as LintIconType[];
+  return (
+    <div>
+      <ul class="flex gap-1 flex-col mb-8 !list-none !pl-0">
+        {TYPES.map((iconType) => (
+          <li>
+            {getLintIcon(iconType)} = {getReadableIconName(iconType)}
+          </li>
+        ))}
+      </ul>
+
+      <ul class="flex flex-col gap-4 !list-none !pl-0">
+        {data.lintRulePages.map((lintRule) => (
+          <li class="border-t md:border md:rounded-md pt-8 pb-4 md:p-4">
+            <div class="flex flex-row justify-start items-center gap-4 mb-4">
+              <a href={lintRule.href} class="block text-lg font-mono">
+                {lintRule.label}
+              </a>{" "}
+              {lintRule.tags.map((tag: LintIconType) => getLintIcon(tag))}
+            </div>
+            <div>
+              Lorem ipsum dolor sit amet, <pre>consectetur</pre>{" "}
+              adipiscing elit, sed do eiusmod tempor.
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

tailwind.config.js

@@ -2,7 +2,7 @@
 /** @type {import('npm:tailwindcss').Config} */
 export default {
   content: [
-    "{by-example,deploy,_components,_includes,runtime,static,subhosting,404,examples}/**/*.{md,ts,tsx}",
+    "{by-example,deploy,_components,_includes,runtime,static,subhosting,404,examples,lint}/**/*.{md,ts,tsx}",
     "*.{ts,tsx}",
   ],
   corePlugins: {