#How can I integrate custom scripts in starlight with astro?

1 messages · Page 1 of 1 (latest)

viral owl
#

How can I integrate custom scripts in starlight with astro?

kindred groveBOT
#

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

#

To integrate custom scripts in Starlight with Astro, you can follow these steps:

  1. Add the Starlight integration to your Astro project: Starlight is an Astro integration. You can add it to your site by running the astro add command in your project’s root directory. Depending on your package manager, the command will be one of the following:

    • For npm: npx astro add starlight
    • For pnpm: pnpm astro add starlight
    • For Yarn: yarn astro add starlight

    This will install the required dependencies and add Starlight to the integrations array in your Astro config file.

  2. Configure the Starlight integration: The Starlight integration is configured in your astro.config.mjs file. You can add a title to get started. Here's an example:

    import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My delightful docs site',
    }),
  ],
});

  3. Include JavaScript files on your page: In .astro files, you can add client-side JavaScript by adding one (or more) <script> tags. For example:

    <h1>Welcome, world!</h1>
<script> console.log('Welcome, browser console!');</script>

    By default, <script> tags are processed by Astro. Any imports will be bundled, allowing you to import local files or Node modules. The processed script will be injected into your page’s <head> with type="module".

    <script> 
// Processed! Bundled! TypeScript-supported! 
// Importing local scripts and Node modules works.
</script>
#

@viral owl kapa.ai is still learning and improving, please let us know how it did by reacting below

viral owl
#

@kindred grove But it must be a script that runs on all routers because when using starlight the files are markdown files.

kindred groveBOT
#

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

#

Astro currently has an issue with injected scripts not being applied to non-local injected routes. This issue was discussed in a Github issue (https://github.com/withastro/astro/issues/7563) where it was mentioned that the code path often doesn't have the full route manifest available to check if a route is injected or not. This might require a larger refactor to fix properly.

An additional use case was mentioned where enabling analytics via the static Vercel adapter also relies on injectScript and currently doesn't work for injected routes.

As a workaround, you might consider adding your script to a layout component that wraps all your pages. This way, the script would be included on every page. However, this solution might not work for all use cases and the issue with injected scripts is something the Astro team is aware of and might address in future updates.

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

#

@viral owl kapa.ai is still learning and improving, please let us know how it did by reacting below

viral owl
#

@kindred grove Show me an example code

kindred groveBOT
#

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

#

I'm sorry, but the knowledge sources provided do not contain an example of integrating custom scripts in Starlight with Astro. However, you can generally add scripts to your Astro components like this:

---
// component logic here
---
<html>
<head>
  <script>
    // Your custom script here
  </script>
</head>
<body>
  <!-- component markup here -->
</body>
</html>

Please note that this is a general example and might need to be adjusted based on your specific needs and the exact functionality of Starlight. For more detailed information, please refer to the official Astro and Starlight documentation.

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

#

@viral owl kapa.ai is still learning and improving, please let us know how it did by reacting below

viral owl
#

@kindred grove Using starlight

kindred groveBOT
#

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

#

In Starlight, you can add scripts to a layout component that wraps all your pages. This way, the script would be included on every page. However, the knowledge sources provided do not contain a specific example of this.

Here's a general example of how you might add a script to a layout component in Astro:

---
// Import your components here
---
<html>
<head>
  <script>
    // Your custom script here
  </script>
</head>
<body>
  <Layout>
    <!-- Your content here -->
  </Layout>
</body>
</html>

In this example, Layout would be a component that you use to wrap all your pages. You would place your custom script inside the <script> tags.

Please note that this is a general example and might need to be adjusted based on your specific needs and the exact functionality of Starlight. For more detailed information, please refer to the official Astro and Starlight documentation.

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