supprime le blog
This commit is contained in:
parent
d41a01a4a1
commit
a2d32c01ad
6 changed files with 0 additions and 224 deletions
|
@ -1,22 +0,0 @@
|
|||
---
|
||||
// Import necessary components
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
const { blogEntry } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
blogEntry: CollectionEntry<"blog">;
|
||||
}
|
||||
---
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<Image
|
||||
class="size-[46px] rounded-full border-2 border-neutral-50"
|
||||
src={blogEntry.data.authorImage}
|
||||
alt={blogEntry.data.authorImageAlt}
|
||||
draggable={"false"}
|
||||
format={"avif"}
|
||||
/>
|
||||
</div>
|
|
@ -1,22 +0,0 @@
|
|||
---
|
||||
// Import necessary components
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
const { blogEntry } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
blogEntry: CollectionEntry<"blog">;
|
||||
}
|
||||
---
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<Image
|
||||
class="size-10 rounded-full sm:h-14 sm:w-14"
|
||||
src={blogEntry.data.authorImage}
|
||||
alt={blogEntry.data.authorImageAlt}
|
||||
draggable={"false"}
|
||||
format={"avif"}
|
||||
/>
|
||||
</div>
|
|
@ -1,70 +0,0 @@
|
|||
---
|
||||
// Import necessary components and utilities
|
||||
import AvatarBlog from "@components/ui/avatars/AvatarBlog.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import { formatDate } from "@utils/utils";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
const { blogEntry, blogLocale = "" } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
blogEntry: CollectionEntry<"blog">;
|
||||
blogLocale?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<!-- The following anchor tag is the main container for the card.
|
||||
It's a link to the blog post detailed page.
|
||||
The data-astro-prefetch is an Astro specific Dynamic HTML feature,
|
||||
which automatically prefetches the linked page to speed up navigation. -->
|
||||
<a
|
||||
class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
||||
href={blogLocale && blogLocale !== "en"
|
||||
? `/${blogLocale}/blog/${blogEntry.id.replace(/^fr\//, "")}/`
|
||||
: `/blog/${blogEntry.id.replace(/^en\//, "")}/`}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<!-- The container for the blog post's cover image. Uses astro:assets' Image for image source -->
|
||||
<div
|
||||
class="relative h-[350px] w-full flex-shrink-0 overflow-hidden rounded-xl before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7]"
|
||||
>
|
||||
<Image
|
||||
class="absolute start-0 top-0 size-full object-cover transition duration-500 group-hover:scale-110"
|
||||
src={blogEntry.data.cardImage}
|
||||
alt={blogEntry.data.cardImageAlt}
|
||||
draggable={"false"}
|
||||
loading={"eager"}
|
||||
format={"avif"}
|
||||
/>
|
||||
</div>
|
||||
<!-- The container for the blog author's avatar and associated metadata (author name and publication date) -->
|
||||
<div class="absolute inset-x-0 top-0 z-10">
|
||||
<div class="flex h-full flex-col p-4 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<AvatarBlog blogEntry={blogEntry} />
|
||||
|
||||
<div class="ms-2.5 sm:ms-4">
|
||||
<h4 class="font-bold text-neutral-50">
|
||||
{blogEntry.data.author}
|
||||
</h4>
|
||||
<p class="text-xs text-neutral-50/[.8]">
|
||||
{formatDate(blogEntry.data.pubDate)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- The container for the blog post's title and description -->
|
||||
<div class="absolute inset-x-0 bottom-0 z-10">
|
||||
<div class="flex h-full flex-col p-4 sm:p-6">
|
||||
<h3
|
||||
class="text-balance text-lg font-bold text-neutral-50 group-hover:text-neutral-50/[.8] sm:text-3xl"
|
||||
>
|
||||
{blogEntry.data.title}
|
||||
</h3>
|
||||
<p class="mt-2 text-pretty text-neutral-50/[.8]">
|
||||
{blogEntry.data.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
|
@ -1,66 +0,0 @@
|
|||
---
|
||||
// Import all required components and utilities
|
||||
import { Image } from "astro:assets";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
import AvatarBlogLarge from "@components/ui/avatars/AvatarBlogLarge.astro";
|
||||
import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
|
||||
|
||||
const { blogEntry, recentBlogLocale = "" } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
blogEntry: CollectionEntry<"blog">;
|
||||
recentBlogLocale?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<!-- Root container, which is divided into 2 grid column layout for larger screens -->
|
||||
<div class="grid gap-8 sm:grid-cols-2 sm:items-center">
|
||||
<!-- Container for the blog post's cover image -->
|
||||
<div class="sm:order-2">
|
||||
<div class="relative rounded-lg pt-[50%] sm:pt-[100%]">
|
||||
<Image
|
||||
class="absolute start-0 top-0 size-full rounded-xl object-cover"
|
||||
src={blogEntry.data.cardImage}
|
||||
alt={blogEntry.data.cardImageAlt}
|
||||
draggable={"false"}
|
||||
loading={"eager"}
|
||||
format={"avif"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Container for the blog post's heading, author avatar, author's role, and read more button -->
|
||||
<div class="sm:order-1">
|
||||
<!-- Blog title which is also a hyperlink to the blog detail page -->
|
||||
<h2
|
||||
class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight"
|
||||
>
|
||||
<a
|
||||
class="outline-none ring-zinc-500 transition duration-300 hover:text-orange-400 focus-visible:ring dark:text-neutral-300 dark:ring-zinc-200 dark:hover:text-neutral-50 dark:focus:outline-none"
|
||||
href={recentBlogLocale && recentBlogLocale !== "en" ? `/${recentBlogLocale}/blog/${blogEntry.id.replace(/^fr\//, '')}/` : `/blog/${blogEntry.id.replace(/^en\//, '')}/`}
|
||||
>
|
||||
{blogEntry.data.description}
|
||||
</a>
|
||||
</h2>
|
||||
<!-- Container for the author's avatar and metadata -->
|
||||
<div class="mt-6 flex items-center sm:mt-10">
|
||||
<AvatarBlogLarge blogEntry={blogEntry} />
|
||||
|
||||
<div class="ms-3 sm:ms-4">
|
||||
<p class="font-bold text-neutral-800 dark:text-neutral-200 sm:mb-1">
|
||||
{blogEntry.data.author}
|
||||
</p>
|
||||
<p class="text-xs text-neutral-500">
|
||||
{blogEntry.data.role}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Read More button which is a link to the blog post detailed page -->
|
||||
<div class="mt-5">
|
||||
<PrimaryCTA
|
||||
url={recentBlogLocale && recentBlogLocale !== "en" ? `/${recentBlogLocale}/blog/${blogEntry.id.replace(/^fr\//, '')}/` : `/blog/${blogEntry.id.replace(/^en\//, '')}/`}
|
||||
title="Read More"
|
||||
data-astro-prefetch
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,41 +0,0 @@
|
|||
---
|
||||
// Import necessary modules and utilities
|
||||
import { Image } from "astro:assets";
|
||||
import { formatDate } from "@utils/utils";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
const { blogEntry, recentBlogLocale = "" } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
blogEntry: CollectionEntry<"blog">;
|
||||
recentBlogLocale?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<a
|
||||
class="group block rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
||||
href={recentBlogLocale && recentBlogLocale !== "en"
|
||||
? `/${recentBlogLocale}/blog/${blogEntry.id.replace(/^fr\//, "")}/`
|
||||
: `/blog/${blogEntry.id.replace(/^en\//, "")}/`}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
class="aspect-video rounded-xl"
|
||||
src={blogEntry.data.cardImage}
|
||||
alt={blogEntry.data.cardImageAlt}
|
||||
draggable={"false"}
|
||||
format={"avif"}
|
||||
/>
|
||||
<!-- The title of the blog post -->
|
||||
<h3
|
||||
class="mt-2 text-balance text-lg font-medium text-neutral-800 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-neutral-50"
|
||||
>
|
||||
{blogEntry.data.title}
|
||||
</h3>
|
||||
<!-- The formatted publication date of the blog post -->
|
||||
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{formatDate(blogEntry.data.pubDate)}
|
||||
</p>
|
||||
</div></a
|
||||
>
|
|
@ -27,9 +27,6 @@ const avatarSrcs: Array<string> = [
|
|||
"https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
|
||||
];
|
||||
|
||||
const posts = await getCollection("blog");
|
||||
|
||||
console.log("posts", posts)
|
||||
---
|
||||
|
||||
<MainLayout>
|
||||
|
|
Loading…
Add table
Reference in a new issue