mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-05-29 06:43:15 +00:00
163 lines
5 KiB
Text
163 lines
5 KiB
Text
---
|
|
import "../styles/styles.scss";
|
|
import Banner from "../assets/banner.png";
|
|
|
|
interface Props {
|
|
title: string;
|
|
plugins?: {
|
|
katex?: boolean,
|
|
giscus?: boolean,
|
|
}
|
|
seo?: {
|
|
description?: string,
|
|
tags?: string[],
|
|
}
|
|
}
|
|
|
|
const { title, plugins, seo } = Astro.props;
|
|
|
|
const plausible = import.meta.env.PUBLIC_PLAUSIBLE !== "false";
|
|
const address = import.meta.env.PUBLIC_ADDRESS;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>{title}</title>
|
|
|
|
<meta charset="UTF-8" />
|
|
<meta name="description" content={seo?.description ? seo?.description : "Premium Legs only"} />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<meta name="keywords" content={seo?.tags ? seo?.tags.join(', ') : "furry, gay, homosegs"} />
|
|
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:description" content={seo?.description ? seo?.description : "Premium Legs only"} />
|
|
<meta property="og:url" content="https://gay.leggy.dev" />
|
|
<meta property="og:type" content="website" />
|
|
|
|
<link
|
|
rel="icon"
|
|
type="image/webp"
|
|
href="/leg.webp"
|
|
/>
|
|
|
|
<link
|
|
rel="preconnect"
|
|
href="https://api.fontshare.com"
|
|
>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://api.fontshare.com/v2/css?f[]=jet-brains-mono@400&f[]=general-sans@1&display=swap"
|
|
/>
|
|
|
|
{plausible ? (
|
|
<link
|
|
rel="preconnect"
|
|
href="https://plausible.leggy.dev"
|
|
>
|
|
<script
|
|
is:inline
|
|
defer
|
|
data-domain="gay.leggy.dev"
|
|
src="https://plausible.leggy.dev/js/script.js"
|
|
></script>
|
|
) : (
|
|
<script is:inline>console.log("Plausible Disabled");</script>
|
|
)}
|
|
{plugins?.katex && (
|
|
<link
|
|
rel="preconnect"
|
|
href="https://cdn.jsdelivr.net"
|
|
>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"
|
|
integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script
|
|
is:inline
|
|
defer
|
|
src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"
|
|
integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
is:inline
|
|
defer
|
|
src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"
|
|
integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk"
|
|
crossorigin="anonymous"
|
|
onload="renderMathInElement(document.body);"
|
|
></script>
|
|
)}
|
|
{plugins?.giscus && (
|
|
<script
|
|
is:inline
|
|
src="https://giscus.app/client.js"
|
|
data-repo="Fluffy-Bean/website"
|
|
data-repo-id="R_kgDOL-t-KQ"
|
|
data-category="General"
|
|
data-category-id="DIC_kwDOL-t-Kc4CfxFh"
|
|
data-mapping="title"
|
|
data-strict="0"
|
|
data-reactions-enabled="1"
|
|
data-emit-metadata="0"
|
|
data-input-position="top"
|
|
data-theme=`${address}/custom/giscus.css`
|
|
data-lang="en"
|
|
data-loading="lazy"
|
|
crossorigin="anonymous"
|
|
async
|
|
></script>
|
|
)}
|
|
</head>
|
|
<body>
|
|
<a href="#content-skip" tabindex="0" id="content-skip-button">Skip to content</a>
|
|
<div class="banner">
|
|
<img
|
|
src={Banner.src}
|
|
alt="Stretch of road leading to cloudy hills with houses in the horizon"
|
|
width="1080"
|
|
height="700"
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<main>
|
|
<slot />
|
|
</main>
|
|
</body>
|
|
<script>
|
|
function update(element: HTMLElement) { element.style.top = `${window.scrollY * 0.75 }px`; }
|
|
const img = document.querySelector(".banner > img") as HTMLImageElement;
|
|
document.addEventListener("scroll", () => update(img))
|
|
document.addEventListener("DOMContentLoaded", () => update(img))
|
|
</script>
|
|
</html>
|
|
|
|
<style lang="scss">
|
|
@import "../styles/vars.scss";
|
|
|
|
#content-skip-button {
|
|
padding: 16px 32px;
|
|
|
|
position: absolute;
|
|
top: -1000000px;
|
|
left: -1000000px;
|
|
z-index: 999999999;
|
|
|
|
font-weight: bolder;
|
|
text-decoration: none;
|
|
|
|
background-color: $accent;
|
|
color: $light;
|
|
|
|
&:focus {
|
|
top: 0;
|
|
left: 0;
|
|
outline: 0 solid transparent;
|
|
}
|
|
}
|
|
</style>
|