diff options
author | João Augusto Costa Branco Marado Torres <torres.dev@disroot.org> | 2025-06-24 12:08:41 -0300 |
---|---|---|
committer | João Augusto Costa Branco Marado Torres <torres.dev@disroot.org> | 2025-06-24 12:50:43 -0300 |
commit | f9a77c5c27aede4e5978eb55d9b7af781b680a1d (patch) | |
tree | d545e325ba1ae756fc2eac66fac1001b6753c40d /src/components/BaseHead.astro |
feat!: initial commit
Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
Diffstat (limited to 'src/components/BaseHead.astro')
-rw-r--r-- | src/components/BaseHead.astro | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro new file mode 100644 index 0000000..5ac0410 --- /dev/null +++ b/src/components/BaseHead.astro @@ -0,0 +1,79 @@ +--- +// Import the global.css file here so that it is included on +// all pages through the use of the <BaseHead /> component. +import "../styles/global.css"; +import { SITE_AUTHOR, SITE_DESCRIPTION, SITE_TITLE } from "../consts"; +import { ClientRouter } from "astro:transitions"; + +export interface Props { + title: string; + description?: string; + image?: string; + keywords?: string[]; +} + +const canonicalURL = new URL(Astro.url.pathname, Astro.site); + +const { title, description = SITE_DESCRIPTION, image, keywords = [] } = + Astro.props; +// const socialImage = image ?? Astro.site.href + 'assets/social.png' +--- + +<!-- Global Metadata --> +<meta charset="utf-8" /> +<meta name="viewport" content="width=device-width,initial-scale=1" /> + +<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> +<link rel="sitemap" href="/sitemap-index.xml" /> +<link + rel="alternate" + type="application/rss+xml" + title={SITE_TITLE} + href={new URL("rss.xml", Astro.site)} +/> +<meta name="generator" content={Astro.generator} /> + +<!-- Canonical URL --> +<link rel="canonical" href={canonicalURL} /> + +<!-- Primary Meta Tags --> +<title>{title}</title> +<meta name="title" content={title} /> +<meta name="description" content={description} /> +<meta name="author" content={SITE_AUTHOR} /> +{keywords.length > 0 && <meta name="keywords" content={keywords.join(",")} />} +<meta name="theme-color" content="#a50026" /> +<meta + name="theme-color" + content="#f46d43" + media="(prefers-color-scheme: dark)" +/> + +<!-- Open Graph / Facebook --> +<meta property="og:type" content="website" /> +<meta property="og:url" content={Astro.url} /> +<meta property="og:title" content={title} /> +<meta property="og:description" content={description} /> +{image && <meta property="og:image" content={new URL(image, Astro.url)} />} + +<!-- Twitter --> +<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} /> +{image && <meta property="twitter:image" content={new URL(image, Astro.url)} />} + +<ClientRouter /> + +<script is:inline> + const root = document.documentElement; + const theme = localStorage.getItem("theme"); + if ( + theme === "dark" || + (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) + ) { + root.classList.add("theme-dark"); + } else { + root.classList.remove("theme-dark"); + } +</script> |