Get list of all pages in SvelteKit

list_of_all_pages.md

Folder Structure

lib
|--components
|  |--Navigation.svelte
src
|--routes
|  |--(app)
|  |  |--profile
|  |  |  |--admin
|  |  |  |  +layout.svelte
|  |  |  |  +page.svelte
|  |  |  |--user
|  |  |  |  +layout.svelte
|  |  |  |  +page.svelte
|  |  |  +layout.svelte
|  |  |  +page.svelte
|  |  |--settings
|  |  |  |--[country]
|  |  |  |  |--[language]
|  |  |  |  |  +layout.svelte
|  |  |  |  |  +page.svelte
|  |  |  |--general
|  |  |  |  +layout.svelte
|  |  |  |  +page.svelte
|  |  |  +layout.svelte
|  |  |  +page.svelte
|  |  +layout.svelte
|  |--(reset)
|  |  |--about
|  |  |  |--about
|  |  |  |  +layout.svelte
|  |  |  |  +page.svelte
|  |  +layout.svelte
|  +layout.svelte
|  +page.svelte
|  +error.svelte

src/routes/+layout.svelte

<script lang="ts">
  import Navigation from '$lib/components/Navigation.svelte';

  const modules = import.meta.glob('./**/+page.svelte');
</script>

<Navigation { modules } />

src/lib/components/Navigation.svelte

<script lang="ts">
  import { onMount } from 'svelte';

  export let modules: Record<string, () => Promise<unknown>>;
  let menu: Array<{ link: string; title: string }> = [];

  onMount(() => {
    for (let path in modules) {
      let pathSanitized = path.replace('.svelte', '').replace('./', '/');

      // for group layouts
      if (pathSanitized.includes('/(')) {
        pathSanitized = pathSanitized.substring(pathSanitized.indexOf(')/') + 1);
      }

      // for dynamic paths -> needs more triaging
      if (pathSanitized.includes('[')) {
        pathSanitized = pathSanitized.replaceAll('[', '').replaceAll(']', '');
      }

      pathSanitized = pathSanitized.replace('/+page', '');

      menu = [
        ...menu,
        {
          title: pathSanitized
            ? pathSanitized.substring(pathSanitized.lastIndexOf('/') + 1)
            : 'home',
          link: pathSanitized ? pathSanitized : '/'
        }
      ];
    }
  });
</script>

<div>
  <ul>
    {#each menu as item}
      <li>
        <a href={item.link}>{item.title}</a>
      </li>
    {/each}
  </ul>
</div>

Output

[
    {
        "title": "profile",
        "link": "/profile"
    },
    {
        "title": "admin",
        "link": "/profile/admin"
    },
    {
        "title": "user",
        "link": "/profile/user"
    },
    {
        "title": "settings",
        "link": "/settings"
    },
    {
        "title": "language",
        "link": "/settings/country/language"
    },
    {
        "title": "general",
        "link": "/settings/general"
    },
    {
        "title": "about",
        "link": "/about"
    },
    {
        "title": "organization",
        "link": "/about/organization"
    },
    {
        "title": "product",
        "link": "/about/product"
    },
    {
        "title": "later",
        "link": "/delete/later"
    },
    {
        "title": "home",
        "link": "/"
    }
]