Make Apache config optional and add h-feed support

This commit is contained in:
Bad Manners 2024-08-16 16:23:55 -03:00
parent bf82d8bcd6
commit 132b2b69f3
14 changed files with 182 additions and 53 deletions

1
src/env.d.ts vendored
View file

@ -1,2 +1,3 @@
/// <reference path="../.astro/env.d.ts" />
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

View file

@ -5,11 +5,11 @@ import DarkModeScript from "../components/DarkModeScript.astro";
import AgeRestrictedModal from "../components/AgeRestrictedModal.astro";
type Props = {
pageTitle?: string;
pageTitle: string;
lang?: string;
};
const { pageTitle = "Gallery", lang = "en" } = Astro.props;
const { pageTitle, lang = "en" } = Astro.props;
---
<html lang={lang}>
@ -25,6 +25,7 @@ const { pageTitle = "Gallery", lang = "en" } = Astro.props;
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle} | Bad Manners</title>
<link rel="me" href="https://badmanners.xyz" />
<link rel="me" href="https://meow.social/@BadManners" />
<link
rel="alternate"

View file

@ -6,11 +6,12 @@ import logoBM from "../assets/images/logo_bm.png";
import { t } from "../i18n";
type Props = {
pageTitle?: string;
pageTitle: string;
enablePagefind?: boolean;
class?: string;
};
const { pageTitle, enablePagefind } = Astro.props;
const { pageTitle, enablePagefind, class: className } = Astro.props;
const logo = await getImage({ src: logoBM, width: 192 });
const currentYear = new Date().getFullYear().toString();
---
@ -85,7 +86,7 @@ const currentYear = new Date().getFullYear().toString();
</div>
</div>
<main
class="ml-0 max-w-6xl px-2 pb-12 pt-4 md:ml-60 md:px-4 print:pb-0"
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 />

18
src/pages/[...config].ts Normal file
View file

@ -0,0 +1,18 @@
import type { APIRoute, GetStaticPaths } from "astro";
import { APACHE_CONFIG } from "astro:env/server";
const htaccess = `
ErrorDocument 404 /404.html
RedirectMatch 301 ^/stories(\/(index.html)?)?$ /stories/1/
Redirect 301 /story/ /stories/
Redirect 301 /game/ /games/
`.trim();
export const getStaticPaths: GetStaticPaths = async () => {
if (APACHE_CONFIG) {
return [{ params: { config: ".htaccess" }, props: { body: htaccess } }];
}
return [];
};
export const GET: APIRoute = ({ props: { body } }) => new Response(body);

View file

@ -11,10 +11,10 @@ const games = (
).sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
---
<GalleryLayout pageTitle="Games">
<GalleryLayout pageTitle="Games" class="h-feed">
<meta slot="head-description" property="og:description" content="Bad Manners || A game that I've gone and done." />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Games</h1>
<p class="my-4">A game that I've gone and done.</p>
<h1 class="p-name m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Games</h1>
<p class="p-summary my-4">A game that I've gone and done.</p>
<ul class="my-6 flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">
{
games.map((game) => (

View file

@ -55,25 +55,27 @@ const latestItems: LatestItemsEntry[] = [
.slice(0, MAX_ITEMS);
---
<GalleryLayout pageTitle="Gallery">
<GalleryLayout pageTitle="Gallery" class="h-feed">
<meta slot="head-description" property="og:description" content="Bad Manners || Welcome to my gallery!" />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">My gallery</h1>
<p class="my-4">
Welcome to my gallery! You can expect lots of safe vore/endosoma ahead. Use the navigation menu to navigate through
my content.
</p>
<ul class="list-disc pl-8">
<li><a class="text-link underline" href="/stories/1">Read my stories!</a></li>
<li><a class="text-link underline" href="/games/crossing-over">Play my visual novel!</a></li>
<li><a class="text-link underline" href="/tags">Find all content with a certain tag!</a></li>
</ul>
<p class="my-4">
For more information about me, please check out <a
class="text-link underline"
href="https://badmanners.xyz/"
target="_blank">my main website</a
>.
</p>
<h1 class="p-name m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">My gallery</h1>
<div class="p-summary">
<p class="my-4">
Welcome to my gallery! You can expect lots of safe vore/endosoma ahead. Use the navigation menu to navigate through
my content.
</p>
<ul class="list-disc pl-8">
<li><a class="text-link underline" href="/stories/1">Read my stories!</a></li>
<li><a class="text-link underline" href="/games/crossing-over">Play my visual novel!</a></li>
<li><a class="text-link underline" href="/tags">Find all content with a certain tag!</a></li>
</ul>
<p class="my-4">
For more information about me, please check out <a
class="text-link underline"
href="https://badmanners.xyz/"
target="_blank">my main website</a
>.
</p>
</div>
<section class="my-2" aria-labelledby="latest-uploads">
<h2 id="latest-uploads" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Latest uploads</h2>
<ul class="flex flex-wrap items-start justify-center gap-4 text-center md:justify-normal">

View file

@ -22,17 +22,19 @@ const { page } = Astro.props;
const totalPages = Math.ceil(page.total / page.size);
---
<GalleryLayout pageTitle="Stories">
<GalleryLayout pageTitle="Stories" class="h-feed">
<meta slot="head-description" property="og:description" content={`Bad Manners || ${page.total} stories.`} />
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Stories</h1>
<p class="my-4">The bulk of my content!</p>
<p class="text-center font-light text-stone-950 dark:text-white">
{
page.start == page.end
? `Displaying story #${page.start + 1}`
: `Displaying stories #${page.start + 1}${page.end + 1}`
} / {page.total}
</p>
<h1 class="p-name m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">Stories</h1>
<div class="p-summary">
<p class="my-4">The bulk of my content!</p>
<p class="text-center font-light text-stone-950 dark:text-white">
{
page.start == page.end
? `Displaying story #${page.start + 1}`
: `Displaying stories #${page.start + 1}${page.end + 1}`
} / {page.total}
</p>
</div>
<div class="mx-auto mb-6 mt-2 flex w-fit rounded-lg border border-stone-400 dark:border-stone-500">
{
page.url.prev && (

View file

@ -20,14 +20,14 @@ const bonusChapters = stories
const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summary);
---
<GalleryLayout pageTitle={series.data.name} enablePagefind={true}>
<GalleryLayout pageTitle={series.data.name} enablePagefind={true} class="h-feed">
<meta
slot="head-description"
property="og:description"
content="The Lost of the Marshes || The story of Quince, Nikili, and Suu."
/>
<h1 class="m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">{series.data.name}</h1>
<p class="my-4">This is the main hub for the story of Quince, Nikili, and Suu, as well as all bonus content.</p>
<h1 class="p-name m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">{series.data.name}</h1>
<p class="p-summary my-4">This is the main hub for the story of Quince, Nikili, and Suu, as well as all bonus content.</p>
<section class="my-2" aria-labelledby="main-chapters">
<h2
id="main-chapters"
@ -73,7 +73,13 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
height={story.data.thumbnailHeight}
/>
) : null}
<div class="p-name max-w-48 text-sm">{story.data.title}</div>
<div class="max-w-48 text-sm">
<span class="p-name">{story.data.title}</span>
<br />
<time class="dt-published italic" datetime={story.data.pubDate.toISOString().slice(0, 10)}>
{story.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
</time>
</div>
</a>
</li>
))
@ -96,7 +102,13 @@ const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summ
height={story.data.thumbnailHeight}
/>
) : null}
<div class="p-name max-w-48 text-sm">{story.data.title}</div>
<div class="max-w-48 text-sm">
<span class="p-name">{story.data.title}</span>
<br />
<time class="dt-published italic" datetime={story.data.pubDate.toISOString().slice(0, 10)}>
{story.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
</time>
</div>
</a>
</li>
))