Add support for embeds (i.e. Discord)
This commit is contained in:
parent
b92f53a9c2
commit
41c2f92927
11 changed files with 99 additions and 38 deletions
|
|
@ -21,6 +21,7 @@ const { pageTitle } = Astro.props;
|
|||
<title>{pageTitle || "Gallery"} | Bad Manners</title>
|
||||
<link rel="me" href="https://meow.social/@BadManners" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Gallery | Bad Manners" href={`${Astro.site}feed.xml`} />
|
||||
<slot name="head" />
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,22 +1,34 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { getImage } from "astro:assets";
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
import Navigation from "../components/Navigation.astro";
|
||||
import logoBM from "../assets/images/logo_bm.png";
|
||||
|
||||
type Props = {
|
||||
pageTitle?: string;
|
||||
};
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
const logo = await getImage({ src: logoBM, width: 192 });
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={pageTitle}>
|
||||
<Fragment slot="head">
|
||||
<meta content={pageTitle || "Bad Manners"} property="og:title" />
|
||||
<slot name="head-description" />
|
||||
<meta content={Astro.url} property="og:url" />
|
||||
<meta content={logo.src} property="og:image" />
|
||||
<meta content="#7DD05A" data-react-helmet="true" name="theme-color" />
|
||||
</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"
|
||||
>
|
||||
<div
|
||||
class="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"
|
||||
>
|
||||
<Image
|
||||
<img
|
||||
loading="eager"
|
||||
src={logoBM}
|
||||
src={logo.src}
|
||||
alt="Logo for Bad Manners"
|
||||
class="my-4 w-full max-w-[192px] rounded-sm border-2 border-green-950 shadow-md"
|
||||
width={192}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { getImage } from "astro:assets";
|
||||
import { type CollectionEntry, getEntry, getEntries } from "astro:content";
|
||||
import { Markdown } from "@astropub/md";
|
||||
import { format as formatDate } from "date-fns";
|
||||
|
|
@ -19,15 +19,21 @@ const copyrightedCharacters: Record<string, CollectionEntry<"users">> = {};
|
|||
Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
||||
copyrightedCharacters[character] = await getEntry(props.copyrightedCharacters[character]);
|
||||
});
|
||||
// const relatedStories = (await getEntries(props.relatedStories)).filter(
|
||||
// (story) => !story.data.isDraft,
|
||||
// );
|
||||
// const relatedGames = (await getEntries(props.relatedGames)).filter(
|
||||
// (game) => !game.data.isDraft,
|
||||
// );
|
||||
// const relatedStories = (await getEntries(props.relatedStories)).filter((story) => !story.data.isDraft);
|
||||
// const relatedGames = (await getEntries(props.relatedGames)).filter((game) => !game.data.isDraft);
|
||||
const thumbnail =
|
||||
props.thumbnail &&
|
||||
(await getImage({ src: props.thumbnail, width: props.thumbnailWidth, height: props.thumbnailHeight }));
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={props.title}>
|
||||
<Fragment slot="head">
|
||||
<meta content={props.title} property="og:title" />
|
||||
<meta content={props.contentWarning} property="og:description" />
|
||||
<meta content={Astro.url} property="og:url" />
|
||||
{thumbnail ? <meta content={thumbnail.src} property="og:image" /> : null}
|
||||
<meta content="#7DD05A" data-react-helmet="true" name="theme-color" />
|
||||
</Fragment>
|
||||
<div
|
||||
id="top"
|
||||
class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-16 pt-20 dark:from-green-700 dark:to-green-950 print:bg-none"
|
||||
|
|
@ -96,18 +102,20 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
|||
<p>{props.contentWarning}</p>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
|
||||
{
|
||||
props.thumbnail && (
|
||||
<Image
|
||||
loading="eager"
|
||||
src={props.thumbnail}
|
||||
alt={`Cover art for ${props.title}`}
|
||||
width={props.thumbnailWidth}
|
||||
height={props.thumbnailHeight}
|
||||
class="mx-auto my-5 shadow-lg"
|
||||
/>
|
||||
)
|
||||
thumbnail ? (
|
||||
<Fragment>
|
||||
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
|
||||
<img
|
||||
loading="eager"
|
||||
src={thumbnail.src}
|
||||
alt={`Cover art for ${props.title}`}
|
||||
width={props.thumbnailWidth}
|
||||
height={props.thumbnailHeight}
|
||||
class="mx-auto my-5 shadow-lg"
|
||||
/>
|
||||
</Fragment>
|
||||
) : null
|
||||
}
|
||||
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
|
||||
<article id="story" class="pr-1 font-serif">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { type CollectionEntry, getEntry, getEntries } from "astro:content";
|
||||
import { getImage } from "astro:assets";
|
||||
import { type CollectionEntry, getEntry, getEntries, getCollection } from "astro:content";
|
||||
import { Markdown } from "@astropub/md";
|
||||
import { format as formatDate } from "date-fns";
|
||||
import { enUS as enUSLocale } from "date-fns/locale/en-US";
|
||||
|
|
@ -10,7 +10,6 @@ import Authors from "../components/Authors.astro";
|
|||
import UserComponent from "../components/UserComponent.astro";
|
||||
import CopyrightedCharacters from "../components/CopyrightedCharacters.astro";
|
||||
import Prose from "../components/Prose.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
type Props = CollectionEntry<"stories">["data"];
|
||||
|
||||
|
|
@ -32,6 +31,7 @@ Object.keys(props.copyrightedCharacters).forEach(async (character) => {
|
|||
copyrightedCharacters[character] = await getEntry(props.copyrightedCharacters[character]);
|
||||
});
|
||||
const relatedStories = (await getEntries(props.relatedStories)).filter((story) => !story.data.isDraft);
|
||||
// const relatedGames = (await getEntries(props.relatedGames)).filter((game) => !game.data.isDraft);
|
||||
const categorizedTags = Object.fromEntries(
|
||||
(await getCollection("tag-categories")).flatMap((category) =>
|
||||
category.data.tags.map((tag) => {
|
||||
|
|
@ -54,12 +54,19 @@ const tags = props.tags.map<[string, string]>((tag) => {
|
|||
}
|
||||
return [tagSlug, categorizedTags[tag]!];
|
||||
});
|
||||
// const relatedGames = (await getEntries(props.relatedGames)).filter(
|
||||
// (game) => !game.data.isDraft,
|
||||
// );
|
||||
const thumbnail =
|
||||
props.thumbnail &&
|
||||
(await getImage({ src: props.thumbnail, width: props.thumbnailWidth, height: props.thumbnailHeight }));
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={props.title}>
|
||||
<Fragment slot="head">
|
||||
<meta content={props.title} property="og:title" />
|
||||
<meta content={`Word count: ${props.wordCount}. ${props.contentWarning}`} property="og:description" />
|
||||
<meta content={Astro.url} property="og:url" />
|
||||
{thumbnail ? <meta content={thumbnail.src} property="og:image" /> : null}
|
||||
<meta content="#7DD05A" data-react-helmet="true" name="theme-color" />
|
||||
</Fragment>
|
||||
<div
|
||||
id="top"
|
||||
class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-16 pt-20 dark:from-green-700 dark:to-green-950 print:bg-none"
|
||||
|
|
@ -184,18 +191,20 @@ const tags = props.tags.map<[string, string]>((tag) => {
|
|||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
|
||||
{
|
||||
props.thumbnail && (
|
||||
<Image
|
||||
loading="eager"
|
||||
src={props.thumbnail}
|
||||
alt={`Cover art for ${props.title}`}
|
||||
width={props.thumbnailWidth}
|
||||
height={props.thumbnailHeight}
|
||||
class="mx-auto my-5 shadow-lg"
|
||||
/>
|
||||
)
|
||||
thumbnail ? (
|
||||
<Fragment>
|
||||
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
|
||||
<img
|
||||
loading="eager"
|
||||
src={thumbnail.src}
|
||||
alt={`Cover art for ${props.title}`}
|
||||
width={props.thumbnailWidth}
|
||||
height={props.thumbnailHeight}
|
||||
class="mx-auto my-5 shadow-lg"
|
||||
/>
|
||||
</Fragment>
|
||||
) : null
|
||||
}
|
||||
<hr class="mx-auto my-10 w-[80%] max-w-xl border-stone-400 dark:border-stone-600" />
|
||||
<article id="story" class="pr-1 font-serif">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue