---
import 'katex/dist/katex.min.css'

import '@fontsource/open-sans/latin.css'
import '@fontsource/source-sans-pro/latin.css'
import '@fontsource/source-code-pro/latin.css'
import '@fontsource/space-mono/latin.css'
import '@fontsource/iosevka/latin.css'

import '@fontsource-variable/material-symbols-outlined/full.css'

import '@/styles/main.css'

type Props = {
    title?: string
    description?: string
    thumbnail?: string
}

import phcIcon from '../assets/icon.png'

const { title, description, thumbnail } = Astro.props
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta property="og:title" content={title ?? 'PHC'} />
        <meta property="og:description" content={description ?? 'Sito web del PHC'} />
        <meta name="description" content={description ?? 'Sito web del PHC'} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://phc.dm.unipi.it/" />
        {thumbnail && <meta property="og:image" content={thumbnail} />}

        <link rel="icon" type="image/png" sizes="512x512" href={phcIcon.src} />
        <link rel="apple-touch-icon" href={phcIcon.src} />

        <script>
            import renderMathInElement from 'katex/contrib/auto-render'

            const renderMath = () => {
                renderMathInElement(document.body, {
                    delimiters: [
                        { left: '$$', right: '$$', display: true },
                        { left: '$', right: '$', display: false },
                        { left: '\\(', right: '\\)', display: false },
                        { left: '\\[', right: '\\]', display: true },
                    ],
                    throwOnError: false,
                })
            }

            document.addEventListener('DOMContentLoaded', () => renderMath())

            // @ts-ignore
            window.renderMath = renderMath
        </script>

        <script is:inline>
            window.goatcounter = {
                path(p) {
                    return location.host + p
                },
            }
        </script>
        <script
            is:inline
            async
            src="//analytics.phc.dm.unipi.it/count.js"
            data-goatcounter="https://analytics.phc.dm.unipi.it/count"></script>

        <style is:inline>
            /* Workaround Astro CSS loading order, this forces the layering upfront */
            @layer base, typography, component, page, utility;
        </style>

        <title>{title ?? 'PHC'}</title>
    </head>
    <body>
        <slot />
    </body>
</html>
