uno

.vscode/settings.json

@@ -2,9 +2,26 @@
   "deno.enable": true,
   "deno.lint": true,
   "deno.codeLens.test": true,
+  "deno.documentPreloadLimit": 2000,
+  "editor.formatOnSave": true,
   "editor.defaultFormatter": "denoland.vscode-deno",
   "deno.unstable": true,
   "[github-actions-workflow]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
   }
 }

components/Article.tsx

@@ -1,14 +1,14 @@
-/** @jsxImportSource npm:preact */
+/** @jsxImportSource https://esm.sh/preact */
 
-import { cx } from "../deps/twind.ts";
+import { clsx } from "../deps/clsx.ts";
 import { Heading, Page } from "../types.d.ts";
 
 const Toc = ({ headings }: { headings: Heading[] }) => (
-  <ol class="hidden sm:block lg:-mr-12 float-right w-1/3 lg:w-2/5 px-3 py-2 ml-4 my-0 rounded text(sm neutral-11) font-medium list(inside) not-prose list-none">
-    <span class="block text-xs text-neutral-10 mb-2">Contents</span>
+  <ol class="hidden sm:block lg:-mr-12 float-right w-1/3 lg:w-2/5 px-3 py-2 ml-4 my-0 text-dim not-prose list-none">
+    <h6 class="mb-1 mt-0 smallcaps">Contents</h6>
     {headings.map((h: Heading) => {
       return (
-        <li class="truncate">
+        <li class="truncate text-sm">
           <a href={`#${h.slug}`}>{h.text}</a>
         </li>
       );
@@ -23,23 +23,12 @@ const Metadata = ({
   label?: string;
   children: preact.ComponentChildren;
 }) => (
-  <div class={cx("flex flex-row text-neutral-9")}>
+  <div class="inline-block">
     {label && <span>{label}&nbsp;</span>}
-    <div>{children}</div>
+    <span>{children}</span>
   </div>
 );
 
-interface HeaderProps {
-  url: URL;
-  lang: Intl.LocalesArgument;
-  title?: string;
-  description?: string;
-  datePublished?: Date;
-  dateUpdated?: Date;
-  tags?: string[];
-  compact?: boolean;
-}
-
 const Header = ({
   title,
   description,
@@ -48,37 +37,39 @@ const Header = ({
   dateUpdated,
   tags,
   lang,
-  compact,
-}: HeaderProps) => {
+}: {
+  url: URL;
+  lang: Intl.LocalesArgument;
+  title?: string;
+  description?: string;
+  datePublished?: Date;
+  dateUpdated?: Date;
+  tags?: string[];
+}) => {
   const dateFormat: Intl.DateTimeFormatOptions = {
     year: "numeric",
     month: "short",
     day: "numeric",
   };
 
   return (
-    <header
-      class={cx("flex flex-col gap-2 empty:hidden only-child:(m-0)", {
-        "gap-2 mb-12": !compact,
-      })}
-    >
-      <h1 class={cx("tracking-tight my-0", { "text-xl": compact })}>{title}</h1>
-
-      {description && <p class="lead">{description}</p>}
+    <header class={clsx("empty:hidden mb-16 only-child:mb-0 only:mb-0")}>
+      <h1 class={clsx("my-0")}>{title}</h1>
+      {description && <p class="text-dim my-0">{description}</p>}
 
       {(datePublished || dateUpdated || tags) && (
-        <div class="divide-dot not-prose flex items-baseline text(sm neutral-10)">
+        <div class="space-x-3 not-prose text-dim">
           {datePublished && (
             <Metadata>
-              <a href={url.toString()}>
+              <a class="decoration-none text-inherit" href={url.toString()}>
                 <time dateTime={datePublished.toISOString()}>
                   {datePublished.toLocaleDateString(lang, dateFormat)}
                 </time>
               </a>
             </Metadata>
           )}
           {dateUpdated && (
-            <Metadata label="Upd:">
+            <Metadata label="Updated">
               <time dateTime={dateUpdated.toISOString()}>
                 {dateUpdated.toLocaleDateString(lang, dateFormat)}
               </time>
@@ -101,14 +92,15 @@ const Header = ({
   );
 };
 
-interface ArticleProps {
+const Article = ({
+  page,
+  children,
+  lang,
+}: {
   page: Page;
   lang: Intl.LocalesArgument;
   children?: preact.ComponentChildren;
-  compact?: boolean;
-}
-
-const Article = ({ page, children, lang, compact }: ArticleProps) => {
+}) => {
   const {
     showHeader,
     url,
@@ -122,30 +114,50 @@ const Article = ({ page, children, lang, compact }: ArticleProps) => {
     html,
   } = page;
 
-  return (
-    <article class="prose prose-neutral max-w-none">
-      {showHeader && (
-        <Header
-          url={url}
-          title={title}
-          description={description}
-          datePublished={datePublished}
-          dateUpdated={dateUpdated}
-          tags={tags}
-          lang={lang}
-          compact={compact}
-        />
-      )}
+  return html
+    ? (
+      <article>
+        {showHeader && (
+          <Header
+            url={url}
+            title={title}
+            description={description}
+            datePublished={datePublished}
+            dateUpdated={dateUpdated}
+            tags={tags}
+            lang={lang}
+          />
+        )}
 
-      {!compact && showToc && headings?.some((h) => h.level >= 2) && (
-        <Toc headings={headings.filter((h) => h.level <= 2)} />
-      )}
+        {showToc && headings?.some((h) => h.level >= 2) && (
+          <Toc headings={headings.filter((h) => h.level <= 2)} />
+        )}
 
-      {html && <div dangerouslySetInnerHTML={{ __html: html }} />}
+        {html && (
+          <div
+            class="prose prose-stone dark:prose-invert max-w-none"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        )}
 
-      {children}
-    </article>
-  );
+        {children}
+      </article>
+    )
+    : (
+      showHeader
+        ? (
+          <Header
+            url={url}
+            title={title}
+            description={description}
+            datePublished={datePublished}
+            dateUpdated={dateUpdated}
+            tags={tags}
+            lang={lang}
+          />
+        )
+        : null
+    );
 };
 
 export default Article;

components/Body.tsx

@@ -1,13 +1,9 @@
-/** @jsxImportSource npm:preact */
-
-import Article from "./Article.tsx";
-import Footer from "./Footer.tsx";
-import Header from "./Header.tsx";
-import IndexList from "./IndexList.tsx";
-import IndexLog from "./IndexLog.tsx";
-import IndexGrid from "./IndexGrid.tsx";
+/** @jsxImportSource https://esm.sh/preact */
 
+import { IndexGrid, IndexList, IndexLog } from "./lists.tsx";
 import { Crumb, Page } from "../types.d.ts";
+import { Footer, Header } from "./chrome.tsx";
+import Article from "./article.tsx";
 
 interface BodyProps {
   page: Page;
@@ -51,25 +47,14 @@ const Body = ({
   author,
   lang,
 }: BodyProps) => (
-  <body
-    class="
-        antialiased
-        min-h-screen
-        mx-auto max-w-3xl
-        p-4
-        flex flex-col gap-16
-        text(neutral-12)
-        tracking-[-0.015em]
-        bg(neutral-1) 
-      "
-  >
+  <body class="bg-white dark:bg-stone-950 text-stone-900 dark:text-stone-200 container my-0 p-4 md:p-8 min-h-screen flex flex-col gap-16 max-w-3xl font-sans font-book leading-normal antialiased">
     <Header crumbs={crumbs} />
 
     <main class="[&:has(article:empty)]:hidden">
       <Article lang={lang} page={page} />
     </main>
 
-    <aside class="empty:hidden flex flex-col gap-12">
+    <aside class="empty:hidden space-y-16">
       {childPages && childPages.length > 0 && (
         <PageIndex lang={lang} layout={page.layout} pages={childPages} />
       )}
@@ -98,13 +83,13 @@ const Body = ({
       {page.index === "dir" &&
         pagesByTag &&
         Object.keys(pagesByTag).length > 0 && (
-          <IndexList
-            title="Tags"
-            items={pagesByTag}
-            type={"tags"}
-            lang={lang}
-          />
-        )}
+        <IndexList
+          title="Tags"
+          items={pagesByTag}
+          type={"tags"}
+          lang={lang}
+        />
+      )}
 
       {backlinkPages && backlinkPages.length > 0 && (
         <IndexList