Initial layout and a few pages

components/Button.tsx

@@ -0,0 +1,49 @@
+import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+const colors = {
+  licorice: {
+    bg: "bg-licorice",
+    border: "border-licorice-800",
+    text: "text-white",
+  },
+  sky: {
+    bg: "bg-sky",
+    border: "border-sky-800",
+    text: "text-white",
+  },
+  grape: {
+    bg: "bg-grape",
+    border: "border-grape-800",
+    text: "text-white",
+  },
+  fire: {
+    bg: "bg-grape",
+    border: "border-grape-800",
+    text: "text-white",
+  },
+};
+
+export function Button(
+  props: JSX.HTMLAttributes<HTMLButtonElement> & { color?: keyof typeof colors },
+) {
+  const color = props.color || 'sky';
+  const classes = `
+  px-2
+  py-1
+  rounded-xl
+  border-2
+  ${colors[color].bg}
+  ${colors[color].border}
+  ${colors[color].text}
+  hover:bg-smoke-500
+  transition-colors
+  ${props.class || ""}`;
+  return (
+    <button
+      {...props}
+      disabled={(!IS_BROWSER && !props.href) || props.disabled}
+      class={classes}
+    />
+  );
+}

components/Content.tsx

@@ -0,0 +1,9 @@
+import { VNode } from "preact";
+
+export function Content(props: { children?: VNode | VNode[] }) {
+  return (
+    <div class="mt-16 bg-smoke-200 dark:bg-smoke-900 border-4 border-licorice-800 p-8 rounded-3xl">
+      {props.children}
+    </div>
+  );
+}

components/OL.tsx

@@ -0,0 +1,19 @@
+import { VNode, toChildArray } from "preact";
+
+export function OL(props: {children?: VNode | VNode[], color?: string;}) {
+  const childs = toChildArray(props.children);
+  props.color = props.color || 'bg-sky';
+  return (
+    <ol>
+      {childs.map((c,i) => (
+        <li class="flex gap-4 p-1 even:bg-black/10">
+          <div class={`w-16 h-16 relative p-2 ${props.color} rounded-md text-white`}>
+            <span class="text-6xl font-pixel absolute -bottom-1 right-0 text-smoke-800/30">{i+1}</span>
+            <span class="text-5xl font-pixel">{i+1}</span>
+          </div>
+          {c}
+        </li>
+      ))}
+    </ol>
+  )
+}

components/nav/index.tsx

@@ -0,0 +1,26 @@
+import { NavItem } from "../../types/nav.ts";
+import { getNavItems } from "../../util/getNavItems.ts";
+
+export function NavSection(props: { items: NavItem[] }) {
+  return (
+    <ul>
+      {props.items.map((i) => (
+        <li>
+          {i.children
+            ? <NavSection items={i.children} />
+            : <a href={i.href} target={i.external ? "_blank" : ""}>{i.title}
+            </a>}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function Nav() {
+  const navItems = getNavItems();
+  return (
+    <NavSection
+      items={navItems}
+    />
+  );
+}