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

Improve HTML rendering in Markdown and update layouts

Browse source
This commit is contained in:
Bad Manners 2024-08-26 12:54:24 -03:00
parent 4194154818
commit 21a77ed254
40 changed files with 282 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/layouts/GalleryLayout.astro
View file

@ -3,15 +3,17 @@ import { getImage } from "astro:assets";
import BaseLayout from "./BaseLayout.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";
import {
IconHome,
IconBriefcase,
IconSquareRSS,
IconSun,
IconMoon,
IconMagnifyingGlass,
IconTags,
IconGamepad,
IconBook,
} from "../components/icons";
type Props = {
pageTitle: string;
@ -29,107 +31,85 @@ const isCurrentRoute = (path: string) =>
<BaseLayout pageTitle={pageTitle}>
<Fragment slot="head">
<meta property="og:title" content={pageTitle || "Bad Manners"} />
<slot name="head-description" />
<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 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"
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="Logo for Bad Manners"
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 group text-link"
href="https://badmanners.xyz/"
data-age-restricted
rel="me"
>
<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-focus:underline group-hover:underline">Main website</span>
<span class="group-hover:underline group-focus:underline">Main website</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/"
aria-current={isCurrentRoute("/") ? "page" : undefined}
>
<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-focus:underline group-hover:underline">Gallery</span>
<span class="group-hover:underline group-focus:underline">Gallery</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
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-focus:underline group-hover:underline">Stories</span>
<span class="group-hover:underline group-focus:underline">Stories</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/games"
aria-current={isCurrentRoute("/games") ? "page" : undefined}
>
<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-focus:underline group-hover:underline">Games</span>
<span class="group-hover:underline group-focus:underline">Games</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/tags"
aria-current={isCurrentRoute("/tags") ? "page" : undefined}
>
<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-focus:underline group-hover:underline">Tags</span>
<span class="group-hover:underline group-focus:underline">Tags</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
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-focus:underline group-hover:underline">Search</span>
<span class="group-hover:underline group-focus:underline">Search</span>
</a>
</li>
<li>
<a
class="u-url group text-link"
href="/feed.xml"
>
<a class="u-url text-link group" 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>
<span class="group-hover:underline group-focus: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" />
<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-focus:underline group-hover:underline">{t("en", "published_content/toggle_dark_mode")}</span>
</a>
<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">
@ -144,7 +124,7 @@ const isCurrentRoute = (path: string) =>
)
} |
</span>
<a class="text-link hover:underline focus:underline" href="/licenses.txt" rel="license">Licenses</a>
<a class="text-link hover:underline focus:underline" href="/licenses.toml" rel="license">Licenses</a>
</div>
</nav>
<main

8
src/layouts/GameLayout.astro
View file

@ -48,13 +48,17 @@ const relatedGames = (await getEntries(props.relatedGames)).filter((game) => !ga
labelArticleSection={t(props.lang, "game/article_aria_label")}
>
<meta
slot="head-description"
slot="head"
property="og:description"
content={t(props.lang, "game/warnings", props.platforms, props.contentWarning)}
/>
<Fragment slot="section-information">
<Authors lang={props.lang}>
{authorsList.map((author) => <UserComponent rel="author nofollow" 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>

25
src/layouts/PublishedContentLayout.astro
View file

@ -11,13 +11,15 @@ import Prose from "../components/Prose.astro";
import MastodonComments from "../components/MastodonComments.astro";
import type { CopyrightedCharacters as CopyrightedCharactersType } from "../content/config";
import { qualifyLocalURLsInMarkdown } from "../utils/qualify_local_urls_in_markdown";
import IconSun from "../components/icons/IconSun.astro";
import IconMoon from "../components/icons/IconMoon.astro";
import IconInformation from "../components/icons/IconInformation.astro";
import IconArrowBack from "../components/icons/IconArrowBack.astro";
import IconChevronLeft from "../components/icons/IconChevronLeft.astro";
import IconChevronRight from "../components/icons/IconChevronRight.astro";
import IconArrowUp from "../components/icons/IconArrowUp.astro";
import {
IconSun,
IconMoon,
IconCircleInfo,
IconArrowBack,
IconChevronLeft,
IconChevronRight,
IconArrowUp,
} from "../components/icons";
interface RelatedContent {
link: string;
@ -91,8 +93,10 @@ const thumbnail =
<BaseLayout pageTitle={props.title} lang={props.lang}>
<Fragment slot="head">
{ props.isDraft ? (
<meta name="robots" content="noindex" />
) : null }
<meta property="og:title" content={props.title} data-pagefind-meta="title[content]" />
<slot name="head-description" />
<meta property="og:url" content={Astro.url} data-pagefind-meta="url[content]" />
{
thumbnail ? (
@ -106,6 +110,7 @@ const thumbnail =
</Fragment>
) : null
}
<slot name="head" />
</Fragment>
<div
id="top"
@ -136,7 +141,7 @@ const thumbnail =
class="text-link my-1 border-l border-stone-300 p-2 dark:border-stone-700"
aria-labelledby="label-go-to-description"
>
<IconInformation width="1.25rem" height="1.25rem" />
<IconCircleInfo width="1.25rem" height="1.25rem" />
<span class="sr-only" id="label-go-to-description"
>{t(props.lang, "published_content/go_to_description")}</span
>
@ -395,7 +400,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" rel="license"
<a class="hover:underline focus:underline" href="/licenses.toml" rel="license"
>{t(props.lang, "published_content/licenses")}</a
>
</div>

2
src/layouts/StoryLayout.astro
View file

@ -59,7 +59,7 @@ const wordCount = props.wordCount?.toString();
labelArticleSection={t(props.lang, "story/article_aria_label")}
>
<meta
slot="head-description"
slot="head"
property="og:description"
content={t(props.lang, "story/warnings", wordCount, props.contentWarning)}
/>