Files
kycnotme/web/src/components/BaseHead.astro
2025-05-19 10:23:36 +00:00

134 lines
4.0 KiB
Plaintext

---
import LoadingIndicator from 'astro-loading-indicator/component'
import { Schema } from 'astro-seo-schema'
import { ClientRouter } from 'astro:transitions'
import { isNotArray } from '../lib/arrays'
import { DEPLOYMENT_MODE } from '../lib/envVariables'
import HtmxScript from './HtmxScript.astro'
import { makeOgImageUrl } from './OgImage'
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)
---
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon-lightmode.svg" media="(prefers-color-scheme: light)" />
{DEPLOYMENT_MODE === 'development' && <link rel="icon" type="image/svg+xml" href="/favicon-dev.svg" />}
{DEPLOYMENT_MODE === 'staging' && <link rel="icon" type="image/svg+xml" href="/favicon-stage.svg" />}
<!-- 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" />
<meta name="theme-color" content="#040505" />
<!-- 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>
}
/>
))
}