#How to get a Custom Page in Starlight

1 messages · Page 1 of 1 (latest)

stone depot
#

The doc mention

Custom pages
For advanced use cases, you can add custom pages by creating a src/pages/ directory. The src/pages/ directory uses Astro’s file-based routing and includes support for .astro files amongst other page formats. This is helpful if you need to build pages with a completely custom layout or generate a page from an alternative data source.

For example, this project mixes Markdown content in src/content/docs/ with Astro and HTML routes in src/pages/:

However, in the astro routing they don't explain how to have a custom page with starlight

limber crescentBOT
#

Hi @stone depot. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To create a custom page in Starlight while still using Starlight's design, you can use the <StarlightPage /> component. This allows you to build custom pages with Starlight's layout and styling. Here's how you can do it:

  1. Create a new .astro file in the src/pages/ directory of your Starlight project.

  2. In this file, import the StarlightPage component from Starlight.

  3. Use the <StarlightPage /> component to wrap your custom content.

Here's an example of how to create a custom page:

---
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
import CustomComponent from './CustomComponent.astro';
---

<StarlightPage frontmatter={{ title: 'My custom page' }}>
  <p>This is a custom page with a custom component:</p>
  <CustomComponent />
</StarlightPage>

In this example, we're creating a custom page that includes a custom component while still using Starlight's layout and design.

The <StarlightPage /> component accepts a frontmatter prop where you can specify various page properties, similar to the frontmatter in Markdown pages. The title property is required, and you can include other optional properties as needed.

This approach allows you to create custom pages with full control over the content while maintaining Starlight's overall design and functionality.

For more details on using Starlight's design in custom pages, you can refer to the Starlight Pages guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@stone depot Kapa.ai is still learning and improving, please let me know how I did by reacting below.

stone depot
#

@limber crescent I learnt that you can call a StarlightPage from .astro file nice.

However, my file index.mdx at the content/docs/index.mdx pose this problem

15:04:27 watching for file changes...
15:04:34 [200] / 338ms
15:04:37 [200] / 44ms
15:04:40 [WARN] [router] A getStaticPaths() route pattern was matched, but no matching static path was found for requested path /explanations/glob_pattern_filter.

Possible dynamic routes being matched: node_modules/@astrojs/starlight/routes/static/index.astro.
Entry docs → 404 was not found.
15:04:41 [404] /explanations/glob_pattern_filter 133ms

limber crescentBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Based on the error message you've provided, it seems you're encountering a routing issue in your Starlight project. This error is related to dynamic routes and static path generation. Let's break down the problem and provide a solution based on the information from our knowledge sources.

The error you're seeing is a "NoMatchingStaticPathFound" error, which occurs when a dynamic route is matched, but no corresponding static path was found for the requested parameters. In your case, the requested path is /explanations/glob_pattern_filter.

Here are a few possible reasons and solutions for this issue:

  1. Missing or incorrect getStaticPaths() function:
    If you're using dynamic routes in your Starlight project, you need to make sure you have a getStaticPaths() function exported in the relevant .astro file. This function is required for generating static paths at build time.

    GetStaticPathsRequired explains:

    In Static Mode, all routes must be determined at build time. As such, dynamic routes must export a getStaticPaths function returning the different paths to generate.

  2. Typo in the generated or requested path:
    Double-check that the path you're trying to access (/explanations/glob_pattern_filter) is correctly defined in your getStaticPaths() function and that there are no typos in the URL you're accessing.

    NoMatchingStaticPathFound mentions:

    This is often caused by a typo in either the generated or the requested path.

#
  1. Incorrect route definition:
    Ensure that your dynamic route is correctly defined in your project structure. The error message suggests that the route might be matching a file in node_modules/@astrojs/starlight/routes/static/index.astro. Make sure your project's routing structure is set up correctly.

To resolve this issue, you should:

  1. Check if you have a dynamic route that should match /explanations/glob_pattern_filter.
  2. If it's a dynamic route, ensure you have exported a getStaticPaths() function in the corresponding .astro file.
  3. Verify that the getStaticPaths() function is returning the correct paths, including one that matches /explanations/glob_pattern_filter.
  4. Double-check your project structure and routing to ensure the paths are correctly defined.

If you need more specific help, you might want to share the relevant parts of your code, particularly the file that should be handling the /explanations/glob_pattern_filter route and its getStaticPaths() function if it exists.

For more information on dynamic routing in Astro, you can refer to the Dynamic Routes documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@stone depot Kapa.ai is still learning and improving, please let me know how I did by reacting below.

stone depot
#

@limber crescent I didn't set up anything! I'm a user without the knowledge how Starlight works! I just followed the docs, and now I'm stuck trying to figuring out how to add a landing page in src/pages/index.astro witouth breaking the starlight doc

in the official doc of starlight they mention:

Custom pages
For advanced use cases, you can add custom pages by creating a src/pages/ directory. The src/pages/ directory uses Astro’s file-based routing and includes support for .astro files amongst other page formats. This is helpful if you need to build pages with a completely custom layout or generate a page from an alternative data source.

For example, this project mixes Markdown content in src/content/docs/ with Astro and HTML routes in src/pages/:

however they point to the doc of File base routing

File-based routing
Astro leverages a routing strategy called file-based routing. Each file in your src/pages/ directory becomes an endpoint on your site based on its file path.

A single file can also generate multiple pages using dynamic routing. This allows you to create pages even if your content lives outside of the special /pages/ directory, such as in a content collection or a CMS.

Read more about Routing in Astro.

which point to other resources like content-collection, or dynamic routing or more info about routing.

However, none seems to indicate how Starlight can coexist with the rest of the ecosystem.

limber crescentBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

Sorry @stone depot, I am experiencing especially high traffic right now, please try again. :technologist: