refactor: identify troubleshooting pages by filepath (#30820)

Generate the troubleshooting slugs from the filepaths, not the titles. This will help with the automatic migration, since we don't have to worry about duplicate titles.

apps/docs/app/guides/troubleshooting/[slug]/page.tsx

@@ -14,7 +14,7 @@ export default async function TroubleshootingEntryPage({
   params: { slug: string }
 }) {
   const allTroubleshootingEntries = await getAllTroubleshootingEntries()
-  const entry = allTroubleshootingEntries.find((entry) => getArticleSlug(entry.data) === slug)
+  const entry = allTroubleshootingEntries.find((entry) => getArticleSlug(entry) === slug)
 
   if (!entry) {
     notFound()
@@ -25,7 +25,7 @@ export default async function TroubleshootingEntryPage({
 
 export const generateMetadata = async ({ params: { slug } }: { params: { slug: string } }) => {
   const allTroubleshootingEntries = await getAllTroubleshootingEntries()
-  const entry = allTroubleshootingEntries.find((entry) => getArticleSlug(entry.data) === slug)
+  const entry = allTroubleshootingEntries.find((entry) => getArticleSlug(entry) === slug)
 
   return {
     title: 'Supabase Docs | Troubleshooting' + (entry ? ` | ${entry.data.title}` : ''),
@@ -37,5 +37,5 @@ export const generateMetadata = async ({ params: { slug } }: { params: { slug: s
 
 export const generateStaticParams = async () => {
   const allTroubleshootingEntries = await getAllTroubleshootingEntries()
-  return allTroubleshootingEntries.map((entry) => ({ slug: getArticleSlug(entry.data) }))
+  return allTroubleshootingEntries.map((entry) => ({ slug: getArticleSlug(entry) }))
 }

apps/docs/features/docs/Troubleshooting.ui.tsx

@@ -36,7 +36,7 @@ export async function TroubleshootingPreview({ entry }: { entry: ITroubleshootin
       <div className="flex flex-wrap items-start gap-x-2 gap-y-4 justify-between">
         <div className="flex-grow flex flex-col gap-2">
           <Link
-            href={`/guides/troubleshooting/${getArticleSlug(entry.data)}`}
+            href={`/guides/troubleshooting/${getArticleSlug(entry)}`}
             className={cn('visited:text-foreground-lighter', 'before:absolute before:inset-0')}
           >
             <h3

apps/docs/features/docs/Troubleshooting.utils.common.mjs

@@ -14,7 +14,7 @@ import { toMarkdown } from 'mdast-util-to-markdown'
 import { gfm } from 'micromark-extension-gfm'
 import { mdxjs } from 'micromark-extension-mdxjs'
 import { readdir, readFile, stat } from 'node:fs/promises'
-import { join } from 'node:path'
+import { join, sep } from 'node:path'
 import toml from 'toml'
 import { visit } from 'unist-util-visit'
 import { v4 as uuidv4 } from 'uuid'
@@ -176,10 +176,9 @@ export async function getAllTroubleshootingEntriesInternal() {
 }
 
 /**
- * @param {TroubleshootingMetadata} meta
+ * @param {TroubleshootingEntry} entry
  */
-export function getArticleSlug(meta) {
-  const slugifiedTitle = meta.title.toLowerCase().replace(/\s+/g, '-')
-  const escapedTitle = encodeURIComponent(slugifiedTitle)
-  return escapedTitle
+export function getArticleSlug(entry) {
+  const parts = entry.filePath.split(sep)
+  return parts[parts.length - 1].replace(/\.mdx$/, '')
 }