rda-v3/src/layouts/BaseLayout.astro
2025-12-29 13:12:55 +00:00

109 lines
3.9 KiB
Text

---
import "../styles/global.css";
import {
DEFAULT_OG_IMAGE,
OG_TYPE,
SITE_NAME,
SITE_URL,
TWITTER_CARD,
TWITTER_SITE,
} from "../config/site";
const {
title = "",
description,
keywords,
canonicalPath,
ogImage,
} = Astro.props;
const pageTitle =
title && title !== SITE_NAME ? `${title} | ${SITE_NAME}` : SITE_NAME;
const canonicalUrl = new URL(
canonicalPath ?? Astro.url.pathname,
SITE_URL,
).toString();
const ogImagePath = ogImage ?? DEFAULT_OG_IMAGE;
const ogImageUrl = ogImagePath ? new URL(ogImagePath, SITE_URL).toString() : "";
const hasOgImage = Boolean(ogImagePath);
const twitterSite = TWITTER_SITE?.trim();
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{pageTitle}</title>
<meta name="description" content={description} />
<meta name="keywords" content={keywords} />
<link rel="canonical" href={canonicalUrl} />
<meta property="og:site_name" content={SITE_NAME} />
<meta property="og:title" content={pageTitle} />
<meta property="og:description" content={description} />
<meta property="og:type" content={OG_TYPE} />
<meta property="og:url" content={canonicalUrl} />
{hasOgImage && <meta property="og:image" content={ogImageUrl} />}
<meta name="twitter:card" content={TWITTER_CARD} />
<meta name="twitter:title" content={pageTitle} />
<meta name="twitter:description" content={description} />
{hasOgImage && <meta name="twitter:image" content={ogImageUrl} />}
{twitterSite && <meta name="twitter:site" content={twitterSite} />}
<meta name="theme-color" content="#e2e2e2" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/favicon-96x96.png"
/>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://cdn.userway.org" />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@600;700;800&family=Merriweather:wght@700&display=swap"
rel="stylesheet"
/>
<slot name="head" />
</head>
<body>
<div
class="snow-banner"
role="region"
aria-label="Holiday announcement"
>
<div class="snow-banner__snow" aria-hidden="true">
<span class="snowflake snowflake-1"></span>
<span class="snowflake snowflake-2"></span>
<span class="snowflake snowflake-3"></span>
<span class="snowflake snowflake-4"></span>
<span class="snowflake snowflake-5"></span>
<span class="snowflake snowflake-6"></span>
<span class="snowflake snowflake-7"></span>
<span class="snowflake snowflake-8"></span>
</div>
<a
class="snow-banner__link"
href="https://www.amazon.co.uk/hz/wishlist/ls/2B4R5YZQ8U4B2?ref_=wl_share"
target="_blank"
rel="noreferrer"
>
The ponies have had a chat and put together an Amazon Wish-List
for Christmas! Click here
</a>
</div>
<slot />
<script
src="https://cdn.userway.org/widget.js"
data-account="ZdcVJAc6ri"
defer></script>
</body>
</html>