🏗️ components/ui -> ui

src/content/config.ts

@@ -1,7 +1,9 @@
-import octokit from '@/libs/octokit';
+import { Octokit } from '@octokit/rest';
 import { glob } from 'astro/loaders';
 import { defineCollection, z } from 'astro:content';
-import { USERNAME } from 'astro:env/server';
+import { GITHUB_TOKEN, USERNAME } from 'astro:env/server';
+
+const octokit = new Octokit({ auth: GITHUB_TOKEN });
 
 export const collections = {
   posts: defineCollection({

src/data/posts/developing-browser-extensions-with-nextjs.mdx

@@ -8,7 +8,7 @@ topics: [Next.js]
 repo: demo-nextjs-browser-extension
 ---
 
-import * as Tabs from '@/components/ui/tabs';
+import * as Tabs from '@/ui/tabs';
 
 Although modern browsers offer a plethora of tooling to help assist web development and general productivity, there will
 always be some niche solution(s) not offered. How do we solve this? _Extensions!_

src/data/posts/full-text-search-with-astro-db.mdx

@@ -6,7 +6,7 @@ topics: [Astro, SQL]
 repo: full-text-search-with-astro-db
 ---
 
-import * as Stepper from '@/components/ui/stepper';
+import * as Stepper from '@/ui/stepper';
 
 [Astro DB][astrojs-db] is a SQL database service created specifically for Astro (`v4.5` or later). One of its goals is
 to provide an API for directly interacting with a SQL database inside an Astro project. This opens up serveral use-cases

src/layouts/layout.astro

@@ -1,15 +1,15 @@
 ---
 import favicon from '@/assets/favicon.webp';
 import ogDefault from '@/assets/og.webp';
-import { buttonVariants } from '@/components/ui/button.astro';
-import Clipboard from '@/components/ui/clipboard.astro';
-import Icon from '@/components/ui/icon.astro';
-import Link from '@/components/ui/link.astro';
-import * as NavigationMenu from '@/components/ui/navigation-menu';
-import Separator from '@/components/ui/separator.astro';
-import Text from '@/components/ui/text.astro';
-import Theme from '@/components/ui/theme.astro';
 import '@/tailwind.css';
+import { buttonVariants } from '@/ui/button.astro';
+import Clipboard from '@/ui/clipboard.astro';
+import Icon from '@/ui/icon.astro';
+import Link from '@/ui/link.astro';
+import * as NavigationMenu from '@/ui/navigation-menu';
+import Separator from '@/ui/separator.astro';
+import Text from '@/ui/text.astro';
+import Theme from '@/ui/theme.astro';
 import '@fontsource/geist-sans';
 import type { HTMLAttributes } from 'astro/types';
 import * as env from 'astro:env/server';

src/pages/404.astro

@@ -1,8 +1,8 @@
 ---
-import Icon from '@/components/ui/icon.astro';
-import Link from '@/components/ui/link.astro';
-import Text from '@/components/ui/text.astro';
 import Layout from '@/layouts/layout.astro';
+import Icon from '@/ui/icon.astro';
+import Link from '@/ui/link.astro';
+import Text from '@/ui/text.astro';
 ---
 
 <Layout class="text-center">

src/pages/blog/[id].astro

@@ -1,43 +1,42 @@
 ---
 import Me from '@/assets/me.webp';
-import PostCard from '@/components/post-card.astro';
-import PostGithub from '@/components/post-github.astro';
-import PostSubheader from '@/components/post-subheader.astro';
-import PostViews from '@/components/post-views.astro';
-import Badge from '@/components/ui/badge.astro';
-import Button, { buttonVariants } from '@/components/ui/button.astro';
-import * as Code from '@/components/ui/code';
-import Collapsible from '@/components/ui/collapsible.astro';
-import Date from '@/components/ui/date.astro';
-import Icon from '@/components/ui/icon.astro';
-import Link from '@/components/ui/link.astro';
-import Note from '@/components/ui/note.astro';
-import Separator from '@/components/ui/separator.astro';
-import * as TableOfContents from '@/components/ui/table-of-contents';
-import Text from '@/components/ui/text.astro';
 import Layout from '@/layouts/layout.astro';
+import { getSortedPosts } from '@/libs/content';
+import Badge from '@/ui/badge.astro';
+import Button, { buttonVariants } from '@/ui/button.astro';
+import * as Card from '@/ui/card';
+import * as Code from '@/ui/code';
+import Collapsible from '@/ui/collapsible.astro';
+import Date from '@/ui/date.astro';
+import Icon from '@/ui/icon.astro';
+import LinkHeader from '@/ui/link-header.astro';
+import Link from '@/ui/link.astro';
+import Note from '@/ui/note.astro';
+import Separator from '@/ui/separator.astro';
+import * as TableOfContents from '@/ui/table-of-contents';
+import Text from '@/ui/text.astro';
 import type { GetStaticPaths } from 'astro';
 import { Image } from 'astro:assets';
-import { getCollection, render, type CollectionEntry } from 'astro:content';
+import { render, type CollectionEntry } from 'astro:content';
 import * as env from 'astro:env/server';
 import { tv } from 'tailwind-variants';
+import PostGithub from './_github.astro';
+import PostViews from './_views.astro';
 
 type Post = CollectionEntry<'posts'>;
 type Props = { post: Post; prev: Post; next: Post };
 
 const social = buttonVariants({ size: 'icon', color: 'ghost', class: '[&_svg]:size-3.5 size-6' });
-const text = tv({ base: '[&>p]:text-foreground-1/85 [&_:where(p,aside)_a]:underline' });
+const text = tv({ base: '[&>p]:text-foregroun_:wd-1/85 [&here(p,aside)_a]:underline' });
 const list = tv({ base: '[&_ol]:list-decimal [&_ol]:list-inside [&_li]:list-disc [&_li]:list-inside' });
 
 export const getStaticPaths: GetStaticPaths = async () =>
-  getCollection('posts').then((posts) =>
-    posts
-      .sort((a, b) => b.data.published.valueOf() - a.data.published.valueOf())
-      .map((post, index, _posts) => {
-        const prev = _posts[index + 1] ?? _posts[0];
-        const next = _posts[index - 1] ?? _posts[_posts.length - 1];
-        return { params: { id: post.id }, props: { post, prev, next } };
-      }),
+  getSortedPosts().then((posts) =>
+    posts.map((post, index, _posts) => {
+      const prev = _posts[index + 1] ?? _posts[0];
+      const next = _posts[index - 1] ?? _posts[_posts.length - 1];
+      return { params: { id: post.id }, props: { post, prev, next } };
+    }),
   );
 
 const { post, prev, next } = Astro.props;
@@ -78,7 +77,7 @@ const { remarkPluginFrontmatter, headings, Content } = await render(post);
     >
       <Content
         components={{
-          h2: PostSubheader,
+          h2: LinkHeader,
           a: Link,
           blockquote: Note,
           figure: Code.Root,
@@ -94,8 +93,29 @@ const { remarkPluginFrontmatter, headings, Content } = await render(post);
     <div class="flex flex-col gap-6">
       <Text as="h3">MORE POSTS</Text>
       <ul class="grid gap-x-10 gap-y-6 md:grid-cols-2">
-        <li><PostCard post={prev} /></li>
-        <li><PostCard post={next} /></li>
+        {
+          [prev, next].map((post) => (
+            <li>
+              <Card.Root as="a" href={`/blog/${post.id}`} aria-label={`${post.data.title}. ${post.data.description}`}>
+                <Card.Header />
+                <Card.Body>
+                  <Text class="group-hover:text-brand text-sm motion-safe:transition-colors">{post.data.title}</Text>
+                  <Text class="text-foreground-2 flex-1 text-xs">{post.data.description}</Text>
+                </Card.Body>
+                <Card.Footer>
+                  <div class="text-foreground-2 flex items-center gap-2">
+                    <Icon name="calendar" class="size-3.5" />
+                    <Date value={post.data.published} />
+                  </div>
+                  <div class="text-foreground-2 flex items-center gap-2">
+                    <Icon name="clock-4" class="size-3.5" />
+                    <Text>{render(post).then((res) => res.remarkPluginFrontmatter.readingTime)}</Text>
+                  </div>
+                </Card.Footer>
+              </Card.Root>
+            </li>
+          ))
+        }
       </ul>
     </div>
   </article>

src/pages/blog/[topic].astro

@@ -1,7 +1,7 @@
 ---
+import { getAllTopics, getSortedPosts } from '@/libs/content';
 import type { GetStaticPaths } from 'astro';
 import Template from './_template.astro';
-import { getAllTopics, getSortedPosts } from './_utils';
 
 export const getStaticPaths = (async () => {
   const posts = await getSortedPosts();

src/components/post-github.astro → src/pages/blog/_github.astro

@@ -1,7 +1,7 @@
 ---
+import Icon from '@/ui/icon.astro';
+import Text from '@/ui/text.astro';
 import type { CollectionEntry } from 'astro:content';
-import Icon from './ui/icon.astro';
-import Text from './ui/text.astro';
 
 type Props = { repo: NonNullable<CollectionEntry<'posts'>['data']['repo']> };
 

src/pages/blog/_search.astro

@@ -1,11 +1,11 @@
 ---
-import Button from '@/components/ui/button.astro';
-import Command from '@/components/ui/command.astro';
-import * as Dialog from '@/components/ui/dialog';
-import Icon from '@/components/ui/icon.astro';
-import Link from '@/components/ui/link.astro';
-import Text from '@/components/ui/text.astro';
-import Textfield from '@/components/ui/textfield.astro';
+import Button from '@/ui/button.astro';
+import Command from '@/ui/command.astro';
+import * as Dialog from '@/ui/dialog';
+import Icon from '@/ui/icon.astro';
+import Link from '@/ui/link.astro';
+import Text from '@/ui/text.astro';
+import Textfield from '@/ui/textfield.astro';
 import { PAGEFIND_LINK } from 'astro:env/server';
 ---
 

src/pages/blog/_template.astro

@@ -1,14 +1,14 @@
 ---
-import PostCard from '@/components/post-card.astro';
-import Chip from '@/components/ui/chip.astro';
-import Date from '@/components/ui/date.astro';
-import Icon from '@/components/ui/icon.astro';
-import Separator from '@/components/ui/separator.astro';
-import Text from '@/components/ui/text.astro';
 import Layout from '@/layouts/layout.astro';
+import { getAllTopics, getSortedPosts, type GetAllTopics, type GetSortedPosts } from '@/libs/content';
+import * as Card from '@/ui/card';
+import Chip from '@/ui/chip.astro';
+import Date from '@/ui/date.astro';
+import Icon from '@/ui/icon.astro';
+import Separator from '@/ui/separator.astro';
+import Text from '@/ui/text.astro';
 import { db, PostView, sum } from 'astro:db';
 import PostsSearch from './_search.astro';
-import { getAllTopics, getSortedPosts, type GetAllTopics, type GetSortedPosts } from './_utils';
 
 type Props = { posts?: GetSortedPosts; topic?: GetAllTopics[0]['id'] };
 
@@ -79,8 +79,31 @@ const topics = await getAllTopics();
     </section>
     <section class="hidden flex-col gap-6 lg:flex">
       <Text as="h3" class="text-foreground-2">RECENT POSTS</Text>
-      <!-- prettier-ignore -->
-      <ul class="flex flex-col gap-6">{posts.slice(0, 3).map((post) => <li><PostCard {post} /></li>)}</ul>
+      <ul class="flex flex-col gap-6">
+        {
+          posts.slice(0, 3).map((post) => (
+            <li>
+              <Card.Root as="a" href={`/blog/${post.id}`} aria-label={`${post.data.title}. ${post.data.description}`}>
+                <Card.Header />
+                <Card.Body>
+                  <Text class="group-hover:text-brand text-sm motion-safe:transition-colors">{post.data.title}</Text>
+                  <Text class="text-foreground-2 flex-1 text-xs">{post.data.description}</Text>
+                </Card.Body>
+                <Card.Footer>
+                  <div class="text-foreground-2 flex items-center gap-2">
+                    <Icon name="calendar" class="size-3.5" />
+                    <Date value={post.data.published} />
+                  </div>
+                  <div class="text-foreground-2 flex items-center gap-2">
+                    <Icon name="clock-4" class="size-3.5" />
+                    <Text>{post.data.readingTime}</Text>
+                  </div>
+                </Card.Footer>
+              </Card.Root>
+            </li>
+          ))
+        }
+      </ul>
     </section>
   </div>
 </Layout>

src/components/post-views.astro → src/pages/blog/_views.astro

@@ -1,9 +1,9 @@
 ---
+import Badge from '@/ui/badge.astro';
+import Icon from '@/ui/icon.astro';
+import Text from '@/ui/text.astro';
 import { type CollectionEntry } from 'astro:content';
 import { db, eq, PostView, sql } from 'astro:db';
-import Badge from './ui/badge.astro';
-import Icon from './ui/icon.astro';
-import Text from './ui/text.astro';
 
 type Props = { id: CollectionEntry<'posts'>['id'] };