all repos — website @ fb99e800c5471f54804ca373b1642a0e118b91ff

My official website.

src/components/Head.astro (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 
---
import '../styles/global.css'
import '../styles/katex.css'

import { SITE } from '@/consts'
import { ViewTransitions } from 'astro:transitions'

interface Props {
  title: string
  description: string
  image?: string
}

const canonicalURL = new URL(Astro.url.pathname, Astro.site)

const { title, description, image = '/static/twitter-card.png' } = Astro.props
---

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content={Astro.generator} />

<link rel="canonical" href={canonicalURL} />
<link rel="sitemap" href="/sitemap-index.xml" />

<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#121212" />
<meta name="msapplication-TileColor" content="#121212" />
<meta name="theme-color" content="#121212" />

<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:site_name" content={SITE.TITLE} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} />

<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.url)} />

<ViewTransitions />

<script is:inline>
  function setDarkMode(document) {
    const getThemePreference = () => {
      if (
        typeof localStorage !== 'undefined' &&
        localStorage.getItem('theme')
      ) {
        return localStorage.getItem('theme')
      }
      return window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark'
        : 'theme-light'
    }
    const isDark = getThemePreference() === 'dark'
    document.documentElement.classList[isDark ? 'add' : 'remove']('dark')

    if (typeof localStorage !== 'undefined') {
      const observer = new MutationObserver(() => {
        const isDark = document.documentElement.classList.contains('dark')
        localStorage.setItem('theme', isDark ? 'dark' : 'theme-light')
      })
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['class'],
      })
    }
  }

  setDarkMode(document)

  document.addEventListener('astro:before-swap', (ev) => {
    // Pass the incoming document to set the theme on it
    setDarkMode(ev.newDocument)
  })
</script>