feat: initial version of Deno Hunt and restructure

README.md

@@ -85,7 +85,7 @@ This will automatically configure the database tables and their settings for us.
 3. Listen locally to Stripe events:
 
 ```
-stripe listen --forward-to localhost:8000/api/subscription
+stripe listen --forward-to localhost:8000/api/stripe-webhooks
 ```
 
 4. Copy the webhook signing secret to [.env](.env) as `STRIPE_WEBHOOK_SECRET`.
@@ -146,7 +146,7 @@ as the user will be taken to Stripe's checkout page when they upgrade.
 Keep your `customers` database up to date with billing changes by
 [registering a webhook endpoint in Stripe](https://stripe.com/docs/development/dashboard/register-webhook).
 
-- Endpoint URL: `https://{{ YOUR DOMAIN }}/api/subscription`
+- Endpoint URL: `https://{{ YOUR DOMAIN }}/api/stripe-webhooks`
 - Listen to `Events on your account`
 - Select `customer.subscription.created` and `customer.subscription.deleted`
 

components/AuthForm.tsx

@@ -7,7 +7,7 @@ interface AuthFormProps {
 
 export default function AuthForm({ type }: AuthFormProps) {
   return (
-    <form method="POST" class="space-y-4" action={`/api/${type.toLowerCase()}`}>
+    <form method="POST" class="space-y-4" action={`/${type.toLowerCase()}`}>
       <input
         placeholder="Email"
         name="email"

components/Layout.tsx

@@ -0,0 +1,119 @@
+// Copyright 2023 the Deno authors. All rights reserved. MIT license.
+import type { ComponentChild, ComponentChildren, JSX } from "preact";
+import { BASE_SITE_WIDTH_STYLES, SITE_NAME } from "@/utils/constants.ts";
+import Logo from "./Logo.tsx";
+
+interface NavProps extends JSX.HTMLAttributes<HTMLElement> {
+  active?: string;
+  items: (JSX.HTMLAttributes<HTMLAnchorElement> & { inner: ComponentChild })[];
+}
+
+function Nav(props: NavProps) {
+  return (
+    <nav>
+      <ul
+        class={`flex gap-x-8 gap-y-2 items-center justify-between h-full ${
+          props.class ?? ""
+        }`}
+      >
+        {props.items.map((item) => (
+          <li>
+            <a href={item.href}>{item.inner}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+function Header(props: JSX.HTMLAttributes<HTMLElement>) {
+  return (
+    <header
+      {...props}
+      class={`p-8 justify-between ${BASE_SITE_WIDTH_STYLES} flex z-10 ${
+        props.class ?? ""
+      }`}
+    >
+      <a href="/">
+        <Logo height="48" />
+      </a>
+      {props.children}
+    </header>
+  );
+}
+
+function Footer(props: JSX.HTMLAttributes<HTMLElement>) {
+  return (
+    <footer
+      {...props}
+      class={`flex flex-col md:flex-row p-8 justify-between gap-y-4 ${BASE_SITE_WIDTH_STYLES} ${
+        props.class ?? ""
+      }`}
+    >
+      <span>
+        <strong>{SITE_NAME}</strong>
+      </span>
+      {props.children}
+    </footer>
+  );
+}
+
+interface LayoutProps {
+  children: ComponentChildren;
+}
+
+export default function Layout(props: LayoutProps) {
+  /** @todo Make dynamic */
+  const headerNavItems = [
+    {
+      href: "/blog",
+      inner: "Blog",
+    },
+    {
+      href: "/submit",
+      inner: "Submit",
+    },
+    {
+      href: "/account",
+      inner: "Account",
+    },
+    {
+      href: "/login",
+      inner: "Login",
+    },
+    {
+      href: "/logout",
+      inner: "Logout",
+    },
+  ];
+
+  const footerNavItems = [
+    {
+      inner: "Source code",
+      href: "https://github.com/denoland/saaskit",
+    },
+    {
+      href: "https://fresh.deno.dev",
+      inner: (
+        <img
+          width="197"
+          height="37"
+          src="https://fresh.deno.dev/fresh-badge.svg"
+          alt="Made with Fresh"
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div class="flex flex-col min-h-screen">
+      <Header>
+        <Nav items={headerNavItems} />
+      </Header>
+      {props.children}
+      <Footer>
+        <Nav items={footerNavItems} />
+      </Footer>
+    </div>
+  );
+}

components/OAuthLoginButton.tsx

@@ -1,7 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { Provider } from "@supabase/supabase-js";
 import type { ComponentChild } from "preact";
-import { BASE_BUTTON_STYLES } from "@/utils/constants.ts";
 
 interface OAuthLoginButtonProps {
   provider: Provider;
@@ -10,11 +9,13 @@ interface OAuthLoginButtonProps {
 
 export default function OAuthLoginButton(props: OAuthLoginButtonProps) {
   return (
-    <form action="/api/oauth" method="POST">
+    <form action="/login/oauth" method="POST">
       <input type="hidden" value={props.provider} name="provider" />
       <button
         type="submit"
-        class={`w-full !bg-white !text-black border-black border-2 align-middle ${BASE_BUTTON_STYLES}`}
+        class="px-4 py-2 w-full bg-white text-black text-lg rounded-lg border-2 border-black disabled:(opacity-50 cursor-not-allowed)"
+        /** @todo disabled for preview deployment */
+        disabled
       >
         {props.children}
       </button>