log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add opengraph and logo

Browse Source
This commit is contained in:
log101 2024-02-02 20:18:49 +03:00
parent cf794018e1
commit 59c5bada6b
8 changed files with 298 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@astrojs/react": "^3.0.9",
"@astrojs/tailwind": "^5.1.0",
"@astrojs/vercel": "^7.0.0",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-separator": "^1.0.3",
@ -1136,6 +1137,44 @@
"node": ">=14"
}
},
"node_modules/@radix-ui/primitive": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
"integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
"dependencies": {
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@radix-ui/react-checkbox": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
"integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1",
"@radix-ui/react-use-previous": "1.0.1",
"@radix-ui/react-use-size": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
@ -1153,6 +1192,23 @@
}
}
},
"node_modules/@radix-ui/react-context": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
"integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-icons": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
@ -1184,6 +1240,30 @@
}
}
},
"node_modules/@radix-ui/react-presence": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
"integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-use-layout-effect": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-primitive": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
@ -1248,6 +1328,93 @@
}
}
},
"node_modules/@radix-ui/react-use-callback-ref": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
"integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-controllable-state": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
"integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-callback-ref": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-layout-effect": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
"integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-previous": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
"integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
"dependencies": {
"@babel/runtime": "^7.13.10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-size": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
"integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/react-use-layout-effect": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"@astrojs/react": "^3.0.9",
"@astrojs/tailwind": "^5.1.0",
"@astrojs/vercel": "^7.0.0",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-separator": "^1.0.3",

2
prettierrc.json
View File

@ -5,7 +5,7 @@
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"bracketSameLine": false,
"bracketSameLine": true,
"jsxSingleQuote": true,
"proseWrap": "preserve",
"quoteProps": "as-needed",

BIN
public/konulu-konum-logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

28
src/components/ui/checkbox.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }

BIN
src/images/konulu-konum-logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

7
src/layouts/Layout.astro
View File

@ -8,7 +8,7 @@
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/jpg" href="/konulu-konum-logo.jpg" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@ -25,6 +25,11 @@
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<meta property="og:title" content="Konulu Konum" />
<meta property="og:description" content="Sevdiklerinizi şaşırtın!" />
<meta property="og:url" content="konulu-konum.vercel.app" />
<meta property="og:image" content="/konulu-konum-logo.jpg" />
<meta name="twitter:card" content="summary" />
<meta name="generator" content={Astro.generator} />
<title>Konulu Konum</title>
</head>

180
src/pages/index.astro
View File

@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { ReloadIcon } from '@radix-ui/react-icons';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
---
<Layout>
@ -132,92 +133,101 @@ import { Label } from '@/components/ui/label';
</p>
</div>
</div>
<div class="flex gap-2 my-6 items-center">
<Checkbox id="kvkk" className="w-6 h-6" /><Label
htmlFor="kvkk"
className="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Konulu Konum'u KVKK kapsamında dava etmeyeceğimi onaylıyorum.
</Label>
</div>
<Button
className="w-full text-lg"
type="submit"
id="submit-button"
size="lg"
>
<ReloadIcon
className="mr-2 h-4 w-4 animate-spin hidden"
id="submit-button-reload"
/>
Bağlantıyı Oluştur
</Button>
</div>
<Button
className="w-full text-lg"
type="submit"
id="submit-button"
size="lg"
>
<ReloadIcon
className="mr-2 h-4 w-4 animate-spin hidden"
id="submit-button-reload"
/>
Bağlantıyı Oluştur
</Button>
</form>
<script src="../scripts/initSelectionMap.js"></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</main>
<script src="../scripts/initSelectionMap.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"
></script>
<script>
const handleSubmit = async (e: SubmitEvent) => {
e.preventDefault();
const locationSelected = document.getElementById(
'location-selected-confirmation'
)?.innerText;
if (!locationSelected) {
const coordinatesText = document.getElementById('coordinates');
const mapDiv = document.getElementById('map');
mapDiv?.classList.add('border-slate-700');
coordinatesText?.classList.add('drop-shadow-xl');
setTimeout(() => {
mapDiv?.classList.remove('border-slate-700');
coordinatesText?.classList.remove('drop-shadow-xl');
}, 500);
return;
}
const submitButton = document.getElementById(
'submit-button'
) as HTMLButtonElement;
const reloadIcon = document.getElementById(
'submit-button-reload'
) as HTMLElement;
submitButton.disabled = true;
reloadIcon.classList.toggle('hidden');
const formData = new FormData(e.target as HTMLFormElement);
const res = await fetch(`/api/content`, {
method: 'POST',
body: formData,
});
reloadIcon.classList.toggle('hidden');
submitButton.disabled = false;
if (res.status === 200) {
const data = await res.json();
if (data.url) location.assign('/' + data.url);
} else {
// @ts-ignore
Toastify({
text: 'Konulu konum oluşturulamadı, lütfen tekrar deneyin.',
duration: 3000,
gravity: 'top', // `top` or `bottom`
position: 'center', // `left`, `center` or `right`
stopOnFocus: true, // Prevents dismissing of toast on hover
style: {
background: 'black',
borderRadius: '6px',
margin: '16px',
},
onClick: function () {}, // Callback after click
}).showToast();
}
};
document.getElementById('sample-form')!.onsubmit = handleSubmit;
</script>
</Layout>
<script>
const handleSubmit = async (e: SubmitEvent) => {
e.preventDefault();
const locationSelected = document.getElementById(
'location-selected-confirmation'
)?.innerText;
if (!locationSelected) {
const coordinatesText = document.getElementById('coordinates');
const mapDiv = document.getElementById('map');
mapDiv?.classList.add('border-slate-700');
coordinatesText?.classList.add('drop-shadow-xl');
setTimeout(() => {
mapDiv?.classList.remove('border-slate-700');
coordinatesText?.classList.remove('drop-shadow-xl');
}, 500);
return;
}
const submitButton = document.getElementById(
'submit-button'
) as HTMLButtonElement;
const reloadIcon = document.getElementById(
'submit-button-reload'
) as HTMLElement;
submitButton.disabled = true;
reloadIcon.classList.toggle('hidden');
const formData = new FormData(e.target as HTMLFormElement);
const res = await fetch(`/api/content`, {
method: 'POST',
body: formData,
});
reloadIcon.classList.toggle('hidden');
submitButton.disabled = false;
if (res.status === 200) {
const data = await res.json();
if (data.url) location.assign('/' + data.url);
} else {
// @ts-ignore
Toastify({
text: 'Konulu konum oluşturulamadı, lütfen tekrar deneyin.',
duration: 3000,
gravity: 'top', // `top` or `bottom`
position: 'center', // `left`, `center` or `right`
stopOnFocus: true, // Prevents dismissing of toast on hover
style: {
background: 'black',
borderRadius: '6px',
margin: '16px',
},
onClick: function () {}, // Callback after click
}).showToast();
}
};
document.getElementById('sample-form')!.onsubmit = handleSubmit;
</script>