Address #49

src/components/Ui/Content/Slider/BlogSlider.astro

@@ -1,21 +1,23 @@
 ---
-import { getCollection, getEntry } from 'astro:content';
+import { getCollection } from 'astro:content';
 
 export interface Props {
   numberOfPosts?: number;
 }
 
-import BlogSlider from './BlogSlider';
+import Slider from './Slider';
 
 const { numberOfPosts = 4 } = Astro.props;
 
 const blogEntries = await getCollection('blog');
 
-const sortedEntries = blogEntries.slice(0, numberOfPosts).sort((a, b) => {
-  const dateA = new Date(`${a.data.year}-${a.data.month}-${a.data.day}`);
-  const dateB = new Date(`${b.data.year}-${b.data.month}-${b.data.day}`);
-  return Number(dateB) - Number(dateA);
-});
+const sortedEntries = blogEntries
+  .sort((a, b) => {
+    const dateA = new Date(a.data.year, (a.data.month || 1) - 1, a.data.day || 1);
+    const dateB = new Date(b.data.year, (b.data.month || 1) - 1, b.data.day || 1);
+    return dateB.getTime() - dateA.getTime();
+  })
+  .slice(0, numberOfPosts);
 ---
 
-<BlogSlider numberOfPosts={numberOfPosts} posts={sortedEntries} client:only />
+<Slider posts={sortedEntries} client:only />

src/components/Ui/Content/Slider/BlogSlider.tsx → src/components/Ui/Content/Slider/Slider.tsx

@@ -9,13 +9,15 @@ import { BlogItem } from '~/components/Pages/Blog/Content/BlogItem';
 import { ReactComponent as ArrowIcon } from '~/assets/svg/arrow.svg';
 
 type BlogSliderProps = {
-  numberOfPosts: number;
   posts: Array<CollectionEntry<'blog'>>;
 };
 
-export default function BlogSlider({ numberOfPosts, posts }: BlogSliderProps) {
+export default function Slider({ posts }: BlogSliderProps) {
+  console.log({ posts });
+
   return !!posts?.length ? (
     <Swiper
+      className="w-full"
       spaceBetween={30}
       slidesPerView={1}
       navigation={{
@@ -32,7 +34,7 @@ export default function BlogSlider({ numberOfPosts, posts }: BlogSliderProps) {
       }}
       modules={[Navigation]}>
       {posts.map((post) => (
-        <SwiperSlide key={post.id} className="self-stretch !h-auto">
+        <SwiperSlide key={post.id} className="swiper-slide !h-auto">
           <BlogItem key={post.id} post={post} className="h-full" />
         </SwiperSlide>
       ))}

src/content/config.ts

@@ -36,7 +36,7 @@ const tags = z
 export const blogSchema = z.object({
   title: z.string(),
   author: z.string().optional(),
-  day: z.number().or(z.string()),
+  day: z.number().optional(),
   month: z.number(),
   year: z.number(),
   tags,