Implement Webmention functionality: add Webmentions component, update deploy script, and enhance UI with social links and localization

This commit is contained in:
Adrian Altner 2026-04-21 23:46:18 +02:00
parent abbf2d9a0b
commit 934a9f2338
8 changed files with 460 additions and 10 deletions

View file

@ -3,6 +3,7 @@ import { Image } from 'astro:assets';
import { getEntry } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import FormattedDate from '~/components/FormattedDate.astro';
import Webmentions from '~/components/Webmentions.astro';
import BaseLayout from '~/layouts/BaseLayout.astro';
import { DEFAULT_LOCALE, type Locale } from '~/consts';
import { categoryHref, entryHref, findTranslation, tagHref } from '~/i18n/posts';
@ -31,11 +32,13 @@ const translation = entry ? await findTranslation(entry, otherLocale) : undefine
---
<BaseLayout title={title} description={description} image={heroImage} locale={locale} entry={entry}>
<article>
<article class="h-entry">
<a href={Astro.url.pathname} class="u-url" hidden></a>
<div class="hero-image">
{
heroImage && (
<Image
class="u-photo"
width={1020}
height={510}
src={heroImage}
@ -48,21 +51,28 @@ const translation = entry ? await findTranslation(entry, otherLocale) : undefine
<div class="prose">
<div class="title">
<div class="date">
<FormattedDate date={pubDate} locale={locale} />
<FormattedDate date={pubDate} locale={locale} class="dt-published" />
{
updatedDate && (
<div class="last-updated-on">
{t(locale, 'post.lastUpdated')} <FormattedDate date={updatedDate} locale={locale} />
{t(locale, 'post.lastUpdated')}{' '}
<FormattedDate date={updatedDate} locale={locale} class="dt-updated" />
</div>
)
}
</div>
<h1>{title}</h1>
<h1 class="p-name">{title}</h1>
<p class="p-summary" hidden>{description}</p>
<p class="p-author h-card" hidden>
<a class="u-url p-name" href={new URL('/', Astro.site)}>Adrian Altner</a>
</p>
{
categoryEntry && (
<p class="category">
{t(locale, 'post.category')}:{' '}
<a href={categoryHref(categoryEntry)}>{categoryEntry.data.name}</a>
<a href={categoryHref(categoryEntry)} class="p-category">
{categoryEntry.data.name}
</a>
</p>
)
}
@ -73,7 +83,9 @@ const translation = entry ? await findTranslation(entry, otherLocale) : undefine
{tags.map((name, i) => (
<>
{i > 0 && ', '}
<a href={tagHref(locale, name)}>{name}</a>
<a href={tagHref(locale, name)} class="p-category">
{name}
</a>
</>
))}
</p>
@ -91,7 +103,10 @@ const translation = entry ? await findTranslation(entry, otherLocale) : undefine
</aside>
)
}
<slot />
<div class="e-content">
<slot />
</div>
<Webmentions target={new URL(Astro.url.pathname, Astro.site)} locale={locale} />
</div>
</article>
</BaseLayout>