a7591b600c
This commit removes the french version of the 404 page and updates the fallback 404 page to support both English and French languages. In addition, it includes changes in multiple places to handle deletion of specific Insights in French and English and ensure their proper referencing.
53 lines
1.8 KiB
Text
53 lines
1.8 KiB
Text
---
|
|
// Import necessary modules and utilities
|
|
import { Image } from "astro:assets";
|
|
import Icon from "@components/ui/icons/Icon.astro";
|
|
import type { CollectionEntry } from "astro:content";
|
|
|
|
const {
|
|
insightEntry,
|
|
label = Astro.currentLocale === "fr" ? "Lire plus" : "Read more",
|
|
} = Astro.props;
|
|
|
|
interface Props {
|
|
insightEntry: CollectionEntry<"insights">;
|
|
label?: string;
|
|
}
|
|
---
|
|
|
|
<!-- The anchor tag is the root container for the "Insight" card. It links to the insight detail page. -->
|
|
<a
|
|
class="group rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
|
href={`/insights/${insightEntry.slug}/`}
|
|
>
|
|
<!-- This is the container for the insight's cover image. -->
|
|
<div class="relative overflow-hidden rounded-xl pt-[50%] sm:pt-[70%]">
|
|
<Image
|
|
class="absolute start-0 top-0 size-full rounded-xl object-cover transition duration-500 ease-in-out group-hover:scale-105"
|
|
src={insightEntry.data.cardImage}
|
|
alt={insightEntry.data.cardImageAlt}
|
|
draggable={"false"}
|
|
format={"avif"}
|
|
/>
|
|
</div>
|
|
<!-- This is the container for the insight's title and description. -->
|
|
<div class="mt-7">
|
|
<!-- The title of the insight -->
|
|
<h3
|
|
class="text-xl font-bold text-neutral-800 group-hover:text-neutral-600 dark:text-neutral-200 dark:group-hover:text-neutral-400"
|
|
>
|
|
{insightEntry.data.title}
|
|
</h3>
|
|
<!-- The description of the insight -->
|
|
<p class="mt-3 text-neutral-600 dark:text-neutral-400">
|
|
{insightEntry.data.description}
|
|
</p>
|
|
<!-- The "Read More" hyperlink going to the full insight. With an arrow icon -->
|
|
<p
|
|
class="mt-5 inline-flex items-center gap-x-1 font-medium text-orange-400 decoration-2 group-hover:underline dark:text-orange-300"
|
|
>
|
|
{label}
|
|
<Icon name="arrowRightStatic" />
|
|
</p>
|
|
</div>
|
|
</a>
|