docs: update changelog page with v1.24.3 and v1.24.4 releases

- Added v1.24.4 entry documenting showInNav field and hardcodedNavItems configuration
- Added v1.24.3 entry documenting inner page logo configuration
- Includes configuration examples and updated file lists
- Maintains consistent format with existing changelog entries

src/components/FeaturedCards.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "convex/react";
+import { Link } from "react-router-dom";
 import { api } from "../../convex/_generated/api";
 
 // Type for featured item from Convex (used for backwards compatibility)
@@ -142,7 +143,7 @@ export default function FeaturedCards({
   return (
     <div className="featured-cards">
       {featuredData.map((item) => (
-        <a key={item.slug} href={`/${item.slug}`} className="featured-card">
+        <Link key={item.slug} to={`/${item.slug}`} className="featured-card">
           {/* Thumbnail image displayed as square using object-fit: cover */}
           {item.image && (
             <div className="featured-card-image-wrapper">
@@ -160,7 +161,7 @@ export default function FeaturedCards({
               <p className="featured-card-excerpt">{item.excerpt}</p>
             )}
           </div>
-        </a>
+        </Link>
       ))}
     </div>
   );

src/components/Layout.tsx

@@ -80,8 +80,8 @@ export default function Layout({ children }: LayoutProps) {
   const showBlogInNav =
     siteConfig.blogPage.enabled && siteConfig.blogPage.showInNav;
 
-  // Combine Blog link with pages and sort by order
-  // This allows Blog to be positioned anywhere in the nav via siteConfig.blogPage.order
+  // Combine Blog link, hardcoded nav items, and pages, then sort by order
+  // This allows all nav items to be positioned anywhere via order field
   type NavItem = {
     slug: string;
     title: string;
@@ -101,6 +101,20 @@ export default function Layout({ children }: LayoutProps) {
     });
   }
 
+  // Add hardcoded nav items (React routes like /stats, /write)
+  if (siteConfig.hardcodedNavItems && siteConfig.hardcodedNavItems.length > 0) {
+    siteConfig.hardcodedNavItems.forEach((item) => {
+      // Only add if showInNav is true (defaults to true)
+      if (item.showInNav !== false) {
+        navItems.push({
+          slug: item.slug,
+          title: item.title,
+          order: item.order ?? 999,
+        });
+      }
+    });
+  }
+
   // Add pages from Convex
   if (pages && pages.length > 0) {
     pages.forEach((page) => {

src/config/siteConfig.ts

@@ -47,6 +47,15 @@ export interface PostsDisplayConfig {
   showOnBlogPage: boolean; // Show post list on /blog page (requires blogPage.enabled)
 }
 
+// Hardcoded navigation item configuration
+// For React route pages (like /stats, /write) that aren't markdown pages
+export interface HardcodedNavItem {
+  slug: string; // URL path (e.g., "stats", "write")
+  title: string; // Display name in navigation
+  order?: number; // Nav order (lower = first, matches page frontmatter order)
+  showInNav?: boolean; // Show in navigation menu (default: true)
+}
+
 // Site configuration interface
 export interface SiteConfig {
   // Basic site info
@@ -75,6 +84,9 @@ export interface SiteConfig {
   // Blog page configuration
   blogPage: BlogPageConfig;
 
+  // Hardcoded navigation items for React routes (like /stats, /write)
+  hardcodedNavItems: HardcodedNavItem[];
+
   // Posts display configuration
   postsDisplay: PostsDisplayConfig;
 
@@ -175,6 +187,24 @@ export const siteConfig: SiteConfig = {
     showViewToggle: true, // Show toggle button to switch between list and card views
   },
 
+  // Hardcoded navigation items for React routes
+  // Add React route pages (like /stats, /write) that should appear in navigation
+  // Set showInNav: false to hide from nav while keeping the route accessible
+  hardcodedNavItems: [
+    {
+      slug: "stats",
+      title: "Stats",
+      order: 10,
+      showInNav: true,
+    },
+    {
+      slug: "write",
+      title: "Write",
+      order: 20,
+      showInNav: true,
+    },
+  ],
+
   // Posts display configuration
   // Controls where the post list appears
   // Both can be true to show posts on homepage AND blog page

src/pages/Home.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 import { useQuery } from "convex/react";
 import { api } from "../../convex/_generated/api";
 import PostList from "../components/PostList";
@@ -166,9 +167,9 @@ export default function Home() {
               <ul className="home-featured-list">
                 {featuredList.map((item) => (
                   <li key={item.slug}>
-                    <a href={`/${item.slug}`} className="home-featured-link">
+                    <Link to={`/${item.slug}`} className="home-featured-link">
                       {item.title}
-                    </a>
+                    </Link>
                   </li>
                 ))}
               </ul>
@@ -229,9 +230,9 @@ export default function Home() {
             project on GitHub
           </a>{" "}
           to fork and deploy your own. View{" "}
-          <a href="/stats" className="home-text-link">
+          <Link to="/stats" className="home-text-link">
             real-time site stats
-          </a>
+          </Link>
           .
         </p>
         <p></p>

src/pages/Write.tsx

@@ -46,6 +46,7 @@ const PAGE_FIELDS = [
   { name: "slug", required: true, example: '"page-url"' },
   { name: "published", required: true, example: "true" },
   { name: "order", required: false, example: "1" },
+  { name: "showInNav", required: false, example: "true" },
   { name: "excerpt", required: false, example: '"Short description"' },
   { name: "image", required: false, example: '"/images/thumbnail.png"' },
   { name: "featured", required: false, example: "true" },
@@ -96,6 +97,7 @@ title: "Page Title"
 slug: "page-url"
 published: true
 order: 1
+showInNav: true
 layout: "sidebar"
 ---
 

src/styles/global.css

@@ -300,7 +300,7 @@ body {
 
 .main-content {
   flex: 1;
-  max-width: 680px;
+  max-width: 800px;
   width: 100%;
   margin: 0 auto;
   padding: 40px 24px;