feat: add sample api endpoint

astro.config.mjs

@@ -1,11 +1,14 @@
 import { defineConfig } from 'astro/config';
 import react from "@astrojs/react";
-
 import tailwind from "@astrojs/tailwind";
 
+import vercel from "@astrojs/vercel/serverless";
+
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind({
-    applyBaseStyles: false,
-  })]
+    applyBaseStyles: false
+  })],
+  output: "hybrid",
+  adapter: vercel()
 });

package.json

@@ -13,12 +13,14 @@
     "@astrojs/check": "^0.4.1",
     "@astrojs/react": "^3.0.9",
     "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/vercel": "^7.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
+    "@vercel/blob": "^0.19.0",
     "astro": "^4.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/pages/create-url.ts

@@ -0,0 +1,15 @@
+export const prerender = false
+
+import type { APIRoute } from "astro"
+
+export const POST: APIRoute = async ({ request }) => {
+  const data = await request.formData()
+
+  console.log(data)
+
+  return new Response(
+    JSON.stringify({
+      message: "This was a POST!"
+    })
+  )
+}

src/pages/create.astro

@@ -2,26 +2,19 @@
 import '@/styles/globals.css';
 import Layout from '../layouts/Layout.astro';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-
-import { CalendarIcon } from '@radix-ui/react-icons';
 
 import '../styles/locked-page.css';
-import LockedContent from '@/components/LockedContent';
-import { Separator } from '@/components/ui/separator';
-import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 ---
 
 <Layout>
-  <main class="flex flex-col gap-8">
+  <main>
+    <form
+      class="flex flex-col gap-8"
+      id="sample-form"
+      enctype="multipart/form-data"
+    >
       <div>
         <h1
           class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
@@ -43,10 +36,11 @@ import { Textarea } from '@/components/ui/textarea';
         </h2>
         <p class="leading-7 [&:not(:first-child)]:mt-6">
           Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
-        fotoğraf yalnızca belirli bir konumda açılabilecek bir hale getirilecek.
+          fotoğraf yalnızca belirli bir konumda açılabilecek bir hale
+          getirilecek.
         </p>
         <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
-        <Input id="picture" type="file" />
+          <Input type="file" name="selected-photo" id="photo-selector" />
           <p class="text-sm text-muted-foreground">
             Galerinizden bir fotoğraf seçin.
           </p>
@@ -86,37 +80,40 @@ import { Textarea } from '@/components/ui/textarea';
         >
           3. Fotoğraf Açıklaması
         </h2>
-      <p class="leading-7 [&:not(:first-child)]:mt-6">
-        Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
-        fotoğraf yalnızca belirli bir konumda açılabilecek bir hale getirilecek.
-      </p>
         <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
-        <Textarea placeholder="Açıklamanızı buraya yazınız." />
-        <p class="text-sm text-muted-foreground">Bir açıklama girin.</p>
-      </div>
-    </div>
-
-    <div>
-      <h2
-        class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
-      >
-        4. (Zorunlu Değil) Bağlantı Şifresi
-      </h2>
-      <p class="leading-7 [&:not(:first-child)]:mt-6">
-        Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
-        fotoğraf yalnızca belirli bir konumda açılabilecek bir hale getirilecek.
-      </p>
-      <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
-        <Label htmlFor="password">Şifre</Label>
-        <Input id="password" type="password" />
+          <Textarea placeholder="Açıklamanızı buraya yazınız." name="desc" />
           <p class="text-sm text-muted-foreground">
-          Bağlantınız için bir şifre girin, açıklama ve fotoğrafın görülmesi
-          için önce bu şifrenin girilmesi istenecek.
+            Bir açıklama girin, yüklediğiniz içeriğin üzerine bu metin
+            görünecek.
           </p>
         </div>
       </div>
 
-    <Button className="w-full">Bağlantıyı Oluştur</Button>
+      <Button className="w-full" type="submit" id="submit-button">
+        Bağlantıyı Oluştur
+      </Button>
+    </form>
   </main>
   <script src="../scripts/initSelectionMap.js"></script>
 </Layout>
+
+<script>
+  import type { PutBlobResult } from '@vercel/blob';
+
+  const handleSubmit = async (e: SubmitEvent) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+
+    const response = await fetch(`/create-url`, {
+      method: 'POST',
+      body: formData,
+    });
+
+    const newBlob = (await response.json()) as PutBlobResult;
+
+    console.log(newBlob);
+  };
+
+  document.getElementById('sample-form')!.onsubmit = handleSubmit;
+</script>