feat: refactor blog components

2026-02-16 22:26:53 -06:00
parent 505670dbf8
commit 6423ffba63
25 changed files with 476 additions and 460 deletions
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -28,6 +28,7 @@ const global = await directus.request(readSingleton('site_global'));
    },
  }}
 >
+
  <section class="mt-20 grid place-content-center">
    <div class="mx-auto max-w-7xl px-4 py-8 lg:px-6 lg:py-16">
      <div class="mx-auto max-w-screen-sm text-center">
@@ -67,6 +68,7 @@ const global = await directus.request(readSingleton('site_global'));
      </div>
    </div>
  </section>
+
 </BaseLayout>

 <script>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -1,18 +1,20 @@
 ---
 import { type CollectionEntry, getCollection } from 'astro:content';
 import getReadingTime from 'reading-time';
-import { readItems, readSingleton } from '@directus/sdk';
-
-import directus from '@lib/directus';
 import { marked } from 'marked';
 import markedShiki from 'marked-shiki';
 import { createHighlighter } from 'shiki';
-import { getDirectusImageURL } from '@lib/directusFunctions';
-import BaseLayout from '@layouts/BaseLayout.astro';
+import { readItems, readSingleton } from '@directus/sdk';
+
 import Image from '@components/ui/images/Image.astro';
 import SocialShareButton from '@components/buttons/SocialShareButton.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
+import { getDirectusImageURL } from '@lib/directusFunctions';
 import { formatDateTime } from '@support/time';

+const post = Astro.props;
+
 export async function getStaticPaths() {
  const posts = await directus.request(readItems('posts'));
  return posts.map((post) => ({
@@ -20,18 +22,19 @@ export async function getStaticPaths() {
    props: post,
  }));
 }
-const post = Astro.props;

 const global = await directus.request(readSingleton('site_global'));
 const category: CollectionEntry<'categories'> = (await getCollection('categories'))
  .filter((c) => c.slug === post.category)
  .pop() as CollectionEntry<'categories'>;
+
 const readingTime = getReadingTime(post.content);

 const highlighter = await createHighlighter({
  themes: ['github-light', 'github-dark', 'monokai'],
  langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'],
 });
+
 marked.use(markedShiki({
  highlight(code, lang) {
    return highlighter.codeToHtml(code, {
@@ -44,6 +47,7 @@ marked.use(markedShiki({
    });
  }
 }));
+
 const content = marked.parse(post.content);
 ---

@@ -79,6 +83,7 @@ const content = marked.parse(post.content);
    ],
  }}
 >
+
  <section class="mx-auto max-w-6xl px-4 pt-8 pb-12 sm:px-6 lg:px-8 lg:pt-12">
    <div class="smooth-reveal relative w-full">
      <div class="mt-4 rounded-2xl shadow-none sm:mt-0 sm:shadow-sm">
@@ -171,6 +176,7 @@ const content = marked.parse(post.content);
      </div>
    </div>
  </section>
+
  <style is:inline>
    code[data-theme*=' '],
    code[data-theme*=' '] span {
@@ -184,6 +190,7 @@ const content = marked.parse(post.content);
      }
    }
  </style>
+
 </BaseLayout>

 <script>
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -3,11 +3,12 @@ import { readItems, readSingleton } from '@directus/sdk';

 import type { Post } from '@lib/directusTypes';

-import directus from '@lib/directus';
-import BaseLayout from '@layouts/BaseLayout.astro';
-import BlogSelectedArticles from '@components/blog/BlogSelectedArticles.astro';
-import BlogRecentArticles from '@components/blog/BlogRecentArticles.astro';
 import HeroSection from '@components/sections/HeroSection.astro';
+import SelectedPostsSection from '@components/sections/SelectedPostsSection.astro';
+import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
+
 import blogImg from '@images/autumn_tree.png';

 const global = await directus.request(readSingleton('site_global'));
@@ -18,10 +19,11 @@ const posts = await directus.request(
    sort: ['-published_date'],
  })
 );
-const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 4);
+
+const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 3);
 const recentPosts: Post[] = posts.filter(
  (p) => !selectedPosts.some((selected) => selected.slug === p.slug)
-).slice(0, 6);
+  ).slice(0, 9);
 ---

 <BaseLayout
@@ -43,10 +45,21 @@ const recentPosts: Post[] = posts.filter(
    },
  }}
 >
-  <HeroSection title="Blog" subTitle={global.about_blog} src={blogImg} alt={global.blog_image_alt} />

-  <BlogSelectedArticles posts={selectedPosts} />
-  <BlogRecentArticles posts={recentPosts} />
+  <HeroSection
+    title="Blog"
+    subTitle={global.about_blog}
+    src={blogImg}
+    alt={global.blog_image_alt}
+  />
+
+  <SelectedPostsSection posts={selectedPosts} />
+
+  <RecentPostsSection
+    posts={recentPosts}
+    title="Recent Posts"
+  />
+
 </BaseLayout>

 <script>
--- a/src/pages/categories/[...slug].astro
+++ b/src/pages/categories/[...slug].astro
@@ -2,11 +2,12 @@
 import { getCollection } from 'astro:content';
 import { readItems, readSingleton } from '@directus/sdk';

-import directus from '@lib/directus';
 import type { Post } from '@lib/directusTypes';
-import BaseLayout from '@layouts/BaseLayout.astro';
-import BlogCard from '@components/blog/BlogCard.astro';
+
+import BlogCard from '@components/cards/BlogCard.astro';
 import HeaderSection from '@components/sections/HeaderSection.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';

 export async function getStaticPaths() {
  const categories = await getCollection('categories');
@@ -26,6 +27,7 @@ const posts = await directus.request(
    sort: ['-published_date'],
  })
 );
+
 const categoriesPosts = posts
  .sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
  .filter((b) => {
@@ -51,6 +53,7 @@ const categoriesPosts = posts
    },
  }}
 >
+
  <HeaderSection
    title={category.data.title}
    subTitle={category.data.description}
@@ -59,9 +62,12 @@ const categoriesPosts = posts
    btnURL="/categories"
  />

-  <section class="mx-auto mt-10 mb-10 max-w-[85rem] px-4 py-8 sm:px-6 lg:px-8 2xl:max-w-full">
+  <section class="max-w-340 2xl:max-w-full mx-auto mt-10 mb-10 px-4 py-8 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-      {categoriesPosts.map((b) => <BlogCard post={b} />)}
+      {categoriesPosts.map((b) => 
+      <BlogCard post={b} />
+      )}
    </div>
  </section>
+
 </BaseLayout>
--- a/src/pages/categories/index.astro
+++ b/src/pages/categories/index.astro
@@ -1,78 +1,14 @@
 ---
-import { getCollection } from 'astro:content';
-import { readItems, readSingleton } from '@directus/sdk';
-
-import type { Post } from '@lib/directusTypes';
+import { readSingleton } from '@directus/sdk';

 import directus from '@lib/directus';
 import BaseLayout from '@layouts/BaseLayout.astro';
-import BlogCategoryCard from '@components/blog/BlogCategoryCard.astro';
 import HeroSection from '@components/sections/HeroSection.astro';
-import { timeago } from '@support/time';
+import CategorySection from '@components/sections/CategorySection.astro';
+
 import categoryImg from '@images/autumn_bench.png';

 const global = await directus.request(readSingleton('site_global'));
-const posts = await directus.request(
-  readItems('posts', {
-    filter: { published: { _eq: true } },
-    fields: ['*'],
-    sort: ['-published_date'],
-  })
-);
-
-const postMap: Map<string, Post[]> = posts
-  .sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
-  .reduce((acc, obj) => {
-    let posts = acc.get(obj.category);
-    if (!posts) {
-      posts = [];
-    }
-    posts.push(obj);
-
-    acc.set(obj.category, posts);
-
-    return acc;
-  }, new Map<string, Post[]>());
-
-const layoutPattern = [
-  { col: 2, row: 2 },
-  { col: 2, row: 1 },
-  { col: 1, row: 1 },
-  { col: 1, row: 1 },
-  { col: 1, row: 2 },
-  { col: 2, row: 1 },
-  { col: 1, row: 1 },
-  { col: 1, row: 1 },
-  { col: 1, row: 1 },
-  { col: 1, row: 1 },
-];
-
-const categories = (await getCollection('categories'))
-  .sort((a, b) => {
-    const aCount = postMap.get(a.slug)?.length ?? 0;
-    const bCount = postMap.get(b.slug)?.length ?? 0;
-    return bCount - aCount;
-  })
-  .map((c, index) => {
-    const posts = postMap.get(c.slug);
-    const pattern = layoutPattern[index % layoutPattern.length];
-    const smColSpan = Math.min(pattern.col, 2);
-    const mdColSpan = Math.min(pattern.col, 4);
-    const rowSpan = pattern.row;
-    const rowSpanClass = rowSpan > 1 ? `row-span-${rowSpan}` : 'row-span-1';
-    const gridItemClass = `col-span-${smColSpan} md:col-span-${mdColSpan} ${rowSpanClass} smooth-reveal-cards rounded-xl transition-all duration-300 shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg border border-stone-200/50 dark:border-stone-700/50`;
-    return {
-      ...c,
-      posts,
-      gridItemClass,
-      layoutPattern: {
-        smCol: smColSpan,
-        mdCol: mdColSpan,
-        row: rowSpan,
-        index,
-      },
-    };
-  });
 ---

 <BaseLayout
@@ -94,6 +30,7 @@ const categories = (await getCollection('categories'))
    },
  }}
 >
+
  <HeroSection
    title="Categories"
    subTitle={global.about_categories}
@@ -101,28 +38,8 @@ const categories = (await getCollection('categories'))
    alt={global.categories_image_alt}
  />

-  <section class="mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full">
-    <div class="grid grid-flow-row-dense grid-cols-2 gap-4 md:grid-cols-4">
-      {
-        categories.map((category) => {
-          return (
-            <div
-              class={category.gridItemClass}
-              style={category.layoutPattern.row > 1 ? 'grid-row: span 2 / span 2;' : ''}
-            >
-              <BlogCategoryCard
-                slug={category.slug}
-                title={category.data.title}
-                description={category.data.description}
-                count={postMap.get(category.slug)?.length ?? 0}
-                publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)}
-              />
-            </div>
-          );
-        })
-      }
-    </div>
-  </section>
+  <CategorySection />
+
 </BaseLayout>

 <script>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,18 +1,31 @@
 ---
-import { readSingleton } from '@directus/sdk';
+import { readSingleton, readItems } from '@directus/sdk';
+
+import type { Post } from '@lib/directusTypes';

 import directus from '@lib/directus';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import HeroSection from '@components/sections/HeroSection.astro';
-import FeaturesSection from '@components/sections/FeaturesSection.astro';
+import FeatureSection from '@components/sections/FeatureSection.astro';
 import WeatherSection from '@components/sections/WeatherSection.astro';
-import LatestPostsSection from '@components/sections/LatestPostsSection.astro';
+import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
 import GiteaSection from '@components/sections/GiteaSection.astro';

 import homeImg from '@images/autumn_mountain.png';

 const global = await directus.request(readSingleton('site_global'));
 const weather = await directus.request(readSingleton('site_weather'));
+const posts = await directus.request(
+  readItems('posts', {
+    filter: { published: { _eq: true } },
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+
+const recentPosts = posts
+  .sort((a: Post, b: Post) => (new Date(b.published_date).getTime()) - (new Date(a.published_date).getTime()))
+  .slice(0, 3);
 ---

 <BaseLayout
@@ -34,6 +47,7 @@ const weather = await directus.request(readSingleton('site_weather'));
    },
  }}
 >
+
  <HeroSection
    title={`Hello, I'm <span class="text-steel dark:text-steel">Alex Lebens</span>`}
    subTitle={global.about_description}
@@ -43,24 +57,28 @@ const weather = await directus.request(readSingleton('site_weather'));
    alt={global.home_image_alt}
  />

-  <FeaturesSection />
+  <FeatureSection />

  <WeatherSection
    server:defer
-    latitude={weather.latitude} 
-    longitude={weather.longitude} 
+    latitude={weather.latitude}
+    longitude={weather.longitude}
    cityName={weather.location}
    timezone={weather.timezone}
-  >
-  </WeatherSection>
+  />

-  <LatestPostsSection />
+  <RecentPostsSection
+    posts={recentPosts}
+    title="Latest Posts"
+    subTitle="Checkout my most recent thoughts here"
+  />

  <GiteaSection
    title="Follow me on Gitea"
    subTitle="I love open source and have my code availabile on my Gitea server."
    url="https://gitea.alexlebens.dev"
  />
+
 </BaseLayout>

 <script>