Improve slug

apps/frontpage/app/docs-all/sitemap.ts

@@ -3,7 +3,6 @@ import {
   FlatTreeNode,
   getFlatTreeSitemap,
 } from '../../lib/get-flat-tree-sitemap';
-import { getUrl } from '../../lib/get-url';
 import { getAllTrees } from '../../lib/get-all-trees';
 import { docsVersions } from '@repo/utils';
 
@@ -23,9 +22,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
     flatTree.push(...treeWithVersion);
   });
 
-  // Generate URLs for each node - The getUrl function will remove the version from the URL
+  // Generate URLs for each node
   const docsUrls = flatTree.map((node) => ({
-    url: getUrl(`https://storybook.js.org${node.slug}`, node.version),
+    url: `https://storybook.js.org${node.slug}`,
   }));
 
   return [

apps/frontpage/app/docs/sitemap.ts

@@ -1,6 +1,5 @@
 import { MetadataRoute } from 'next';
 import { docsVersions } from '@repo/utils';
-import { getUrl } from '../../lib/get-url';
 import { getFlatTreeSitemap } from '../../lib/get-flat-tree-sitemap';
 import { getAllTrees } from '../../lib/get-all-trees';
 
@@ -14,10 +13,10 @@ export default function sitemap(): MetadataRoute.Sitemap {
   // We flatten the tree
   const flatTree = tree?.children && getFlatTreeSitemap(tree?.children);
 
-  // Generate URLs for each node - The getUrl function will remove the version from the URL
+  // Generate URLs for each node
   const docsUrls = flatTree
     ? flatTree.map((node) => ({
-        url: getUrl(`https://storybook.js.org${node.slug}`, latestVersion),
+        url: `https://storybook.js.org${node.slug}`,
       }))
     : [];
 

apps/frontpage/app/test/page.tsx

@@ -2,6 +2,6 @@ import { getAllTrees } from '../../lib/get-all-trees';
 
 export default function Page() {
   const tree = getAllTrees();
-  console.dir(tree, { depth: 3 });
+  // console.dir(tree, { depth: 3 });
   return <div>Page</div>;
 }

apps/frontpage/components/docs/sidebar/docs-nav.tsx

@@ -9,7 +9,6 @@ import { cn } from '@repo/utils';
 import { VersionSelector } from './version-selector';
 import { usePathname, useSelectedLayoutSegment } from 'next/navigation';
 import { getVersion } from '../../../lib/get-version';
-import { getUrl } from '../../../lib/get-url';
 
 type Tree = TreeProps[] | null | undefined;
 
@@ -34,7 +33,7 @@ export const NavDocs: FC<NavDocsProps> = ({ listOfTrees }) => {
 
       for (let i = 0; i < t.length; i++) {
         const current = t[i];
-        if (getUrl(current.slug, activeVersion) === pathname) {
+        if (current.slug === pathname) {
           parent?.pathSegment && setParentAccordion([parent?.pathSegment]);
           return current;
         }
@@ -83,7 +82,7 @@ const Level1 = ({
     <li key={lvl1.pathSegment}>
       <Link
         className="mt-6 flex items-center px-2 py-2 text-sm font-bold transition-colors hover:text-blue-500"
-        href={getUrl(lvl1.slug, activeVersion)}
+        href={lvl1.slug}
       >
         {lvl1.sidebar?.title || lvl1.title}
       </Link>
@@ -114,7 +113,7 @@ const Level2 = ({
   const pathname = usePathname();
   const isDraft = lvl2.draft === true ? true : false;
   const hasChildren = lvl2.children && lvl2.children.length > 0;
-  const slug = getUrl(lvl2.slug, activeVersion);
+  const slug = lvl2.slug;
 
   if (isDraft) return null;
 
@@ -172,7 +171,7 @@ const Level3 = ({
   activeVersion: DocsVersion;
 }) => {
   const isDraft = lvl3.draft === true ? true : false;
-  const slug = getUrl(lvl3.slug, activeVersion);
+  const slug = lvl3.slug;
   const pathname = usePathname();
 
   if (isDraft) return null;

apps/frontpage/lib/get-all-trees.ts

@@ -1,13 +1,36 @@
-import { RawTreeProps, TreeProps } from '@repo/utils';
+import {
+  RawTreeProps,
+  TreeProps,
+  latestVersion,
+  docsVersions,
+} from '@repo/utils';
 import { getDocsTreeFromPath } from './get-docs-tree-from-path';
 
 const getSlug = (pathSegment: string) => {
-  const slug = pathSegment
-    .replace('content/', '/')
-    .replace(/\.mdx?$|\.md$/, '')
-    .replace(/\/index$/, '');
+  // We first split the pathSegment into an array
+  const splitSegment = pathSegment.split('/');
+
+  // If the first segment is 'content', we remove it
+  if (splitSegment[0] === 'content') splitSegment.shift();
 
-  return slug;
+  // If the first segment is 'docs', we check if the second segment is a version
+  if (splitSegment[0] === 'docs') {
+    // If this is the latest version, remove it from the URL
+    if (latestVersion.id === splitSegment[1]) {
+      splitSegment.splice(1, 1);
+    } else {
+      // If this is not the latest version, replace it with the inSlug
+      const version = docsVersions.find((v) => v.id === splitSegment[1]);
+      if (version?.inSlug) {
+        splitSegment[1] = version.inSlug;
+      }
+    }
+  }
+
+  return `/${splitSegment
+    .join('/')
+    .replace(/\.mdx?$|\.md$/, '')
+    .replace(/\/index$/, '')}`;
 };
 
 const addSlugToNode = (node: RawTreeProps): TreeProps => {