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

Better microformats support and add PUBLISH_DRAFTS envvar

Browse source
This commit is contained in:
Bad Manners 2024-08-16 21:46:32 -03:00
parent 132b2b69f3
commit a335aff2d3
31 changed files with 269 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/DarkModeScript.astro
View file

@ -12,7 +12,7 @@
}
document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
button.classList.remove("hidden");
button.removeAttribute("aria-hidden");
button.setAttribute("aria-hidden", "false");
button.addEventListener("click", (e) => {
e.preventDefault();
if (colorScheme === "dark") {

45
src/components/MastodonComments.astro
View file

@ -26,7 +26,7 @@ const { link, instance, user, postId } = Astro.props;
</h2>
<div class="text-stone-800 dark:text-stone-100" id="comments">
<p class="my-1">
<a class="text-link underline" href={link} target="_blank">View comments on Mastodon</a>
<a class="text-link underline" href={link} target="_blank">View comments on Mastodon</a>.
</p>
</div>
</section>
@ -46,7 +46,7 @@ const { link, instance, user, postId } = Astro.props;
class="-mt-1 mr-1 animate-spin"
fill="none"
viewBox="0 0 24 24"
aria-hidden
aria-hidden="true"
>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path
@ -59,25 +59,32 @@ const { link, instance, user, postId } = Astro.props;
</template>
<template id="template-comment-box">
<div class="my-2 rounded-md border-2 border-stone-400 bg-stone-200 p-2 dark:border-stone-600 dark:bg-stone-800">
<div
role="article"
class="p-comment h-entry my-2 rounded-md border-2 border-stone-400 bg-stone-100 p-2 dark:border-stone-600 dark:bg-stone-800"
>
<div class="ml-1">
<a data-author class="text-link flex items-center text-lg hover:underline focus:underline" target="_blank">
<img data-avatar class="mr-2 w-10 rounded-full border border-stone-400 dark:border-stone-600" />
<span data-display-name></span>
<a
data-author
class="p-author h-card u-url text-link flex items-center text-lg hover:underline focus:underline"
target="_blank"
>
<img data-avatar class="u-photo mr-2 w-10 rounded-full border border-stone-400 dark:border-stone-600" />
<span data-display-name class="p-nickname"></span>
</a>
<a
data-post-link
class="text-link my-1 flex items-center text-sm font-light hover:underline focus:underline"
class="u-url text-link my-1 flex items-center text-sm font-light hover:underline focus:underline"
target="_blank"
>
<span class="mr-1" data-publish-date aria-label="Publish date"></span>
<time class="dt-published mr-1" data-publish-date aria-label="Publish date"></time>
</a>
</div>
<div data-content class="prose-a:text-link prose-story prose my-1 dark:prose-invert prose-img:my-0"></div>
<div data-content class="e-content prose-a:text-link prose-story prose my-1 dark:prose-invert prose-img:my-0"></div>
<div class="ml-1 flex flex-row pb-2 pt-1">
<div class="flex" aria-label="Favorites">
<span data-favorites></span>
<svg style={{ width: "1.25rem", fill: "currentColor" }} class="ml-2" viewBox="0 0 576 512" aria-hidden>
<svg style={{ width: "1.25rem", fill: "currentColor" }} class="ml-2" viewBox="0 0 576 512" aria-hidden="true">
<path
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
></path>
@ -85,14 +92,14 @@ const { link, instance, user, postId } = Astro.props;
</div>
<div class="ml-4 flex" aria-label="Reblogs">
<span data-reblogs></span>
<svg style={{ width: "1.25rem", fill: "currentColor" }} class="ml-2" viewBox="0 0 512 512" aria-hidden>
<svg style={{ width: "1.25rem", fill: "currentColor" }} class="ml-2" viewBox="0 0 512 512" aria-hidden="true">
<path
d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z"
></path>
</svg>
</div>
</div>
<div data-comment-thread class="-mb-2" aria-hidden></div>
<div data-comment-thread class="-mb-2" aria-hidden="true"></div>
</div>
</template>
@ -164,19 +171,21 @@ const { link, instance, user, postId } = Astro.props;
)!;
data.descendants.forEach((comment) => {
const commentBox = commentTemplate.content.cloneNode(true) as HTMLDivElement;
commentBox.id = `comment-${comment.id}`;
const commentBoxAuthor = commentBox.querySelector<HTMLElementTagNameMap["a"]>("a[data-author]")!;
commentBoxAuthor.href = comment.account.url;
const avatar = commentBoxAuthor.querySelector<HTMLElementTagNameMap["img"]>("img[data-avatar]")!;
avatar.src = comment.account.avatar;
avatar.alt = `Profile picture of ${comment.account.username}`;
avatar.alt = `Avatar of ${comment.account.username}`;
const displayName = commentBoxAuthor.querySelector<HTMLElementTagNameMap["span"]>("span[data-display-name]")!;
displayName.innerHTML = replaceEmojis(comment.account.display_name, comment.account.emojis);
const commentBoxPostLink = commentBox.querySelector<HTMLElementTagNameMap["a"]>("a[data-post-link]")!;
commentBoxPostLink.href = comment.url;
const publishDate =
commentBoxPostLink.querySelector<HTMLElementTagNameMap["span"]>("span[data-publish-date]")!;
commentBoxPostLink.querySelector<HTMLElementTagNameMap["time"]>("time[data-publish-date]")!;
publishDate.setAttribute("datetime", comment.created_at);
publishDate.innerText = new Date(Date.parse(comment.created_at)).toLocaleString("en-US", {
month: "short",
day: "numeric",
@ -186,8 +195,10 @@ const { link, instance, user, postId } = Astro.props;
});
if (comment.edited_at) {
const edited = document.createElement("span");
edited.className = "italic";
const edited = document.createElement("time");
edited.className = "dt-updated italic";
edited.setAttribute("datetime", comment.edited_at);
edited.setAttribute("title", comment.edited_at);
edited.innerText = "(edited)";
commentBoxPostLink.appendChild(edited);
}
@ -209,7 +220,7 @@ const { link, instance, user, postId } = Astro.props;
commentMap[comment.id] = commentsIndex;
const parentThreadDiv =
commentsList[commentsIndex].querySelector<HTMLElementTagNameMap["div"]>("div[data-comment-thread]")!;
parentThreadDiv.removeAttribute("aria-hidden");
parentThreadDiv.setAttribute("aria-hidden", "false");
parentThreadDiv.setAttribute("aria-label", "Replies");
parentThreadDiv.appendChild(commentBox);
}

7
src/components/UserComponent.astro
View file

@ -7,19 +7,20 @@ type Props = {
lang: Lang;
user: CollectionEntry<"users">;
class?: string;
rel?: string;
};
const { user, lang, class: className } = Astro.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;
---
{
link ? (
<a href={link} class:list={["h-card u-url text-link underline", className]} target="_blank">
<a rel={rel} href={link} class:list={[className, "h-card u-url text-link underline"]} target="_blank">
{username}
</a>
) : (
<span class:list={["h-card", className]}>{username}</span>
<span class:list={[className, "h-card"]}>{username}</span>
)
}