badmanners/gallery.badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve age-restricted hyperlinks, clean up markup, and add navigation icons

Browse source
This commit is contained in:
Bad Manners 2024-08-25 16:18:13 -03:00
parent c55c82633d
commit 57c2c7c649
31 changed files with 279 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

121
src/layouts/GalleryLayout.astro
View file

@ -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
>&copy; {
@ -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}

2
src/layouts/GameLayout.astro
View file

@ -54,7 +54,7 @@ const relatedGames = (await getEntries(props.relatedGames)).filter((game) => !ga
/>
<Fragment slot="section-information">
<Authors lang={props.lang}>
{authorsList.map((author) => <UserComponent rel="author" class="p-author" user={author} lang={props.lang} />)}
{authorsList.map((author) => <UserComponent rel="author nofollow" class="p-author" user={author} lang={props.lang} />)}
</Authors>
<div id="platforms">
<p>{t(props.lang, "game/platforms", props.platforms)}</p>

6
src/layouts/PublishedContentLayout.astro
View file

@ -165,6 +165,7 @@ const thumbnail =
{props.prev ? (
<a
href={props.prev.link}
rel="prev"
class="text-link flex items-center justify-center border-r border-stone-400 px-1 py-3 font-light underline dark:border-stone-600"
aria-label={props.labelPreviousContent}
>
@ -177,6 +178,7 @@ const thumbnail =
{props.next ? (
<a
href={props.next.link}
rel="next"
class="text-link flex items-center justify-center px-1 py-3 font-light underline"
aria-label={props.labelNextContent}
>
@ -299,6 +301,7 @@ const thumbnail =
{props.prev ? (
<a
href={props.prev.link}
rel="prev"
class="text-link flex items-center justify-center border-r border-stone-400 px-1 py-3 font-light underline dark:border-stone-600"
aria-label={props.labelPreviousContent}
>
@ -311,6 +314,7 @@ const thumbnail =
{props.next ? (
<a
href={props.next.link}
rel="next"
class="text-link flex items-center justify-center px-1 py-3 font-light underline"
aria-label={props.labelNextContent}
>
@ -391,7 +395,7 @@ const thumbnail =
<span
set:html={t(props.lang, "published_content/copyright_year", (props.pubDate || new Date()).getFullYear())}
/><span>&nbsp;|</span>
<a class="hover:underline focus:underline" href="/licenses.txt" target="_blank"
<a class="hover:underline focus:underline" href="/licenses.txt" rel="license"
>{t(props.lang, "published_content/licenses")}</a
>
</div>

4
src/layouts/StoryLayout.astro
View file

@ -71,7 +71,7 @@ const wordCount = props.wordCount?.toString();
requestersList && (
<Requesters lang={props.lang}>
{requestersList.map((requester) => (
<UserComponent class="p-name" user={requester} lang={props.lang} />
<UserComponent user={requester} lang={props.lang} />
))}
</Requesters>
)
@ -80,7 +80,7 @@ const wordCount = props.wordCount?.toString();
commissionersList && (
<Commissioners lang={props.lang}>
{commissionersList.map((commissioner) => (
<UserComponent class="p-name" user={commissioner} lang={props.lang} />
<UserComponent user={commissioner} lang={props.lang} />
))}
</Commissioners>
)