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,121 +2,118 @@
 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>
-    <div>
+    <form
-      <h1
+      class="flex flex-col gap-8"
-        class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
+      id="sample-form"
-      >
+      enctype="multipart/form-data"
-        Konulu Konum
+    >
-      </h1>
-      <p class="leading-7 [&:not(:first-child)]:mt-6">
-        3 basit adımda fotoğraflarınızı ve videolarınızı <b
-          >yalnızca belirli bir konumda</b
-        > açılacak şekilde kilitleyin:
-      </p>
-    </div>
-
-    <div>
-      <h2
-        class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
-      >
-        1. Fotoğraf Seçimi
-      </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">
-        <Input id="picture" type="file" />
-        <p class="text-sm text-muted-foreground">
-          Galerinizden bir fotoğraf seçin.
-        </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"
-      >
-        2. Fotoğrafın Açılacağı Konum
-      </h2>
-      <p class="leading-7 [&:not(:first-child)]:mt-6">
-        Haritadan bir nokta seçin. Bağlantıyı gönderdiğiniz kişi bu konuma
-        gittiği zaman seçtiğiniz fotoğrafı görebilecek.
-      </p>
       <div>
-        <div id="map" class="w-full h-[450px] rounded mt-4"></div>
+        <h1
-        <p class="text-xl mt-2">
+          class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
-          <span class="font-semibold">Seçilen Konum:</span>
-        </p>
-        <p class="text-lg" id="coordinates">
-          Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
-          basınız.
-        </p>
-        <p
-          class="text-lg text-muted-foreground mt-2"
-          id="location-selected-confirmation"
         >
+          Konulu Konum
+        </h1>
+        <p class="leading-7 [&:not(:first-child)]:mt-6">
+          3 basit adımda fotoğraflarınızı ve videolarınızı <b
+            >yalnızca belirli bir konumda</b
+          > açılacak şekilde kilitleyin:
         </p>
       </div>
-    </div>
 
-    <div>
+      <div>
-      <h2
+        <h2
-        class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
+          class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
-      >
+        >
-        3. Fotoğraf Açıklaması
+          1. Fotoğraf Seçimi
-      </h2>
+        </h2>
-      <p class="leading-7 [&:not(:first-child)]:mt-6">
+        <p class="leading-7 [&:not(:first-child)]:mt-6">
-        Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
+          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
-      </p>
+          getirilecek.
-      <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" />
-        <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.
         </p>
+        <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
+          <Input type="file" name="selected-photo" id="photo-selector" />
+          <p class="text-sm text-muted-foreground">
+            Galerinizden bir fotoğraf seçin.
+          </p>
+        </div>
       </div>
-    </div>
 
-    <Button className="w-full">Bağlantıyı Oluştur</Button>
+      <div>
+        <h2
+          class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
+        >
+          2. Fotoğrafın Açılacağı Konum
+        </h2>
+        <p class="leading-7 [&:not(:first-child)]:mt-6">
+          Haritadan bir nokta seçin. Bağlantıyı gönderdiğiniz kişi bu konuma
+          gittiği zaman seçtiğiniz fotoğrafı görebilecek.
+        </p>
+        <div>
+          <div id="map" class="w-full h-[450px] rounded mt-4"></div>
+          <p class="text-xl mt-2">
+            <span class="font-semibold">Seçilen Konum:</span>
+          </p>
+          <p class="text-lg" id="coordinates">
+            Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
+            basınız.
+          </p>
+          <p
+            class="text-lg text-muted-foreground mt-2"
+            id="location-selected-confirmation"
+          >
+          </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"
+        >
+          3. Fotoğraf Açıklaması
+        </h2>
+        <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
+          <Textarea placeholder="Açıklamanızı buraya yazınız." name="desc" />
+          <p class="text-sm text-muted-foreground">
+            Bir açıklama girin, yüklediğiniz içeriğin üzerine bu metin
+            görünecek.
+          </p>
+        </div>
+      </div>
+
+      <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>