www: update fresh and add badge for Fresh rules (#1175)

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
  "deno.enable": true,
  "deno.lint": true,
- "deno.unstable": true
+ "deno.unstable": true,
+ "deno.config": "./www/deno.json"
 }

www/deno.json

@@ -2,9 +2,20 @@
  "tasks": {
  "start": "deno run -A --watch=static/,routes/ dev.ts"
  },
- "importMap": "./import_map.json",
  "compilerOptions": {
  "jsx": "react-jsx",
  "jsxImportSource": "preact"
+ },
+ "imports": {
+ "$fresh/": "https://deno.land/x/fresh@1.2.0/",
+ "preact": "https://esm.sh/preact@10.15.1",
+ "preact/": "https://esm.sh/preact@10.15.1/",
+ "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",
+ "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
+ "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
+ "twind": "https://esm.sh/twind@0.16.19",
+ "twind/": "https://esm.sh/twind@0.16.19/",
+ "marked": "https://esm.sh/marked@3.0.4",
+ "prism": "https://esm.sh/prismjs@1.25.0?pin=v57"
  }
-}
+}

www/fresh.gen.ts

@@ -2,7 +2,6 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import config from "./deno.json" assert { type: "json" };
 import * as $0 from "./routes/ignoring-rules.tsx";
 import * as $1 from "./routes/index.tsx";
 
@@ -13,7 +12,6 @@ const manifest = {
  },
  islands: {},
  baseUrl: import.meta.url,
- config,
 };
 
 export default manifest;

www/routes/ignoring-rules.tsx

@@ -1,13 +1,15 @@
-import { Head } from "$fresh/runtime.ts";
 import { Header } from "../components/Header.tsx";
 import { CommonHead } from "../components/CommonHead.tsx";
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import { renderMarkdown } from "../utils/render_markdown.ts";
-import { join, fromFileUrl } from "https://deno.land/std@0.177.0/path/posix.ts";
+import { fromFileUrl, join } from "https://deno.land/std@0.177.0/path/posix.ts";
 
 export const handler: Handlers<string> = {
  async GET(_req, ctx) {
- const mdPath = join(fromFileUrl(import.meta.url), "../../static/ignoring-rules.md");
+ const mdPath = join(
+ fromFileUrl(import.meta.url),
+ "../../static/ignoring-rules.md",
+ );
  const md = await Deno.readTextFile(mdPath);
  const html = renderMarkdown(md);
  return ctx.render(html);
@@ -17,9 +19,7 @@ export const handler: Handlers<string> = {
 export default function IgnoringRulesPage(props: PageProps<string>) {
  return (
  <div class="py-6">
- <div
- class="mx-auto max-w-screen-md px-6 sm:px-6 md:px-8"
- >
+ <div class="mx-auto max-w-screen-md px-6 sm:px-6 md:px-8">
  <CommonHead />
  <Header />
  <main

www/routes/index.tsx

@@ -1,9 +1,9 @@
-import { Head } from "$fresh/runtime.ts";
 import jsonData from "../static/docs.json" assert { type: "json" };
 import { Header } from "../components/Header.tsx";
 import { CommonHead } from "../components/CommonHead.tsx";
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import { renderMarkdown } from "../utils/render_markdown.ts";
+import { ComponentChildren } from "preact";
 
 interface RuleData {
  code: string;
@@ -13,15 +13,15 @@ interface RuleData {
 }
 
 export const handler: Handlers<RuleData[]> = {
- async GET(_req, ctx) {
+ GET(_req, ctx) {
  const rules = jsonData.map<RuleData>((rule) => ({
  code: rule.code,
  snippet: renderMarkdown(rule.docs.split("\n")[0]),
  docs: renderMarkdown(rule.docs.split("\n").slice(1).join("\n")),
  tags: rule.tags,
  }));
  return ctx.render(rules);
- }
+ },
 };
 
 export default function Home(props: PageProps<RuleData[]>) {
@@ -35,7 +35,7 @@ export default function Home(props: PageProps<RuleData[]>) {
  if (allRules) {
  return true;
  } else {
- return rule.tags.includes("recommended");
+ return rule.tags.includes("recommended") || rule.tags.includes("fresh");
  }
  })
  .filter((rule: RuleData) => rule.code.includes(search));
@@ -52,6 +52,7 @@ export default function Home(props: PageProps<RuleData[]>) {
  type="text"
  name="q"
  class="w-full border h-10 border-gray-200 dark:border-gray-500 rounded rounded-r-none px-3 relative dark:bg-gray-800 "
+ id="search"
  placeholder="Search"
  value={search}
  />
@@ -95,25 +96,20 @@ function Rule(props: { rule: RuleData }) {
  class="my-8 border-gray-200 dark:border-[#313235] border-2 rounded-lg overflow-hidden"
  id={rule.code}
  >
- <div
- class="p-3 border-b border-gray-200 flex justify-between flex-wrap gap-2 items-center bg-white dark:bg-[#0d1117] dark:border-[#313235]"
- >
+ <div class="p-3 border-b border-gray-200 flex justify-between flex-wrap gap-2 items-center bg-white dark:bg-[#0d1117] dark:border-[#313235]">
  <h1 class="text-xl font-bold">
  <a href={`#${rule.code}`} class="hover:underline">
  {rule.code}
  </a>
  </h1>
- {rule.tags.includes("recommended") && (
- <span
- class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-blue-100 text-blue-800"
- >
- Recommended
- </span>
- )}
+ <div>
+ {rule.tags.includes("recommended") &&
+ <Badge color="blue">Recommended</Badge>}
+ {rule.tags.includes("fresh") &&
+ <Badge color="green">Fresh</Badge>}
+ </div>
  </div>
- <div
- class="relative bg-gray-50 dark:bg-[#192029] dark:text-white p-3"
- >
+ <div class="relative bg-gray-50 dark:bg-[#192029] dark:text-white p-3">
  {rule.docs.length > 0
  ? (
  <>
@@ -136,3 +132,15 @@ function Rule(props: { rule: RuleData }) {
  </section>
  );
 }
+
+function Badge(
+ { children, color }: { children: ComponentChildren; color: string },
+) {
+ return (
+ <span
+ class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-${color}-100 text-${color}-800`}
+ >
+ {children}
+ </span>
+ );
+}