{% extends "solara.html.j2" %}
{% block header %}
    {% if production %}
    <link rel="canonical" href="https://solara.dev{{path}}">
    {% endif %}
    {#
    <!-- not using this right now, leaving it here for reference -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Inter:wght@700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    #}

    <link rel="stylesheet" href="/_solara/cdn/@docsearch/css@3/dist/style.css" />
    <script src="/_solara/cdn/@docsearch/js@3"></script>

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-KC98NKNL');</script>
    <!-- End Google Tag Manager -->

    {{ super() }}
{% endblock %}

{% block after_pre_rendered_html %}
    {{ super() }}

    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KC98NKNL"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <style id="algolia">
    .DocSearch-Button {
        background-color: rgb(255, 238, 197);
        color: #182026;
    }

    .theme--dark .DocSearch-Button {
        background-color: #26273D;
        color: hsla(0,0%,100%,.7);
    }

    .DocSearch-Button:hover {
        background-color: rgba(150,150,200,0.15);
    }

    .theme--dark .DocSearch-Button:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .DocSearch-Button .DocSearch-Search-Icon {
        color: #26273D;
    }

    .theme--dark .DocSearch-Button .DocSearch-Search-Icon {
        color: #ff991f;
    }
    </style>

    <script>
        function solaraAlgoliaInit({appId, apiKey, indexName, debug}) {
            const otherClick = (event) => event.button === 1 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey
            docsearch({
                container: '#docsearch',
                appId: "9KW9L7O5EQ",
                apiKey: "ef7495102afff1e16d1b7cf6ec2ab2d0",
                indexName: "solara",
                debug: debug,
                hitComponent: ({ hit, children }) => {
                    // react without the React library
                    return {
                        type: 'a',
                        constructor: undefined,
                        __v: 1,
                        props: {
                            href: hit.url,
                            children,
                            onClick: (event) => {
                                if (otherClick(event)) { return }
                                event.preventDefault()
                                let url = hit.url;
                                if (url.startsWith('https://solara.dev')) {
                                    url = url.substring(18);
                                }
                                solara.router.push(url)
                            }
                        }
                    }
                },

                navigator: {
                    navigate({ itemUrl }) {
                        if (itemUrl.startsWith('https://solara.dev')) {
                            itemUrl = itemUrl.substring(18);
                        }
                        solara.router.push(itemUrl);
                    },
                },
            });
        }
        if(document.getElementById('docsearch')) {
            solaraAlgoliaInit({
                appId: "9KW9L7O5EQ",
                apiKey: "ef7495102afff1e16d1b7cf6ec2ab2d0",
                indexName: "solara",
                debug: false,
            });
        }
    </script>
    <!-- MailChimp -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
{% endblock %}
```
