feat: add opengraph and logo

package-lock.json

@@ -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",

package.json

@@ -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",

prettierrc.json

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

src/components/ui/checkbox.tsx

@@ -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 }

src/layouts/Layout.astro

@@ -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>

src/pages/index.astro

@@ -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>