.gitea/workflows/static-deploy.yml

@@ -33,10 +33,6 @@ 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:
@@ -53,7 +49,7 @@ jobs:
       - name: Make envfile
         uses: SpicyPizza/create-envfile@v2.0
         with:
-          envkey_PUBLIC_BACKEND_URL: ${{ vars.PUBLIC_BACKEND_URL }}
+          envkey_PUBLIC_BACKEND_HOST: ${{ vars.PUBLIC_BACKEND_HOST }}
       - name: Build with Astro
         run: |
           ${{ steps.detect-package-manager.outputs.runner }} astro build
@@ -77,3 +73,18 @@ 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";
 
-const devMode = import.meta.env.DEV
+import node from "@astrojs/node";
 
 // https://astro.build/config
 export default defineConfig({
@@ -10,5 +10,5 @@ export default defineConfig({
     applyBaseStyles: false
   })],
   output: "static",
-  site: devMode ? "http://localhost:4321" : "https://konulukonum.log101.dev"
+  site: "https://konulukonum.log101.dev"
 });

package.json

@@ -11,8 +11,10 @@
   },
   "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",
@@ -36,8 +38,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,8 +14,7 @@ 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")
@@ -28,7 +27,7 @@ function locationSuccessCallback(
   )
 
   // If user has arrived to destination
-  if (distance < radius) {
+  if (distance < 100) {
     // 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://konulukonum.log101.dev' />
+    <meta property='og:url' content='https://konulu-konum.vercel.app' />
     <meta
       property='og:image'
-      content='https://konulukonum.log101.dev/konulu-konum-logo.jpg'
+      content='https://konulu-konum.vercel.app/konulu-konum-logo.jpg'
     />
     <meta name='twitter:card' content='summary' />
     <meta name='generator' content={Astro.generator} />

src/lib/db.ts

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

src/pages/index.astro

@@ -4,8 +4,6 @@ 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>
@@ -13,8 +11,6 @@ const backendUrl = import.meta.env.PUBLIC_BACKEND_URL
     <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
@@ -85,7 +81,6 @@ const backendUrl = import.meta.env.PUBLIC_BACKEND_URL
           </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,15 +144,11 @@ 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) {
+    if (leafletMap) leafletMap.dataset.targetLocation = data?.loc
-      leafletMap.dataset.targetLocation = data?.loc
-      leafletMap.dataset.targetRadius = data?.radius.toString() ?? "50"
-    }
 
     initMap()
 

src/scripts/index.ts

@@ -16,6 +16,7 @@ export function toggleMap() {
 }
 
 const handleSubmit = async (e: SubmitEvent) => {
+  e.preventDefault()
   toggleButton("submit-button", "submit-button-spinner")
   const locationSelected = document.getElementById(
     "geolocation-input"
@@ -40,14 +41,24 @@ 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, radius = 50) {
+function addTargetLocationMarker(target: TargetLocation) {
   if (target) {
     L.marker(target, { icon: targetLocationIcon }).addTo(map)
 
@@ -83,7 +83,7 @@ function addTargetLocationMarker(target: TargetLocation, radius = 50) {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
-      radius,
+      radius: 50,
     }).addTo(map)
   }
 }
@@ -100,7 +100,6 @@ export function initMap() {
   map = L.map("map")
 
   const targetLocation = mapEl?.dataset.targetLocation
-  const targetRadius = mapEl?.dataset.targetRadius
 
   const data = targetLocation ? JSON.parse(targetLocation) : null
 
@@ -114,7 +113,7 @@ export function initMap() {
       '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(map)
 
-  addTargetLocationMarker(TARGET_LOCATION, Number(targetRadius))
+  addTargetLocationMarker(TARGET_LOCATION)
   targetLocationControl.addTo(map)
   goToCurrentLocationControl.addTo(map)
 }

src/scripts/initSelectionMap.ts

@@ -21,8 +21,6 @@ let targetLocationMarker: L.Marker
 
 let targetLocationCircle: L.Circle
 
-let targetLocationCircleRadius = 50
-
 let currentLocationMarker: L.Marker
 
 map.on("locationerror", () =>
@@ -89,116 +87,12 @@ 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)
@@ -216,10 +110,8 @@ map.on("click", (e) => {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
-      radius: targetLocationCircleRadius,
+      radius: 50,
     }).addTo(map)
-
-    radiusControl.addTo(map)
   }
 
   const pos = targetLocationMarker.getLatLng()

src/scripts/lockedContent.ts

@@ -45,27 +45,13 @@ 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, radius),
+      (position) => locationSuccessCallback(position, TARGET_POSITION),
       errorCallback
     )
   }
@@ -79,10 +65,8 @@ navigator.permissions
     switch (permissionStatus.state) {
       case "granted":
         const TARGET_POSITION = getTargetPosition()
-        const radius = getRadius()
         watchId = window.navigator.geolocation.watchPosition(
-          (position) =>
+          (position) => locationSuccessCallback(position, TARGET_POSITION),
-            locationSuccessCallback(position, TARGET_POSITION, radius),
           errorCallback
         )
         break

src/styles/locked-page.css

@@ -11,19 +11,6 @@
   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);
 }