fixes

src/components/LatestCodeList.astro

@@ -4,6 +4,21 @@ import { Code } from "astro:components";
 import { getCollection, type CollectionEntry } from "astro:content";
 import PlayPause from "$components/react/PlayPause";
 
+const codeOrder = ["vim", "tsx", "jsx","ts","js", "typescript", "javascript","ruby", "go", "rust", "lua", "bash", "json", "shell", "html", "css"];
+
+function codeSort(a: CodeResults[0], b: CodeResults[0]) {
+  if (a.lang === b.lang) return 0;
+  if (!a.lang) return 1;
+  if (!b.lang) return -1;
+  const aIndex = codeOrder.indexOf(a.lang);
+  const bIndex = codeOrder.indexOf(b.lang);
+  if (aIndex === -1) return 1;
+  if (bIndex === -1) return -1;
+  if (aIndex < bIndex) return -1;
+  if (aIndex > bIndex) return 1;
+  return 0;
+}
+
 const posts: CollectionEntry<"blog">[] = await getCollection("blog");
 let allCodes: CodeResults = [];
 const livePosts = posts.filter((post) => !post.data.draft);
@@ -12,7 +27,7 @@ for (const post of livePosts) {
   if (!codes) continue;
 
   const codesWithPost: CodeResults = codes.map((code) => ({ ...code, post }));
-  allCodes = allCodes.concat(codesWithPost);
+  allCodes = allCodes.concat(codesWithPost).sort(codeSort);
 }
 ---
 
@@ -82,7 +97,7 @@ for (const post of livePosts) {
 <script>
   import { isPaused } from "$state/index";
 
-  document.addEventListener("astro:page-load", () => {
+  const onLoad = () => {
     const codesContainer = document.querySelector(
       ".codes-container"
     ) as HTMLDivElement;
@@ -192,5 +207,8 @@ for (const post of livePosts) {
     // );
     //
     // codes.forEach((code) => observer.observe(code));
-  });
+  }
+
+  document.addEventListener("astro:page-load", onLoad)
+  onLoad()
 </script>

src/components/PostPreviewList.astro

@@ -13,7 +13,7 @@ const { posts, heading, mode = "col", asCard = false } = Astro.props;
 // @ts-ignore
 const sortedPosts = posts.sort(
   (a, b) =>
-    new Date(a.data.pubDate).valueOf() - new Date(b.data.pubDate).valueOf()
+    new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
 );
 ---
 

src/content/blog/sharing-state-between-react-and-astro-components.mdx

@@ -0,0 +1,18 @@
+---
+title: Sharing state between React and Astro components with nanoStores
+description: How to use the nanoStores library to share state between React and Astro components
+pubDate: Mar 22 2024
+cover: ./assets/nanostores.jpg
+coverAlt: Screenshot of the nanoStores github README
+tags: [astro, react, nanostores]
+draft: true
+---
+
+Enabling the Speculation Rules API with AstroJS
+
+In the modern web development landscape, page loading speed is integral to user
+experience. any web application. Speculation Rules API, an experimental feature,
+is pretty much a game changer, as page loads will become instant as the client
+fetches them, based on pre-configured rules. This post is intended to guide
+developers through the process of integrating the Speculation Rules API with
+AstroJS.

src/pages/index.astro

@@ -11,7 +11,6 @@ export const prerender = true;
 let posts: CollectionEntry<"blog">[] = await getCollection("blog");
 posts = Array.from(posts)
 	.filter((post) => !post.data.draft)
-	.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 ---
 
 <Layout>