improve posts + cleanup

Author: Dowdow

src/assets/posts/routing-enhanced.md

@@ -0,0 +1 @@
+# Enhancing our hash routing system with parameters and typescript

src/assets/posts/routing-enhanced.png

@@ -1,4 +1,4 @@
-# Simple Routing system using hashes in React
+# Simple routing system using hashes in React
 
 Sometimes, you might prefer not to rely on third-party dependencies, especially for simple tasks or during the proof-of-concept phase.
 However, implementing such functionalities can be complex, even for simple use cases.
@@ -160,7 +160,7 @@ The `Link` component acts as a simple wrapper around `<a>` with customized behav
 
 When clicked, the `onClick` method first invokes `preventDefault` on the click event to halt any default browser actions, such as page reloading.
 
-Next, we utilize the `History API` to push our new route, followed by dispatching a [`HashChangeEvent`](https://developer.mozilla.org/en-US/docs/Web/API/HashChangeEvent) for our `location.js` hook to intercept and update all relevant components.
+Next, we utilize the `History API` to push our new route, followed by dispatching a [`HashChangeEvent`](https://developer.mozilla.org/en-US/docs/Web/API/HashChangeEvent) for our `Routes.jsx` component to intercept and update all relevant components through the context.
 
 With these updates in place, our `App.jsx` component should function correctly now:
 
@@ -202,4 +202,4 @@ export default function App() {
 
 So there you have it! We've built a simple client-side routing system in React using browser hashes. With hooks, components, and some event handling magic, we've created a lightweight alternative to `react-router`.
 
-There's still plenty of room for upgrades and enhancements, do as you please.
+There's still plenty of room for upgrades and enhancements, do as you please.

src/posts/routing.md src/assets/posts/routing.mdsrc/posts/routing.md renamed to src/assets/posts/routing.md

@@ -14,14 +14,24 @@ export default function Posts() {
           Sometimes I feel like writing some posts.
         </span>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-3">
-        {posts.map(({ title, date, slug, file }) => (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+        {posts.map(({ title, description, date, image, slug, file }) => (
           <Link key={file} to={generateRoute(HASH_POST, { slug })}>
-            <Box>
-              <div className="text-sm tracking-tight text-prim/50 mb-2">
-                {date}
+            <Box className="flex gap-5">
+              <div className="min-w-40">
+                <img
+                  src={image}
+                  alt={title}
+                  className="h-40 w-40 object-cover rounded"
+                />
+              </div>
+              <div>
+                <span className="text-sm tracking-tight text-prim/50 mb-2">
+                  {date}
+                </span>
+                <h2 className="text-lg font-bold tracking-tight">{title}</h2>
+                <p className="text-prim/80  mt-3">{description}</p>
               </div>
-              <h2 className="text-lg font-bold tracking-tight">{title}</h2>
             </Box>
           </Link>
         ))}

src/assets/posts/routing.png

@@ -3,7 +3,7 @@ import Box from "../ui/Box";
 import Switch from "../ui/Switch";
 
 interface GamepadsProps {
-  gamepads: Array<GamepadInfo>;
+  gamepads: GamepadInfo[];
   gamepadsData: Array<Gamepad | null>;
   support: boolean | null;
   toggle: (index: number) => void;

src/components/Posts.tsx

@@ -17,9 +17,9 @@ interface ReducerType {
 }
 
 function reducer(
-  state: Array<string> = [],
+  state: string[] = [],
   action: ReducerType = { type: "", payload: "" },
-): Array<string> {
+): string[] {
   switch (action.type) {
     case ADD:
       return [...state, action.payload];

src/components/midi/Gamepads.tsx

@@ -2,7 +2,7 @@ import { createContext } from "react";
 
 interface RoutesContextType {
   hash: string;
-  matches: Array<string>;
+  matches: string[];
   addMatch: (match: string) => void;
 }
 

src/components/routes/Routes.tsx

@@ -23,11 +23,11 @@ export interface ButtonGamePadEvent {
 }
 
 function reducer(
-  state: Array<GamepadInfo> = [],
+  state: GamepadInfo[] = [],
   action: { type: string; gamepad?: GamepadInfo; index?: number } = {
     type: "",
   },
-): Array<GamepadInfo> {
+): GamepadInfo[] {
   switch (action.type) {
     case ADD:
       if (action.gamepad === undefined) break;

src/components/routes/context.ts

@@ -1,22 +1,39 @@
-import routing from "../posts/routing.md";
+import routing_img from "../assets/posts/routing.png";
+import routing_md from "../assets/posts/routing.md";
+import routing_enhanced_img from "../assets/posts/routing-enhanced.png";
+import routing_enhanced_md from "../assets/posts/routing-enhanced.md";
 
 interface Post {
   title: string;
   slug: string;
+  description: string;
   date: string;
+  image: string;
   file: string;
 }
 
-const posts = [
+const posts: Post[] = [
   {
-    title: "Simple Routing system using hashes in React",
+    title: "Enhancing our hash routing system with params and typescript",
+    slug: "routing-enhanced",
+    description:
+      "A follow up to our previous post about routing. Here we'll add parameters support, like a slug. And add typescript support for better debugging.",
+    date: "2025-08",
+    image: routing_enhanced_img,
+    file: routing_enhanced_md,
+  },
+  {
+    title: "Simple routing system using hashes in React",
     slug: "routing",
+    description:
+      "In this brief post, I'll guide you through the process of building a straightforward routing system in React using hashes, inspirired by the syntax of react-router.",
     date: "2024-05",
-    file: routing,
-  } as Post,
+    image: routing_img,
+    file: routing_md,
+  },
 ];
 
-export function usePosts(): Array<Post> {
+export function usePosts(): Post[] {
   return posts;
 }