Merge remote-tracking branch 'origin' into map-url

OpenBeta · Apr 26, 2024 · d4a712f · d4a712f
2 parents 335ef6a + 023b47d
commit d4a712f
Show file tree

Hide file tree

Showing 32 changed files with 982 additions and 321 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -722,6 +722,34 @@
         "code",
         "ideas"
       ]
+    },
+    {
+      "login": "melissapthai",
+      "name": "Melissa Thai",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3220734?v=4",
+      "profile": "https://github.com/melissapthai",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "d-k-lippert",
+      "name": "Dom Klip",
+      "avatar_url": "https://avatars.githubusercontent.com/u/51745385?v=4",
+      "profile": "https://github.com/d-k-lippert",
+      "contributions": [
+        "code",
+        "ideas"
+      ]
+    },
+    {
+      "login": "salgadopietrini",
+      "name": "Manuel Salgado",
+      "avatar_url": "https://avatars.githubusercontent.com/u/67206170?v=4",
+      "profile": "https://github.com/salgadopietrini",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

diff --git a/.env b/.env
@@ -32,6 +32,9 @@ NEXT_PUBLIC_TYPESENSE_API_KEY=nBvjNVojLn792SX9sOLhLlpQ7BQJo5ok
 # Mapbox Geocoder token
 NEXT_PUBLIC_MAPBOX_API_KEY=pk.eyJ1IjoibWFwcGFuZGFzIiwiYSI6ImNsZG1wcnBhZTA5eXozb3FnZTY1bHg4bHcifQ.7LJGRLFeLUbntAt5twiDiw
 
+# Maptiler API Key
+NEXT_PUBLIC_MAPTILER_API_KEY=ejjLkz58mUNz9TgNs0Ed
+
 # Discord invite
 NEXT_PUBLIC_DISCORD_INVITE=https://discord.gg/a6vuuTQxS8
 

diff --git a/README.md b/README.md
@@ -256,6 +256,11 @@ Thanks goes to these wonderful people:
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/heliodor"><img src="https://avatars.githubusercontent.com/u/395678?v=4?s=100" width="100px;" alt="Heliodor Jalba"/><br /><sub><b>Heliodor Jalba</b></sub></a><br /><a href="#ideas-heliodor" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/OpenBeta/open-tacos/issues?q=author%3Aheliodor" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/athuv"><img src="https://avatars.githubusercontent.com/u/21102277?v=4?s=100" width="100px;" alt="Ahamed Athhar"/><br /><sub><b>Ahamed Athhar</b></sub></a><br /><a href="https://github.com/OpenBeta/open-tacos/commits?author=athuv" title="Code">💻</a> <a href="#ideas-athuv" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/melissapthai"><img src="https://avatars.githubusercontent.com/u/3220734?v=4?s=100" width="100px;" alt="Melissa Thai"/><br /><sub><b>Melissa Thai</b></sub></a><br /><a href="https://github.com/OpenBeta/open-tacos/commits?author=melissapthai" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/d-k-lippert"><img src="https://avatars.githubusercontent.com/u/51745385?v=4?s=100" width="100px;" alt="Dom Klip"/><br /><sub><b>Dom Klip</b></sub></a><br /><a href="https://github.com/OpenBeta/open-tacos/commits?author=d-k-lippert" title="Code">💻</a> <a href="#ideas-d-k-lippert" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/salgadopietrini"><img src="https://avatars.githubusercontent.com/u/67206170?v=4?s=100" width="100px;" alt="Manuel Salgado"/><br /><sub><b>Manuel Salgado</b></sub></a><br /><a href="https://github.com/OpenBeta/open-tacos/commits?author=salgadopietrini" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "immer": "^10.0.2",
     "lexical": "^0.7.5",
     "mapbox-gl": "^2.7.0",
-    "maplibre-gl": "^4.0.2",
+    "maplibre-gl": "^4.1.1",
     "nanoid": "^4.0.0",
     "nanoid-dictionary": "^4.3.0",
     "next": "^13.5.6",

diff --git a/src/app/(default)/area/[[...slug]]/page.tsx b/src/app/(default)/area/[[...slug]]/page.tsx
@@ -18,6 +18,7 @@ import { SubAreasSection } from './sections/SubAreasSection'
 import { ClimbListSection } from './sections/ClimbListSection'
 import { CLIENT_CONFIG } from '@/js/configs/clientConfig'
 import { PageBanner as LCOBanner } from '@/components/lco/PageBanner'
+import { AuthorMetadata, OrganizationType } from '@/js/types'
 /**
  * Page cache settings
  */
@@ -37,7 +38,7 @@ export interface PageWithCatchAllUuidProps {
 export default async function Page ({ params }: PageWithCatchAllUuidProps): Promise<any> {
   const areaUuid = parseUuidAsFirstParam({ params })
   const pageData = await getArea(areaUuid)
-  if (pageData == null) {
+  if (pageData == null || pageData.area == null) {
     notFound()
   }
 
@@ -77,55 +78,13 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
           area={area}
         />
       }
+      summary={{
+        left: <AreaData areaName={areaName} lat={lat} lng={lng} authorMetadata={authorMetadata} />,
+        right: (
+          <DescriptionSection uuid={uuid} description={description} organizations={organizations} />
+        )
+      }}
     >
-      <div className='area-climb-page-summary'>
-        <div className='area-climb-page-summary-left'>
-          <h1>{areaName}</h1>
-
-          <div className='mt-6 flex flex-col text-xs text-secondary border-t border-b divide-y'>
-            <a
-              href={getMapHref({
-                lat,
-                lng
-              })}
-              target='blank'
-              className='flex items-center gap-2 py-3'
-            >
-              <MapPinLine size={20} />
-              <span className='mt-0.5'>
-                <b>LAT,LNG</b>&nbsp;
-                <span className='link-dotted'>
-                  {lat.toFixed(5)}, {lng.toFixed(5)}
-                </span>
-              </span>
-            </a>
-            <ArticleLastUpdate {...authorMetadata} />
-          </div>
-        </div>
-
-        <div className='area-climb-page-summary-right'>
-          <div className='flex items-center gap-2'>
-            <h3 className='font-bold'>Description</h3>
-            <span className='text-xs inline-block align-baseline'>
-              [
-              <Link
-                href={`/editArea/${uuid}/general#description`}
-                target='_new'
-                className='hover:underline'
-              >
-                Edit
-              </Link>]
-            </span>
-          </div>
-          {(description == null || description.trim() === '') && <EditDescriptionCTA uuid={uuid} />}
-          <Markdown className='wiki-content'>{description}</Markdown>
-
-          <hr className='border-1 mt-8 mb-4' />
-
-          <LCOBanner orgs={organizations} />
-        </div>
-      </div>
-
       <hr className='border-1 my-8' />
 
       {/* An area can only have either subareas or climbs, but not both. */}
@@ -141,7 +100,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
  * Extract and validate uuid as the first param in a catch-all route
  */
 const parseUuidAsFirstParam = ({ params }: PageWithCatchAllUuidProps): string => {
-  if (params.slug.length === 0) {
+  if (params.slug == null || params.slug?.length === 0) {
     notFound()
   }
 
@@ -164,6 +123,65 @@ const EditDescriptionCTA: React.FC<{ uuid: string }> = ({ uuid }) => (
   </div>
 )
 
+const DescriptionSection: React.FC<{ uuid: string, description: string, organizations: OrganizationType[] }> = ({
+  uuid, description, organizations
+}) => {
+  return (
+    <>
+      <div className='flex items-center gap-2'>
+        <h3 className='font-bold'>Description</h3>
+        <span className='text-xs inline-block align-baseline'>
+          [
+          <Link
+            href={`/editArea/${uuid}/general#description`}
+            target='_new'
+            className='hover:underline'
+          >
+            Edit
+          </Link>
+          ]
+        </span>
+      </div>
+      {(description == null || description.trim() === '') && <EditDescriptionCTA uuid={uuid} />}
+      <Markdown className='wiki-content'>{description}</Markdown>
+
+      <hr className='border-1 mt-8 mb-4' />
+
+      <LCOBanner orgs={organizations} />
+    </>
+  )
+}
+
+const AreaData: React.FC<{ areaName: string, lat: number, lng: number, authorMetadata: AuthorMetadata }> = ({
+  areaName, lat, lng, authorMetadata
+}) => {
+  return (
+    <>
+      <h1>{areaName}</h1>
+
+      <div className='mt-6 flex flex-col text-xs text-secondary border-t border-b divide-y'>
+        <a
+          href={getMapHref({
+            lat,
+            lng
+          })}
+          target='blank'
+          className='flex items-center gap-2 py-3'
+        >
+          <MapPinLine size={20} />
+          <span className='mt-0.5'>
+            <b>LAT,LNG</b>&nbsp;
+            <span className='link-dotted'>
+              {lat.toFixed(5)}, {lng.toFixed(5)}
+            </span>
+          </span>
+        </a>
+        <ArticleLastUpdate {...authorMetadata} />
+      </div>
+    </>
+  )
+}
+
 /**
  * List of area pages to prebuild
  */
@@ -188,8 +206,13 @@ export function generateStaticParams (): PageSlugType[] {
 // Page metadata
 export async function generateMetadata ({ params }: PageWithCatchAllUuidProps): Promise<Metadata> {
   const areaUuid = parseUuidAsFirstParam({ params })
+  const area = await getArea(areaUuid, 'cache-first')
+
+  if (area == null || area.area == null) {
+    return {}
+  }
 
-  const { area: { uuid, areaName, pathTokens, media } } = await getArea(areaUuid, 'cache-first')
+  const { area: { uuid, areaName, pathTokens, media } } = area
 
   let wall = ''
   if (pathTokens.length >= 2) {

diff --git a/src/app/(default)/components/DesktopHeader.tsx b/src/app/(default)/components/DesktopHeader.tsx
@@ -74,7 +74,7 @@ export const DesktopHeader: React.FC = () => {
       <div className='flex items-center gap-6'><Logo />
         <XSearchMinimal />
       </div>
-      <div className='menu menu-horizontal rounded-box gap-2'>{nav}</div>
+      <div className='menu menu-horizontal rounded-box gap-2 px-0'>{nav}</div>
     </header>
   )
 }
diff --git a/src/app/(default)/components/LandingHero.tsx b/src/app/(default)/components/LandingHero.tsx
@@ -15,7 +15,7 @@ export const LandingHero: React.FC = () => {
 }
 
 export const HeroAlert: React.FC = () => (
-  <div className='mt-2 alert alert-warning'>
+  <div className='alert alert-warning'>
     <span className='badge badge-sm badge-primary'>NEW</span>
     <a href='/maps' className='underline flex items-center gap-1 text-sm'>Crag maps<ArrowRight size={20} /></a>
   </div>)
diff --git a/src/app/(default)/components/recent/MapboxLayers.tsx b/src/app/(default)/components/recent/MapboxLayers.tsx
@@ -15,10 +15,10 @@ export const labelLayer: LayerProps = {
     'icon-image': 'circle'
   },
   paint: {
-    'text-halo-blur': 4,
-    'text-halo-width': 1,
-    'text-color': '#ffffff',
-    'text-halo-color': '#262626'
+    'text-halo-blur': 1,
+    'text-halo-width': 2,
+    'text-color': '#000000',
+    'text-halo-color': '#ebeced'
   }
 }
 
@@ -28,7 +28,7 @@ export const clusterLayer: LayerProps = {
   source: 'areas',
   filter: ['has', 'point_count'],
   paint: {
-    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 5, '#f1f075', 50, '#f28cb1'],
+    'circle-color': '#51bbd6',
     'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40]
   }
 }

diff --git a/src/app/(default)/components/recent/RecentContributionsMap.tsx b/src/app/(default)/components/recent/RecentContributionsMap.tsx
@@ -1,14 +1,12 @@
 'use client'
 import { useRef, useState } from 'react'
-import { Map, NavigationControl, FullscreenControl, MapRef, GeoJSONSource, LngLat, Marker } from 'react-map-gl'
-import 'mapbox-gl/dist/mapbox-gl.css'
+import { Map, NavigationControl, FullscreenControl, MapRef, GeoJSONSource, LngLat, Marker } from 'react-map-gl/maplibre'
 import { point, featureCollection } from '@turf/helpers'
 import bboxFn from '@turf/bbox'
 import { BBox2d, Point, Feature } from '@turf/helpers/dist/js/lib/geojson'
-import mapboxgl from 'mapbox-gl'
 
 import { ChangesetType, ClimbType, AreaType } from '@/js/types'
-import { MAP_STYLES } from '@/components/maps/BaseMap'
+import { MAP_STYLES } from '@/components/maps/MapSelector'
 import { RecentEditsLayer, clusterLayer, UnclusteredSource, labelLayer } from './MapboxLayers'
 import { ChangesetCard } from '@/components/edit/RecentChangeHistory'
 
@@ -54,7 +52,7 @@ export const RecentContributionsMap: React.FC<{ history: ChangesetType[] }> = ({
   /**
    * On click handler.  Zoom in on cluster or show popup.
    */
-  const onClick = (event: mapboxgl.MapLayerMouseEvent): void => {
+  const onClick = async (event: maplibregl.MapLayerMouseEvent): Promise<void> => {
     if (mapRef.current == null) return
     const feature = event?.features?.[0]
 
@@ -73,16 +71,12 @@ export const RecentContributionsMap: React.FC<{ history: ChangesetType[] }> = ({
 
     const mapboxSource = mapRef?.current?.getSource('areas') as GeoJSONSource
 
-    mapboxSource.getClusterExpansionZoom(clusterId, (err, zoom) => {
-      if (err != null) {
-        return
-      }
+    const zoom = await mapboxSource.getClusterExpansionZoom(clusterId)
 
-      mapRef?.current?.flyTo({
-        center: (feature.geometry as Point).coordinates as [number, number],
-        zoom,
-        duration: 2000
-      })
+    mapRef?.current?.easeTo({
+      center: (feature.geometry as Point).coordinates as [number, number],
+      zoom,
+      duration: 800
     })
   }
 
@@ -93,12 +87,11 @@ export const RecentContributionsMap: React.FC<{ history: ChangesetType[] }> = ({
     <div className='relative w-full h-full'>
       <Map
         reuseMaps
-        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_KEY}
-        mapStyle={MAP_STYLES.dark}
+        mapStyle={MAP_STYLES.standard.style}
         cooperativeGestures
         {...clickableLayer1 != null && clickableLayer2 != null &&
         { interactiveLayerIds: [clickableLayer2, clickableLayer1] }}
-        onClick={onClick}
+        onClick={(e) => { void onClick(e) }}
         ref={mapRef}
         initialViewState={{
           bounds: bbox,

diff --git a/src/app/(default)/components/ui/AreaPageContainer.tsx b/src/app/(default)/components/ui/AreaPageContainer.tsx
@@ -2,6 +2,7 @@ import { GallerySkeleton } from '@/components/media/PhotoMontage'
 import React from 'react'
 import { AreaPageActionsSkeleton } from '../AreaPageActions'
 import { HeroAlert } from '../LandingHero'
+import { Summary } from './Summary'
 
 /**
  * Area page containter.  Show loading skeleton if no params are provided.
@@ -11,19 +12,21 @@ export const AreaPageContainer: React.FC<{
   pageActions?: React.ReactNode
   breadcrumbs?: React.ReactNode
   map?: React.ReactNode
+  summary?: { left: React.ReactNode, right: React.ReactNode }
   children?: React.ReactNode
-}> = ({ photoGallery, pageActions, breadcrumbs, map, children }) => {
+}> = ({ photoGallery, pageActions, breadcrumbs, map, summary, children }) => {
   return (
     <article>
-      <div className='px-4 mb-2'>
+      <div className='default-page-margins my-2'>
         <HeroAlert />
       </div>
-      <div className='px-4 mx-auto max-w-5xl xl:max-w-7xl'>
+      <div className='default-page-margins'>
         {photoGallery == null ? <GallerySkeleton /> : photoGallery}
         <div className='flex justify-end py-4 border-b'>
           {pageActions == null ? <AreaPageActionsSkeleton /> : pageActions}
         </div>
         {breadcrumbs == null ? <BreadCrumbsSkeleton /> : breadcrumbs}
+        {summary != null && <Summary columns={summary} />}
         {children == null ? <ContentSkeleton /> : children}
       </div>
       <div id='map' className='w-full mt-16 relative h-[90vh] border-t'>

diff --git a/src/app/(default)/components/ui/Summary.tsx b/src/app/(default)/components/ui/Summary.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+interface Props {
+  columns: {
+    left: ReactNode
+    right?: ReactNode
+  }
+}
+
+export const Summary: React.FC<Props> = ({ columns: { left, right } }) => (
+  <div className='area-summary'>
+    <div className='area-summary-left'>{left}</div>
+    {right != null ? <div className='area-summary-right'>{right}</div> : null}
+  </div>
+)