A Deep Dive into SvelteKit Routing with Our Starter.dev GitHub Showcase Example

// svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    routes: "src/routes", // 👈 you can change it here to anything you want
  },
};

// src/routes/signin/(auth)/+page.svelte

<script>
  import Auth from '$lib/components/auth/Auth.svelte';
</script>

<Auth />

// src/routes/(authenticated)/(home)/+page.server.ts

import type { PageServerLoad } from "./$types";
import { mapUserReposToTopRepos, mapGistsToHomeGists } from "$lib/helpers";
import type {
  UserGistsApiResponse,
  UserReposApiResponse,
} from "$lib/interfaces";
import { ENV } from "$lib/constants/env";

export const load: PageServerLoad = async ({ fetch, parent }) => {
  const repoURL = new URL("/user/repos", ENV.GITHUB_URL);
  repoURL.searchParams.append("sort", "updated");
  repoURL.searchParams.append("per_page", "20");

  const { userInfo } = await parent();

  const gistsURL = new URL(
    `/users/${userInfo?.username}/gists`,
    ENV.GITHUB_URL
  );

  try {
    const reposPromise = await fetch(repoURL);

    const gistsPromise = await fetch(gistsURL);

    const [repoRes, gistsRes] = await Promise.all([reposPromise, gistsPromise]);

    const gists = (await gistsRes.json()) as UserGistsApiResponse;

    const repos = (await repoRes.json()) as UserReposApiResponse;

    return {
      topRepos: mapUserReposToTopRepos(repos),
      gists: mapGistsToHomeGists(gists),
      username: userInfo?.username,
    };
  } catch (err) {
    console.log(err);
  }
};

    <!-- src/routes/(authenticated)/(home)/+page.svelte -->

    <script lang="ts">
    import TopRepositories from '$lib/components/TopRepositories/TopRepositories.svelte';
    import Gists from '$lib/components/Gists/Gists.svelte';
    import type { PageServerData } from './$types';
    export let data: PageServerData;
    </script>

    <div class="container">
      <div class="page-container">
        <aside>
        {#if data?.gists}
            <Gists gists={data.gists} />
        {/if}
        </aside>
        {#if data?.topRepos}
        <TopRepositories repos={data.topRepos} username={data?.username} />
        {/if}
      </div>
    </div>

    <style lang="scss">
    @use 'src/lib/styles/variables.scss';

    .page-container {
        display: grid;
        grid-template-columns: 1fr;
        background: variables.$gray100;
        @media (min-width: variables.$md) {
          grid-template-columns: 24rem 1fr;
        }
    }

    aside {
        background: variables.$white;
        padding: 2rem;
        @media (max-width: variables.$md) {
          order: 2;
        }
    }
    </style>

    <!-- src/routes/(authenticated)/+layout.svelte -->

    <script lang="ts">
    import NavBar from '$lib/components/NavBar/NavBar.svelte';
    import type { LayoutServerData } from './$types';

    export let data: LayoutServerData;
    </script>

    <div class="page">
    <header class="nav">
        <NavBar username={data?.userInfo.username} userAvatar={data?.userInfo.avatar} />
    </header>
    <main class="main">
        <slot />  // 👈  child routes of the layout page
    </main>
    </div>

// src/routes/(authenticated)/+layout.server.ts

import { ENV } from "$lib/constants/env";
import { remapContextUserAsync } from "$lib/helpers/context-user";
import type { LayoutServerLoad } from "./$types";
import { mapUserInfoResponseToUserInfo } from "$lib/helpers/user";

export const load: LayoutServerLoad = async ({ locals, fetch }) => {
  const getContextUserUrl = new URL("/user", ENV.GITHUB_URL);
  const response = await fetch(getContextUserUrl.toString());
  const contextUser = await remapContextUserAsync(response);
  locals.user = contextUser;
  return {
    userInfo: mapUserInfoResponseToUserInfo(locals.user),
  };
};

    <script>
        import { page } from '$app/stores';
        import ErrorMain from '$lib/components/ErrorPage/ErrorMain.svelte';
        import ErrorFlash from '$lib/components/ErrorPage/ErrorFlash.svelte';
    </script>

    <ErrorFlash message={$page.error?.message} />
    <ErrorMain status={$page.status} />

/[org]/[repo]/tree/[branch]/[...file]

{
  org: ‘thisdot’,
  repo: 'starter.dev',
  branch: 'main',
  file: ‘/starters/svelte-kit-scss/README.md'
}

// src/params/issue_search_type.ts

import { IssueSearchPageTypeFiltersMap } from "$lib/constants/matchers";
import type { ParamMatcher } from "@sveltejs/kit";

export const match: ParamMatcher = (param: string): boolean => {
  return Object.keys(IssueSearchPageTypeFiltersMap).includes(
    param?.toLowerCase()
  );
};

	// src/lib/constants/matchers.ts

    import { IssueSearchQueryType } from './issues-search-query-filters';

    export const IssueSearchPageTypeFiltersMap = {
        issues: ‘issues’,
        pulls: ’pull-requests’,
    };

    export type IssueSearchTypePage = keyof typeof IssueSearchPageTypeFiltersMap;

[issueSearchType=issue_search_type]