add friendly url for climb page

src/app/(default)/climb/[[...slug]]/page.tsx

@@ -1,10 +1,10 @@
-import { notFound } from 'next/navigation'
+import { notFound, permanentRedirect } from 'next/navigation'
 
 import { AreaCrumbs } from '@/components/breadcrumbs/AreaCrumbs'
 import { DefaultPageContainer } from '../../components/ui/DefaultPageContainer'
 import PhotoMontage, { UploadPhotoCTA } from '@/components/media/PhotoMontage'
 import { StickyHeaderContainer } from '../../components/ui/StickyHeaderContainer'
-import { parseUuidAsFirstParam, climbLeftRightIndexComparator } from '@/js/utils'
+import { parseUuidAsFirstParam, climbLeftRightIndexComparator, getFriendlySlug, getClimbPageFriendlyUrl } from '@/js/utils'
 import { PageWithCatchAllUuidProps } from '@/js/types/pages'
 import { getClimbById } from '@/js/graphql/api'
 import { ClimbData } from './components/ClimbData'
@@ -15,7 +15,6 @@ import { LazyAreaMap } from '@/components/maps/AreaMap'
 import { ClimbType, TagTargetType } from '@/js/types'
 import { NeighboringRoutesNav } from '@/components/crag/NeighboringRoute'
 import { AreaAndClimbPageActions } from '../../components/AreaAndClimbPageActions'
-
 /**
  * Page cache settings
  */
@@ -32,12 +31,20 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
     notFound()
   }
 
+  const userProvidedSlug = getFriendlySlug(params.slug?.[1] ?? '')
+
   const photoList = climb.media
 
   const {
     id, name, ancestors, pathTokens, parent
   } = climb
 
+  const correctSlug = getFriendlySlug(name)
+
+  if (correctSlug !== userProvidedSlug) {
+    permanentRedirect(getClimbPageFriendlyUrl(id, name))
+  }
+
   let leftClimb: ClimbType | null = null
   let rightClimb: ClimbType | null = null
 
@@ -50,8 +57,6 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
     }
   }
 
-  console.log('#photo list', photoList)
-
   return (
     <DefaultPageContainer
       photoGallery={

src/app/(default)/components/AreaAndClimbPageActions.tsx

@@ -7,7 +7,7 @@ import { UploadPhotoButton } from '@/components/media/PhotoUploadButtons'
 import { TagTargetType } from '@/js/types'
 
 /**
- * Main action bar for area page
+ * Main action bar for area & climb page
  */
 export const AreaAndClimbPageActions: React.FC<{ uuid: string, name: string, targetType: TagTargetType }> = ({ uuid, name, targetType }) => {
   let url: string

src/app/(default)/editArea/[slug]/general/components/climb/ClimbListForm.tsx

@@ -1,7 +1,7 @@
 import clx from 'classnames'
 import { AreaMetadataType, ClimbDisciplineRecord, ClimbType } from '@/js/types'
 import { disciplineTypeToDisplay } from '@/js/grades/util'
-import { removeTypenameFromDisciplines, climbLeftRightIndexComparator } from '@/js/utils'
+import { removeTypenameFromDisciplines, climbLeftRightIndexComparator, getClimbPageFriendlyUrl } from '@/js/utils'
 import Grade, { GradeContexts } from '@/js/grades/Grade'
 import { ClimbListMiniToolbar } from '../../../manageClimbs/components/ClimbListMiniToolbar'
 
@@ -44,7 +44,7 @@ export const ClimbRow: React.FC<ClimbType & { index: number, gradeContext: Grade
     sanitizedDisciplines,
     areaMetadata.isBoulder
   ).toString()
-  const url = `/climb/${id}`
+  const url = getClimbPageFriendlyUrl(id, name)
   return (
     <li className={clx('py-2 break-inside-avoid-column break-inside-avoid', isThisRoute ? 'opacity-50' : '')}>
       <div className={clx('w-full', editMode ? 'card card-compact p-2 card-bordered bg-base-100 shadow' : '')}>

src/components/crag/NeighboringRoute.tsx

@@ -4,13 +4,16 @@ import clx from 'classnames'
 
 import Grade from '@/js/grades/Grade'
 import { AreaType, Climb } from '@/js/types'
-import { removeTypenameFromDisciplines } from '@/js/utils'
+import { getClimbPageFriendlyUrl, removeTypenameFromDisciplines } from '@/js/utils'
 
 interface NeighboringRoutesNavProps {
   climbs: Array<Climb | null>
   parentArea: AreaType
 }
 
+/**
+ * Nav bar to jump to left/right sibling climb
+ */
 export const NeighboringRoutesNav = ({ climbs, parentArea }: NeighboringRoutesNavProps): JSX.Element => {
   return (
     <div className={clx('my-4 flex flex-row', (climbs[0] == null) ? 'justify-end' : 'justify-between')}>
@@ -32,8 +35,7 @@ export const NeighboringRoutesNav = ({ climbs, parentArea }: NeighboringRoutesNa
 }
 
 const NeighboringRoute: React.FC<{ climb: Climb, gradeStr: String | undefined, isLeftRoute: boolean }> = ({ climb, gradeStr, isLeftRoute }) => {
-  const url = `/climb/${climb.id}`
-
+  const url = getClimbPageFriendlyUrl(climb.id, climb.name)
   return (
     <Link className={clx('btn btn-lg no-animation flex items-center', isLeftRoute ? 'flex-row' : ' flex-row-reverse')} href={url}>
       {isLeftRoute ? <CaretCircleLeft size={28} /> : <CaretCircleRight size={28} />}

src/js/utils.ts

@@ -274,12 +274,20 @@ export const getFriendlySlug = (name: string): string => slugify(name, { lower:
 
 /**
  * Return the area page url with a trailing friendly area name
- * @param uuid area uuid
+ * @param uuid page id
  * @param areaName area name
  * @returns `/area/<area uuid>/<slugified area name>`
  */
 export const getAreaPageFriendlyUrl = (uuid: string, areaName: string): string => `/area/${uuid}/${getFriendlySlug(areaName)}`
 
+/**
+ * Return the climb page url with a trailing friendly name
+ * @param uuid page id
+ * @param climbName climb name
+ * @returns `/area/<area uuid>/<slugified area name>`
+ */
+export const getClimbPageFriendlyUrl = (uuid: string, climbName: string): string => `/climb/${uuid}/${getFriendlySlug(climbName)}`
+
 /**
  * Bust area page cache
  */