insights/docs/onboarding/product-analytics/astro.tsx

import { OnboardingComponentsContext, createInstallation } from 'scenes/onboarding/shared/OnboardingDocsContentWrapper'

import { StepDefinition } from '../steps'
import { DEFAULT_SNIPPET_METHODS, snippetFunctions } from './_snippets/js-snippet-builder'
import { SDK_DEFAULTS_DATE } from './_snippets/sdkDefaults'

export const getAstroSteps = (ctx: OnboardingComponentsContext): StepDefinition[] => {
    const { CodeBlock, Markdown, dedent, snippets } = ctx

    const JSEventCapture = snippets?.JSEventCapture

    return [
        {
            title: 'Create the Insights component',
            badge: 'required',
            content: (
                <>
                    <Markdown>In your `src/components` folder, create a `insights.astro` file:</Markdown>
                    <CodeBlock
                        blocks={[
                            {
                                language: 'bash',
                                file: 'Terminal',
                                code: dedent`
                                    cd ./src/components
                                    # or 'cd ./src && mkdir components && cd ./components' if your components folder doesn't exist
                                    touch insights.astro
                                `,
                            },
                        ]}
                    />
                    <Markdown>
                        In this file, add your Insights web snippet. Be sure to include the `is:inline` directive to
                        prevent Astro from processing it:
                    </Markdown>
                    <CodeBlock
                        blocks={[
                            {
                                language: 'html',
                                file: 'src/components/insights.astro',
                                code: dedent`
                                    ---
                                    // src/components/insights.astro
                                    ---
                                    <script is:inline>
                                        ${snippetFunctions(DEFAULT_SNIPPET_METHODS)}
                                        insights.init('<ph_project_token>', {
                                            api_host: '<ph_client_api_host>',
                                            defaults: '${SDK_DEFAULTS_DATE}'
                                        })
                                    </script>
                                `,
                            },
                        ]}
                    />
                </>
            ),
        },
        {
            title: 'Create a layout',
            badge: 'required',
            content: (
                <>
                    <Markdown>
                        Create a layout where we will use `insights.astro`. Create a new file `InsightsLayout.astro` in
                        your `src/layouts` folder:
                    </Markdown>
                    <CodeBlock
                        blocks={[
                            {
                                language: 'bash',
                                file: 'Terminal',
                                code: dedent`
                                    cd ./src/layouts
                                    # or 'cd ./src && mkdir layouts && cd ./layouts' if your layouts folder doesn't exist
                                    touch InsightsLayout.astro
                                `,
                            },
                        ]}
                    />
                    <Markdown>Add the following code to `InsightsLayout.astro`:</Markdown>
                    <CodeBlock
                        blocks={[
                            {
                                language: 'html',
                                file: 'src/layouts/InsightsLayout.astro',
                                code: dedent`
                                    ---
                                    import Insights from '../components/insights.astro'
                                    ---
                                    <head>
                                        <Insights />
                                    </head>
                                `,
                            },
                        ]}
                    />
                </>
            ),
        },
        {
            title: 'Use the layout in your pages',
            badge: 'required',
            content: (
                <>
                    <Markdown>Update your pages (like `index.astro`) to wrap your app with the new layout:</Markdown>
                    <CodeBlock
                        blocks={[
                            {
                                language: 'html',
                                file: 'src/pages/index.astro',
                                code: dedent`
                                    ---
                                    import InsightsLayout from '../layouts/InsightsLayout.astro';
                                    ---
                                    <InsightsLayout>
                                      <!-- your existing app components -->
                                    </InsightsLayout>
                                `,
                            },
                        ]}
                    />
                </>
            ),
        },
        {
            title: 'Send events',
            content: <>{JSEventCapture && <JSEventCapture />}</>,
        },
    ]
}

export const AstroInstallation = createInstallation(getAstroSteps)