Implement Webmention functionality: add Webmentions component, update deploy script, and enhance UI with social links and localization
This commit is contained in:
parent
abbf2d9a0b
commit
934a9f2338
8 changed files with 460 additions and 10 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue