diff --git a/.changeset/cuddly-pears-burn.md b/.changeset/cuddly-pears-burn.md new file mode 100644 index 000000000..acd126f2d --- /dev/null +++ b/.changeset/cuddly-pears-burn.md @@ -0,0 +1,5 @@ +--- +'@portaljs/core': patch +--- + +Fix Navbar version not showing. diff --git a/packages/core/src/ui/Layout/Layout.tsx b/packages/core/src/ui/Layout/Layout.tsx index 943f8b8a4..eb08f1f6f 100644 --- a/packages/core/src/ui/Layout/Layout.tsx +++ b/packages/core/src/ui/Layout/Layout.tsx @@ -16,131 +16,132 @@ import { NavConfig, ThemeConfig } from "../Nav"; import { AuthorConfig } from "../types"; interface Props extends React.PropsWithChildren { - showComments: boolean; - showEditLink: boolean; - showSidebar: boolean; - showToc: boolean; - nav: NavConfig; - author: AuthorConfig; - theme: ThemeConfig; - urlPath: string; - commentsConfig: CommentsConfig; - siteMap: Array; - editUrl?: string; + showComments: boolean; + showEditLink: boolean; + showSidebar: boolean; + showToc: boolean; + nav: NavConfig; + author: AuthorConfig; + theme: ThemeConfig; + urlPath: string; + commentsConfig: CommentsConfig; + siteMap: Array; + editUrl?: string; } export const Layout: React.FC = ({ - children, - nav, - author, - theme, - showEditLink, - showToc, - showSidebar, - urlPath, - showComments, - commentsConfig, - editUrl, - siteMap, + children, + nav, + author, + theme, + showEditLink, + showToc, + showSidebar, + urlPath, + showComments, + commentsConfig, + editUrl, + siteMap, }) => { - const [isScrolled, setIsScrolled] = useState(false); - const [tableOfContents, setTableOfContents] = useState([]); - const currentSection = useTableOfContents(tableOfContents); - const router: NextRouter = useRouter(); + const [isScrolled, setIsScrolled] = useState(false); + const [tableOfContents, setTableOfContents] = useState([]); + const currentSection = useTableOfContents(tableOfContents); + const router: NextRouter = useRouter(); - useEffect(() => { - if (!showToc) return; - const headingNodes: NodeListOf = - document.querySelectorAll("h1,h2,h3"); - const toc = collectHeadings(headingNodes); - setTableOfContents(toc ?? []); - }, [router.asPath, showToc]); // update table of contents on route change with next/link + useEffect(() => { + if (!showToc) return; + const headingNodes: NodeListOf = + document.querySelectorAll("h1,h2,h3"); + const toc = collectHeadings(headingNodes); + setTableOfContents(toc ?? []); + }, [router.asPath, showToc]); // update table of contents on route change with next/link - useEffect(() => { - function onScroll() { - setIsScrolled(window.scrollY > 0); - } - onScroll(); - window.addEventListener("scroll", onScroll, { passive: true }); - return () => { - window.removeEventListener("scroll", onScroll); - }; - }, []); + useEffect(() => { + function onScroll() { + setIsScrolled(window.scrollY > 0); + } + onScroll(); + window.addEventListener("scroll", onScroll, { passive: true }); + return () => { + window.removeEventListener("scroll", onScroll); + }; + }, []); - return ( - <> - - - - - -
- {/* NAVBAR */} -
-
- -
-
- {/* wrapper for sidebar, main content and ToC */} -
- {/* SIDEBAR */} - {showSidebar && ( -
- + return ( + <> + + + + + +
+ {/* NAVBAR */} +
+
+ +
+
+ {/* wrapper for sidebar, main content and ToC */} +
+ {/* SIDEBAR */} + {showSidebar && ( +
+ +
+ )} + {/* MAIN CONTENT & FOOTER */} +
+ {children} + {/* EDIT THIS PAGE LINK */} + {showEditLink && editUrl && } + {/* PAGE COMMENTS */} + {showComments && ( +
+ {} +
+ )} +
+
+ {/** TABLE OF CONTENTS */} + {showToc && tableOfContents.length > 0 && ( +
+ +
+ )} +
- )} - {/* MAIN CONTENT & FOOTER */} -
- {children} - {/* EDIT THIS PAGE LINK */} - {showEditLink && editUrl && } - {/* PAGE COMMENTS */} - {showComments && ( -
- {} -
- )} -
-
- {/** TABLE OF CONTENTS */} - {showToc && tableOfContents.length > 0 && ( -
- -
- )} -
-
- - ); + + ); }; diff --git a/packages/core/src/ui/Nav/Nav.stories.tsx b/packages/core/src/ui/Nav/Nav.stories.tsx new file mode 100644 index 000000000..b3a32f47f --- /dev/null +++ b/packages/core/src/ui/Nav/Nav.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { NavTitle } from './NavTitle'; + +const meta: Meta = { + component: NavTitle, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + title: 'Title', + logo: 'https://via.placeholder.com/50', + }, +}; + +export const WithVersion: Story = { + args: { + title: 'Title', + logo: 'https://via.placeholder.com/50', + version: 'Alpha', + }, +}; diff --git a/packages/core/src/ui/Nav/NavTitle.tsx b/packages/core/src/ui/Nav/NavTitle.tsx index 3c8cb5095..ee5dd39d9 100644 --- a/packages/core/src/ui/Nav/NavTitle.tsx +++ b/packages/core/src/ui/Nav/NavTitle.tsx @@ -1,27 +1,27 @@ import Link from "next/link.js"; interface Props { - title: string; - logo?: string; - version?: string; + title: string; + logo?: string; + version?: string; } export const NavTitle: React.FC = ({ title, logo, version }) => { - return ( - - {logo && ( - {title} - )} - {title && {title}} - {version && ( -
- {version} -
- )} - - ); + return ( + + {logo && ( + {title} + )} + {title && {title}} + {version && ( + + {version} + + )} + + ); };