Start adding butterfly 2.4 page

Author: CodeDoctorDE

package.json

@@ -10,19 +10,19 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.2.6",
+    "@astrojs/mdx": "^4.3.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.4.0",
     "@linwooddev/style": "^0.4.2",
     "@phosphor-icons/web": "^2.1.2",
-    "astro": "^5.7.13",
+    "astro": "^5.8.1",
     "sharp": "^0.34.2",
     "typescript": "^5.8.3"
   },
-  "packageManager": "pnpm@10.11.0",
+  "packageManager": "pnpm@10.11.1",
   "devDependencies": {
     "@vite-pwa/astro": "^1.1.0",
-    "sass": "^1.89.0",
+    "sass": "^1.89.1",
     "vite-plugin-pwa": "^1.0.0",
     "workbox-window": "^7.3.0"
   }

pnpm-lock.yaml

@@ -30,6 +30,6 @@ export const getProject = async (
 export const PAGE_SIZE = 20;
 
 export const getPosts = async () =>
-  (await getCollection("blog")).sort(
+  (await getCollection("blog")).filter((e) => !e.data.unlisted).sort(
     (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
   );

src/blog.ts

@@ -0,0 +1,15 @@
+<ul class="table">
+  <slot />
+</ul>
+
+<style>
+  .table {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    grid-auto-rows: 1fr;
+    list-style-type: none;
+    padding: 0;
+    justify-content: center; 
+  }
+</style>

src/components/Table.astro

@@ -0,0 +1,25 @@
+---
+import Link from "./Link.astro";
+
+type Props = {
+  href?: string;
+};
+
+const { href } = Astro.props;
+---
+
+<li class="table-item">
+  <Link
+    variant="secondary"
+    href={href}
+    class="col align-center justify-center h-full text-normal"
+  >
+    <slot />
+  </Link>
+</li>
+
+<style>
+  .table-item {
+    height: 100%;
+  }
+</style>

src/components/TableItem.astro

@@ -0,0 +1,50 @@
+---
+title: Butterfly Black Hairstreak released
+date: "2025-05-21"
+author: codedoctor
+tags: [butterfly] 
+slug: "butterfly/2.4"
+unlisted: true
+---
+
+**Butterfly 2.4 Black Hairstreak is currently in beta!**
+
+Please visit the nightly versions here:
+
+- [2.4.0-beta.0](/butterfly/2.4.0-beta.0)
+
+*This page is currently only a draft*
+
+## Highlights
+
+<Table>
+<TableItem href="#text-format">
+  New Butterfly text format
+</TableItem>
+<TableItem href="#text-format">
+  Rebuild pack system
+</TableItem>
+<TableItem href="#text-format">
+  Improved Label Tool
+</TableItem>
+<TableItem href="#text-format">
+  Improved Pen Element
+</TableItem>
+<TableItem href="#text-format">
+  Improved Collaboration
+</TableItem>
+<TableItem href="#text-format">
+  LateX Support
+</TableItem>
+<TableItem href="#text-format">
+  Improved Pen Toolbar
+</TableItem>
+<TableItem href="#text-format">
+  Coming Soon...
+</TableItem>
+<TableItem href="#text-format">
+  Coming Soon...
+</TableItem>
+</Table>
+
+## Text format

src/content/blog/butterfly/butterfly-2.4.mdx

@@ -13,6 +13,7 @@ const blog = defineCollection({
       .or(z.date())
       .transform((val) => new Date(val)),
     heroImage: z.string().optional(),
+    unlisted: z.boolean().default(false),
     author: reference("authors"),
   }),
 });

src/content/config.ts

@@ -3,6 +3,8 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import BlogPost from '../layouts/BlogPost.astro';
 import { getEntryProject, getEntryUrl } from '../blog';
+import Table from '@components/Table.astro';
+import TableItem from '@components/TableItem.astro';
 
 export async function getStaticPaths() {
 	const posts = await getCollection('blog');
@@ -18,5 +20,5 @@ const { Content } = await post.render();
 ---
 
 <BlogPost {...post.data} project={project?.id}>
-	<Content />
+	<Content components={{Table, TableItem}} />
 </BlogPost>

src/pages/[...slug].astro

@@ -7,6 +7,8 @@ import { getProjects } from "../blog";
 import DefaultLayout from "../layouts/DefaultLayout.astro";
 import Link from "@components/Link.astro";
 import { getCollection } from "astro:content";
+import Table from "@components/Table.astro";
+import TableItem from "@components/TableItem.astro";
 
 const projects = await getProjects();
 const libraries = await getCollection("libraries");
@@ -42,38 +44,18 @@ const libraries = await getCollection("libraries");
       }
     </ul>
   </section>
-  <section class="long-section">
+  <section class="long-section container-md">
     <h2 class="section-title">Libraries</h2>
     <p class="pb-md text-center">Useful libraries for developers that want to build their own software</p>
-    <ul class="libraries-grid container-md">
+    <Table>
       {
         libraries.map((e) => (
-          <li>
-            <Link
-              variant="secondary"
-              href={e.data.url}
-              class="col align-center justify-center h-full text-normal"
-            >
-              <p class="text-center mb-none">{e.data.id}</p>
-              <p class="normal text-center mt-none">{e.data.description}</p>
-            </Link>
-          </li>
+          <TableItem>
+            <p class="text-center mb-none">{e.data.id}</p>
+            <p class="normal text-center mt-none">{e.data.description}</p>
+          </TableItem>
         ))
       }
-    </ul>
+    </Table>
   </section>
-  <style>
-    .libraries-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-      grid-auto-rows: 1fr;
-      list-style-type: none;
-      padding: 0;
-    }
-
-    .libraries-grid li {
-      height: 100%;
-    }
-  </style>
 </DefaultLayout>

src/pages/index.astro

@@ -1,11 +1,10 @@
 import rss from "@astrojs/rss";
 import type { APIContext } from "astro";
-import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
-import { getEntryUrl } from "src/blog";
+import { getEntryUrl, getPosts } from "src/blog";
 
 export async function GET(context: APIContext) {
-  const posts = await getCollection("blog");
+  const posts = await getPosts();
   return rss({
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,