Page metadata

Is your feature request related to a problem? Please describe. Components that are used in layouts currently don’t have access to which route they’re being used on. The $page store tells us the underlying path and the params that have been extracted from that path, but doesn’t tell us anything about which route those params have meaning in.

When making a navbar in Sapper, I generally have to re-analyze $page.path with regexes or string comparisons or whatever in order to tell which page I’m on and what state the navbar should be in.

Describe the solution you’d like Since the framework has already decided which route this request maps to, it can expose this information in the $page store. The most immediately obvious way to me for this to be handled would be for the relative path to the .svelte file that is the page route be included as a string in (say) $page.route.

Describe alternatives you’ve considered If we didn’t want the inelegance or fragility of exposing file paths as strings, would be to let each page component expose - in some way - a user-specified key that Kit doesn’t do anything with apart from exposing in the $page store. This could be a separate module context export, or it could be another value in the load response, or maybe something else. This was also suggested in https://github.com/sveltejs/kit/issues/1459

How important is this feature to you? It’d be nice to have. That my code needs to re-figure out something about what page I’m on that the framework has already determined and then kept for itself is irritating.

Additional context None that I can think of right now.

[didier]

Would it be possible to implement an API similar to https://github.com/didier/sveo? I’d love to help where possible.

<script context="module">
  // /about.svelte
  export const metadata = {
    title: 'Hello world',
    description: 'Have a wonderful day.'
  }
</script>

<script context="module">
  // /__layout.svelte
  export const load = async ({ metadata }) => {
    // The metadata from the page component
    const { title, description } = metadata

    return {
      props: {
        title,
        description
      }
    }
  }
</script>

This would make SEO stuff a lot easier, since we can define titles and other data on a page level and have all the meta tags handled by the layout component.

[alteredorange]

I think this is important, because it looks like sveltekit doesn’t export segment like sapper did. (At least segment is always undefined when I export it from $layout). Currently I’m using $page.path.substring(1) for all my route needs, but it would be great if there was an actual route param, as I’m not sure the substring works with all edge cases.