feat: dedicated typography file, remove tailwind-typography

src/pages/404.astro

@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils'
     >
       <div class="max-w-md">
         <h1 class="mb-4 text-3xl font-medium">404: Page not found</h1>
-        <p class="prose prose-neutral dark:prose-invert">
+        <p class="prose">
           Oops! The page you're looking for doesn't exist.
         </p>
       </div>

src/pages/about.astro

@@ -16,7 +16,7 @@ const projects = await getCollection('projects')
 
     <section>
       <div class="min-w-full">
-        <div class="prose prose-neutral dark:prose-invert mb-8">
+        <div class="prose mb-8">
           <p class="mb-4">
             astro-erudite is an opinionated, no-frills static blogging template
             that prioritizes simplicity and performance, built with <Link

src/pages/authors/[...id].astro

@@ -47,7 +47,7 @@ const authorPosts = allPosts
       <h2 class="text-2xl font-medium">Posts by {author.data.name}</h2>
       {
         authorPosts.length > 0 ? (
-          <ul class="not-prose flex flex-col gap-4">
+          <ul class="flex flex-col gap-4">
             {authorPosts.map((post) => (
               <li>
                 <BlogCard entry={post} />

src/pages/authors/index.astro

@@ -13,7 +13,7 @@ const authors = await getCollection('authors')
     <Breadcrumbs items={[{ label: 'Authors', icon: 'lucide:users' }]} />
     {
       authors.length > 0 ? (
-        <ul class="not-prose flex flex-col gap-4">
+        <ul class="flex flex-col gap-4">
           {authors.map((author) => (
             <li>
               <AuthorCard author={author} />

src/pages/blog/[...id].astro

@@ -153,7 +153,7 @@ const authors = await parseAuthors(post.data.authors ?? [])
     {headings.length > 0 && <TableOfContents headings={headings} />}
 
     <article
-      class="prose prose-neutral dark:prose-invert col-start-2 max-w-none"
+      class="prose col-start-2 max-w-none"
     >
       <Content />
     </article>

src/pages/blog/[...page].astro

@@ -48,7 +48,7 @@ const years = Object.keys(postsByYear).sort((a, b) => parseInt(b) - parseInt(a))
         years.map((year) => (
           <section class="flex flex-col gap-y-4">
             <div class="font-medium">{year}</div>
-            <ul class="not-prose flex flex-col gap-4">
+            <ul class="flex flex-col gap-4">
               {postsByYear[year].map((post) => (
                 <li>
                   <BlogCard entry={post} />

src/pages/index.astro

@@ -3,13 +3,6 @@ import BlogCard from '@/components/BlogCard.astro'
 import Container from '@/components/Container.astro'
 import Link from '@/components/Link.astro'
 import { buttonVariants } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
 import { SITE } from '@/consts'
 import Layout from '@/layouts/Layout.astro'
 import { getCollection } from 'astro:content'
@@ -23,15 +16,12 @@ const blog = (await getCollection('blog'))
 <Layout title="Home" description={SITE.DESCRIPTION}>
   <Container class="flex flex-col gap-y-6">
     <section>
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-3xl">er·u·dite</CardTitle>
-          <CardDescription
-            >/ˈer(y)əˌdīt/ &bull; <span class="font-medium">adjective</span
-            ></CardDescription
-          >
-        </CardHeader>
-        <CardContent>
+      <div class="rounded-lg border">
+        <div class="flex flex-col space-y-1.5 p-6">
+          <h3 class="text-3xl font-medium leading-none">er·u·dite</h3>
+          <p class="text-sm text-muted-foreground">/ˈer(y)əˌdīt/ &bull; <span class="font-medium">adjective</span></p>
+        </div>
+        <div class="p-6 pt-0">
           <p class="text-muted-foreground mb-2 text-sm">
             astro-erudite is an opinionated, no-frills static blogging template
             built with <Link
@@ -69,12 +59,12 @@ const blog = (await getCollection('blog'))
               underline>The State of Static Blogs in 2024</Link
             >.
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </section>
     <section class="flex flex-col gap-y-4">
       <h2 class="text-2xl font-medium">Latest posts</h2>
-      <ul class="not-prose flex flex-col gap-y-4">
+      <ul class="flex flex-col gap-y-4">
         {
           blog.map((post) => (
             <li>

src/pages/tags/[...id].astro

@@ -56,7 +56,7 @@ export async function getStaticPaths() {
         posts.map((post) => (
           <section class="flex flex-col gap-y-4">
             <div>
-              <ul class="not-prose flex flex-col gap-4">
+              <ul class="flex flex-col gap-4">
                 <li>
                   <BlogCard entry={post} />
                 </li>