---
interface Props {
    title?: string;
    description?: string;
    image?: string;
    keywords?: string[];
    type?: 'website' | 'article';
    publishedTime?: Date | string;
    modifiedTime?: Date | string;
    authors?: string[];
    articleTags?: string[];
}

const SITE_KEYWORDS = 'htmx, hypermedia, ajax, html, javascript, frontend, web development, hateoas, rest, websockets, server sent events, declarative';

const {
    title = "htmx",
    description = "htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext\n\nhtmx is small (~10k min.gz'd), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react",
    image = "/img/og-image.png",
    keywords,
    type = 'website',
    publishedTime: rawPublished,
    modifiedTime: rawModified,
    authors,
    articleTags,
} = Astro.props;

const metaKeywords = keywords?.length
    ? `${keywords.join(', ')}, ${SITE_KEYWORDS}`
    : SITE_KEYWORDS;

const toIso = (d: Date | string | undefined) =>
    d ? (d instanceof Date ? d : new Date(d)).toISOString() : undefined;

const publishedIso = toIso(rawPublished);
const modifiedIso = toIso(rawModified);

const jsonLd = type === 'article' ? {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": title,
    "description": description.trim(),
    "url": Astro.url.href,
    "image": new URL(image, Astro.url).href,
    ...(publishedIso && {"datePublished": publishedIso}),
    ...(modifiedIso && {"dateModified": modifiedIso}),
    ...(authors?.length && {
        "author": authors.map(name => ({"@type": "Person", "name": name}))
    }),
    ...(articleTags?.length && {"keywords": articleTags.join(", ")}),
    "publisher": {
        "@type": "Organization",
        "name": "htmx",
        "url": Astro.site?.href ?? "https://four.htmx.org",
    },
} : {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "htmx",
    "url": Astro.site?.href ?? "https://four.htmx.org",
    "description": description.trim(),
};
---

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title === 'htmx' ? title : `${title} ~ htmx`}</title>

    <!-- Performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">

    <!-- SEO & Page Meta -->
    <meta name="description" content={description.trim()}>
    <meta name="keywords"
          content={metaKeywords}>
    <meta name="robots" content="index, follow">
    <meta name="author" content="Big Sky Software">
    <meta name="generator" content="Astro">

    <!-- Sitemap -->
    <link rel="sitemap" href="/sitemap-index.xml">

    <!-- Security -->
    <meta name="referrer" content="strict-origin-when-cross-origin">

    <!-- Prevents iOS from turning version numbers (e.g. 2.0.0) into phone links -->
    <meta name="format-detection" content="telephone=no">

    <!-- Theme Colors -->
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#171717" media="(prefers-color-scheme: dark)">

    {Astro.url &&
            <link rel="canonical" href={Astro.url.href}>}

    <!-- Open Graph / Social Media -->
    <meta property="og:type" content={type}>
    <meta property="og:site_name" content="htmx">
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content={Astro.url}>
    <meta property="og:title" content={title}>
    <meta property="og:description" content={description.trim()}>
    <meta property="og:image" content={new URL(image, Astro.url)}>

    {type === 'article' && publishedIso && <meta property="article:published_time" content={publishedIso}>}
    {type === 'article' && modifiedIso && <meta property="article:modified_time" content={modifiedIso}>}
    {type === 'article' && authors?.map(a => <meta property="article:author" content={a}>)}
    {type === 'article' && articleTags?.map(t => <meta property="article:tag" content={t}>)}

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@htmx_org">
    <meta name="twitter:title" content={title}>
    <meta name="twitter:description" content={description.trim()}>
    <meta name="twitter:image" content={new URL(image, Astro.url)}>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
          rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">

    <!-- RSS Feed -->
    <link rel="alternate" type="application/atom+xml" title="Sitewide Atom feed" href="/atom.xml">

    <!-- htmx & extensions -->
    <meta name="htmx-config" content='{"history":"true","morphSkip":["#search-shortcut-hint"],"morphIgnore":["data-htmx-powered","_"],"logAll":false}'>
    <script is:inline src="/js/htmx.js"></script>
    <script is:inline src="/js/ext/hx-preload.js"></script>

    <!-- _hyperscript (core + render/template plugin bundled to guarantee the render
         command is registered before browserInit's processNode fires) -->
    <script is:inline defer src="/js/_hyperscript_bundle.min.js"></script>

    <!-- Re-execute inline scripts after morph navigation (hyperscript + pattern demos) -->
    <script is:inline defer src="/js/morph-afterswap.js"></script>

    <!-- Enable :active pseudo-class on iOS Safari (requires touchstart listener).
         Used by our custom interact: TailwindCSS variant for touch feedback.
         https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari -->
    <script>
        document.addEventListener('touchstart', function () {}, {passive: true});
    </script>

    <!-- Structured Data -->
    <script type="application/ld+json" set:html={JSON.stringify(jsonLd)}/>
</head>
