knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[core][xs]: fix Navbar title not showing

Browse Source
This commit is contained in:
Ola Rubaj
2023-10-09 19:32:42 +02:00
parent c5e17810af
commit c63551a54e
4 changed files with 172 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cuddly-pears-burn.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@portaljs/core': patch
---
Fix Navbar version not showing.

239
packages/core/src/ui/Layout/Layout.tsx
View File

@@ -16,131 +16,132 @@ import { NavConfig, ThemeConfig } from "../Nav";
import { AuthorConfig } from "../types"; import { AuthorConfig } from "../types";
interface Props extends React.PropsWithChildren { interface Props extends React.PropsWithChildren {
showComments: boolean; showComments: boolean;
showEditLink: boolean; showEditLink: boolean;
showSidebar: boolean; showSidebar: boolean;
showToc: boolean; showToc: boolean;
nav: NavConfig; nav: NavConfig;
author: AuthorConfig; author: AuthorConfig;
theme: ThemeConfig; theme: ThemeConfig;
urlPath: string; urlPath: string;
commentsConfig: CommentsConfig; commentsConfig: CommentsConfig;
siteMap: Array<NavItem | NavGroup>; siteMap: Array<NavItem | NavGroup>;
editUrl?: string; editUrl?: string;
} }
export const Layout: React.FC<Props> = ({ export const Layout: React.FC<Props> = ({
children, children,
nav, nav,
author, author,
theme, theme,
showEditLink, showEditLink,
showToc, showToc,
showSidebar, showSidebar,
urlPath, urlPath,
showComments, showComments,
commentsConfig, commentsConfig,
editUrl, editUrl,
siteMap, siteMap,
}) => { }) => {
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
const [tableOfContents, setTableOfContents] = useState<TocSection[]>([]); const [tableOfContents, setTableOfContents] = useState<TocSection[]>([]);
const currentSection = useTableOfContents(tableOfContents); const currentSection = useTableOfContents(tableOfContents);
const router: NextRouter = useRouter(); const router: NextRouter = useRouter();
useEffect(() => { useEffect(() => {
if (!showToc) return; if (!showToc) return;
const headingNodes: NodeListOf<HTMLHeadingElement> = const headingNodes: NodeListOf<HTMLHeadingElement> =
document.querySelectorAll("h1,h2,h3"); document.querySelectorAll("h1,h2,h3");
const toc = collectHeadings(headingNodes); const toc = collectHeadings(headingNodes);
setTableOfContents(toc ?? []); setTableOfContents(toc ?? []);
}, [router.asPath, showToc]); // update table of contents on route change with next/link }, [router.asPath, showToc]); // update table of contents on route change with next/link
useEffect(() => { useEffect(() => {
function onScroll() { function onScroll() {
setIsScrolled(window.scrollY > 0); setIsScrolled(window.scrollY > 0);
} }
onScroll(); onScroll();
window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("scroll", onScroll, { passive: true });
return () => { return () => {
window.removeEventListener("scroll", onScroll); window.removeEventListener("scroll", onScroll);
}; };
}, []); }, []);
return ( return (
<> <>
<Head> <Head>
<link <link
rel="icon" rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💐</text></svg>" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💐</text></svg>"
/> />
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" /> <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head> </Head>
<div className="min-h-screen bg-background dark:bg-background-dark"> <div className="min-h-screen bg-background dark:bg-background-dark">
{/* NAVBAR */} {/* NAVBAR */}
<div <div
className={clsx( className={clsx(
"sticky top-0 z-50 w-full", "sticky top-0 z-50 w-full",
isScrolled isScrolled
? "dark:bg-background-dark/95 bg-background/95 backdrop-blur [@supports(backdrop-filter:blur(0))]:dark:bg-background-dark/75" ? "dark:bg-background-dark/95 bg-background/95 backdrop-blur [@supports(backdrop-filter:blur(0))]:dark:bg-background-dark/75"
: "dark:bg-background-dark bg-background" : "dark:bg-background-dark bg-background"
)} )}
> >
<div className="max-w-8xl mx-auto p-4 md:px-8"> <div className="max-w-8xl mx-auto p-4 md:px-8">
<Nav <Nav
title={nav.title} title={nav.title}
logo={nav.logo} logo={nav.logo}
links={nav.links} links={nav.links}
search={nav.search} search={nav.search}
social={nav.social} social={nav.social}
defaultTheme={theme.defaultTheme} defaultTheme={theme.defaultTheme}
themeToggleIcon={theme.themeToggleIcon} themeToggleIcon={theme.themeToggleIcon}
> version={nav.version}
{showSidebar && <SiteToc currentPath={urlPath} nav={siteMap} />} >
</Nav> {showSidebar && <SiteToc currentPath={urlPath} nav={siteMap} />}
</div> </Nav>
</div> </div>
{/* wrapper for sidebar, main content and ToC */} </div>
<div {/* wrapper for sidebar, main content and ToC */}
className={clsx( <div
"max-w-8xl mx-auto px-4 md:px-8", className={clsx(
showSidebar && "lg:ml-[18rem]" "max-w-8xl mx-auto px-4 md:px-8",
)} showSidebar && "lg:ml-[18rem]"
> )}
{/* SIDEBAR */} >
{showSidebar && ( {/* SIDEBAR */}
<div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto"> {showSidebar && (
<SiteToc currentPath={urlPath} nav={siteMap} /> <div className="hidden lg:block fixed z-20 w-[18rem] top-[4.6rem] right-auto bottom-0 left-[max(0px,calc(50%-44rem))] pt-8 pl-8 overflow-y-auto">
<SiteToc currentPath={urlPath} nav={siteMap} />
</div>
)}
{/* MAIN CONTENT & FOOTER */}
<main className="mx-auto pt-8">
{children}
{/* EDIT THIS PAGE LINK */}
{showEditLink && editUrl && <EditThisPage url={editUrl} />}
{/* PAGE COMMENTS */}
{showComments && (
<div
className="prose mx-auto pt-6 pb-6 text-center text-gray-700 dark:text-gray-300"
id="comment"
>
{<Comments commentsConfig={commentsConfig} slug={urlPath} />}
</div>
)}
</main>
<Footer links={nav.links} author={author} />
{/** TABLE OF CONTENTS */}
{showToc && tableOfContents.length > 0 && (
<div className="hidden xl:block fixed z-20 w-[18rem] top-[4.6rem] bottom-0 right-[max(0px,calc(50%-44rem))] left-auto pt-8 pr-8 overflow-y-auto">
<TableOfContents
tableOfContents={tableOfContents}
currentSection={currentSection}
/>
</div>
)}
</div>
</div> </div>
)} </>
{/* MAIN CONTENT & FOOTER */} );
<main className="mx-auto pt-8">
{children}
{/* EDIT THIS PAGE LINK */}
{showEditLink && editUrl && <EditThisPage url={editUrl} />}
{/* PAGE COMMENTS */}
{showComments && (
<div
className="prose mx-auto pt-6 pb-6 text-center text-gray-700 dark:text-gray-300"
id="comment"
>
{<Comments commentsConfig={commentsConfig} slug={urlPath} />}
</div>
)}
</main>
<Footer links={nav.links} author={author} />
{/** TABLE OF CONTENTS */}
{showToc && tableOfContents.length > 0 && (
<div className="hidden xl:block fixed z-20 w-[18rem] top-[4.6rem] bottom-0 right-[max(0px,calc(50%-44rem))] left-auto pt-8 pr-8 overflow-y-auto">
<TableOfContents
tableOfContents={tableOfContents}
currentSection={currentSection}
/>
</div>
)}
</div>
</div>
</>
);
}; };

27
packages/core/src/ui/Nav/Nav.stories.tsx Normal file
View File

@@ -0,0 +1,27 @@
import type { Meta, StoryObj } from '@storybook/react';
import { NavTitle } from './NavTitle';
const meta: Meta<typeof NavTitle> = {
component: NavTitle,
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof NavTitle>;
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',
},
};

40
packages/core/src/ui/Nav/NavTitle.tsx
View File

@@ -1,27 +1,27 @@
import Link from "next/link.js"; import Link from "next/link.js";
interface Props { interface Props {
title: string; title: string;
logo?: string; logo?: string;
version?: string; version?: string;
} }
export const NavTitle: React.FC<Props> = ({ title, logo, version }) => { export const NavTitle: React.FC<Props> = ({ title, logo, version }) => {
return ( return (
<Link <Link
href="/" href="/"
aria-label="Home page" aria-label="Home page"
className="flex items-center font-extrabold text-xl sm:text-2xl text-slate-900 dark:text-white" className="flex items-center font-extrabold text-xl sm:text-2xl text-slate-900 dark:text-white"
> >
{logo && ( {logo && (
<img src={logo} alt={title} className="nav-logo mr-1 fill-white" /> <img src={logo} alt={title} className="nav-logo mr-1 fill-white" />
)} )}
{title && <span>{title}</span>} {title && <span>{title}</span>}
{version && ( {version && (
<div className="mx-2 rounded-full border border-slate-500 py-1 px-3 text-xs text-slate-500"> <span className="inline-flex items-center rounded-full bg-gray-50 ml-2 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
{version} {version}
</div> </span>
)} )}
</Link> </Link>
); );
}; };