troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

display article description after title (#4)

Browse source 
inspired by https://p.atrick.org
This commit is contained in:
Troy 2024-12-26 22:45:38 +00:00 • committed by GitHub
parent 3aa7ca486b
commit a886bfaa5a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 149 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/Article.astro
View file

@ -30,15 +30,17 @@ const listFormatter = new Intl.ListFormat("en-GB", {
>
<div class="mx-auto mb-16 max-w-prose">
<h1
class="animate-reveal break-words text-start text-4xl font-medium opacity-0"
class="animate-reveal break-words text-start text-4xl font-semibold opacity-0"
>
{article.data.title}
<span class="text-secondary">{article.data.title}</span><span
class="ml-2 text-tertiary">{article.data.description}</span
>
</h1>
<div
class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.1s]"
>
<div
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
class="mt-4 flex flex-col items-start gap-2 text-lg text-accent md:flex-row"
>
<div class="flex items-center gap-2">
<Icon name="mdi:calendar" />
@ -71,7 +73,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
</div>
{
article.data.extraAuthors ? (
<div class="mt-2 flex items-center gap-2 text-tertiary">
<div class="mt-2 flex items-center gap-2">
<p>
In collaboration with{" "}
{listFormatter.format(article.data.extraAuthors)}
@ -82,14 +84,14 @@ const listFormatter = new Intl.ListFormat("en-GB", {
<ul class="mt-4 flex flex-wrap gap-1">
{
article.data.categories.map((category: string) => (
<li class="rounded border border-accent bg-accent/50 px-1 py-0.5 text-sm capitalize text-primary invert">
<li class="rounded border border-accent bg-accent px-1 py-0.5 text-sm capitalize text-primary">
{category}
</li>
))
}
{
article.data.tags.map((tag: string) => (
<li class="rounded border border-accent bg-accent/50 px-1 py-0.5 text-sm capitalize text-secondary">
<li class="rounded border border-accent bg-primary px-1 py-0.5 text-sm capitalize text-accent">
{tag}
</li>
))