feat: replace dynamic page with a static page

This commit is contained in:
log101 2024-07-29 18:23:47 +03:00
parent 466c4eb51d
commit 892b719222
7 changed files with 114 additions and 71 deletions

View File

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

View File

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

View File

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

View File

@ -1,12 +1,12 @@
---
// Styles
import "@/styles/globals.css"
import "../styles/locked-page.css"
import "../styles/locked-content.css"
import "@/styles/locked-page.css"
import "@/styles/locked-content.css"
// Components
import Layout from "../layouts/Layout.astro"
import ShareButton from "../components/ShareButton"
import Layout from "@/layouts/Layout.astro"
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
id='map'
class='w-full h-[450px] rounded'
data-target-location={data?.loc}>
</div>
<div id='map' class='w-full h-[450px] rounded'></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 src='../scripts/lockedContent.ts'></script>
<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>

View File

@ -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.")
}

View File

@ -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
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)
type TargetLocation = [lat: number, lng: number] | null
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)
targetLocationControl.addTo(map)
goToCurrentLocationControl.addTo(map)
function getTargetLocation(): TargetLocation | null {
const targetLocation = mapEl?.dataset.targetLocation
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)
}

View File

@ -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
if (!targetPositionString) throw new Error("Target position is not provided!")
const targetPositionString = lockedContentContainer?.dataset.targetPosition
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