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

datopian · Oct 9, 2023 · c63551a · c63551a
1 parent c5e1781
commit c63551a
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 139 deletions.
diff --git a/.changeset/cuddly-pears-burn.md 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
@@ -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<NavItem | NavGroup>;
-  editUrl?: string;
+    showComments: boolean;
+    showEditLink: boolean;
+    showSidebar: boolean;
+    showToc: boolean;
+    nav: NavConfig;
+    author: AuthorConfig;
+    theme: ThemeConfig;
+    urlPath: string;
+    commentsConfig: CommentsConfig;
+    siteMap: Array<NavItem | NavGroup>;
+    editUrl?: string;
 }
 
 export const Layout: React.FC<Props> = ({
-  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<TocSection[]>([]);
-  const currentSection = useTableOfContents(tableOfContents);
-  const router: NextRouter = useRouter();
+    const [isScrolled, setIsScrolled] = useState(false);
+    const [tableOfContents, setTableOfContents] = useState<TocSection[]>([]);
+    const currentSection = useTableOfContents(tableOfContents);
+    const router: NextRouter = useRouter();
 
-  useEffect(() => {
-    if (!showToc) return;
-    const headingNodes: NodeListOf<HTMLHeadingElement> =
-      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<HTMLHeadingElement> =
+            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 (
-    <>
-      <Head>
-        <link
-          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>"
-        />
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-      </Head>
-      <div className="min-h-screen bg-background dark:bg-background-dark">
-        {/* NAVBAR */}
-        <div
-          className={clsx(
-            "sticky top-0 z-50 w-full",
-            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 bg-background"
-          )}
-        >
-          <div className="max-w-8xl mx-auto p-4 md:px-8">
-            <Nav
-              title={nav.title}
-              logo={nav.logo}
-              links={nav.links}
-              search={nav.search}
-              social={nav.social}
-              defaultTheme={theme.defaultTheme}
-              themeToggleIcon={theme.themeToggleIcon}
-            >
-              {showSidebar && <SiteToc currentPath={urlPath} nav={siteMap} />}
-            </Nav>
-          </div>
-        </div>
-        {/* wrapper for sidebar, main content and ToC */}
-        <div
-          className={clsx(
-            "max-w-8xl mx-auto px-4 md:px-8",
-            showSidebar && "lg:ml-[18rem]"
-          )}
-        >
-          {/* SIDEBAR */}
-          {showSidebar && (
-            <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} />
+    return (
+        <>
+            <Head>
+                <link
+                    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>"
+                />
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+            </Head>
+            <div className="min-h-screen bg-background dark:bg-background-dark">
+                {/* NAVBAR */}
+                <div
+                    className={clsx(
+                        "sticky top-0 z-50 w-full",
+                        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 bg-background"
+                    )}
+                >
+                    <div className="max-w-8xl mx-auto p-4 md:px-8">
+                        <Nav
+                            title={nav.title}
+                            logo={nav.logo}
+                            links={nav.links}
+                            search={nav.search}
+                            social={nav.social}
+                            defaultTheme={theme.defaultTheme}
+                            themeToggleIcon={theme.themeToggleIcon}
+                            version={nav.version}
+                        >
+                            {showSidebar && <SiteToc currentPath={urlPath} nav={siteMap} />}
+                        </Nav>
+                    </div>
+                </div>
+                {/* wrapper for sidebar, main content and ToC */}
+                <div
+                    className={clsx(
+                        "max-w-8xl mx-auto px-4 md:px-8",
+                        showSidebar && "lg:ml-[18rem]"
+                    )}
+                >
+                    {/* SIDEBAR */}
+                    {showSidebar && (
+                        <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>
-          )}
-          {/* 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>
-    </>
-  );
+        </>
+    );
 };
diff --git a/packages/core/src/ui/Nav/Nav.stories.tsx 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<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',
+    },
+};
diff --git 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<Props> = ({ title, logo, version }) => {
-  return (
-    <Link
-      href="/"
-      aria-label="Home page"
-      className="flex items-center font-extrabold text-xl sm:text-2xl text-slate-900 dark:text-white"
-    >
-      {logo && (
-        <img src={logo} alt={title} className="nav-logo mr-1 fill-white" />
-      )}
-      {title && <span>{title}</span>}
-      {version && (
-        <div className="mx-2 rounded-full border border-slate-500 py-1 px-3 text-xs text-slate-500">
-          {version}
-        </div>
-      )}
-    </Link>
-  );
+    return (
+        <Link
+            href="/"
+            aria-label="Home page"
+            className="flex items-center font-extrabold text-xl sm:text-2xl text-slate-900 dark:text-white"
+        >
+            {logo && (
+                <img src={logo} alt={title} className="nav-logo mr-1 fill-white" />
+            )}
+            {title && <span>{title}</span>}
+            {version && (
+                <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}
+                </span>
+            )}
+        </Link>
+    );
 };