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

remove tags from article header (#6)

Browse source
This commit is contained in:
Troy 2024-12-28 16:19:26 +00:00 • committed by GitHub
parent 01f721f938
commit 4487fb0945
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 50 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/components/Article.astro
View file

@ -37,66 +37,46 @@ const listFormatter = new Intl.ListFormat("en-GB", {
>
</h1>
<div
class="flex animate-reveal flex-col items-start opacity-0 [animation-delay:0.1s]"
class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-lg text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
>
<div
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" />
{
datesMatch ? (
<div class="flex items-center gap-2">
<Icon name="mdi:calendar" />
{
datesMatch ? (
<p title="Date">
<FormattedDate date={article.data.date} />
</p>
) : (
<>
<p title="Date">
<FormattedDate date={article.data.date} />
</p>
) : (
<>
<p title="Date">
<FormattedDate date={article.data.date} />
</p>
<Icon name="mdi:trending-up" />
<p title="Updated">
<FormattedDate date={article.data.updated} />
</p>
</>
)
}
</div>
{
isPost ? (
<div class="flex items-center gap-2">
<Icon name="mdi:timer" />
<p title="Word count">{readingTime(article.body)}</p>
</div>
) : null
<Icon name="mdi:trending-up" />
<p title="Updated">
<FormattedDate date={article.data.updated} />
</p>
</>
)
}
</div>
{
isPost ? (
<div class="flex items-center gap-2">
<Icon name="mdi:timer" />
<p title="Word count">{readingTime(article.body)}</p>
</div>
) : null
}
{
article.data.extraAuthors ? (
<div class="mt-2 flex items-center gap-2">
<p>
In collaboration with{" "}
<div class="flex items-center gap-2">
<Icon name="mdi:account-plus" />
<p title="Extra authors">
{listFormatter.format(article.data.extraAuthors)}
</p>
</div>
) : null
}
<ul class="mt-4 flex flex-wrap gap-1">
{
article.data.categories.map((category: string) => (
<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-primary px-1 py-0.5 text-sm capitalize text-accent">
{tag}
</li>
))
}
</ul>
</div>
</div>
<div

9
src/components/Footer.astro
View file

@ -26,7 +26,7 @@ import { Icon } from "astro-icon/components";
<a
data-navlink
href={i.href}
class="capitalize hover:text-secondary"
class="capitalize transition-colors hover:text-secondary"
>
{i.name}
</a>
@ -40,8 +40,9 @@ import { Icon } from "astro-icon/components";
<div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
<span class="text-sm text-tertiary sm:text-center"
>&copy; {new Date().getFullYear()}
<a href="/" class="hover:text-secondary">{SITE.TITLE}</a>. All Rights
Reserved.
<a href="/" class="transition-colors hover:text-secondary"
>{SITE.TITLE}</a
>. All Rights Reserved.
</span>
<div class="mt-4 flex gap-5 sm:mt-0 sm:justify-center">
{
@ -50,7 +51,7 @@ import { Icon } from "astro-icon/components";
<Icon
name={i.icon}
title={i.name}
class="h-5 w-5 text-tertiary hover:text-secondary"
class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
/>
</Link>
))

4
src/components/RelatedArticles.astro
View file

@ -24,7 +24,7 @@ const next = items[(index + 1) % items.length];
<div class="group flex w-fit flex-row items-center justify-between gap-6">
<a
href={`/${prev.collection}/${prev.slug}`}
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-left"
@ -48,7 +48,7 @@ const next = items[(index + 1) % items.length];
</a>
<a
href={`/${next.collection}/${next.slug}`}
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-all ease-in-out group-hover:scale-90 group-hover:bg-tertiary"
class="animate-reveal rounded-full bg-secondary p-1 opacity-0 transition-colors group-hover:bg-tertiary"
>
<Icon
name="mdi:arrow-right"

6
src/components/ShowcasePost.astro
View file

@ -10,13 +10,15 @@ const { collection } = Astro.props;
<li>
<a
class="bg-none hover:bg-tertiary/30"
class="group bg-none hover:bg-tertiary/30"
href={`/${collection.collection}/${collection.slug}`}
>
<article class="flex flex-col">
<h3 class="mb-3 text-balance text-xl font-semibold">
<span title="Title" class="text-secondary">{collection.data.title}</span
><span title="Description" class="ml-2 text-tertiary"
><span
title="Description"
class="ml-2 text-tertiary transition-colors group-hover:text-accent"
>{collection.data.description}</span
>
</h3>

4
src/components/ShowcaseProject.astro
View file

@ -18,7 +18,7 @@ const { collection } = Astro.props;
alt={collection.data.image.alt}
title={collection.data.title}
loading="eager"
class="absolute inset-0 h-full w-full object-cover duration-300 ease-in-out group-hover:scale-105"
class="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
fit="cover"
/>
<div
@ -40,7 +40,7 @@ const { collection } = Astro.props;
{
collection.data.collection ? (
<span>
<FormattedDate date={collection.data.date} /> &bull; Collection
<FormattedDate date={collection.data.date} /> (Collection)
</span>
) : (
<FormattedDate date={collection.data.date} />