+```
+
+Or with additional attributes:
+
+```html
+
+```
+
+**HTML images:** HTML `
+
{sortedPosts.map((post) => (
{/* Thumbnail image displayed as square using object-fit: cover */}
@@ -58,7 +68,8 @@ export default function PostList({ posts, viewMode = "list" }: PostListProps) {
)}
{post.title}
- {(post.excerpt || post.description) && ( + {/* Only show excerpt if showExcerpts is true */} + {showExcerpts && (post.excerpt || post.description) && ({post.excerpt || post.description}
diff --git a/src/config/siteConfig.ts b/src/config/siteConfig.ts index 39d4d1d..5672074 100644 --- a/src/config/siteConfig.ts +++ b/src/config/siteConfig.ts @@ -95,6 +95,7 @@ export interface FooterConfig { showOnHomepage: boolean; // Show footer on homepage showOnPosts: boolean; // Default: show footer on blog posts showOnPages: boolean; // Default: show footer on static pages + showOnBlogPage: boolean; // Show footer on /blog page defaultContent?: string; // Default markdown content if no frontmatter footer field provided } @@ -266,7 +267,7 @@ export const siteConfig: SiteConfig = { title: "Blog", // Page title description: "All posts from the blog, sorted by date.", // Optional description order: 2, // Nav order (lower = first, e.g., 0 = first, 5 = after pages with order 0-4) - viewMode: "list", // Default view mode: "list" or "cards" + viewMode: "cards", // Default view mode: "list" or "cards" showViewToggle: true, // Show toggle button to switch between list and card views }, @@ -337,6 +338,7 @@ export const siteConfig: SiteConfig = { showOnHomepage: true, // Show footer on homepage showOnPosts: true, // Default: show footer on blog posts (override with frontmatter) showOnPages: true, // Default: show footer on static pages (override with frontmatter) + showOnBlogPage: true, // Show footer on /blog page // Default footer markdown (used when frontmatter footer field is not provided) defaultContent: `Built with [Convex](https://convex.dev) for real-time sync and deployed on [Netlify](https://netlify.com). Read the [project on GitHub](https://github.com/waynesutton/markdown-site) to fork and deploy your own. View [real-time site stats](/stats). diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index dcd378e..e3d76fb 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -3,6 +3,8 @@ import { useNavigate } from "react-router-dom"; import { useQuery } from "convex/react"; import { api } from "../../convex/_generated/api"; import PostList from "../components/PostList"; +import BlogHeroCard from "../components/BlogHeroCard"; +import Footer from "../components/Footer"; import siteConfig from "../config/siteConfig"; import { ArrowLeft } from "lucide-react"; @@ -10,14 +12,20 @@ import { ArrowLeft } from "lucide-react"; const BLOG_VIEW_MODE_KEY = "blog-view-mode"; // Blog page component -// Displays all published posts in a year-grouped list or card grid +// Displays all published posts with featured blog posts layout: +// 1. Hero: first blogFeatured post (large card) +// 2. Featured row: remaining blogFeatured posts (2 columns) +// 3. Regular posts: non-featured posts (3 columns) // Controlled by siteConfig.blogPage and siteConfig.postsDisplay settings export default function Blog() { const navigate = useNavigate(); - // Fetch published posts from Convex + // Fetch all published posts from Convex const posts = useQuery(api.posts.getAllPosts); + // Fetch all blog featured posts for hero + featured row + const blogFeaturedPosts = useQuery(api.posts.getBlogFeaturedPosts); + // State for view mode toggle (list or cards) const [viewMode, setViewMode] = useState<"list" | "cards">( siteConfig.blogPage.viewMode, @@ -41,8 +49,33 @@ export default function Blog() { // Check if posts should be shown on blog page const showPosts = siteConfig.postsDisplay.showOnBlogPage; + // Check if footer should be shown on blog page + const showFooter = + siteConfig.footer.enabled && siteConfig.footer.showOnBlogPage; + + // Split featured posts: first one is hero, rest go to featured row + const heroPost = blogFeaturedPosts && blogFeaturedPosts.length > 0 ? blogFeaturedPosts[0] : null; + const featuredRowPosts = blogFeaturedPosts && blogFeaturedPosts.length > 1 ? blogFeaturedPosts.slice(1) : []; + + // Get slugs of all featured posts for filtering + const featuredSlugs = new Set(blogFeaturedPosts?.map((p) => p.slug) || []); + + // Filter out all featured posts from regular posts list + const regularPosts = posts?.filter((post) => !featuredSlugs.has(post.slug)); + + // Determine if we have featured content to show + const hasFeaturedContent = heroPost !== null; + + // Build CSS class for the blog page + const blogPageClass = [ + "blog-page", + viewMode === "cards" ? "blog-page-cards" : "blog-page-list", + ] + .filter(Boolean) + .join(" "); + return ( -
+
{/* Navigation with back button */}
);
}
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
index de87aed..8137087 100644
--- a/src/pages/Post.tsx
+++ b/src/pages/Post.tsx
@@ -206,6 +206,8 @@ export default function Post({
// Check if right sidebar is enabled (only when explicitly set in frontmatter)
const hasRightSidebar = siteConfig.rightSidebar.enabled && page.rightSidebar === true;
const hasAnySidebar = hasLeftSidebar || hasRightSidebar;
+ // Track if only right sidebar is enabled (for centering article)
+ const hasOnlyRightSidebar = hasRightSidebar && !hasLeftSidebar;
return (
@@ -229,7 +231,7 @@ export default function Post({
)}
-
+
{/* Left sidebar - TOC */}
{hasLeftSidebar && (