src/layouts/Base/Head.astro from kremalicious/blog

src/layouts/Base/Head.astro
Summary

Maintainability

Test Coverage

Issues
---
import { getImage } from 'astro:assets'
import faviconSrc from '@/images/favicon.png'
import faviconSvgSrc from '@/images/favicon.svg'
import { getUmamiConfig } from '@/lib/umami'
import config from '@config/blog.config'
import SchemaOrg, { type Props as SchemaProps } from './SchemaOrg.astro'
import type { Props as IndexProps } from './index.astro'

type Props = IndexProps

const { title, description, style, image, date, updated } = Astro.props

const titleFinal =
  title && title !== ''
    ? `${title} ¦ ${config.siteTitle}`
    : `${config.siteTitle} ¦ ${config.siteDescription}`

const descriptionFinal = description
  ? description.slice(0, 160)
  : config.siteDescription

const canonicalURL =
  Astro.url.pathname === '/'
    ? Astro.site?.origin
    : `${Astro.site?.origin}${Astro.url.pathname}`

const imageFinal = `${Astro.site?.origin}${
  image
    ? (await getImage({ src: image, width: 800, format: 'jpg' })).src
    : faviconSrc.src
}`

const imageFinalAlt = image ? `Teaser image for ${title}` : 'Logo'

const schema: SchemaProps = {
  title: titleFinal,
  url: canonicalURL as string,
  image: imageFinal,
  description: descriptionFinal,
  ...(date && { datePublished: date.toISOString().substring(0, 10) }),
  ...(updated && { dateModified: updated.toISOString().substring(0, 10) })
}

const isProduction = import.meta.env.PROD
const shouldIncludeAnalytics =
  isProduction && Astro.url.hostname === 'kremalicious.com'
const typekitID = import.meta.env.PUBLIC_TYPEKIT_ID
const { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID } = getUmamiConfig()

const appleTouchIcon = await getImage({
  src: faviconSrc,
  width: 180,
  height: 180,
  format: 'png'
})
const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' })
---

<head>
  <meta charset="utf-8" />

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />
  <meta name="generator" content={Astro.generator} />

  <title>{titleFinal}</title>

  <link rel="canonical" href={canonicalURL} />
  <meta name="description" content={descriptionFinal} />
  <meta property="og:title" content={titleFinal} />
  <meta property="og:image" content={imageFinal} />
  <meta property="og:image:alt" content={imageFinalAlt} />
  <meta property="og:url" content={canonicalURL} />
  <meta name="twitter:card" content="summary_large_image" />

  <meta name="theme-color" content="" />
  <meta name="msapplication-TileColor" content="" />
  <meta name="robots" content="noai, noimageai" />

  <link rel="icon" href="/favicon.ico" sizes="32x32" />
  <link rel="icon" href={faviconSvg.src} type="image/svg+xml" />
  <link rel="apple-touch-icon" href={appleTouchIcon.src} />
  <link rel="manifest" href="/manifest.json" />

  <link
    rel="alternate"
    title="kremalicious RSS Feed"
    type="application/rss+xml"
    href="/feed.xml"
  />
  <link
    rel="alternate"
    title="kremalicious JSON Feed"
    type="application/feed+json"
    href="/feed.json"
  />

  <SchemaOrg {...schema} />

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

  {
    typekitID && (
      <>
        <link
          rel="preload"
          as="style"
          href={`https://use.typekit.net/${typekitID}.css`}
        />
        <link rel="preconnect" href="https://p.typekit.net" />
        <link
          rel="stylesheet"
          href={`https://use.typekit.net/${typekitID}.css`}
        />
      </>
    )
  }

  {
    /* src/components/ThemeSwitch/theme.cjs is symlinked to public/theme.js before build */
  }
  <script is:inline src="/theme.js"></script>

  {style && <link rel="stylesheet" href={style} />}

  {
    shouldIncludeAnalytics && (
      <>
        <link rel="preconnect" href={UMAMI_SCRIPT_URL} />
        <script
          async
          src={UMAMI_SCRIPT_URL}
          data-website-id={UMAMI_WEBSITE_ID}
          is:inline
        />
      </>
    )
  }
</head>