From 534f0209994dbbf93b53874ffb9a7341aa418e99 Mon Sep 17 00:00:00 2001 From: Wayne Sutton Date: Wed, 24 Dec 2025 01:31:04 -0800 Subject: [PATCH] Move logo to top navigation header on all pages --- changelog.md | 33 ++++++++++ files.md | 8 +-- src/components/Layout.tsx | 14 +++- src/pages/Blog.tsx | 15 +---- src/pages/Post.tsx | 23 ------- src/styles/global.css | 134 ++++++++++++++++++++++---------------- 6 files changed, 129 insertions(+), 98 deletions(-) diff --git a/changelog.md b/changelog.md index c4b999f..fbd675a 100644 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,39 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). +## [1.25.1] - 2025-12-24 + +### Changed + +- Logo moved to top navigation header on all pages + - Logo now appears in the header bar (top-left) on blog posts, pages, and blog page + - Logo is separate from back button and navigation links + - Reads from `siteConfig.innerPageLogo` and `siteConfig.logo` configuration + - Works consistently across all pages (with and without sidebar) + - Mobile responsive: logo positioned on left in header + +### Technical + +- `src/components/Layout.tsx`: Added logo to top navigation header, reads from siteConfig +- `src/pages/Post.tsx`: Removed logo from post navigation (was next to back button) +- `src/pages/Blog.tsx`: Removed logo from blog navigation +- `src/styles/global.css`: Added `.top-nav-logo-link` and `.top-nav-logo` styles, updated `.top-nav` layout to span left-to-right, removed old `.inner-page-logo` styles + +## [1.25.0] - 2025-12-24 + +### Changed + +- Sidebar styling updated to match Cursor docs style + - Sidebar now has alternate background color (`--sidebar-alt-bg`) for visual separation + - Vertical border line on right side of sidebar + - Theme-aware colors for all four themes (dark, light, tan, cloud) + - Sidebar width increased to 240px for better readability + - Mobile responsive: sidebar hidden on screens below 1024px + +### Technical + +- `src/styles/global.css`: Added `--sidebar-alt-bg` CSS variables for each theme, updated `.post-sidebar-wrapper` with alternate background and right border, adjusted grid layout for wider sidebar + ## [1.24.9] - 2025-12-24 ### Added diff --git a/files.md b/files.md index 6f70a98..d9733d0 100644 --- a/files.md +++ b/files.md @@ -40,8 +40,8 @@ A brief description of each file in the codebase. | File | Description | | ----------- | ----------------------------------------------------------------- | | `Home.tsx` | Landing page with featured content and optional post list | -| `Blog.tsx` | Dedicated blog page with post list or card grid view (configurable via siteConfig.blogPage, supports view toggle) | -| `Post.tsx` | Individual blog post or page view with optional sidebar layout (update SITE_URL/SITE_NAME when forking) | +| `Blog.tsx` | Dedicated blog page with post list or card grid view (configurable via siteConfig.blogPage, supports view toggle). Includes back button in navigation | +| `Post.tsx` | Individual blog post or page view with optional sidebar layout. Includes back button and CopyPageDropdown in post navigation (update SITE_URL/SITE_NAME when forking) | | `Stats.tsx` | Real-time analytics dashboard with visitor stats and GitHub stars | | `Write.tsx` | Three-column markdown writing page with Cursor docs-style UI, frontmatter reference with copy buttons, theme toggle, font switcher (serif/sans-serif), and localStorage persistence (not linked in nav) | @@ -49,7 +49,7 @@ A brief description of each file in the codebase. | File | Description | | ------------------------- | ---------------------------------------------------------- | -| `Layout.tsx` | Page wrapper with search button, theme toggle, mobile menu (left-aligned on mobile), and scroll-to-top. Combines Blog link, hardcoded nav items, and markdown pages for navigation | +| `Layout.tsx` | Page wrapper with logo in header (top-left), search button, theme toggle, mobile menu (left-aligned on mobile), and scroll-to-top. Combines Blog link, hardcoded nav items, and markdown pages for navigation. Logo reads from siteConfig.innerPageLogo | | `ThemeToggle.tsx` | Theme switcher (dark/light/tan/cloud) | | `PostList.tsx` | Year-grouped blog post list or card grid (supports list/cards view modes) | | `BlogPost.tsx` | Markdown renderer with syntax highlighting and collapsible sections (details/summary) | @@ -86,7 +86,7 @@ A brief description of each file in the codebase. | File | Description | | ------------ | ------------------------------------------------------------------------------------ | -| `global.css` | Global CSS with theme variables, centralized font-size CSS variables for all themes | +| `global.css` | Global CSS with theme variables, centralized font-size CSS variables for all themes, sidebar styling with alternate background colors and right border for docs-style layout | ## Convex Backend (`convex/`) diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 4d13b23..2ab91ea 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -134,8 +134,20 @@ export default function Layout({ children }: LayoutProps) { return (
- {/* Top navigation bar with page links, search, and theme toggle */} + {/* Top navigation bar with logo, page links, search, and theme toggle */}
+ {/* Logo on the left (visible on all pages) */} + {siteConfig.innerPageLogo.enabled && siteConfig.logo && ( + + {siteConfig.name} + + )} + {/* Mobile left controls: hamburger, search, theme (visible on mobile/tablet only) */}
{/* Hamburger button for mobile menu */} diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index 1b9f2f5..dcd378e 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { Link, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { useQuery } from "convex/react"; import { api } from "../../convex/_generated/api"; import PostList from "../components/PostList"; @@ -43,23 +43,12 @@ export default function Blog() { return (
- {/* Navigation with back button and optional logo */} + {/* Navigation with back button */} {/* Blog page header */} diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx index 2f9dc19..0571d24 100644 --- a/src/pages/Post.tsx +++ b/src/pages/Post.tsx @@ -6,7 +6,6 @@ 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"; @@ -186,17 +185,6 @@ export default function Post() { Back - {/* Inner page logo (desktop: left, mobile: right) */} - {siteConfig.innerPageLogo.enabled && siteConfig.logo && ( - - {siteConfig.name} - - )} {/* CopyPageDropdown in nav */} Back - {/* Inner page logo (desktop: left, mobile: right) */} - {siteConfig.innerPageLogo.enabled && siteConfig.logo && ( - - {siteConfig.name} - - )} {/* Copy page dropdown for sharing with full metadata */}