fix: type diameter to radius

.gitea/workflows/static-deploy.yml

@@ -33,6 +33,10 @@ jobs:
             echo "Unable to determine package manager"
             exit 1
           fi
+      - name: Install package manager (from package.json)
+        run: |
+          corepack enable
+          corepack install
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
@@ -49,7 +53,7 @@ jobs:
       - name: Make envfile
         uses: SpicyPizza/create-envfile@v2.0
         with:
-          envkey_PUBLIC_BACKEND_HOST: ${{ vars.PUBLIC_BACKEND_HOST }}
+          envkey_PUBLIC_BACKEND_URL: ${{ vars.PUBLIC_BACKEND_URL }}
       - name: Build with Astro
         run: |
           ${{ steps.detect-package-manager.outputs.runner }} astro build
@@ -73,18 +77,3 @@ jobs:
             echo start at:
             date -u
           POST_SCRIPT: "echo done at: && date -u"
-      - name: Send email notification
-        uses: dawidd6/action-send-mail@v3
-        if: ${{ always() }}
-        with:
-          server_address: mail.log101.dev
-          server_port: 465
-          secure: true
-          username: ${{secrets.MAIL_USERNAME}}
-          password: ${{secrets.MAIL_PASSWORD}}
-          subject: Github Actions job result
-          to: ffrknerdm@gmail.com
-          from: gitea@log101.dev
-          body:
-            Build job of ${{github.repository}} completed with status ${{
-            steps.deploy.outcome }}!

astro.config.mjs

@@ -2,7 +2,7 @@ import { defineConfig } from 'astro/config';
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
 
-import node from "@astrojs/node";
+const devMode = import.meta.env.DEV
 
 // https://astro.build/config
 export default defineConfig({
@@ -10,5 +10,5 @@ export default defineConfig({
     applyBaseStyles: false
   })],
   output: "static",
-  site: "https://konulukonum.log101.dev"
+  site: devMode ? "http://localhost:4321" : "https://konulukonum.log101.dev"
 });

package.json

@@ -11,10 +11,8 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.4.1",
-    "@astrojs/node": "^8.3.2",
     "@astrojs/react": "^3.6.0",
     "@astrojs/tailwind": "^5.1.0",
-    "@astrojs/vercel": "^7.7.2",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
@@ -38,8 +36,8 @@
     "@types/leaflet": "^1.9.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/bun": "^1.1.6",
     "@types/google.maps": "^3.55.11",
     "@types/toastify-js": "^1.12.3"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/Leaflet/icons.ts

@@ -1,12 +1,12 @@
 import L from "leaflet"
 
 var targetLocationIcon = L.icon({
-  iconUrl: "goal.svg",
+  iconUrl: "/goal.svg",
   iconSize: [32, 32],
 })
 
 var currentLocationIcon = L.icon({
-  iconUrl: "blue-dot.png",
+  iconUrl: "/blue-dot.png",
   iconSize: [32, 32],
 })
 

src/components/LockedContent/geolocation.ts

@@ -14,7 +14,8 @@ import { toast } from "@/lib/utils"
 // Update the elements according to distance remaining
 function locationSuccessCallback(
   position: GeolocationPosition,
-  targetPosition: LatLngTuple
+  targetPosition: LatLngTuple,
+  radius: number
 ) {
   // Enable current location control
   removeClasses("current-location-control", "disabled-button")
@@ -27,7 +28,7 @@ function locationSuccessCallback(
   )
 
   // If user has arrived to destination
-  if (distance < 100) {
+  if (distance < radius) {
     // Change the description texts
     updateText("button-text", "İçeriği Göster")
     updateText("locked-content-description", "İçeriği görmek için butona bas!")

src/layouts/Layout.astro

@@ -12,10 +12,10 @@ import "toastify-js/src/toastify.css"
     <link rel='icon' type='image/jpg' href='/konulu-konum-logo.jpg' />
     <meta property='og:title' content='Konulu Konum' />
     <meta property='og:description' content='Sevdiklerinizi şaşırtın!' />
-    <meta property='og:url' content='https://konulu-konum.vercel.app' />
+    <meta property='og:url' content='https://konulukonum.log101.dev' />
     <meta
       property='og:image'
-      content='https://konulu-konum.vercel.app/konulu-konum-logo.jpg'
+      content='https://konulukonum.log101.dev/konulu-konum-logo.jpg'
     />
     <meta name='twitter:card' content='summary' />
     <meta name='generator' content={Astro.generator} />

src/lib/db.ts

@@ -10,5 +10,6 @@ export interface ContentTable {
   author: string
   description: string
   created_at: string
+  radius: number
   unlocked_counter: number
 }

src/pages/index.astro

@@ -4,6 +4,8 @@ import "../styles/locked-page.css"
 
 import Layout from "../layouts/Layout.astro"
 import { Loader2 } from "lucide-react"
+
+const backendUrl = import.meta.env.PUBLIC_BACKEND_URL
 ---
 
 <Layout>
@@ -11,6 +13,8 @@ import { Loader2 } from "lucide-react"
     <form
       class='flex flex-col gap-12 md:gap-10'
       id='sample-form'
+      action={`${backendUrl}/api/location`}
+      method='post'
       enctype='multipart/form-data'>
       <div>
         <h1
@@ -81,6 +85,7 @@ import { Loader2 } from "lucide-react"
           </p>
         </div>
         <input name='geolocation' id='geolocation-input' hidden />
+        <input name='geolocation-radius' id='geolocation-radius-input' hidden />
       </div>
 
       <div>

src/pages/x/index.astro

@@ -144,11 +144,15 @@ import { CalendarIcon } from "@radix-ui/react-icons"
     const lockedContentContainer = document.getElementById(
       "locked-content-container"
     )
-    if (lockedContentContainer)
+    if (lockedContentContainer) {
       lockedContentContainer.dataset.targetPosition = data?.loc
+    }
 
     const leafletMap = document.getElementById("map")
-    if (leafletMap) leafletMap.dataset.targetLocation = data?.loc
+    if (leafletMap) {
+      leafletMap.dataset.targetLocation = data?.loc
+      leafletMap.dataset.targetRadius = data?.radius.toString() ?? "50"
+    }
 
     initMap()
 

src/scripts/index.ts

@@ -16,7 +16,6 @@ export function toggleMap() {
 }
 
 const handleSubmit = async (e: SubmitEvent) => {
-  e.preventDefault()
   toggleButton("submit-button", "submit-button-spinner")
   const locationSelected = document.getElementById(
     "geolocation-input"
@@ -41,24 +40,14 @@ const handleSubmit = async (e: SubmitEvent) => {
   }
 
   validateFileInput(inputEl)
-
-  const formData = new FormData(e.target as HTMLFormElement)
-
-  const res = await fetch(`http://127.0.0.1:3000/api/location`, {
-    method: "POST",
-    body: formData,
-  })
-
-  if (res.status === 200) {
-    const data = await res.json()
-
-    if (data.url) location.assign(`/x?id=${data.url}`)
-  } else {
-    toast("Konulu konum oluşturulamadı, lütfen tekrar deneyin.")
-  }
 }
 
 document.getElementById("sample-form")!.onsubmit = handleSubmit
 
 document.getElementById("photo-selector")!.oninput = (ev) =>
   validateFileInput(ev.target as HTMLInputElement)
+
+const url = new URL(document.URL)
+
+if (url.searchParams.get("error"))
+  toast("Konulu konum oluşturulamadı, lütfen tekrar deneyin.")

src/scripts/initMap.ts

@@ -75,7 +75,7 @@ const targetLocationControl = new GoToTargetLocation({
   position: "bottomleft",
 })
 
-function addTargetLocationMarker(target: TargetLocation) {
+function addTargetLocationMarker(target: TargetLocation, radius = 50) {
   if (target) {
     L.marker(target, { icon: targetLocationIcon }).addTo(map)
 
@@ -83,7 +83,7 @@ function addTargetLocationMarker(target: TargetLocation) {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
-      radius: 50,
+      radius,
     }).addTo(map)
   }
 }
@@ -100,6 +100,7 @@ export function initMap() {
   map = L.map("map")
 
   const targetLocation = mapEl?.dataset.targetLocation
+  const targetRadius = mapEl?.dataset.targetRadius
 
   const data = targetLocation ? JSON.parse(targetLocation) : null
 
@@ -113,7 +114,7 @@ export function initMap() {
       '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(map)
 
-  addTargetLocationMarker(TARGET_LOCATION)
+  addTargetLocationMarker(TARGET_LOCATION, Number(targetRadius))
   targetLocationControl.addTo(map)
   goToCurrentLocationControl.addTo(map)
 }

src/scripts/initSelectionMap.ts

@@ -21,6 +21,8 @@ let targetLocationMarker: L.Marker
 
 let targetLocationCircle: L.Circle
 
+let targetLocationCircleRadius = 50
+
 let currentLocationMarker: L.Marker
 
 map.on("locationerror", () =>
@@ -87,12 +89,116 @@ const AskPermissonControl = L.Control.extend({
   },
 })
 
+const RadiusControl = L.Control.extend({
+  onAdd: function (map: L.Map) {
+    const radiusContainer = document.createElement("div")
+
+    radiusContainer.classList.add(
+      "bg-white",
+      "h-[40px]",
+      "p-2",
+      "flex",
+      "items-center",
+      "gap-2"
+    )
+
+    const radiusButtonClasses = [
+      "text-xl",
+      "border-2",
+      "border-slate-700",
+      "max-h-[30px]",
+      "flex",
+      "items-center",
+      "p-2",
+      "rounded-lg",
+      "bg-gray-100",
+      "hover:bg-gray-300",
+    ]
+
+    const radiusIncreaseButton = document.createElement("button")
+
+    radiusIncreaseButton.classList.add(...radiusButtonClasses)
+
+    const radiusDecreaseButton = document.createElement("button")
+
+    radiusIncreaseButton.type = "button"
+
+    radiusDecreaseButton.type = "button"
+
+    radiusDecreaseButton.classList.add(...radiusButtonClasses)
+
+    const radiusContainerText = document.createElement("p")
+
+    const radiusText = document.createElement("p")
+
+    radiusContainerText.classList.add("text-xl")
+
+    radiusText.classList.add("text-xl")
+
+    radiusIncreaseButton.textContent = "+"
+
+    radiusDecreaseButton.textContent = "-"
+
+    radiusContainerText.textContent = "Yarıçap: "
+
+    radiusText.textContent = `${targetLocationCircleRadius.toString()}m`
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusIncreaseButton)
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusText)
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusDecreaseButton)
+
+    radiusContainer.insertAdjacentElement("afterbegin", radiusContainerText)
+
+    radiusContainer.id = "radius-control"
+
+    L.DomEvent.on(radiusIncreaseButton, "click", (ev) => {
+      targetLocationCircleRadius = Math.min(
+        targetLocationCircleRadius + 100,
+        2000
+      )
+      targetLocationCircle.setRadius(targetLocationCircleRadius)
+
+      radiusText.innerText = `${targetLocationCircleRadius.toString()}m`
+      updateInputValue(
+        "geolocation-radius-input",
+        targetLocationCircleRadius.toString()
+      )
+      L.DomEvent.stop(ev)
+    })
+
+    L.DomEvent.on(radiusIncreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev))
+
+    L.DomEvent.on(radiusDecreaseButton, "click", (ev) => {
+      targetLocationCircleRadius = Math.max(
+        targetLocationCircleRadius - 100,
+        50
+      )
+      targetLocationCircle.setRadius(targetLocationCircleRadius)
+      radiusText.innerText = `${targetLocationCircleRadius.toString()}m`
+      updateInputValue(
+        "geolocation-radius-input",
+        targetLocationCircleRadius.toString()
+      )
+
+      L.DomEvent.stop(ev)
+    })
+
+    L.DomEvent.on(radiusDecreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev))
+
+    return radiusContainer
+  },
+})
+
 const askPermissionControl = new AskPermissonControl({ position: "bottomleft" })
 
 const currentLocationControl = new CurrentLocationControl({
   position: "bottomleft",
 })
 
+const radiusControl = new RadiusControl({ position: "bottomright" })
+
 askPermissionControl.addTo(map)
 
 currentLocationControl.addTo(map)
@@ -110,8 +216,10 @@ map.on("click", (e) => {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
-      radius: 50,
+      radius: targetLocationCircleRadius,
     }).addTo(map)
+
+    radiusControl.addTo(map)
   }
 
   const pos = targetLocationMarker.getLatLng()

src/scripts/lockedContent.ts

@@ -45,13 +45,27 @@ function getTargetPosition() {
   return data
 }
 
+function getRadius() {
+  const leafletMap = document.getElementById("map")
+
+  let targetRadiusString = leafletMap?.dataset.targetRadius
+
+  // TARGET_POSITION is required to calculate distance
+  if (!targetRadiusString) targetRadiusString = "50"
+
+  const data = Number(targetRadiusString)
+
+  return data
+}
+
 // Call Geolocation API to start watching user location
 function startWatchingLocation() {
   const TARGET_POSITION = getTargetPosition()
+  const radius = getRadius()
 
   if (!watchId) {
     watchId = window.navigator.geolocation.watchPosition(
-      (position) => locationSuccessCallback(position, TARGET_POSITION),
+      (position) => locationSuccessCallback(position, TARGET_POSITION, radius),
       errorCallback
     )
   }
@@ -65,8 +79,10 @@ navigator.permissions
     switch (permissionStatus.state) {
       case "granted":
         const TARGET_POSITION = getTargetPosition()
+        const radius = getRadius()
         watchId = window.navigator.geolocation.watchPosition(
-          (position) => locationSuccessCallback(position, TARGET_POSITION),
+          (position) =>
+            locationSuccessCallback(position, TARGET_POSITION, radius),
           errorCallback
         )
         break

src/styles/locked-page.css

@@ -11,6 +11,19 @@
   cursor: pointer;
 }
 
+.custom-map-control-div {
+  @apply text-xl;
+  background-color: #fff;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+  margin: 10px;
+  padding: 0 0.5em;
+  overflow: hidden;
+  height: 40px;
+  cursor: pointer;
+}
+
 .custom-map-control-button:hover {
   background: rgb(235, 235, 235);
 }