feat: added logo to pages, blog post as an option in sitecong

src/config/siteConfig.ts

@@ -20,6 +20,14 @@ export interface VisitorMapConfig {
   title?: string; // Optional title above the map
 }
 
+// Inner page logo configuration
+// Shows the site logo in the header on blog page, individual posts, and pages
+// Does not affect the homepage logo (which is controlled separately)
+export interface InnerPageLogoConfig {
+  enabled: boolean; // Enable/disable logo on inner pages
+  size: number; // Logo size in pixels (applied as height)
+}
+
 // Blog page configuration
 // Controls whether posts appear on homepage, dedicated blog page, or both
 export interface BlogPageConfig {
@@ -61,6 +69,9 @@ export interface SiteConfig {
   // Visitor map configuration (stats page)
   visitorMap: VisitorMapConfig;
 
+  // Inner page logo configuration (blog page, posts, pages)
+  innerPageLogo: InnerPageLogoConfig;
+
   // Blog page configuration
   blogPage: BlogPageConfig;
 
@@ -144,6 +155,14 @@ export const siteConfig: SiteConfig = {
     title: "Live Visitors", // Optional title above the map
   },
 
+  // Inner page logo configuration
+  // Shows logo on blog page, individual posts, and static pages
+  // Desktop: top left corner, Mobile: top right corner (small)
+  innerPageLogo: {
+    enabled: true, // Set to false to hide logo on inner pages
+    size: 28, // Logo height in pixels (keeps aspect ratio)
+  },
+
   // Blog page configuration
   // Set enabled to true to create a dedicated /blog page
   blogPage: {

src/pages/Blog.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useQuery } from "convex/react";
 import { api } from "../../convex/_generated/api";
 import PostList from "../components/PostList";
@@ -43,12 +43,23 @@ export default function Blog() {
 
   return (
     <div className="blog-page">
-      {/* Navigation with back button */}
+      {/* Navigation with back button and optional logo */}
       <nav className="post-nav">
         <button onClick={() => navigate("/")} className="back-button">
           <ArrowLeft size={16} />
           <span>Back</span>
         </button>
+        {/* Inner page logo (desktop: left, mobile: right) */}
+        {siteConfig.innerPageLogo.enabled && siteConfig.logo && (
+          <Link to="/" className="inner-page-logo-link">
+            <img
+              src={siteConfig.logo}
+              alt={siteConfig.name}
+              className="inner-page-logo"
+              style={{ height: siteConfig.innerPageLogo.size }}
+            />
+          </Link>
+        )}
       </nav>
 
       {/* Blog page header */}

src/pages/Post.tsx

@@ -6,6 +6,7 @@ import CopyPageDropdown from "../components/CopyPageDropdown";
 import PageSidebar from "../components/PageSidebar";
 import { extractHeadings } from "../utils/extractHeadings";
 import { useSidebar } from "../context/SidebarContext";
+import siteConfig from "../config/siteConfig";
 import { format, parseISO } from "date-fns";
 import { ArrowLeft, Link as LinkIcon, Twitter, Rss } from "lucide-react";
 import { useState, useEffect } from "react";
@@ -185,6 +186,17 @@ export default function Post() {
             <ArrowLeft size={16} />
             <span>Back</span>
           </button>
+          {/* Inner page logo (desktop: left, mobile: right) */}
+          {siteConfig.innerPageLogo.enabled && siteConfig.logo && (
+            <Link to="/" className="inner-page-logo-link">
+              <img
+                src={siteConfig.logo}
+                alt={siteConfig.name}
+                className="inner-page-logo"
+                style={{ height: siteConfig.innerPageLogo.size }}
+              />
+            </Link>
+          )}
           {/* CopyPageDropdown in nav */}
           <CopyPageDropdown
             title={page.title}
@@ -277,6 +289,17 @@ export default function Post() {
           <ArrowLeft size={16} />
           <span>Back</span>
         </button>
+        {/* Inner page logo (desktop: left, mobile: right) */}
+        {siteConfig.innerPageLogo.enabled && siteConfig.logo && (
+          <Link to="/" className="inner-page-logo-link">
+            <img
+              src={siteConfig.logo}
+              alt={siteConfig.name}
+              className="inner-page-logo"
+              style={{ height: siteConfig.innerPageLogo.size }}
+            />
+          </Link>
+        )}
         {/* Copy page dropdown for sharing with full metadata */}
         <CopyPageDropdown
           title={post.title}

src/styles/global.css

@@ -9,8 +9,8 @@
    - 2xs: 11px  (code language labels, small badges)
    - xs:  12px  (descriptions, small text)
    - sm:  13px  (meta text, tags, secondary info)
-   - md:  14px  (navigation, buttons, labels)
-   - base: 16px (body text, default)
+   - md:  16px  (navigation, buttons, labels)
+   - base: 18px (body text, default)
    - lg:  17px  (blog content)
    - xl:  18px  (post description, h3)
    - 2xl: 20px  (h2 headings)
@@ -24,7 +24,7 @@
   --font-size-2xs: 11px;
   --font-size-xs: 12px;
   --font-size-sm: 13px;
-  --font-size-md: 14px;
+  --font-size-md: 16px;
   --font-size-base: 18px;
   --font-size-lg: 17px;
   --font-size-xl: 18px;
@@ -613,6 +613,55 @@ body {
   margin-bottom: 40px;
 }
 
+/* Inner page logo styles (blog page, posts, pages) */
+/* Desktop: logo first on the left, back button after */
+.inner-page-logo-link {
+  display: flex;
+  align-items: center;
+  order: 0;
+}
+
+.inner-page-logo {
+  width: auto;
+  display: block;
+  transition: opacity 0.2s ease;
+}
+
+.inner-page-logo-link:hover .inner-page-logo {
+  opacity: 0.7;
+}
+
+/* Nav layout adjustments for logo */
+.post-nav .back-button {
+  order: 1;
+  margin-left: 16px;
+}
+
+.post-nav .copy-page-dropdown {
+  order: 2;
+  margin-left: auto;
+}
+
+/* Mobile: logo on left, back button position unchanged */
+@media (max-width: 768px) {
+  .inner-page-logo-link {
+    order: 0;
+  }
+
+  .inner-page-logo {
+    height: 24px !important; /* Smaller on mobile to keep header compact */
+  }
+
+  .post-nav .back-button {
+    margin-left: 12px;
+  }
+
+  .post-nav .copy-page-dropdown {
+    order: 2;
+    margin-left: auto;
+  }
+}
+
 /* Shift CopyPageDropdown 7px to the left for sidebar layouts */
 .post-nav-with-sidebar .copy-page-dropdown {
   margin-right: 35px;