add back area map

render description markdown
OpenBeta · Nov 26, 2023 · 6fb2505 · 6fb2505
1 parent 6dbb1f7
commit 6fb2505
Show file tree

Hide file tree

Showing 9 changed files with 545 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "react-hotkeys-hook": "^3.4.7",
     "react-infinite-scroll-component": "^6.1.0",
     "react-map-gl": "^7.0.10",
+    "react-markdown": "^9.0.1",
     "react-paginate": "^8.1.3",
     "react-responsive": "^9.0.0-beta.6",
     "react-swipeable": "^7.0.0",

diff --git a/src/app/area/[...slug]/page.tsx b/src/app/area/[...slug]/page.tsx
@@ -1,13 +1,18 @@
 import { notFound, redirect } from 'next/navigation'
 import slugify from 'slugify'
 import { validate } from 'uuid'
+import { MapPinLine } from '@phosphor-icons/react/dist/ssr'
+import 'mapbox-gl/dist/mapbox-gl.css'
+import Markdown from 'react-markdown'
 
 import PhotoMontage from '@/components/media/PhotoMontage'
 import { getArea } from '@/js/graphql/getArea'
 import { StickyHeaderContainer } from '@/app/components/ui/StickyHeaderContainer'
-
-import BreadCrumbs from '@/components/ui/BreadCrumbs'
-
+import { GluttenFreeCrumbs } from '@/components/ui/BreadCrumbs'
+import { ArticleLastUpdate } from '@/components/edit/ArticleLastUpdate'
+import { getMapHref } from '@/js/utils'
+import AreaMap from '@/components/area/areaMap'
+import { PageContainer } from '@/app/components/ui/PageContainer'
 /**
  * Cache duration in seconds
  */
@@ -31,8 +36,9 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
   const { area } = pageData
 
   const photoList = area?.media ?? []
-  const { uuid, pathTokens, ancestors, areaName, content } = area
+  const { uuid, pathTokens, ancestors, areaName, content, authorMetadata, metadata } = area
   const { description } = content
+  const { lat, lng } = metadata
 
   const friendlySlug = slugify(areaName, { lower: true, strict: true }).substring(0, 50)
 
@@ -41,47 +47,53 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
   }
 
   return (
-    <article className='p-4  mx-auto max-w-5xl xl:max-w-7xl'>
+    <PageContainer
+      map={
+        <AreaMap
+          focused={null}
+          selected={area.id}
+          subAreas={area.children}
+          area={area}
+        />
+      }
+    >
       <PhotoMontage isHero photoList={photoList} />
 
       <StickyHeaderContainer>
-        <BreadCrumbs pathTokens={pathTokens} ancestors={ancestors} />
+        <GluttenFreeCrumbs pathTokens={pathTokens} ancestors={ancestors} />
       </StickyHeaderContainer>
 
       <div className='area-climb-page-summary'>
         <div className='area-climb-page-summary-left'>
-          <h3>{areaName}</h3>
-
-          {/* {
-                    latlngPair != null && (
-                      <div className='flex flex-col text-xs text-base-300 border-t border-b  divide-y'>
-                        <a
-                          href={getMapHref({
-                            lat: latlngPair[0],
-                            lng: latlngPair[1]
-                          })}
-                          target='blank'
-                          className='flex items-center gap-2 py-3'
-                        >
-                          <MapPinIcon className='w-5 h-5' />
-                          <span className='mt-0.5'>
-                            <b>LAT,LNG</b>&nbsp;
-                            <span className='link-dotted'>
-                              {latlngPair[0].toFixed(5)}, {latlngPair[1].toFixed(5)}
-                            </span>
-                          </span>
-                        </a>
-                        {/* <ArticleLastUpdate {...authorMetadata} /> */}
+          <h1>{areaName}</h1>
+
+          <div className='mt-6 flex flex-col text-xs text-base-300 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'>
           <h3>Description</h3>
-          <div>{description}</div>
+          <Markdown>{description}</Markdown>
         </div>
       </div>
-
-      {/* {JSON.stringify(pageData.area, null, 2)} */}
-    </article>
+    </PageContainer>
   )
 }
 

diff --git a/src/app/components/PageFooter.tsx b/src/app/components/PageFooter.tsx
@@ -4,7 +4,7 @@ import { Logo, LogoSize } from 'app/header'
  */
 export const PageFooter: React.FC = () => {
   return (
-    <footer className='mt-16 footer p-10 bg-base-200 bg-base-content text-base-100'>
+    <footer className='footer p-10 bg-base-200 bg-base-content text-base-100'>
       <aside>
         <div className='border-2 border-accent py-3 pl-2 pr-4 rounded-full'><Logo size={LogoSize.md} className='fill-accent' /></div>
         <p><span className='font-semibold text-lg'>OpenBeta</span><br /><span className='tracking-tight font-sm'>Free climbing database built & run by climbers.</span></p>

diff --git a/src/app/components/ui/PageContainer.tsx b/src/app/components/ui/PageContainer.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const PageContainer: React.FC<{ map: React.ReactNode, children: React.ReactNode }> = ({ map, children }) => {
+  return (
+    <article>
+      <div className='p-4 mx-auto max-w-5xl xl:max-w-7xl'>
+        {children}
+      </div>
+      <div id='#map' className='w-full mt-16 relative h-[90vh] border-t'>
+        {map}
+      </div>
+    </article>
+  )
+}
diff --git a/src/app/global.css b/src/app/global.css
@@ -38,9 +38,12 @@ h4 {
   @apply text-base-content/60 !important;
 }
 
-/* .card-body {
-  @apply sm:px-0 border-0 !important;
-} */
+/**
+A slightly deemphasized dotted underline for a tag in order to not competing with horizontal rulers
+*/
+.link-dotted {
+  @apply underline decoration-dotted underline-offset-2 decoration-inherit;
+}
 
 /* Layout for summary section of the area and climb page. 2 columns on desktop, normal stack div on mobile. */
 .area-climb-page-summary {

diff --git a/src/components/area/areaMap.tsx b/src/components/area/areaMap.tsx
@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import { Map, Marker, ScaleControl, LngLatBoundsLike, MapboxMap } from 'react-map-gl'
 import { AreaType } from '../../js/types'
@@ -73,7 +74,7 @@ export default function AreaMap (props: AreaMapProps): JSX.Element {
         }}
         reuseMaps
         mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_KEY}
-        mapStyle={MAP_STYLES.dark}
+        mapStyle={MAP_STYLES.light}
         cooperativeGestures
       >
         {props.subAreas.map(subArea => (

diff --git a/src/components/edit/ArticleLastUpdate.tsx b/src/components/edit/ArticleLastUpdate.tsx
@@ -1,9 +1,9 @@
+'use client'
 import { useEffect, useState, FC } from 'react'
 import Link from 'next/link'
-import { PencilIcon } from '@heroicons/react/24/outline'
 import { AuthorMetadata } from '../../js/types'
 import { getUploadDateSummary } from '../../js/utils'
-import TreeIcon from '../../assets/icons/tree.svg'
+import { Plant, PersonArmsSpread } from '@phosphor-icons/react/dist/ssr'
 
 interface DisplayProps {
   updatedAtStr: string
@@ -38,14 +38,14 @@ export const ArticleLastUpdate: FC<AuthorMetadata> = ({ updatedAt, updatedByUser
     <div className='flex flex-col gap-3 py-3 text-base-300 text-xs'>
       {createdAt != null &&
         <div className='flex items-center gap-2'>
-          <TreeIcon className='h-5 w-5' />
+          <Plant size={20} />
           <span>
             <b>CREATED</b>{toUserProfile(createdByUser)}&nbsp;{createdAtStr}
           </span>
         </div>}
       {updatedAt != null &&
         <div className='flex items-center gap-2'>
-          <PencilIcon className='h-4 w-4 mr-1' />
+          <PersonArmsSpread size={20} />
           <span>
             <b>UPDATED</b>{toUserProfile(updatedByUser)}&nbsp;{updatedAtStr}
           </span>

diff --git a/src/components/ui/BreadCrumbs.tsx b/src/components/ui/BreadCrumbs.tsx
@@ -128,14 +128,15 @@ const Item = ({ path, highlight, current, length }: ItemProps): JSX.Element => (
 export const GluttenFreeCrumbs: React.FC<{
   pathTokens: string[]
   ancestors: string[]
-}> = ({ pathTokens, ancestors }) => {
+  editMode?: boolean
+}> = ({ pathTokens, ancestors, editMode = false }) => {
   return (
     <div className='breadcrumbs text-sm'>
       <ul>
         <li><a href='/' className='text-secondary'>Home</a></li>
         {pathTokens.map((path, index) => {
           const uuid = ancestors[index]
-          const url = `/editArea/${uuid}`
+          const url = `/${editMode ? 'editArea' : 'area'}/${uuid}`
           return <GFItem key={uuid} path={sanitizeName(path)} url={url} isLast={index === pathTokens.length - 1} />
         })}
       </ul>