Improve age-restricted hyperlinks, clean up markup, and add navigation icons
This commit is contained in:
parent
c55c82633d
commit
57c2c7c649
31 changed files with 279 additions and 138 deletions
|
|
@ -1,13 +1,17 @@
|
|||
---
|
||||
import { getImage } from "astro:assets";
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
import Navigation from "../components/Navigation.astro";
|
||||
import logoBM from "../assets/images/logo_bm.png";
|
||||
import { t } from "../i18n";
|
||||
import IconHome from "../components/icons/IconHome.astro";
|
||||
import IconBriefcase from "../components/icons/IconBriefcase.astro";
|
||||
import IconSquareRSS from "../components/icons/IconSquareRSS.astro";
|
||||
import IconSun from "../components/icons/IconSun.astro";
|
||||
import IconMoon from "../components/icons/IconMoon.astro";
|
||||
import IconMagnifyingGlass from "../components/icons/IconMagnifyingGlass.astro";
|
||||
import IconTags from "../components/icons/IconTags.astro";
|
||||
import IconGamepad from "../components/icons/IconGamepad.astro";
|
||||
import IconBook from "../components/icons/IconBook.astro";
|
||||
|
||||
type Props = {
|
||||
pageTitle: string;
|
||||
|
|
@ -18,6 +22,8 @@ type Props = {
|
|||
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}>
|
||||
|
|
@ -31,8 +37,8 @@ const currentYear = new Date().getFullYear().toString();
|
|||
<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"
|
||||
>
|
||||
<div
|
||||
class="h-card static mb-4 flex flex-col items-center bg-bm-300 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"
|
||||
<nav
|
||||
class="h-card static mb-4 flex flex-col items-center bg-bm-300 pt-10 pb-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"
|
||||
|
|
@ -42,7 +48,90 @@ const currentYear = new Date().getFullYear().toString();
|
|||
width={192}
|
||||
/>
|
||||
<span class="p-name my-2 text-2xl font-semibold">Bad Manners</span>
|
||||
<Navigation />
|
||||
<ul class="flex flex-col gap-y-2">
|
||||
<li>
|
||||
<a
|
||||
class="u-url group text-link"
|
||||
href="https://badmanners.xyz/"
|
||||
data-age-restricted
|
||||
rel="me"
|
||||
>
|
||||
<IconHome width="1.25rem" height="1.25rem" class="inline align-middle" />
|
||||
<span class="group-focus:underline group-hover:underline">Main website</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="u-url group text-link"
|
||||
href="/"
|
||||
aria-current={isCurrentRoute("/") ? "page" : undefined}
|
||||
>
|
||||
<IconBriefcase width="1.25rem" height="1.25rem" class="inline align-middle" />
|
||||
<span class="group-focus:underline group-hover:underline">Gallery</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="u-url group text-link"
|
||||
href="/stories/1"
|
||||
aria-current={isCurrentRoute("/stories/1") ? "page" : undefined}
|
||||
>
|
||||
<IconBook width="1.25rem" height="1.25rem" class="inline align-middle" />
|
||||
<span class="group-focus:underline group-hover:underline">Stories</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="u-url group text-link"
|
||||
href="/games"
|
||||
aria-current={isCurrentRoute("/games") ? "page" : undefined}
|
||||
>
|
||||
<IconGamepad width="1.25rem" height="1.25rem" class="inline align-middle" />
|
||||
<span class="group-focus:underline group-hover:underline">Games</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="u-url group text-link"
|
||||
href="/tags"
|
||||
aria-current={isCurrentRoute("/tags") ? "page" : undefined}
|
||||
>
|
||||
<IconTags width="1.25rem" height="1.25rem" class="inline align-middle" />
|
||||
<span class="group-focus:underline group-hover:underline">Tags</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="u-url group text-link"
|
||||
href="/search"
|
||||
rel="search"
|
||||
aria-current={isCurrentRoute("/search") ? "page" : undefined}
|
||||
>
|
||||
<IconMagnifyingGlass width="1.25rem" height="1.25rem" class="inline align-middle" />
|
||||
<span class="group-focus:underline group-hover:underline">Search</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="u-url group text-link"
|
||||
href="/feed.xml"
|
||||
>
|
||||
<IconSquareRSS width="1.25rem" height="1.25rem" class="inline align-middle" />
|
||||
<span class="group-focus:underline group-hover:underline">RSS feed</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
data-dark-mode
|
||||
style={{ display: "none" }}
|
||||
class="group text-link"
|
||||
>
|
||||
<IconSun width="1.25rem" height="1.25rem" class="align-middle hidden dark:inline" />
|
||||
<IconMoon width="1.25rem" height="1.25rem" class="inline align-middle dark:hidden" />
|
||||
<span class="group-focus:underline group-hover:underline">{t("en", "published_content/toggle_dark_mode")}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pt-4 text-center text-xs text-black dark:text-white">
|
||||
<span
|
||||
>© {
|
||||
|
|
@ -55,29 +144,9 @@ const currentYear = new Date().getFullYear().toString();
|
|||
)
|
||||
} |
|
||||
</span>
|
||||
<a class="hover:underline focus:underline" href="/licenses.txt" target="_blank">Licenses</a>
|
||||
<a class="text-link hover:underline focus:underline" href="/licenses.txt" rel="license">Licenses</a>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-x-1 pb-10">
|
||||
<a class="u-url text-link p-1" href="https://badmanners.xyz/" target="_blank" aria-labelledby="label-main-website">
|
||||
<IconHome width="1.5rem" height="1.5rem" />
|
||||
<span id="label-main-website" class="sr-only">Main website</span>
|
||||
</a>
|
||||
<a class="text-link p-1" href="/feed.xml" target="_blank" aria-labelledby="label-rss-feed">
|
||||
<IconSquareRSS width="1.5rem" height="1.5rem" />
|
||||
<span id="label-rss-feed" class="sr-only">RSS feed</span>
|
||||
</a>
|
||||
<button
|
||||
data-dark-mode
|
||||
style={{ display: "none" }}
|
||||
class="text-link p-1"
|
||||
aria-labelledby="label-toggle-dark-mode"
|
||||
>
|
||||
<IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />
|
||||
<IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" />
|
||||
<span id="label-toggle-dark-mode" class="sr-only">{t("en", "published_content/toggle_dark_mode")}</span>
|
||||
</button>
|
||||
</div>
|
||||
</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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue