feat: make blog page look good

Author: tonyaellie

src/components/NewsletterLayout.astro

@@ -15,13 +15,33 @@ const { frontmatter, headings } = Astro.props;
 ---
 
 <Layout title={frontmatter.title}>
-  <h1>{frontmatter.title}</h1>
-  <p>{frontmatter.date}</p>
-  <p>{frontmatter.description}</p>
-  <div class="flex">
-    {headings.map((heading) => <a href={`#${heading.slug}`}>{heading.text}</a>)}
+  <div class="mx-auto max-w-2xl">
+    <div class="pb-4">
+      <h1 class="text-2xl font-bold">{frontmatter.title}</h1>
+      <p class="text-gray-500">{frontmatter.date}</p>
+      <p>{frontmatter.description}</p>
+      <div>
+        <h2 class="text-lg font-semibold">Table of Contents</h2>
+        <ol class="list-decimal pl-8">
+          {
+            headings
+              .filter((heading) => heading.depth === 1)
+              .map((heading) => (
+                <li>
+                  <a
+                    href={`#${heading.slug}`}
+                    class="text-blue-500 hover:underline"
+                  >
+                    {heading.text}
+                  </a>
+                </li>
+              ))
+          }
+        </ol>
+      </div>
+    </div>
+    <article class="prose-thin prose prose-invert">
+      <slot />
+    </article>
   </div>
-  <article class="prose prose-invert">
-    <slot />
-  </article>
 </Layout>

src/pages/docs.astro

@@ -3,7 +3,7 @@ import Layout from '../components/Layout.astro';
 ---
 
 <Layout title="Docs">
-  <div class="mx-auto max-w-xl space-y-4 font-thin">
+  <div class="mx-auto max-w-2xl space-y-4 font-thin">
     <h2 class="text-3xl font-normal">Overview</h2>
     <p>
       Rustular is designed to revolutionize the way web applications are

src/pages/index.astro

@@ -5,7 +5,7 @@ import Testimonial from '../components/Testimonial.astro';
 ---
 
 <Layout title="Home">
-  <div class="mx-auto flex max-w-xl flex-col space-y-16 text-center">
+  <div class="mx-auto flex max-w-2xl flex-col space-y-16 text-center">
     <div class="text-5xl">Blazingly fast</div>
     <div class="font-thin">
       Rustular is a revolutionary web development tool that harnesses the

src/pages/newsletter/2023-05.md

@@ -9,6 +9,8 @@ description: Welcome to the May 2023 edition of our monthly newsletter! We have
 
 We're thrilled to announce our latest feature: **Real-time Collaboration**. Now you can collaborate with your team members in real-time, making project management easier and more efficient.
 
+## A small heading
+
 To use this feature, simply navigate to your project dashboard and click on the "Collaboration" tab. You'll be able to see who's currently viewing or editing the project, and changes will be synced instantly.
 
 # Upcoming Events