📐 alignment and naming

jupyter-book · Aug 23, 2024 · 3c6bd00 · 3c6bd00
1 parent 2da3a53
commit 3c6bd00
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 12 deletions.
diff --git a/.changeset/forty-carrots-cry.md b/.changeset/forty-carrots-cry.md
@@ -0,0 +1,7 @@
+---
+'@myst-theme/frontmatter': patch
+'@myst-theme/site': patch
+'@myst-theme/book': patch
+---
+
+Some alignment fixes, leaving more control over content top alignment to the theme
diff --git a/.changeset/strong-cars-beam.md b/.changeset/strong-cars-beam.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/common': patch
+---
+
+Modified `getProjectHeadings` to work with plain `projectSlugs` to support custom theme routes that use `baseurl` but have no separate project.
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -10,9 +10,13 @@
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
+    "clean": "rimraf dist",
     "compile": "tsc --noEmit",
     "lint": "eslint src/**/*.ts*",
-    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\""
+    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
+    "dev": "npm-run-all --parallel \"build:* -- --watch\"",
+    "build:esm": "tsc",
+    "build": "npm-run-all -l clean -p build:esm"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",

diff --git a/packages/site/src/components/Navigation/Navigation.tsx b/packages/site/src/components/Navigation/Navigation.tsx
@@ -8,17 +8,19 @@ import type { SiteManifest } from 'myst-config';
  * MobileNavigation will load nav links and headers from the site manifest and display
  * them in a mobile-friendly format.
  */
-export const MobileNavigation = ({
+export const PrimaryNavigation = ({
   children,
   projectSlug,
   sidebarRef,
   hide_toc,
+  mobileOnly,
   footer,
 }: {
   children?: React.ReactNode;
   projectSlug?: string;
   sidebarRef?: React.RefObject<HTMLDivElement>;
   hide_toc?: boolean;
+  mobileOnly?: boolean;
   footer?: React.ReactNode;
 }) => {
   const config = useSiteManifest();
@@ -31,10 +33,11 @@ export const MobileNavigation = ({
   const { nav } = config;
 
   return (
-    <ConfigurableMobileNavigation
+    <ConfigurablePrimaryNavigation
       children={children}
       sidebarRef={sidebarRef}
       hide_toc={hide_toc}
+      mobileOnly={mobileOnly}
       nav={nav}
       headings={headings}
       footer={footer}
@@ -43,26 +46,28 @@ export const MobileNavigation = ({
 };
 
 /**
-@deprecated use MobileNavigation instead
+@deprecated use PrimaryNavigation instead
  */
-export const Navigation = MobileNavigation;
+export const Navigation = PrimaryNavigation;
 
 /**
  * ConfigurableMobileNavigation will display a mobile-friendly navigation sidebar based on the
  * nav, headings, and footer provided by the caller. Use this in situations where the MobileNavigation
  * component may pick up the wrong SiteManifest.
  */
-export const ConfigurableMobileNavigation = ({
+export const ConfigurablePrimaryNavigation = ({
   children,
   sidebarRef,
   hide_toc,
+  mobileOnly,
   nav,
   headings,
   footer,
 }: {
   children?: React.ReactNode;
   sidebarRef?: React.RefObject<HTMLDivElement>;
   hide_toc?: boolean;
+  mobileOnly?: boolean;
   nav?: SiteManifest['nav'];
   headings?: Heading[];
   footer?: React.ReactNode;
@@ -88,7 +93,13 @@ export const ConfigurableMobileNavigation = ({
           onClick={() => setOpen(false)}
         ></div>
       )}
-      <PrimarySidebar sidebarRef={sidebarRef} nav={nav} headings={headings} footer={footer} />
+      <PrimarySidebar
+        sidebarRef={sidebarRef}
+        nav={nav}
+        headings={headings}
+        footer={footer}
+        mobileOnly={mobileOnly}
+      />
       {children}
     </>
   );

diff --git a/packages/site/src/components/Navigation/PrimarySidebar.tsx b/packages/site/src/components/Navigation/PrimarySidebar.tsx
@@ -172,15 +172,16 @@ export const PrimarySidebar = ({
         {nav && (
           <nav
             aria-label="Navigation"
-            className="overflow-y-auto transition-opacity pb-3 ml-3 xl:ml-0 mr-3 max-w-[350px] lg:hidden border-b-2"
+            className="overflow-y-auto transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px] lg:hidden"
           >
             <SidebarNav nav={nav} />
           </nav>
         )}
+        {nav && headings && <div className="border-b-2 lg:hidden" />}
         {headings && (
           <nav
             aria-label="Table of Contents"
-            className="flex-grow overflow-y-auto transition-opacity pb-3 ml-3 xl:ml-0 mr-3 max-w-[350px]"
+            className="flex-grow overflow-y-auto transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px]"
           >
             <Toc headings={headings} />
           </nav>

diff --git a/packages/site/src/components/Navigation/index.tsx b/packages/site/src/components/Navigation/index.tsx
@@ -1,6 +1,6 @@
 export { ThemeButton } from './ThemeButton.js';
 export { TopNav, NavItems, NavItem, DEFAULT_NAV_HEIGHT } from './TopNav.js';
-export { Navigation, MobileNavigation, ConfigurableMobileNavigation } from './Navigation.js';
+export { Navigation, PrimaryNavigation, ConfigurablePrimaryNavigation } from './Navigation.js';
 export { PrimarySidebar, useSidebarHeight } from './PrimarySidebar.js';
 export { InlineTableOfContents } from './InlineTableOfContents.js';
 export { LoadingBar } from './Loading.js';

diff --git a/themes/book/app/routes/$.tsx b/themes/book/app/routes/$.tsx
@@ -9,7 +9,7 @@ import {
   KatexCSS,
   useOutlineHeight,
   useSidebarHeight,
-  MobileNavigation,
+  PrimaryNavigation,
   TopNav,
   getMetaTagsForArticle,
   ArticlePageCatchBoundary,
@@ -87,7 +87,7 @@ export function ArticlePageAndNavigation({
   return (
     <UiStateProvider>
       <TopNav hideToc={hide_toc} />
-      <MobileNavigation
+      <PrimaryNavigation
         sidebarRef={toc}
         hide_toc={hide_toc}
         footer={<MadeWithMyst />}