Basic login page

app/components/Button/Button.tsx

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+interface Props {
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+}
+
+export function Button({
+  type = 'button',
+  children,
+}: PropsWithChildren<Props>) {
+  return (
+    <button
+      type={type}
+      className="border border-indigo-950 uppercase p-3 text-indigo-50 text-bold bg-indigo-900 hover:bg-indigo-800"
+    >
+      {children}
+    </button>
+  );
+}

app/components/Header/Header.tsx

@@ -9,17 +9,22 @@ const navRoutes = [
 export function Header() {
   return (
     <header className="flex flex-col items-center sm:flex-row py-2 px-3">
-      <h1 className="uppercase text-xl sm:mr-auto">Math Rock Stack</h1>
+      <h1 className="uppercase text-xl sm:mr-auto">
+        <Link to="/" className="hover:underline underline-offset-2">
+          Math Rock Stack
+        </Link>
+      </h1>
       <nav>
-        <ul className="flex flex-col items-center justify-center sm:items-start sm:flex-row gap-1 sm:gap-4">
+        <ul className="flex pt-2 sm:pt-0 sm:items-start sm:flex-row gap-4 sm:gap-4">
           {navRoutes.map(({ to, label }) => (
-            <Link
-              key={to}
-              to={to}
-              className="uppercase hover:underline underline-offset-2"
-            >
-              {label}
-            </Link>
+            <li key={to}>
+              <Link
+                to={to}
+                className="uppercase hover:underline underline-offset-2"
+              >
+                {label}
+              </Link>
+            </li>
           ))}
         </ul>
       </nav>

app/components/TextField/TextField.tsx

@@ -0,0 +1,16 @@
+interface Props {
+  label: string;
+  name: string;
+  type?: string;
+}
+
+export function TextField({ label, name, type = 'text' }: Props) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="uppercase" htmlFor={name}>
+        {label}
+      </label>
+      <input className="border border-indigo-950 p-1" type={type} name={name} />
+    </div>
+  );
+}

app/root.tsx

@@ -2,13 +2,18 @@ import {
   type LoaderFunctionArgs,
   json,
   LinksFunction,
+  MetaFunction,
 } from '@remix-run/cloudflare';
 import { Links, Meta, Outlet, Scripts } from '@remix-run/react';
 import tailwindStylesHref from './tailwind.css?url';
 
 import { Header } from './components/Header/Header';
 import { books } from 'db/schema';
 
+export const meta: MetaFunction = () => [
+  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+];
+
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: tailwindStylesHref },
 ];

app/routes/_index.tsx

@@ -8,14 +8,15 @@ export const links: LinksFunction = () => [
 export default function Index() {
   return (
     <div className="mt-auto ml-auto text-right">
-      <div className="uppercase text-9xl logo mb-4">
+      <div className="uppercase text-9xl text-heading mb-4">
         <div>Math</div>
         <div>Rock</div>
         <div>Stack</div>
       </div>
       <div>
         <p className="text-3xl">
-          A Remix stack built with Cloudflare Pages, D1, Tailwind and more.
+          A Remix stack built with Cloudflare Pages, D1, Drizzle, Tailwind and
+          more.
         </p>
       </div>
     </div>

app/routes/admin.login.tsx → app/routes/login.tsx

@@ -1,5 +1,7 @@
 import { ActionFunctionArgs, json, redirect } from '@remix-run/cloudflare';
 import { Form, useActionData } from '@remix-run/react';
+import { Button } from '~/components/Button/Button';
+import { TextField } from '~/components/TextField/TextField';
 import { login } from '~/services/auth/login';
 
 export const action = async ({ request, context }: ActionFunctionArgs) => {
@@ -39,19 +41,14 @@ export default function AdminLogin() {
   const actionData = useActionData<typeof action>();
 
   return (
-    <>
+    <section className="flex flex-col items-center justify-center gap-4 w-full">
       {actionData?.error ? <p>{actionData.error}</p> : null}
-      <Form method="post">
-        <div>
-          <label htmlFor="username">Username</label>
-          <input type="text" name="username" required />
-        </div>
-        <div>
-          <label htmlFor="password">Password</label>
-          <input type="password" name="password" required />
-        </div>
-        <button type="submit">Login</button>
+      <h2 className="text-6xl uppercase text-heading">Login</h2>
+      <Form className="flex flex-col gap-4" method="post">
+        <TextField label="Username" name="username" />
+        <TextField label="Password" name="password" type="password" />
+        <Button type="submit">Login</Button>
       </Form>
-    </>
+    </section>
   );
 }

app/tailwind.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .text-heading {
+    text-shadow:
+      5px -5px 0px theme('colors.indigo.50'),
+      10px -10px 0px theme('colors.indigo.700');
+  }
+}

drizzle.config.ts

@@ -1,34 +1,20 @@
 import { defineConfig } from 'drizzle-kit';
 
-const {
-  LOCAL_DB_PATH,
-  WRANGLER_CONFIG,
-  DB_NAME = 'math-rock-stack',
-} = process.env;
+const { WRANGLER_CONFIG, DB_NAME = 'math-rock-stack' } = process.env;
 
-export default defineConfig(
-  LOCAL_DB_PATH
-    ? {
-        dialect: 'sqlite',
-        schema: './db/schema.ts',
-        dbCredentials: {
-          url: LOCAL_DB_PATH,
-        },
-      }
-    : {
-        dialect: 'sqlite',
-        schema: './db/schema.ts',
-        out: './migrations',
-        driver: 'd1',
-        dbCredentials: {
-          wranglerConfigPath:
-            new URL('wrangler.toml', import.meta.url).pathname +
-            // This is a hack to inject additional cli flags to wrangler
-            // since drizzle-kit doesn't support specifying environments
-            WRANGLER_CONFIG
-              ? ` ${WRANGLER_CONFIG}`
-              : '',
-          dbName: DB_NAME,
-        },
-      },
-);
+export default defineConfig({
+  dialect: 'sqlite',
+  schema: './db/schema.ts',
+  out: './migrations',
+  driver: 'd1',
+  dbCredentials: {
+    wranglerConfigPath:
+      new URL('wrangler.toml', import.meta.url).pathname +
+      // This is a hack to inject additional cli flags to wrangler
+      // since drizzle-kit doesn't support specifying environments
+      WRANGLER_CONFIG
+        ? ` ${WRANGLER_CONFIG}`
+        : '',
+    dbName: DB_NAME,
+  },
+});

package.json

@@ -16,7 +16,6 @@
     "db:migrate:create": "drizzle-kit generate",
     "db:migrate:apply:local": "dotenvx run -f .dev.vars -- sh scripts/db-migrate.sh",
     "db:migrate:apply:prod": "dotenvx run -f .dev.vars -- sh scripts/db-migrate-prod.sh",
-    "db:studio:local": "LOCAL_DB_PATH=$(find .wrangler/state/v3/d1/miniflare-D1DatabaseObject -type f -name '*.sqlite' -print -quit) drizzle-kit studio",
     "db:sync": "dotenvx run -f .dev.vars -- sh scripts/db-sync.sh"
   },
   "keywords": [],
@@ -40,8 +39,7 @@
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "autoprefixer": "^10.4.19",
-    "better-sqlite3": "^9.6.0",
-    "drizzle-kit": "^0.21.1",
+    "drizzle-kit": "^0.21.2",
     "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -56,6 +54,6 @@
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2",
-    "wrangler": "^3.55.0"
+    "wrangler": "^3.57.0"
   }
 }