diff options
Diffstat (limited to 'src/components/templates/SimplePostList.astro')
-rw-r--r-- | src/components/templates/SimplePostList.astro | 91 |
1 files changed, 64 insertions, 27 deletions
diff --git a/src/components/templates/SimplePostList.astro b/src/components/templates/SimplePostList.astro index 164b32b..6d05a1f 100644 --- a/src/components/templates/SimplePostList.astro +++ b/src/components/templates/SimplePostList.astro @@ -1,25 +1,45 @@ --- import Date from "@components/organisms/Date.astro"; import KeywordsList from "@components/organisms/KeywordsList.astro"; -import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers"; -import type { Original } from "@lib/collection/schemas"; -import type { z } from "astro:content"; +import { + getFirstUserID, + getLastUpdate, + getTranslationOriginal, + isMicro, + isTranslation, +} from "@lib/collection/helpers"; import type { CollectionEntry } from "astro:content"; interface Props { - posts: (CollectionEntry<"blog"> & { data: z.infer<typeof Original> })[]; + posts: CollectionEntry<"blog">[]; + small?: boolean; + dateOptions?: Intl.DateTimeFormatOptions; } -const { posts } = Astro.props; +const { + posts, + small = false, + dateOptions = { year: "numeric", month: "long", day: "numeric" }, +} = Astro.props; --- -<ol> +<ol class:list={{ "remove-nums": !small }}> { - await Promise.all(posts.map(async (post) => { - const { id, data } = post; - const { title, description, lang, keywords } = data; - const { name, email, entity } = await getFirstUserID(post); - const display = name ?? email ?? entity; - return ( + await Promise.all( + posts.map( + async (post) => { + const { id, data } = post; + const { title, lang } = data; + const description = isMicro(post) + ? post.rendered?.html + : ("description" in data ? data.description : undefined); + const keywords = isTranslation(post) + ? await getTranslationOriginal(post).then((x) => + x?.data?.keywords + ) + : ("keywords" in data ? data.keywords : undefined); + const { name, email, entity } = await getFirstUserID(post); + const display = name ?? email ?? entity; + return ( <li> <article itemprop="blogPost" @@ -29,36 +49,39 @@ const { posts } = Astro.props; <h3> <a href={`/blog/read/${id}`} itemprop="headline name">{title}</a> </h3> - <div itemprop="abstract"> - { - description && - description.split("\n\n").map((paragraph) => ( - <p class="small">{paragraph}</p> - )) - } - </div> + { + description && ( + <div itemprop="abstract"> + { + isMicro(post) + ? <Fragment set:html={description} /> + : description.split("\n\n").map(( + paragraph, + ) => <p class:list={{ small }}>{paragraph}</p>) + } + </div> + ) + } <footer class="small"> <Date date={getLastUpdate(post)} locales={lang} - options={{ - year: "numeric", - month: "long", - day: "numeric", - }} + options={dateOptions} itemprop="dateModified" /><span itemprop="author" itemscope itemtype="https://schema.org/Person" ><span itemprop="alternateName">{display}</span></span> - <KeywordsList {keywords} /> + {Array.isArray(keywords) && <KeywordsList {keywords} />} </footer> </article> </li> ); - })) + }, + ), + ) } </ol> @@ -82,6 +105,20 @@ const { posts } = Astro.props; } } } + + & > li:not(:first-of-type) { + border-block-start: 1px solid var(--color-dark); + } + } + + ol.remove-nums { + margin-inline-start: 0; + & > li { + margin-inline-end: calc(var(--size-7) * 1em); + & > article { + padding-inline-end: 0; + } + } } @media (width >= 40rem) { |