blog/src/components/Head.astro

---
import themeConfig from '@/config'

interface Props {
  postTitle?: string
  postDescription?: string
  postImage?: string
}

const { postTitle, postDescription, postImage } = Astro.props
const { title, subtitle, description, author, url, favicon } = themeConfig.site
const { light: { backgroundStart: lightMode }, dark: { backgroundStart: darkMode } } = themeConfig.color
const { language } = themeConfig.global
const { verification = {}, twitterID = '', facebookID = '', facebookLink = '', googleAnalyticsID = '', umamiAnalyticsID = '', siteScreenshot = '' } = themeConfig.seo ?? {}
const { google = '', bing = '', yandex = '', baidu = '' } = verification
const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
---
<!-- Basic -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

{favicon.toLowerCase().endsWith('.webp') && <link rel="icon" type="image/webp" href={favicon} />}
{favicon.toLowerCase().endsWith('.svg') && <link rel="icon" type="image/svg+xml" href={favicon} />}
{favicon.toLowerCase().endsWith('.png') && <link rel="icon" type="image/png" href={favicon} />}

<title>{postTitle ? `${postTitle} - ${title}` : `${title} - ${subtitle}`}</title>
<meta name="description" content={postDescription || description} />
<meta name="author" content={author} />
<meta name="generator" content={Astro.generator} />
<meta name="theme-color" content={lightMode} media="(prefers-color-scheme: light)" />
<meta name="theme-color" content={darkMode} media="(prefers-color-scheme: dark)" />
<meta itemprop="name" content={postTitle || title} />
<meta itemprop="image" content={postImage || siteScreenshot} />
<meta itemprop="description" content={postDescription || subtitle} />

<!-- Preload -->
<link rel="preconnect" href={cdn} />
<link rel="preload" href={`${cdn}/gh/radishzzz/astro-theme-retypeset@master/src/style/font.css`} as="style" />
{commentURL && <link rel="dns-prefetch" href={commentURL} />}
{imageHostURL && <link rel="dns-prefetch" href={imageHostURL} />}
{customGoogleAnalyticsURL && <link rel="dns-prefetch" href={customGoogleAnalyticsURL} />}
{customUmamiAnalyticsURL && <link rel="dns-prefetch" href={customUmamiAnalyticsURL} />}
<link rel="stylesheet" href={`${cdn}/gh/radishzzz/astro-theme-retypeset@master/src/style/font.css`} />

<!-- Link -->
<link rel="author" href={url} />
<link rel="publisher" href={author} />
<link rel="canonical" href={Astro.url} />
<!-- todo language -->
<link rel="alternate" href="/en/" hreflang="en" />
<link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS" />
<link rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" />

<!-- Facebook Open Graph -->
<meta property="fb:app_id" content={facebookID} />
<meta property="og:url" content={Astro.url} />
<meta property="og:type" content={postTitle ? 'article' : 'website'} />
<meta property="og:title" content={postTitle || title} />
<meta property="og:image" content={postImage || siteScreenshot} />
<meta property="og:image:alt" content={postTitle || title} />
<meta property="og:description" content={postDescription || subtitle} />
<meta property="og:site_name" content={title} />
<meta property="og:locale" content={language} />
<meta property="article:author" content={facebookLink} />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content={Astro.url} />
<meta name="twitter:title" content={postTitle || title} />
<meta name="twitter:description" content={postDescription || subtitle} />
<meta name="twitter:image" content={postImage || siteScreenshot} />
<meta name="twitter:image:alt" content={postTitle || title} />
{twitterID && (
  <>
    <meta name="twitter:site" content={twitterID} />
    <meta name="twitter:creator" content={twitterID} />
  </>
)}
<meta name="twitter:dnt" content="on" />

<!-- Site Verification -->
{google && <meta name="google-site-verification" content={google} />}
{bing && <meta name="msvalidate.01" content={bing} />}
{yandex && <meta name="yandex-verification" content={yandex} />}
{baidu && <meta name="baidu-site-verification" content={baidu} />}

<!-- Google Analytics -->
{
  googleAnalyticsID && (
    <>
      <script
        type="text/partytown"
        crossorigin="anonymous"
        src={`${customGoogleAnalyticsURL || 'https://www.googletagmanager.com'}/gtag/js?id=${googleAnalyticsID}`}
      />
      <script
        type="text/partytown"
        define:vars={{ googleAnalyticsID, customGoogleAnalyticsURL }}
      >
        window.dataLayer = window.dataLayer || []
        function gtag(...args) {
          dataLayer.push(args)
        }
        gtag('js', new Date())
        if (customGoogleAnalyticsURL) {
          gtag('config', googleAnalyticsID, {
            transport_url: customGoogleAnalyticsURL,
          })
        }
        else {
          gtag('config', googleAnalyticsID)
        }
      </script>
    </>
  )
}

<!-- Umami Analytics -->
{
  umamiAnalyticsID && (
    <script
      type="text/partytown"
      crossorigin="anonymous"
      data-website-id={umamiAnalyticsID}
      src={customUmamiAnalyticsJS || 'https://analytics.umami.is/script.js'}
      data-cache="true"
    />
  )
}