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

Retouch all pages and add 'Engaged in Reality'

Browse source
This commit is contained in:
Bad Manners 2024-11-01 19:44:34 -03:00
parent 1dda4c9af8
commit b03aca87e7
No known key found for this signature in database
GPG key ID: 8C88292CCB075609
37 changed files with 1701 additions and 553 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/DarkModeScriptInline.astro
View file

@ -1,4 +1,4 @@
---
---
<script is:inline>let g=document,f=a=>{var b="dark",c=localStorage,d=c.colorScheme;(d!="light"&&(d==b||matchMedia("(prefers-color-scheme:dark)").matches))&&a.body.classList.add(b)};g.addEventListener('astro:before-swap',e=>f(e.newDocument));f(g)</script>
<script is:inline>(a=>{var b="dark",c=localStorage,d=c.colorScheme;(d!="light"&&(d==b||matchMedia("(prefers-color-scheme:dark)").matches))&&a.body.classList.add(b)})(document)</script>

31
src/components/MastodonComments.astro
View file

@ -1,6 +1,8 @@
---
import type { Lang } from "@i18n";
import { IconStar, IconRetweet } from "./icons";
import { getCollection } from "astro:content";
import { isUserSelf } from "@utils/is_user_self";
type Props = {
lang: Lang;
@ -12,13 +14,24 @@ type Props = {
};
const { link, instance, user, postId, blacklistedComments } = Astro.props;
const selfUrl = (await getCollection("users", (user) => isUserSelf(user)))[0]?.data.links.mastodon?.link;
---
<section
id="comments-section"
class="px-2 font-serif"
aria-describedby="title-comments-section"
x-data={`{ link: ${JSON.stringify(link)}, instance: ${JSON.stringify(instance)}, user: ${JSON.stringify(user)}, postId: ${JSON.stringify(postId)}, blacklistedComments: ${JSON.stringify(blacklistedComments ?? [])}, comments: null, commentsLoading: false, commentsError: null }`}
x-data={JSON.stringify({
link,
instance,
user,
postId,
blacklistedComments: blacklistedComments ?? [],
selfUrl,
comments: null,
commentsLoading: false,
commentsError: null,
})}
@mastodon-comments.window="comments = $event.detail.comments; commentsLoading = false"
@mastodon-comments-error.window="commentsError = $event.detail.error"
>
@ -50,7 +63,8 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
<button
class="group mx-auto w-64 rounded-lg bg-bm-300 px-4 py-1 text-stone-800 disabled:bg-bm-400 dark:bg-green-800 dark:text-stone-100 dark:disabled:bg-green-900"
id="load-comments-button"
@click="if (!$el.disabled) { $el.disabled = true; commentsLoading = true; $dispatch('retrieveComments', { link, instance, user, postId, blacklistedComments })}"
@click="if (!$el.disabled) { $el.disabled = true; commentsLoading = true; $dispatch('retrieveComments', { link, instance, user, postId, blacklistedComments, selfUrl })}"
:aria-pressed="commentsLoading"
>
<span class="block hover:underline group-focus:underline group-disabled:hidden">Click to load comments</span>
<span class="hidden group-disabled:block">
@ -95,7 +109,6 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
<a
data-author
class="p-author h-card u-url text-link flex items-center text-lg hover:underline focus:underline"
rel="nofollow"
target="_blank"
>
<picture>
@ -181,10 +194,11 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
user: string;
postId: string;
blacklistedComments: string[];
selfUrl?: string;
}>;
if (document.querySelector("#comments-section")) {
async function renderComments(post: MastodonPost, blacklistedComments: Set<string>) {
async function renderComments(post: MastodonPost, blacklistedComments: Set<string>, selfUrl: string | undefined) {
try {
const response = await fetch(`https://${post.instance}/api/v1/statuses/${post.postId}/context`);
if (!response.ok) {
@ -230,6 +244,11 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
const commentBoxAuthor = commentBox.querySelector<HTMLElementTagNameMap["a"]>("a[data-author]")!;
commentBoxAuthor.href = comment.account.url;
if (comment.account.url === selfUrl) {
commentBoxAuthor.rel = "me";
} else {
commentBoxAuthor.rel = "nofollow";
}
commentBoxAuthor.title = comment.account.acct;
commentBoxAuthor.setAttribute("aria-label", comment.account.acct);
const avatar = commentBoxAuthor.querySelector<HTMLElementTagNameMap["img"]>("img[data-avatar]")!;
@ -309,8 +328,8 @@ const { link, instance, user, postId, blacklistedComments } = Astro.props;
}
document.addEventListener("retrieveComments", (e) => {
const { link, instance, user, postId, blacklistedComments } = (e as RetrieveCommentsEvent).detail;
renderComments({ link, instance, user, postId }, new Set(blacklistedComments));
const { link, instance, user, postId, blacklistedComments, selfUrl } = (e as RetrieveCommentsEvent).detail;
renderComments({ link, instance, user, postId }, new Set(blacklistedComments), selfUrl);
});
}
</script>

4
src/components/UserComponent.astro
View file

@ -3,6 +3,7 @@ import type { CollectionEntry } from "astro:content";
import clsx from "clsx";
import type { Lang } from "@i18n";
import { getUsernameForLang } from "@utils/get_username_for_lang";
import { isUserSelf } from "@utils/is_user_self";
type Props = {
lang: Lang;
@ -14,12 +15,13 @@ type Props = {
const { user, lang, class: className, rel } = Astro.props;
const username = getUsernameForLang(user, lang);
const link = user.data.preferredLink ? user.data.links[user.data.preferredLink]!.link : null;
const isSelf = isUserSelf(user);
---
{
link ? (
<a
rel={clsx(rel, "nofollow")}
rel={clsx(rel, isSelf ? "me" : "nofollow")}
href={link}
class:list={[className, "h-card u-url p-name text-link underline"]}
target="_blank"

15
src/components/icons/IconHome.astro
View file

@ -1,15 +0,0 @@
---
import SVGIcon from "./SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 576 512">
<path
d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"
></path>
</SVGIcon>

19
src/components/icons/IconSparkles.astro Normal file
View file

@ -0,0 +1,19 @@
---
import SVGIcon from "./SVGIcon.astro";
type Props = {
width: string;
height: string;
class?: string;
};
---
<SVGIcon {...Astro.props} viewBox="0 0 36 36" aria-label="✨">
<path
fill="#FFAC33"
d="M34.347 16.893l-8.899-3.294-3.323-10.891c-.128-.42-.517-.708-.956-.708-.439 0-.828.288-.956.708l-3.322 10.891-8.9 3.294c-.393.146-.653.519-.653.938 0 .418.26.793.653.938l8.895 3.293 3.324 11.223c.126.424.516.715.959.715.442 0 .833-.291.959-.716l3.324-11.223 8.896-3.293c.391-.144.652-.518.652-.937 0-.418-.261-.792-.653-.938z"
></path><path
fill="#FFCC4D"
d="M14.347 27.894l-2.314-.856-.9-3.3c-.118-.436-.513-.738-.964-.738-.451 0-.846.302-.965.737l-.9 3.3-2.313.856c-.393.145-.653.52-.653.938 0 .418.26.793.653.938l2.301.853.907 3.622c.112.444.511.756.97.756.459 0 .858-.312.97-.757l.907-3.622 2.301-.853c.393-.144.653-.519.653-.937 0-.418-.26-.793-.653-.937zM10.009 6.231l-2.364-.875-.876-2.365c-.145-.393-.519-.653-.938-.653-.418 0-.792.26-.938.653l-.875 2.365-2.365.875c-.393.146-.653.52-.653.938 0 .418.26.793.653.938l2.365.875.875 2.365c.146.393.52.653.938.653.418 0 .792-.26.938-.653l.875-2.365 2.365-.875c.393-.146.653-.52.653-.938 0-.418-.26-.792-.653-.938z"
></path>
</SVGIcon>

2
src/components/icons/index.ts
View file

@ -7,12 +7,12 @@ export { default as IconChevronLeft } from "./IconChevronLeft.astro";
export { default as IconChevronRight } from "./IconChevronRight.astro";
export { default as IconCircleInfo } from "./IconCircleInfo.astro";
export { default as IconGamepad } from "./IconGamepad.astro";
export { default as IconHome } from "./IconHome.astro";
export { default as IconMagnifyingGlass } from "./IconMagnifyingGlass.astro";
export { default as IconMoon } from "./IconMoon.astro";
export { default as IconNoOneUnder18 } from "./IconNoOneUnder18.astro";
export { default as IconRetweet } from "./IconRetweet.astro";
export { default as IconSquareRSS } from "./IconSquareRSS.astro";
export { default as IconSparkles } from "./IconSparkles.astro";
export { default as IconStar } from "./IconStar.astro";
export { default as IconSun } from "./IconSun.astro";
export { default as IconTags } from "./IconTags.astro";