supprime le blog

This commit is contained in:
Jalil Arfaoui 2025-01-04 23:24:40 +01:00
parent d41a01a4a1
commit a2d32c01ad
6 changed files with 0 additions and 224 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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
>

View file

@ -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>