kycnotme/web/src/components/BaseHead.astro

---
import LoadingIndicator from 'astro-loading-indicator/component'
import { Schema } from 'astro-seo-schema'
import { ClientRouter } from 'astro:transitions'
import { pwaAssetsHead } from 'virtual:pwa-assets/head'
import { pwaInfo } from 'virtual:pwa-info'

import { isNotArray } from '../lib/arrays'
import { DEPLOYMENT_MODE } from '../lib/envVariables'

import DynamicFavicon from './DynamicFavicon.astro'
import HtmxScript from './HtmxScript.astro'
import NotificationEventsScript from './NotificationEventsScript.astro'
import { makeOgImageUrl } from './OgImage'
import ServerEventsScript from './ServerEventsScript.astro'
import TailwindJsPluggin from './TailwindJsPluggin.astro'

import type { ComponentProps } from 'astro/types'
import type { WithContext, BreadcrumbList, ListItem } from 'schema-dts'

export type BreadcrumArray = [
  ...{
    name: string
    url: string
  }[],
  {
    name: string
    url?: string
  },
]

type Props = {
  pageTitle: string
  /**
   * Whether to enable htmx.
   *
   * @default false
   */
  htmx?: boolean
  /**
   * Page meta description
   *
   * @default 'KYCnot.me helps you find services without KYC for better privacy and control over your data.'
   */
  description?: string
  /**
   * Open Graph image.
   * - If `string` is provided, it will be used as the image URL.
   * - If `{ template: string, ...props }` is provided, it will be used to generate an Open Graph image based on the template.
   */
  ogImage?: Parameters<typeof makeOgImageUrl>[0]

  schemas?: ComponentProps<typeof Schema>['item'][]

  breadcrumbs?: BreadcrumArray | BreadcrumArray[]
}

const {
  pageTitle,
  htmx = false,
  description = 'KYCnot.me helps you find services without KYC for better privacy and control over your data.',
  ogImage,
  schemas,
  breadcrumbs,
} = Astro.props

const breadcrumbLists = breadcrumbs?.every(Array.isArray)
  ? (breadcrumbs as BreadcrumArray[])
  : breadcrumbs?.every(isNotArray)
    ? [breadcrumbs]
    : []

const modeName = DEPLOYMENT_MODE === 'production' ? '' : DEPLOYMENT_MODE === 'staging' ? 'PRE' : 'DEV'
const fullTitle = `${pageTitle} | KYCnot.me ${modeName}`
const ogImageUrl = makeOgImageUrl(ogImage, Astro.url)
---

<!-- Primary Meta Tags -->
<meta name="generator" content={Astro.generator} />
<meta name="description" content={description} />
<title>{fullTitle}</title>
<!-- {canonicalUrl && <link rel="canonical" href={canonicalUrl} />} -->

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
{!!ogImageUrl && <meta property="og:image" content={ogImageUrl} />}

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={fullTitle} />
<meta property="twitter:description" content={description} />
{!!ogImageUrl && <meta property="twitter:image" content={ogImageUrl} />}

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

<!-- PWA -->
{pwaAssetsHead.themeColor && <meta name="theme-color" content={pwaAssetsHead.themeColor.content} />}
{pwaAssetsHead.links.map((link) => <link {...link} />)}
{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}

<DynamicFavicon />

<!-- Components -->
<ClientRouter />
<LoadingIndicator color="green" />
<TailwindJsPluggin />
{htmx && <HtmxScript />}

<!-- JSON-LD Schemas -->
{schemas?.map((item) => <Schema item={item} />)}

<!-- Breadcrumbs -->
{
  breadcrumbLists.map((breadcrumbList) => (
    <Schema
      item={
        {
          '@context': 'https://schema.org',
          '@type': 'BreadcrumbList',
          itemListElement: breadcrumbList.map(
            (item, index) =>
              ({
                '@type': 'ListItem',
                position: index + 1,
                name: item.name,
                item: item.url ? new URL(item.url, Astro.url).href : undefined,
              }) satisfies ListItem
          ),
        } satisfies WithContext<BreadcrumbList>
      }
    />
  ))
}

<!-- Server events -->
<ServerEventsScript />

<!-- Push Notifications -->

<script src="/src/pwa.ts"></script>
<NotificationEventsScript />