feat: add sidebar layout support for blog posts

- Add layout field to posts schema and frontmatter
- Enable docs-style sidebar layout for posts (previously pages only)
- Update Post.tsx to handle sidebar for both posts and pages
- Add layout field to Write.tsx frontmatter reference
- Update documentation in docs.md, setup-guide.md, how-to-publish.md
- Add documentation links to README.md
This commit is contained in:
Wayne Sutton
2025-12-23 00:57:21 -08:00
parent edb7fc6723
commit 0342539aac
18 changed files with 244 additions and 338 deletions

View File

@@ -269,7 +269,13 @@ export default function Home() {
>
GitHub
</a>
.
. This project is licensed under the MIT{" "}
<a
href="https://github.com/waynesutton/markdown-site?tab=MIT-1-ov-file"
className="home-text-link"
>
License.
</a>{" "}
</p>
</section>
</div>

View File

@@ -236,10 +236,14 @@ export default function Post() {
);
};
// Extract headings for sidebar TOC (only for posts with layout: "sidebar")
const headings = post?.layout === "sidebar" ? extractHeadings(post.content) : [];
const hasSidebar = headings.length > 0;
// Render blog post with full metadata
return (
<div className="post-page">
<nav className="post-nav">
<div className={`post-page ${hasSidebar ? "post-page-with-sidebar" : ""}`}>
<nav className={`post-nav ${hasSidebar ? "post-nav-with-sidebar" : ""}`}>
<button onClick={() => navigate("/")} className="back-button">
<ArrowLeft size={16} />
<span>Back</span>
@@ -257,7 +261,15 @@ export default function Post() {
/>
</nav>
<article className="post-article">
<div className={hasSidebar ? "post-content-with-sidebar" : ""}>
{/* Left sidebar - TOC */}
{hasSidebar && (
<aside className="post-sidebar-wrapper post-sidebar-left">
<PageSidebar headings={headings} activeId={location.hash.slice(1)} />
</aside>
)}
<article className={`post-article ${hasSidebar ? "post-article-with-sidebar" : ""}`}>
<header className="post-header">
<h1 className="post-title">{post.title}</h1>
<div className="post-meta-header">
@@ -335,6 +347,7 @@ export default function Post() {
)}
</footer>
</article>
</div>
</div>
);
}

View File

@@ -37,6 +37,7 @@ const POST_FIELDS = [
{ name: "featuredOrder", required: false, example: "1" },
{ name: "authorName", required: false, example: '"Jane Doe"' },
{ name: "authorImage", required: false, example: '"/images/authors/jane.png"' },
{ name: "layout", required: false, example: '"sidebar"' },
];
// Frontmatter field definitions for pages