BaseHead.astro

---
import { HEAD } from '../config/components';
import type { ISEOMetadata } from '../types/seo';
import FirstPromoterTracker from './FirstPromoterTracker.astro';

export interface Props extends ISEOMetadata {
    title: string;
    description: string;
    permalink: string;
    ogImage?: string;
}

const { title, description, ogImage, permalink } = Astro.props;

let canonical = new URL(permalink).toString();
canonical = canonical.endsWith('/') ? canonical.slice(0, -1) : canonical;
const siteDomain = Astro.url.origin;
---

<meta
    http-equiv="Content-Security-Policy"
    content="
    default-src 'self';
    script-src 'self' https://plausible.io https://unpkg.com https://cdn.firstpromoter.com 'unsafe-inline' 'unsafe-eval' blob:;
    style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
    img-src 'self' data: blob: https://firstpromoter.com;
    font-src 'self' https://fonts.gstatic.com https://apify.com data:;
    connect-src 'self' https://plausible.io https://prod.spline.design https://www.gstatic.com https://unpkg.com https://api.github.com https://firstpromoter.com;
    base-uri 'self';
    form-action 'self';
    upgrade-insecure-requests;
"
/>
<meta http-equiv="X-Content-Type-Options" content="nosniff" />
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=()" />
<!-- The website does not use camera, microphone, or geolocation. These features are explicitly disabled for security. -->

<link rel="preconnect" href="https://plausible.io" />
<link rel="dns-prefetch" href="https://plausible.io" />

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href={canonical} />
<link rel="sitemap" href="/sitemap-index.xml" />

<title>{title}</title>

<meta name="title" content={title} />
<meta name="description" content={description} />
<meta name="generator" content={Astro.generator} />
<meta name="robots" content="index, follow" />
<meta name="author" content={HEAD.META.AUTHOR} />
<meta name="referrer" content={HEAD.META.REFERRER} />
<meta name="language" content={HEAD.META.LANGUAGE} />

<meta property="og:type" content="website" />
<meta property="og:url" content={permalink} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:site_name" content={title} />
<meta property="og:author" content={HEAD.META.AUTHOR} />
<meta property="og:image" content={ogImage} />
<meta property="og:image:alt" content={title} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:type" content="image/png" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content={permalink} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:image:alt" content={title} />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="627" />
<meta name="twitter:image:type" content="image/png" />
<meta name="twitter:creator" content={HEAD.META.AUTHOR} />
<meta name="twitter:site" content="@apify" />
<meta name="twitter:domain" content="whitepaper.actor" />

<meta property="article:author" content={HEAD.META.AUTHOR} />

<link href="/favicon.png" rel="icon" media="(prefers-color-scheme: light)" />
<link href="/favicon-dark.png" rel="icon" media="(prefers-color-scheme: dark)" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content={title} />

{HEAD.FONTS.PRECONNECT.map((url) => <link rel="preconnect" href={url} crossorigin />)}

<link
    rel="preload"
    href="https://apify.com/fonts/GT-Walsheim-Regular.ttf"
    as="font"
    type="font/ttf"
    crossorigin="anonymous"
/>

<link href={`https://fonts.googleapis.com/css2?family=${HEAD.FONTS.FAMILIES.join('&family=')}`} rel="stylesheet" />

<script
    type="application/ld+json"
    set:html={JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'WebSite',
        name: title,
        description,
        url: siteDomain,
        author: {
            '@type': 'Organization',
            name: HEAD.META.AUTHOR,
            url: HEAD.META.URL
        },
        publisher: {
            '@type': 'Organization',
            name: 'Apify',
            logo: {
                '@type': 'ImageObject',
                url: ogImage
            }
        }
    })}
/>

{
    import.meta.env.MODE === 'production' && (
        <>
            <script
                defer
                data-domain="whitepaper.actor"
                data-category="analytics"
                src="https://plausible.io/js/script.hash.js"
            />

            <FirstPromoterTracker />
        </>
    )
}