137 lines
5.4 KiB
Text
137 lines
5.4 KiB
Text
---
|
|
import { getImage } from "astro:assets";
|
|
import BaseLayout from "./BaseLayout.astro";
|
|
import logoBM from "../assets/images/logo_bm.png";
|
|
import { t } from "../i18n";
|
|
import {
|
|
IconHome,
|
|
IconBriefcase,
|
|
IconSquareRSS,
|
|
IconSun,
|
|
IconMoon,
|
|
IconMagnifyingGlass,
|
|
IconTags,
|
|
IconGamepad,
|
|
IconBook,
|
|
} from "../components/icons";
|
|
|
|
type Props = {
|
|
pageTitle: string;
|
|
enablePagefind?: boolean;
|
|
class?: string;
|
|
};
|
|
|
|
const { pageTitle, enablePagefind, class: className } = Astro.props;
|
|
const logo = await getImage({ src: logoBM, width: 192 });
|
|
const currentYear = new Date().getFullYear().toString();
|
|
const isCurrentRoute = (path: string) =>
|
|
Astro.url.pathname === path || (path !== "/" && Astro.url.pathname === `${path}/`);
|
|
---
|
|
|
|
<BaseLayout pageTitle={pageTitle}>
|
|
<Fragment slot="head">
|
|
<meta property="og:title" content={pageTitle || "Bad Manners"} />
|
|
<meta property="og:url" content={Astro.url} />
|
|
<meta property="og:image" content={logo.src} />
|
|
<meta property="og:image:alt" content="Logo for Bad Manners" />
|
|
<slot name="head" />
|
|
</Fragment>
|
|
<div
|
|
class="flex min-h-screen flex-col bg-stone-200 text-stone-800 md:flex-row dark:bg-stone-800 dark:text-stone-200 print:bg-none"
|
|
>
|
|
<nav
|
|
class="h-card static mb-4 flex flex-col items-center bg-bm-300 pb-10 pt-10 text-center text-stone-900 shadow-xl md:fixed md:inset-y-0 md:left-0 md:mb-0 md:w-60 md:pt-20 dark:bg-green-900 dark:text-stone-100 print:bg-none print:shadow-none"
|
|
>
|
|
<img
|
|
loading="eager"
|
|
src={logo.src}
|
|
alt="A pixelated metal briefcase over a background with a green gradient."
|
|
class="u-logo my-4 w-full max-w-[192px] rounded-sm border-2 border-green-950 shadow-md"
|
|
width={192}
|
|
/>
|
|
<span class="p-name my-2 text-2xl font-semibold">Bad Manners</span>
|
|
<ul class="flex flex-col gap-y-2">
|
|
<li>
|
|
<a class="u-url text-link group" href="https://badmanners.xyz/" data-age-restricted rel="me">
|
|
<IconHome width="1.25rem" height="1.25rem" class="inline align-middle" />
|
|
<span class="group-hover:underline group-focus:underline">Main website</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="u-url text-link group" href="/" aria-current={isCurrentRoute("/") ? "page" : undefined}>
|
|
<IconBriefcase width="1.25rem" height="1.25rem" class="inline align-middle" />
|
|
<span class="group-hover:underline group-focus:underline">Gallery</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="u-url text-link group"
|
|
href="/stories/1"
|
|
aria-current={isCurrentRoute("/stories/1") ? "page" : undefined}
|
|
>
|
|
<IconBook width="1.25rem" height="1.25rem" class="inline align-middle" />
|
|
<span class="group-hover:underline group-focus:underline">Stories</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="u-url text-link group" href="/games" aria-current={isCurrentRoute("/games") ? "page" : undefined}>
|
|
<IconGamepad width="1.25rem" height="1.25rem" class="inline align-middle" />
|
|
<span class="group-hover:underline group-focus:underline">Games</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="u-url text-link group" href="/tags" aria-current={isCurrentRoute("/tags") ? "page" : undefined}>
|
|
<IconTags width="1.25rem" height="1.25rem" class="inline align-middle" />
|
|
<span class="group-hover:underline group-focus:underline">Tags</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="u-url text-link group"
|
|
href="/search"
|
|
rel="search"
|
|
aria-current={isCurrentRoute("/search") ? "page" : undefined}
|
|
>
|
|
<IconMagnifyingGlass width="1.25rem" height="1.25rem" class="inline align-middle" />
|
|
<span class="group-hover:underline group-focus:underline">Search</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="u-url text-link group" href="/feed.xml">
|
|
<IconSquareRSS width="1.25rem" height="1.25rem" class="inline align-middle" />
|
|
<span class="group-hover:underline group-focus:underline">RSS feed</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<button data-dark-mode style={{ display: "none" }} class="text-link group">
|
|
<IconSun width="1.25rem" height="1.25rem" class="hidden align-middle dark:inline" />
|
|
<IconMoon width="1.25rem" height="1.25rem" class="inline align-middle dark:hidden" />
|
|
<span class="group-hover:underline group-focus:underline"
|
|
>{t("en", "published_content/toggle_dark_mode")}</span
|
|
>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div class="pt-4 text-center text-xs text-black dark:text-white">
|
|
<span
|
|
>© {
|
|
currentYear === "2024" ? (
|
|
<time datetime="2024">2024</time>
|
|
) : (
|
|
<>
|
|
<time datetime="2024">2024</time>–<time datetime={currentYear}>{currentYear}</time>
|
|
</>
|
|
)
|
|
} |
|
|
</span>
|
|
<a class="text-link hover:underline focus:underline" href="/licenses.toml" rel="license">Licenses</a>
|
|
</div>
|
|
</nav>
|
|
<main
|
|
class:list={[className, "ml-0 max-w-6xl px-2 pb-12 pt-4 md:ml-60 md:px-4 print:pb-0"]}
|
|
data-pagefind-body={enablePagefind ? "" : undefined}
|
|
>
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</BaseLayout>
|