feat: replace dynamic page with a static page

astro.config.mjs

@@ -9,8 +9,5 @@ export default defineConfig({
   integrations: [react(), tailwind({
     applyBaseStyles: false
   })],
-  output: "server",
+  output: "static"
-  adapter: node({
-    mode: "standalone"
-  }),
 });

src/components/LockedContent/geolocation.ts

@@ -61,7 +61,7 @@ function locationSuccessCallback(
     updateText("locked-content-description", `Kalan mesafe: ${distanceText}`)
   }
 
-  removeElement("location-permission-button")
+  removeElement("location-permission-button", true)
 
   // Update leaflet controls
   mapLocationSuccessCallback(position)

src/pages/index.astro

@@ -1,6 +1,4 @@
 ---
-export const prerender = true
-
 import "@/styles/globals.css"
 import "../styles/locked-page.css"
 

src/pages/x/index.astro

@@ -1,12 +1,12 @@
 ---
 // Styles
 import "@/styles/globals.css"
-import "../styles/locked-page.css"
+import "@/styles/locked-page.css"
-import "../styles/locked-content.css"
+import "@/styles/locked-content.css"
 
 // Components
-import Layout from "../layouts/Layout.astro"
+import Layout from "@/layouts/Layout.astro"
-import ShareButton from "../components/ShareButton"
+import ShareButton from "@/components/ShareButton"
 import {
   Card,
   CardContent,
@@ -15,26 +15,6 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { CalendarIcon } from "@radix-ui/react-icons"
-import type { ContentTable } from "@/lib/db"
-
-// Dayjs
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
-import utc from "dayjs/plugin/utc"
-
-type Content = ContentTable
-
-const { id } = Astro.params
-
-const res = await fetch(`http://localhost:3000/api/location/${id}`)
-
-const data: Content | null = res.status === 200 ? await res.json() : null
-
-dayjs.extend(relativeTime)
-
-dayjs.extend(utc)
-
-const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc())
 ---
 
 <Layout>
@@ -52,25 +32,24 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc())
 
     <Card className='w-full'>
       <CardHeader>
-        <CardTitle className='text-2xl'>{data?.author}</CardTitle>
+        <CardTitle className='text-2xl' id='card-title' />
       </CardHeader>
       <CardContent className='text-xl'>
-        <p>{data?.description}</p>
+        <p id='card-description'></p>
       </CardContent>
       <CardFooter className='gap-2 text-lg'>
         <CalendarIcon />
-        <p>{dateFromNow}</p>
+        <p id='card-footer'></p>
       </CardFooter>
     </Card>
 
     <div
       id='locked-content-container'
-      data-target-position={data?.loc}
       class='w-full h-[475px] overflow-hidden border border-zinc-200 shadow-sm p-4 rounded'>
       <div class='flex flex-col justify-center items-center image-wrapper'>
         <img
           id='content'
-          src={`http://localhost:3000/images/${data?.blob_url}`}
+          src='#'
           class='h-[450px] blur-2xl transition-all duration-1000'
         />
         <div
@@ -121,19 +100,64 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc())
       </div>
     </div>
 
-    <div
+    <div id='map' class='w-full h-[450px] rounded'></div>
-      id='map'
-      class='w-full h-[450px] rounded'
-      data-target-location={data?.loc}>
-    </div>
-
     <ShareButton client:only />
     <div class='flex justify-center'>
       <p class='text-muted-foreground'>
-        Fotoğrafın kilidi şu ana dek <b>{data?.unlocked_counter}</b> kez açıldı
+        Fotoğrafın kilidi şu ana dek <b id='counter'></b> kez açıldı
       </p>
     </div>
   </main>
-  <script src='../scripts/initMap.ts'></script>
+  <script>
-  <script src='../scripts/lockedContent.ts'></script>
+    import type { ContentTable } from "@/lib/db"
+    import { updateText } from "@/lib/domUtils"
+
+    // Dayjs
+    import dayjs from "dayjs"
+    import relativeTime from "dayjs/plugin/relativeTime"
+    import utc from "dayjs/plugin/utc"
+
+    // Map
+    import { initMap } from "@/scripts/initMap"
+
+    const url = new URL(document.URL).searchParams
+    const id = url.get("id")
+
+    type Content = ContentTable
+
+    const res = await fetch(`http://localhost:3000/api/location/${id}`)
+
+    const data: Content | null = res.status === 200 ? await res.json() : null
+
+    dayjs.extend(relativeTime)
+
+    dayjs.extend(utc)
+
+    const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc())
+
+    updateText("card-title", data?.author ?? "")
+    updateText("card-description", data?.description ?? "")
+    updateText("card-footer", dateFromNow)
+
+    const lockedContentContainer = document.getElementById(
+      "locked-content-container"
+    )
+    if (lockedContentContainer)
+      lockedContentContainer.dataset.targetPosition = data?.loc
+
+    const leafletMap = document.getElementById("map")
+    if (leafletMap) leafletMap.dataset.targetLocation = data?.loc
+
+    initMap()
+
+    const content = document.getElementById(
+      "content"
+    ) as HTMLImageElement | null
+    if (content) content.src = `http://localhost:3000/images/${data?.blob_url}`
+
+    const counter = document.getElementById("counter")
+    if (counter) counter.innerText = data?.unlocked_counter.toString() ?? ""
+  </script>
+  <script src='@/scripts/initMap.ts'></script>
+  <script src='@/scripts/lockedContent.ts'></script>
 </Layout>

src/scripts/index.ts

@@ -52,7 +52,7 @@ const handleSubmit = async (e: SubmitEvent) => {
   if (res.status === 200) {
     const data = await res.json()
 
-    if (data.url) location.assign("/" + data.url)
+    if (data.url) location.assign(`/x?id="${data.url}"`)
   } else {
     toast("Konulu konum oluşturulamadı, lütfen tekrar deneyin.")
   }

src/scripts/initMap.ts

@@ -5,25 +5,10 @@ import {
 import { toast } from "@/lib/utils"
 import L from "leaflet"
 
-type TargetLocation = [lat: number, lng: number] | null
+var map: L.Map
-
 const mapEl = document.getElementById("map")
 
-const targetLocation = mapEl?.dataset.targetLocation
+type TargetLocation = [lat: number, lng: number] | null
-
-const data = targetLocation ? JSON.parse(targetLocation) : null
-
-const TARGET_LOCATION = data as TargetLocation
-
-var map = L.map("map")
-
-if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 13)
-
-L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-  maxZoom: 19,
-  attribution:
-    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-}).addTo(map)
 
 let currentLocationMarker: L.Marker
 
@@ -74,7 +59,8 @@ const GoToTargetLocation = L.Control.extend({
     locationButton.classList.add("custom-map-control-button")
 
     locationButton.addEventListener("click", () => {
-      if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 12)
+      const targetLocation = getTargetLocation()
+      if (targetLocation) map.setView(targetLocation, 12)
     })
 
     return locationButton
@@ -102,6 +88,32 @@ function addTargetLocationMarker(target: TargetLocation) {
   }
 }
 
-addTargetLocationMarker(TARGET_LOCATION)
+function getTargetLocation(): TargetLocation | null {
-targetLocationControl.addTo(map)
+  const targetLocation = mapEl?.dataset.targetLocation
-goToCurrentLocationControl.addTo(map)
+
+  const data = targetLocation ? JSON.parse(targetLocation) : null
+
+  return data
+}
+
+export function initMap() {
+  map = L.map("map")
+
+  const targetLocation = mapEl?.dataset.targetLocation
+
+  const data = targetLocation ? JSON.parse(targetLocation) : null
+
+  const TARGET_LOCATION = data as TargetLocation
+
+  if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 13)
+
+  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 19,
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(map)
+
+  addTargetLocationMarker(TARGET_LOCATION)
+  targetLocationControl.addTo(map)
+  goToCurrentLocationControl.addTo(map)
+}

src/scripts/lockedContent.ts

@@ -29,15 +29,26 @@ locationPermissionButton.addEventListener("click", startWatchingLocation)
 
 lockedContentContainer.addEventListener("askpermission", startWatchingLocation)
 
-const targetPositionString = lockedContentContainer.dataset.targetPosition
+// Get target position from container's dataset
+function getTargetPosition() {
+  const lockedContentContainer = document.getElementById(
+    "locked-content-container"
+  )
 
-// TARGET_POSITION is required to calculate distance
+  const targetPositionString = lockedContentContainer?.dataset.targetPosition
-if (!targetPositionString) throw new Error("Target position is not provided!")
 
-const TARGET_POSITION = JSON.parse(targetPositionString) as LatLngTuple
+  // TARGET_POSITION is required to calculate distance
+  if (!targetPositionString) throw new Error("Target position is not provided!")
+
+  const data = JSON.parse(targetPositionString) as LatLngTuple
+
+  return data
+}
 
 // Call Geolocation API to start watching user location
 function startWatchingLocation() {
+  const TARGET_POSITION = getTargetPosition()
+
   if (!watchId) {
     watchId = window.navigator.geolocation.watchPosition(
       (position) => locationSuccessCallback(position, TARGET_POSITION),
@@ -53,6 +64,7 @@ navigator.permissions
   .then((permissionStatus) => {
     switch (permissionStatus.state) {
       case "granted":
+        const TARGET_POSITION = getTargetPosition()
         watchId = window.navigator.geolocation.watchPosition(
           (position) => locationSuccessCallback(position, TARGET_POSITION),
           errorCallback