mirror of
https://github.com/waynesutton/markdown-site.git
synced 2026-01-12 04:09:14 +00:00
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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user