feat: add location map

package-lock.json

@@ -17,12 +17,15 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "geist": "^1.3.1",
+        "leaflet": "^1.9.4",
+        "leaflet-defaulticon-compatibility": "^0.1.2",
         "lucide-react": "^0.474.0",
         "make-plural": "^7.4.0",
         "negotiator": "^1.0.0",
         "next": "15.1.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-leaflet": "^5.0.0-rc.2",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -2127,25 +2130,25 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.5",
+      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
-      "integrity": "sha512-LaO3e5h/NOEL4OfXjxD43k9Dx+vn+8n+PCFt6uhX/BADFflllyv3WJG6rgvvSVBxpTch938Qq/LGc2MMxipXPw==",
+      "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
         "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
         "@radix-ui/react-focus-guards": "1.1.1",
-        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-portal": "1.1.4",
         "@radix-ui/react-presence": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
-        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-slot": "1.1.2",
         "@radix-ui/react-use-controllable-state": "1.1.0",
         "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.2"
+        "react-remove-scroll": "^2.6.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2163,14 +2166,14 @@
       }
     },
     "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.4",
+      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
-      "integrity": "sha512-XDUI0IVYVSwjMXxM6P4Dfti7AH+Y4oS/TB+sglZ/EXc7cqLwGAmp1NlMrcUjj7ks6R5WTZuWKv44FBbLpwU3sA==",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
         "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0",
         "@radix-ui/react-use-escape-keydown": "1.1.0"
       },
@@ -2205,13 +2208,13 @@
       }
     },
     "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.1.1",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
-      "integrity": "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==",
+      "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0"
       },
       "peerDependencies": {
@@ -2248,12 +2251,12 @@
       }
     },
     "node_modules/@radix-ui/react-portal": {
-      "version": "1.1.3",
+      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
-      "integrity": "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
@@ -2296,12 +2299,12 @@
       }
     },
     "node_modules/@radix-ui/react-primitive": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
-      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-slot": "1.1.1"
+        "@radix-ui/react-slot": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2319,9 +2322,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.1.1",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
-      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1"
@@ -2402,6 +2405,17 @@
         }
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.32.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.1.tgz",
@@ -6786,6 +6800,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet-defaulticon-compatibility": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.2.tgz",
+      "integrity": "sha512-IrKagWxkTwzxUkFIumy/Zmo3ksjuAu3zEadtOuJcKzuXaD76Gwvg2Z1mLyx7y52ykOzM8rAH5ChBs4DnfdGa6Q==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -8101,6 +8127,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",

package.json

@@ -22,12 +22,15 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "geist": "^1.3.1",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
     "lucide-react": "^0.474.0",
     "make-plural": "^7.4.0",
     "negotiator": "^1.0.0",
     "next": "15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0-rc.2",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/components/event-map.lazy.tsx

@@ -0,0 +1,29 @@
+import "leaflet/dist/leaflet.css"
+
+import "leaflet-defaulticon-compatibility"
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"
+
+import { Translations } from "@/i18n/translations"
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"
+
+
+export default function Map({ t }: {
+  t: Translations
+}) {
+  return (
+    <div className='h-screen max-h-[400px] pt-8 relative mx-auto max-w-3xl'>
+      {/* @ts-expect-error dragging IS a valid prop. */}
+      <MapContainer dragging={false} center={[51.105173, 17.087157]} zoom={40} scrollWheelZoom={false} className="h-full w-full">
+        {/* @ts-expect-error attribution IS a valid prop. */}
+        <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={[51.105173, 17.087157]}>
+          <Popup>
+            {t.where.location}
+          </Popup>
+        </Marker>
+      </MapContainer>
+    </div>
+  )
+}

src/components/landing-page.tsx

@@ -1,19 +1,26 @@
 "use client"
 
+import dynamic from 'next/dynamic';
+
+
+
 import { Nav } from "@/components/nav";
 import { Translations } from "@/i18n/translations";
 import { cn } from "@/lib/utils";
 import { ReactElement, useEffect, useRef } from "react";
 import { useTheme } from "./providers";
+import { Skeleton } from './ui/skeleton';
 
 function Section({
   id,
   title,
-  paragraphs
+  paragraphs,
+  after
 }: {
   id: string
   title: string;
   paragraphs: ReactElement;
+  after?: ReactElement;
 }) {
   return (<section id={id} className="bg-background">
     <div className="container mx-auto px-4">
@@ -21,6 +28,7 @@ function Section({
       <div className="text-lg text-muted-foreground max-w-3xl mx-auto whitespace-pre-line">
         {paragraphs}
       </div>
+      {after}
     </div>
   </section>)
 }
@@ -125,6 +133,12 @@ function Video({ sourceBase, hidden }: {
   );
 }
 
+
+const LazyLeafletMap = dynamic(() => import('./event-map.lazy'), {
+  ssr: false,
+  loading: () => <Skeleton className="mt-8 h-[368px] w-full" />
+})
+
 export default function LandingPage(
   { t }: { t: Translations }
 ) {
@@ -134,7 +148,7 @@ export default function LandingPage(
   return (
     <div>
       <Nav t={t} />
-      <main className="flex flex-col min-h-screen gap-16 pb-12">
+      <main className="flex flex-col min-h-screen grid-gap-10 gap-10 pb-12">
 
         <section id="hero" className="h-screen relative overflow-hidden dark:bg-black light:bg-white ">
           <div className="absolute inset-0 opacity-80">
@@ -151,7 +165,8 @@ export default function LandingPage(
         </section>
 
         <Section id="about" title={t.about.title} paragraphs={<p>{t.about.description}</p>} />
-        <Section id="where" title={t.where.title} paragraphs={<p>{t.where.location}</p>} />
+        <Section id="where" title={t.where.title} paragraphs={<p>{t.where.location}</p>} after={<LazyLeafletMap t={t} />} />
+
         <Section id="when" title={t.when.title} paragraphs={<>
           <p className="text-primary text-3xl font-[JGS7]">{t.when.date}</p>
           <p className="mt-4">{t.when.extra}</p></>}

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/globals.css

@@ -162,3 +162,8 @@
 .jgs7 {
   font-family: "JGS7" !important;
 }
+
+/* Fix for leaflet's weird z-index */
+.z-max {
+  z-index: 10000;
+}