🔍 Remove ordering numbers from URLs

Author: CollierCZ

packages/docs/src/lib/components/NavLink.svelte

@@ -3,6 +3,7 @@
 
   import { navStyles } from "$lib/utils/classConst";
   import { getNavigationItems } from "$lib/utils/getNavigationItems";
+  import { removeNumbersFromNavLinks } from "$lib/utils/handleNavNumbers";
 
   const medium = new MediaQuery("min-width: 768px");
 
@@ -26,7 +27,9 @@
             <ul class="pl-4">
               {#each Object.entries(itemData.children) as [childPath, childData] (childPath)}
                 <li>
-                  <a onclick={closeNav} href={`/docs/${childPath}`}
+                  <a
+                    onclick={closeNav}
+                    href={`/docs/${removeNumbersFromNavLinks(childPath)}`}
                     >{childData.title}</a
                   >
                 </li>
@@ -35,7 +38,10 @@
           </li>
         {:else}
           <li>
-            <a onclick={closeNav} href={`/docs/${itemPath}`}>{itemData.title}</a
+            <a
+              onclick={closeNav}
+              href={`/docs/${removeNumbersFromNavLinks(itemPath)}`}
+              >{itemData.title}</a
             >
           </li>
         {/if}

packages/docs/src/lib/components/SiteNav.svelte

@@ -26,7 +26,7 @@
     </svg>
   </button>
   <section class="*:pl-2">
-    <a href="/docs/01-get-started">Docs</a>
+    <a href="/docs/get-started">Docs</a>
     <a href="https://github.com/CollierCZ/markdoc-svelte">GitHub</a>
   </section>
 </nav>

packages/docs/src/lib/components/TopNav.svelte

@@ -0,0 +1,4 @@
+export const removeNumbersFromNavLinks = (originalLink: string): string => {
+  const linkWithoutInitialNumbers = originalLink.replaceAll(/\d\d-/g,"")
+  return linkWithoutInitialNumbers
+};

packages/docs/src/lib/utils/handleNavNumbers.ts

@@ -18,7 +18,7 @@
     </div>
     <a
       class="rounded-lg bg-green-100 p-4 text-green-900"
-      href="/docs/01-get-started">Get started</a
+      href="/docs/get-started">Get started</a
     >
   </div>
 </div>

packages/docs/src/routes/+page.svelte

@@ -2,6 +2,7 @@ import { error, type HttpError } from "@sveltejs/kit";
 import type { MarkdocModule } from "markdoc-svelte";
 
 import type { PageLoad } from "./$types";
+import { removeNumbersFromNavLinks } from "$lib/utils/handleNavNumbers";
 
 interface Pages {
   [pagePath: string]: () => Promise<MarkdocModule>;
@@ -15,9 +16,9 @@ export const load: PageLoad = async ({ params }) => {
 
     // Find the one that matches the slug in the URL
     const matchingPage = Object.keys(allPages).find((pagePath) => {
-      const slugFromPath = pagePath
+      const slugFromPath = removeNumbersFromNavLinks(pagePath
         .replace("/src/content/", "")
-        .replace(".mdoc", "");
+        .replace(".mdoc", ""));
       return slug === slugFromPath;
     });