karelklima · karelklima · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
diff --git a/.vscode/import_map.json b/.vscode/import_map.json
@@ -1,13 +1,15 @@
 {
   "imports": {
-    "$fresh/": "https://deno.land/x/[email protected]/",
-    "preact": "https://esm.sh/[email protected]",
-    "preact/": "https://esm.sh/[email protected]/",
-    "preact-render-to-string": "https://esm.sh/*[email protected]",
-    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
-    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "twind": "https://esm.sh/[email protected]",
-    "twind/": "https://esm.sh/[email protected]/",
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "preact-render-to-string": "https://esm.sh/*[email protected]",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "twind": "https://esm.sh/[email protected]",
+    "twind/": "https://esm.sh/[email protected]/",
+
+    "$std/": "https://deno.land/[email protected]/",
 
     "react": "https://esm.sh/[email protected]/compat",
     "react-dom": "https://esm.sh/[email protected]/compat",

diff --git a/www/components/App.tsx b/www/components/App.tsx
@@ -1,24 +1,24 @@
 import type { ComponentChildren } from "preact";
-import { Head } from "$fresh/runtime.ts";
+import { asset, Head } from "$fresh/runtime.ts";
 
 import { Footer } from "./Footer.tsx";
 import { type ActiveLink, Header } from "./Header.tsx";
 import { Title } from "./Title.tsx";
 
 type AppProps = {
   children: ComponentChildren;
-  activeLink: ActiveLink;
   title?: string;
 };
 
-export function App({ children, activeLink, title }: AppProps) {
+export function App({ children, title }: AppProps) {
   return (
     <>
       <Head>
         <Title>{title}</Title>
+        <link rel="stylesheet" href={asset("/gfm.css")} />
       </Head>
       <div class="flex flex-col min-h-screen dark:text-[#c9d1d9] dark:bg-[#0d1117]">
-        <Header activeLink={activeLink} />
+        <Header />
         <main class="container mx-auto px-4 flex-1">{children}</main>
         <Footer />
       </div>

diff --git a/www/components/Header.tsx b/www/components/Header.tsx
@@ -1,11 +1,13 @@
-import { IconExternalLink, IconLDkit } from "./Icons.tsx";
+import type { ComponentChildren } from "preact";
 
-export function Header(props: { activeLink: ActiveLink }) {
+import { IconGitHub, IconLDkit } from "./Icons.tsx";
+
+export function Header() {
   return (
     <div class="md:sticky md:top-0 bg-white dark:bg-[#0d1117] bg-opacity-90 dark:bg-opacity-90 border-b-1 border-dark-50 dark:border-red-700 border-opacity-90">
-      <header class="container mx-auto px-4 flex flex-row items-stretch justify-between">
+      <header class="container mx-auto px-4 h-14 flex flex-row items-stretch justify-between">
         <Logo />
-        <Menu {...props} />
+        <Menu />
       </header>
     </div>
   );
@@ -48,38 +50,38 @@ type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 type Unpacked<T> = T extends (infer U)[] ? U : T;
 export type ActiveLink = Unpacked<Writeable<typeof menuItems>>["url"];
 
-function Menu(props: { activeLink: ActiveLink }) {
+function Menu() {
   return (
     <ul class="flex-0-1-auto flex overflow-x-auto">
-      {menuItems.map((item) => MenuItem({ ...item, ...props }))}
+      <Link url="/">Home</Link>
+      <Link url="/docs">Documentation</Link>
+      <Link url="https://github.com/karelklima/ldkit">
+        <IconGitHub />
+      </Link>
     </ul>
   );
 }
 
-type MenuItemProps = {
-  title: string;
-  url: string;
-  activeLink: ActiveLink;
-};
-
 const baseLinkClass =
-  "flex flex-row p-4 border-b-2 hover:border-black dark:hover:border-red-700 dark:hover:text-white";
+  "table-cell align-middle h-14 px-4 border-b-2 hover:border-black dark:hover:border-red-700 dark:hover:text-white border-transparent";
 
-function MenuItem({ title, url, activeLink }: MenuItemProps) {
-  const linkClass = url === activeLink
-    ? `${baseLinkClass} border-black dark:border-red-700 bg-gray-50 dark:bg-gray-800`
-    : `${baseLinkClass} border-transparent`;
+const activeCurrentLinkClass =
+  `${baseLinkClass} [data-current]:border-black [data-current]:dark:border-red-700 [data-current]:bg-gray-50 [data-current]:dark:bg-gray-800`;
+
+const activeAncestorLinkClass =
+  `${baseLinkClass} [data-ancestor]:border-black [data-ancestor]:dark:border-red-700 [data-ancestor]:bg-gray-50 [data-ancestor]:dark:bg-gray-800`;
+
+function Link({ url, children }: {
+  url: string;
+  children: ComponentChildren;
+}) {
+  const linkClass = url === "/"
+    ? activeCurrentLinkClass
+    : activeAncestorLinkClass;
   return (
     <li>
       <a href={url} class={linkClass}>
-        <span>{title}</span>
-        {url.startsWith("http")
-          ? (
-            <span class="ml-1 mt-1 w-2 h-2 text-gray-400">
-              <IconExternalLink />
-            </span>
-          )
-          : null}
+        {children}
       </a>
     </li>
   );

diff --git a/www/components/Icons.tsx b/www/components/Icons.tsx
@@ -44,18 +44,16 @@ export function IconArrowRight() {
 export function IconGitHub() {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      class="h-8 w-8"
+      fill="currentColor"
       viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-github"
+      aria-hidden="true"
     >
-      <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">
+      <path
+        fill-rule="evenodd"
+        d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+        clip-rule="evenodd"
+      >
       </path>
     </svg>
   );

diff --git a/www/deno.json b/www/deno.json
@@ -1,8 +1,34 @@
 {
+  "lock": false,
   "tasks": {
-    "start": "deno run -A --watch=static/,routes/,data/,../docs/ dev.ts"
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "start": "deno run -A --watch=static/,routes/ dev.ts",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
+  },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
+  "imports": {
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "preact-render-to-string": "https://esm.sh/*[email protected]",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "twind": "https://esm.sh/[email protected]",
+    "twind/": "https://esm.sh/[email protected]/",
+    "$std/": "https://deno.land/[email protected]/"
   },
-  "importMap": "./import_map.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact"

diff --git a/www/dev.ts b/www/dev.ts
@@ -1,5 +1,8 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
 import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
 
-await dev(import.meta.url, "./main.ts");
+import "$std/dotenv/load.ts";
+
+await dev(import.meta.url, "./main.ts", config);
diff --git a/www/fresh.config.ts b/www/fresh.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "$fresh/server.ts";
+import twindPlugin from "$fresh/plugins/twind.ts";
+import twindConfig from "./twind.config.ts";
+
+export default defineConfig({
+  plugins: [twindPlugin(twindConfig)],
+});
diff --git a/www/fresh.gen.ts b/www/fresh.gen.ts
@@ -1,8 +1,7 @@
-// DO NOT EDIT. This file is generated by fresh.
+// DO NOT EDIT. This file is generated by Fresh.
 // 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/[name].tsx";
 import * as $1 from "./routes/_404.tsx";
 import * as $2 from "./routes/docs/[...slug].tsx";
@@ -19,7 +18,6 @@ const manifest = {
   },
   islands: {},
   baseUrl: import.meta.url,
-  config,
 };
 
 export default manifest;
diff --git a/www/import_map.json b/www/import_map.json
diff --git a/www/main.ts b/www/main.ts
@@ -4,10 +4,10 @@
 /// <reference lib="dom.asynciterable" />
 /// <reference lib="deno.ns" />
 
+import "$std/dotenv/load.ts";
+
 import { start } from "$fresh/server.ts";
 import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
 
-import twindPlugin from "$fresh/plugins/twind.ts";
-import twindConfig from "./twind.config.ts";
-
-await start(manifest, { plugins: [twindPlugin(twindConfig)] });
+await start(manifest, config);
diff --git a/www/routes/docs/[...slug].tsx b/www/routes/docs/[...slug].tsx
@@ -1,4 +1,3 @@
-import { Head } from "$fresh/runtime.ts";
 import { Handlers, PageProps } from "$fresh/server.ts";
 
 import { gfm } from "../../utils/markdown.ts";
@@ -44,10 +43,7 @@ export const handler: Handlers<Data> = {
 
 export default function DocsPage(props: PageProps<Data>) {
   return (
-    <App activeLink="/docs" title={props.data.page?.title ?? "Not Found"}>
-      <Head>
-        <link rel="stylesheet" href={`/gfm.css?build=${__FRSH_BUILD_ID}`} />
-      </Head>
+    <App title={props.data.page?.title ?? "Not Found"}>
       <div class="mx-auto max-w-screen-lg flex flex-col md:flex-row-reverse gap-6">
         <Content page={props.data.page} />
         <Sidebar path={props.url.pathname} />

diff --git a/www/routes/index.tsx b/www/routes/index.tsx
@@ -1,16 +1,11 @@
-import { Head } from "$fresh/runtime.ts";
-
 import { App } from "../components/App.tsx";
 import { Jumbo } from "../components/Jumbo.tsx";
 import { IconArrowRight } from "../components/Icons.tsx";
 import { gfm } from "../utils/markdown.ts";
 
 export default function Home() {
   return (
-    <App activeLink="/">
-      <Head>
-        <link rel="stylesheet" href={`/gfm.css?build=${__FRSH_BUILD_ID}`} />
-      </Head>
+    <App>
       <div class="flex flex-col items-center">
         <Jumbo>LDkit</Jumbo>
         <p class="text-center text-2xl md:text-5xl font-bold leading-tight pb-7 md:pb-10">