feat: add sample api endpoint
This commit is contained in:
parent
4c6d6df13b
commit
efdf39ba9a
|
|
@ -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()
|
||||
});
|
||||
|
|
|
|||
721
package-lock.json
generated
721
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
15
src/pages/create-url.ts
Normal file
15
src/pages/create-url.ts
Normal file
|
|
@ -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!"
|
||||
})
|
||||
)
|
||||
}
|
||||
|
|
@ -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">
|
||||
<div>
|
||||
<h1
|
||||
class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
|
||||
>
|
||||
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>
|
||||
<main>
|
||||
<form
|
||||
class="flex flex-col gap-8"
|
||||
id="sample-form"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<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"
|
||||
<h1
|
||||
class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
|
||||
>
|
||||
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>
|
||||
<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>
|
||||
<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" />
|
||||
<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.
|
||||
<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 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user