initial production deploy

.github/workflows/deploy.yml

@@ -31,14 +31,20 @@ jobs:
       - name: Build with Astro
         env:
           PUBLIC_WEB_HOSTNAME: ${{ vars.PUBLIC_WEB_HOSTNAME }}
+          PUBLIC_GITHUB_CLIENT_ID: ${{ vars.PUBLIC_GITHUB_CLIENT_ID }}
         run: |
           pnpm run astro build
         working-directory: ${{ env.BUILD_PATH }}
+      - name: Migrate
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          command: wrangler d1 migrations apply warpdive-db --remote
       - name: Publish
         uses: cloudflare/pages-action@1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ${{ vars.CLOUDFLARE_PROJECT_ID }}
+          projectName: ${{ vars.CLOUDFLARE_PROJECT_NAME }}
           directory: ${{ env.BUILD_PATH }}/dist
           gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -10,7 +10,7 @@ tmp/*
 *.env*
 !.env.example
 
-wrangler.toml
+wrangler*.toml
 .wrangler
 *.vars
 

.tool-versions

@@ -1,3 +1,3 @@
-nodejs 20.10.0
+nodejs 22.2.0
 pnpm 9.1.2
 protoc 25.0

CONTRIBUTING.md

@@ -20,3 +20,30 @@ pnpm proto
 ```sh
 pnpm storybook
 ```
+
+### Local Database Setup
+
+```sh
+pnpm db:create # create local sqlite db in .wrangler/
+pnpm db:generate # create schemas/migrations as needed
+pnpm db:migrate # run migrations on local sqlite db
+pnpm db:seed # create a test user
+
+pnpm db:destroy # reset local sqlite db
+pnpm db:open # open/use DB Browser for sqlite
+```
+
+### Localtunnel development for webhooks
+
+```sh
+# Install localtunnel
+pnpx localtunnel --port PORT_TO_PROXY || 8000
+```
+
+### Run proxy to server
+
+```sh
+# NOTE: Change env PUBLIC_SERVER_HOSTNAME to http://localhost:3001
+mitmproxy -p 3001 --mode reverse:http://localhost:3000
+mitmproxy -p 3001 --mode reverse:http://localhost:3000 --modify-headers /~q/Host/192.168.1.5.xip.io:3001
+```

astro.config.mjs

@@ -11,9 +11,15 @@ import cloudflare from '@astrojs/cloudflare'
 
 // eslint-disable-next-line no-undef
 const PUBLIC_WEB_HOSTNAME = process.env.PUBLIC_WEB_HOSTNAME
+// eslint-disable-next-line no-undef
+const MODE = process.env.NODE_ENV
+// eslint-disable-next-line no-undef
+const DEV = process.env.NODE_ENV === 'development'
+// eslint-disable-next-line no-undef
+const PROD = process.env.NODE_ENV === 'production'
 
 // eslint-disable-next-line no-console,no-undef
-console.log(`ASTRO SITE: ${PUBLIC_WEB_HOSTNAME}`)
+console.log(`ASTRO SITE: ${PUBLIC_WEB_HOSTNAME} ${MODE}`)
 
 export default defineConfig({
   site: PUBLIC_WEB_HOSTNAME,
@@ -32,7 +38,7 @@ export default defineConfig({
   }),
   srcDir: './src/',
   publicDir: './public/',
-  compressHTML: false,
+  compressHTML: PROD,
   integrations: [
     react(),
     tailwind({
@@ -72,18 +78,16 @@ export default defineConfig({
   ],
   vite: {
     css: {
-      devSourcemap: true
+      devSourcemap: DEV
     },
     build: {
-      minify: false,
-      sourcemap: true
+      minify: PROD,
+      sourcemap: DEV
     },
     // https://github.com/sveltejs/kit/issues/8140
     optimizeDeps: {exclude: ['fsevents']},
     ssr: {
-      external: [
-        // 'node:fs/promises', 'node:url', 'node:os', 'node:path', 'node:crypto'
-      ]
+      //external: ['node:crypto']
     }
   }
 })

package.json

@@ -15,7 +15,7 @@
     "db:generate": "drizzle-kit generate",
     "db:migrate": "CI=true wrangler d1 migrations apply warpdive-dev-db --local",
     "db:seed": "tsx src/db/seed.ts",
-    "db:browser": "open $(find .wrangler/state/v3/d1/ -type f -name '*.sqlite' -print -quit)",
+    "db:open": "open $(find .wrangler/state/v3/d1/ -type f -name '*.sqlite' -print -quit)",
     "dev": "wrangler types .astro/worker-configuration.d.ts && astro dev --host",
     "maildev": "maildev -v --hide-extensions STARTTLS --mail-directory tmp/maildev/",
     "preview": "astro preview",

src/components/AlertFlash.astro

@@ -1,20 +1,59 @@
 ---
-// import {Status} from 'src/generated/google/rpc/status_pb'
-// import {Code} from 'src/generated/google/rpc/code_pb'
-// import {FormSubmit} from 'src/generated/auth_pb'
-import AlertError from '@components/AlertError.astro'
-import AlertSuccess from '@components/AlertSuccess.astro'
-
-// export interface Props {
-//   flash: Status | FormSubmit | undefined
-// }
+import {cn} from '@/lib/utils'
+export interface Props {
+  flash: string | undefined
+  class?: string
+}
 
-// const {flash} = Astro.props
+const {flash} = Astro.props
+const cls = Astro.props.class
 ---
 
 {
-  /* <>
-  {flash?.code === Code.OK && flash.message && <AlertSuccess message={flash.message} />}
-  {typeof flash?.code === 'number' && flash?.code !== Code.OK && <AlertError error={flash?.message} />}
-</> */
+  flash && (
+    <div
+      role='alert'
+      class={cn(
+        'relative w-full rounded-lg border border-destructive/50 p-4 text-destructive dark:border-destructive [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-destructive [&>svg~*]:pl-7',
+        cls
+      )}
+    >
+      <>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='24'
+          height='24'
+          viewBox='0 0 24 24'
+          fill='none'
+          stroke='currentColor'
+          stroke-width='2'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          class='lucide lucide-circle-alert h-4 w-4'
+        >
+          <>
+            <circle
+              cx='12'
+              cy='12'
+              r='10'
+            />
+            <line
+              x1='12'
+              x2='12'
+              y1='8'
+              y2='12'
+            />
+            <line
+              x1='12'
+              x2='12.01'
+              y1='16'
+              y2='16'
+            />
+          </>
+        </svg>
+        <h5 class='mb-1 font-medium leading-none tracking-tight'>Error</h5>
+        <div class='text-sm [&_p]:leading-relaxed'>{flash}</div>
+      </>
+    </div>
+  )
 }

src/components/CircleLoader.astro

@@ -0,0 +1,31 @@
+---
+export interface Props {
+  class: string
+}
+
+const {class: cls, ...rest} = Astro.props
+---
+
+<svg
+  class={`animate-spin ${cls || ''}`}
+  xmlns='http://www.w3.org/2000/svg'
+  fill='none'
+  view-box='0 0 24 24'
+  width='24'
+  height='24'
+  {...rest}
+>
+  <circle
+    class='opacity-25'
+    cx='12'
+    cy='12'
+    r='10'
+    stroke='currentColor'
+    stroke-width='4'
+  ></circle>
+  <path
+    class='opacity-75'
+    fill='currentColor'
+    d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
+  ></path>
+</svg>