Something went wrong. Try again.
Mirror of https://github.com/kualta/site — web infrastructure
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181---import "@/styles/globals.css";import fredoka from "@fontsource/fredoka/files/fredoka-latin-400-normal.woff2?url";import { ClientRouter } from "astro:transitions";import MusicShelf from "@/components/MusicShelf.tsx";import musicData from "@/data/music.json";import type { Track } from "@/types";import ThemeInit from "@/components/ThemeInit.astro";import Header from "@/components/Header.astro";import NotificationsButton from "@/components/NotificationsButton.astro";import CornersScope from "@/components/CornersScope.astro";import { Snow } from "@/components/Snow.tsx";import { Toaster } from "@/components/Toaster.tsx";import SEO from "@/components/SEO.astro";import { SAME_AS, SITE_NAME, TWITTER, ogImage, pageDescription, pageTitle } from "@/lib/seo";
export interface Article { publishedTime: string; modifiedTime?: string; tags?: string[]; section?: string; wordCount?: number;}
interface Props { title?: string; description?: string; exactDescription?: boolean; image?: string; imageAlt?: string; type?: "website" | "article"; article?: Article; noindex?: boolean; /** the path search engines should credit, for pages served under more than one */ canonicalPath?: string; atprotoDocument?: string; /** extra schema.org nodes for whatever this page actually is */ schema?: object[];}
const { title, description, exactDescription = false, image, imageAlt = "kualta.dev", type = "website", article, noindex = false, canonicalPath, atprotoDocument, schema = [],} = Astro.props;
const musicPage = /^\/music(?:\/|$)/.test(Astro.url.pathname);const kaomojiPage = /^\/kaomoji(?:\/|$)/.test(Astro.url.pathname);const kaomojiResultsPage = /^\/kaomoji\/?$/.test(Astro.url.pathname);const musicSlug = musicPage ? Astro.url.pathname.split("/")[2] || undefined : undefined;const tracks = [...(musicData as Track[])].sort((a, b) => b.date.localeCompare(a.date));
const documentTitle = pageTitle(title);const metaDescription = exactDescription && description !== undefined ? description : pageDescription(description);const canonical = new URL(canonicalPath ?? Astro.url.pathname, Astro.site).toString();const og = ogImage(image, Astro.site);const month = new Date().getMonth();const isChristmas = month >= 10;
// large thumbnails and full snippets have to be opted into; without them Google// is free to crop the share card down to a favicon and clip the summaryconst robots = noindex ? "noindex, nofollow" : "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1";---<!doctype html><html lang="en" class="scroll-smooth dark"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{documentTitle}</title> <meta name="description" content={metaDescription} /> <link rel="icon" href="/favicon.ico" /> <link rel="canonical" href={canonical} /> {atprotoDocument && <link rel="site.standard.document" href={atprotoDocument} />} <meta name="robots" content={robots} /> <meta name="author" content={SITE_NAME} /> <!-- the Person schema's sameAs, repeated as rel=me so profiles that link back can verify the site --> {SAME_AS.map((href) => <link rel="me" href={href} />)} <meta name="theme-color" content="#181818" media="(prefers-color-scheme: dark)" /> <meta name="theme-color" content="#f8f8f8" media="(prefers-color-scheme: light)" />
<!-- the page is set in this face, so waiting for the stylesheet to ask for it costs a repaint --> <link rel="preload" href={fredoka} as="font" type="font/woff2" crossorigin /> <link rel="alternate" type="application/rss+xml" title={`${SITE_NAME} - posts`} href="/rss.xml" />
<meta property="og:site_name" content={SITE_NAME} /> <meta property="og:locale" content="en_US" /> <meta property="og:title" content={documentTitle} /> <meta property="og:description" content={metaDescription} /> <meta property="og:url" content={canonical} /> <meta property="og:type" content={type} /> <meta property="og:image" content={og.url} /> {og.width && <meta property="og:image:width" content={String(og.width)} />} {og.height && <meta property="og:image:height" content={String(og.height)} />} {og.type && <meta property="og:image:type" content={og.type} />} <meta property="og:image:alt" content={imageAlt} />
{article?.publishedTime && <meta property="article:published_time" content={article.publishedTime} />} {article?.modifiedTime && <meta property="article:modified_time" content={article.modifiedTime} />} {article && <meta property="article:author" content={Astro.site?.toString()} />} {article?.section && <meta property="article:section" content={article.section} />} {article?.tags?.map((tag) => <meta property="article:tag" content={tag} />)}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content={TWITTER} /> <meta name="twitter:creator" content={TWITTER} /> <meta name="twitter:title" content={documentTitle} /> <meta name="twitter:description" content={metaDescription} /> <meta name="twitter:image" content={og.url} /> <meta name="twitter:image:alt" content={imageAlt} />
<SEO title={title ?? SITE_NAME} documentTitle={documentTitle} description={metaDescription} canonical={canonical} ogImage={og} type={type} article={article} schema={schema} />
<ClientRouter /> <ThemeInit /> </head> <body data-music-page={musicPage ? "true" : undefined} data-kaomoji-results={kaomojiResultsPage ? "true" : undefined} class="bg-bg dark:bg-dark-bg disable-scrollbars text-text transition-colors ease-in-out delay-150 dark:text-dark-text place-items-center min-h-screen flex flex-col justify-center relative" > <div class="noise"></div>
{isChristmas && <Snow client:idle />}
<Header />
<main class="flex flex-col items-center justify-center grow w-full h-full"> <slot /> <MusicShelf client:load transition:persist="music-player" transition:persist-props tracks={tracks} slug={musicSlug} musicPage={musicPage} /> </main>
<CornersScope bottom_left={false} bottom_right={false} /> {Astro.url.pathname === "/" && ( <div class="home-screen-corners" aria-hidden="true"> <CornersScope top_left={false} top_right={false} /> </div> )} <div class="page-bottom" data-home={Astro.url.pathname === "/" ? "true" : undefined}> <CornersScope top_left={false} top_right={false} class="page-bottom-corner" /> {!musicPage && !kaomojiPage && <NotificationsButton />} </div> <script> document.addEventListener("astro:page-load", () => { const bottom = document.querySelector<HTMLElement>('.page-bottom[data-home="true"]'); if (!bottom) return; const update = () => bottom.toggleAttribute("data-scrolled", window.scrollY > 8); update(); window.addEventListener("scroll", update, { passive: true }); document.addEventListener("astro:before-swap", () => { window.removeEventListener("scroll", update); }, { once: true }); }); </script>
<Toaster client:idle /> </body></html>