#Integrate Vercel Speed Insights into a Starlight project

5 messages · Page 1 of 1 (latest)

south tulip
#

Hi, I'm trying to integrate Vercel Speed Insights into a Starlight project. I added a custom Head component, that's currently working:

---
import { SpeedInsights } from '@vercel/speed-insights/next'
import Default from '@astrojs/starlight/components/Head.astro'
import type { Props } from '@astrojs/starlight/props'
---

<Default {...Astro.props}><slot /></Default>
<SpeedInsights />

I added some fake metadata just to check if my astro.config.mjs where working:


    components: {
      // Override the default `SocialIcons` component.
      Head: './src/components/Head.astro'
    },

The custom head component is working. The default head props are passing through, but I'm not seeing the script.js from Vercel in the body of the page.

hollow crownBOT
#

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

#

Based on the provided knowledge sources, there isn't specific information on integrating Vercel Speed Insights into a Starlight project. However, there are instructions on how to add custom tags to the <head> of your Starlight site, which might be useful for adding third-party scripts and resources.

Here's an example of how to add a script tag to the head of your Starlight site:

starlight({  
  head: [    
    {      
      tag: 'script',      
      attrs: {        
        src: '<https://cdn.usefathom.com/script.js',>        
        'data-site': 'MY-FATHOM-ID',        
        defer: true,      
      },    
    },  
  ],
});

In this example, a script tag is added to the head of the site. You can replace the src attribute with the URL of the Vercel Speed Insights script you want to add.

Entries in head are converted directly to HTML elements and do not pass through Astro’s script or style processing. If you need to import local assets like scripts, styles, or images, you can override the Head component.

Please note that this is a general approach and might not work exactly for your specific use case. For more detailed information, you might want to check the official documentation of Vercel Speed Insights and Starlight.

Source: Starlight Configuration Reference (https://starlight.astro.build/reference/configuration/#head)

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

#

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

south tulip
#

Thanks, that won't worked since Vercel Speed Insights need to integrate a component, not just a script.