v1.3.2: SEO fixes + map bugfixes
SEO: - Landing page converted to Server Component (SSR) - Extracted NavAuthButtons + ContactForm as client islands - Removed fake aggregateRating from JSON-LD - Added FAQPage JSON-LD schema (7 questions) - Extended sitemap: /datenschutz, /spenden, /demo Map fixes: - WebGL context lost recovery (black tiles after inactivity) - Page visibility handler for tile reload on tab switch - Arrow direction: geographic bearing instead of screen angle - All markers rotationAlignment viewport->map (geographic orientation) - DEL key now deletes selected lines/polygons/arrows (not just symbols) - Default drawing color: black
This commit is contained in:
Pepe Ziberi
105
src/components/landing/contact-form.tsx
Normal file
105
src/components/landing/contact-form.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Loader2, Send, Check } from 'lucide-react'
|
||||
|
||||
export function ContactForm() {
|
||||
const [name, setName] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [message, setMessage] = useState('')
|
||||
const [sending, setSending] = useState(false)
|
||||
const [sent, setSent] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSending(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, email, message }),
|
||||
})
|
||||
if (res.ok) {
|
||||
setSent(true)
|
||||
setName('')
|
||||
setEmail('')
|
||||
setMessage('')
|
||||
} else {
|
||||
const data = await res.json()
|
||||
setError(data.error || 'Senden fehlgeschlagen')
|
||||
}
|
||||
} catch {
|
||||
setError('Verbindung fehlgeschlagen')
|
||||
} finally {
|
||||
setSending(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (sent) {
|
||||
return (
|
||||
<div className="text-center bg-green-50 border border-green-200 rounded-xl p-8">
|
||||
<Check className="w-10 h-10 text-green-600 mx-auto mb-3" />
|
||||
<h3 className="font-semibold text-green-900 text-lg">Nachricht gesendet!</h3>
|
||||
<p className="text-green-700 mt-2">Vielen Dank! Ich melde mich so schnell wie möglich.</p>
|
||||
<Button variant="outline" className="mt-4" onClick={() => setSent(false)}>
|
||||
Weitere Nachricht senden
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
required
|
||||
placeholder="Dein Name"
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
placeholder="name@feuerwehr.ch"
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Nachricht</label>
|
||||
<textarea
|
||||
value={message}
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
required
|
||||
rows={5}
|
||||
placeholder="Deine Nachricht..."
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none"
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
disabled={sending || !name || !email || !message}
|
||||
>
|
||||
{sending ? (
|
||||
<><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Wird gesendet...</>
|
||||
) : (
|
||||
<><Send className="w-4 h-4 mr-2" /> Nachricht senden</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
36
src/components/landing/nav-auth-buttons.tsx
Normal file
36
src/components/landing/nav-auth-buttons.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useAuth } from '@/components/providers/auth-provider'
|
||||
|
||||
export function NavAuthButtons() {
|
||||
const { user, loading } = useAuth()
|
||||
|
||||
if (loading) {
|
||||
return <div className="w-24 h-9" /> // placeholder to avoid layout shift
|
||||
}
|
||||
|
||||
if (user) {
|
||||
return (
|
||||
<Link href="/app">
|
||||
<Button size="sm" className="bg-red-600 hover:bg-red-700">
|
||||
Zur App
|
||||
</Button>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link href="/login">
|
||||
<Button variant="ghost" size="sm">Anmelden</Button>
|
||||
</Link>
|
||||
<Link href="/register">
|
||||
<Button size="sm" className="bg-red-600 hover:bg-red-700">
|
||||
Kostenlos starten
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -728,6 +728,46 @@ export function MapView({
|
||||
// Expose map instance to parent for export
|
||||
if (externalMapRef) externalMapRef.current = map.current
|
||||
|
||||
// --- WebGL context loss recovery ---
|
||||
// When the browser reclaims GPU memory (background tab, memory pressure),
|
||||
// the WebGL context is lost and tiles go black. This recovers automatically.
|
||||
const canvas = map.current.getCanvas()
|
||||
canvas.addEventListener('webglcontextlost', (e) => {
|
||||
console.warn('[Map] WebGL context lost — will restore when possible')
|
||||
e.preventDefault() // allows context to be restored
|
||||
})
|
||||
canvas.addEventListener('webglcontextrestored', () => {
|
||||
console.info('[Map] WebGL context restored — reloading map style')
|
||||
const m = map.current
|
||||
if (m) {
|
||||
// Force full tile reload by re-setting the style
|
||||
const style = m.getStyle()
|
||||
if (style) {
|
||||
m.setStyle(style)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// --- Page visibility recovery ---
|
||||
// When user switches back to this tab after a while, tiles may be stale/black.
|
||||
// Force a resize + tile re-request on visibility change.
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.visibilityState === 'visible' && map.current) {
|
||||
// Small delay to let browser finish tab switch
|
||||
setTimeout(() => {
|
||||
if (!map.current) return
|
||||
map.current.resize()
|
||||
// Nudge the map to force tile re-requests
|
||||
const center = map.current.getCenter()
|
||||
map.current.setCenter(center)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange)
|
||||
|
||||
// Store cleanup reference
|
||||
const cleanupVisibility = () => document.removeEventListener('visibilitychange', handleVisibilityChange)
|
||||
|
||||
map.current.addControl(new maplibregl.NavigationControl(), 'bottom-right')
|
||||
map.current.addControl(new maplibregl.ScaleControl(), 'bottom-left')
|
||||
|
||||
@@ -1286,6 +1326,7 @@ export function MapView({
|
||||
})
|
||||
|
||||
return () => {
|
||||
cleanupVisibility()
|
||||
map.current?.remove()
|
||||
map.current = null
|
||||
}
|
||||
@@ -1421,26 +1462,27 @@ export function MapView({
|
||||
const lineCoords = f.geometry.coordinates as number[][]
|
||||
if (lineCoords.length < 2) return
|
||||
|
||||
// Get last two points to calculate arrow direction using screen-projected coords
|
||||
// Geographic bearing from p1 to p2 (works for short distances)
|
||||
const p1 = lineCoords[lineCoords.length - 2]
|
||||
const p2 = lineCoords[lineCoords.length - 1]
|
||||
const px1 = map.current.project(p1 as [number, number])
|
||||
const px2 = map.current.project(p2 as [number, number])
|
||||
const screenAngle = Math.atan2(px2.y - px1.y, px2.x - px1.x) * (180 / Math.PI) + 90
|
||||
const dLng = p2[0] - p1[0]
|
||||
const dLat = p2[1] - p1[1]
|
||||
// atan2(dLng, dLat) gives angle from north (up), clockwise — matches CSS triangle ▲ default
|
||||
const geoBearing = Math.atan2(dLng, dLat) * (180 / Math.PI)
|
||||
|
||||
const color = (f.properties.color as string) || '#000000'
|
||||
const arrowEl = document.createElement('div')
|
||||
arrowEl.style.cssText = `
|
||||
width: 0; height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid ${color};
|
||||
transform: rotate(${screenAngle}deg);
|
||||
border-left: 12px solid transparent;
|
||||
border-right: 12px solid transparent;
|
||||
border-bottom: 24px solid ${color};
|
||||
transform: rotate(${geoBearing}deg);
|
||||
transform-origin: center center;
|
||||
pointer-events: none;
|
||||
`
|
||||
|
||||
const marker = new maplibregl.Marker({ element: arrowEl, anchor: 'center', rotationAlignment: 'viewport' })
|
||||
const marker = new maplibregl.Marker({ element: arrowEl, anchor: 'center', rotationAlignment: 'map' })
|
||||
.setLngLat(p2 as [number, number])
|
||||
.addTo(map.current)
|
||||
markersRef.current.push(marker)
|
||||
@@ -1545,7 +1587,7 @@ export function MapView({
|
||||
})
|
||||
}
|
||||
|
||||
const marker = new maplibregl.Marker({ element: el, anchor: 'center', draggable: canEdit, rotationAlignment: 'viewport' })
|
||||
const marker = new maplibregl.Marker({ element: el, anchor: 'center', draggable: canEdit, rotationAlignment: 'map' })
|
||||
.setLngLat(midpoint)
|
||||
.addTo(map.current)
|
||||
|
||||
@@ -1664,7 +1706,7 @@ export function MapView({
|
||||
}
|
||||
|
||||
try {
|
||||
const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center', rotationAlignment: 'viewport' })
|
||||
const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center', rotationAlignment: 'map' })
|
||||
.setLngLat(coords)
|
||||
.addTo(map.current)
|
||||
|
||||
@@ -1730,7 +1772,7 @@ export function MapView({
|
||||
el.textContent = (f.properties.text as string) || ''
|
||||
wrapper.appendChild(el)
|
||||
|
||||
const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center', rotationAlignment: 'viewport' })
|
||||
const marker = new maplibregl.Marker({ element: wrapper, draggable: canEdit, anchor: 'center', rotationAlignment: 'map' })
|
||||
.setLngLat(coords)
|
||||
.addTo(map.current)
|
||||
|
||||
@@ -1892,18 +1934,27 @@ export function MapView({
|
||||
}
|
||||
}, [drawMode, deselectSymbol])
|
||||
|
||||
// ESC to cancel drawing, DEL to delete selected symbol
|
||||
// ESC to cancel drawing, DEL to delete selected symbol/line/polygon
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// DEL / Backspace → delete selected symbol
|
||||
// DEL / Backspace → delete selected symbol or line/polygon
|
||||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
const tag = (e.target as HTMLElement)?.tagName
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (e.target as HTMLElement)?.isContentEditable) return
|
||||
// Delete selected symbol/text
|
||||
if (selectedSymbolRef.current) {
|
||||
e.preventDefault()
|
||||
deleteSelectedSymbol()
|
||||
return
|
||||
}
|
||||
// Delete selected line/polygon/arrow (vertex-editing selection)
|
||||
if (selectedLineIdRef.current) {
|
||||
e.preventDefault()
|
||||
const updated = featuresRef.current.filter(f => f.id !== selectedLineIdRef.current)
|
||||
onFeaturesChangeRef.current(updated)
|
||||
showVertexMarkersRef.current(null)
|
||||
return
|
||||
}
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
// In measure mode: finalize (keep line + labels), just stop adding
|
||||
|
||||
Reference in New Issue
Block a user