@myst-theme/site 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -25,11 +25,11 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^1.2.2",
-    "@myst-theme/diagrams": "^1.2.2",
-    "@myst-theme/frontmatter": "^1.2.2",
-    "@myst-theme/providers": "^1.2.2",
-    "@myst-theme/search": "^1.2.2",
+    "@myst-theme/common": "^1.3.0",
+    "@myst-theme/diagrams": "^1.3.0",
+    "@myst-theme/frontmatter": "^1.3.0",
+    "@myst-theme/providers": "^1.3.0",
+    "@myst-theme/search": "^1.3.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
@@ -37,9 +37,9 @@
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.8.1",
     "myst-config": "^1.7.9",
-    "myst-demo": "^1.2.2",
+    "myst-demo": "^1.3.0",
     "myst-spec-ext": "^1.8.1",
-    "myst-to-react": "^1.2.2",
+    "myst-to-react": "^1.3.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Keywords.tsx

@@ -12,7 +12,7 @@ export function Keywords({
 }) {
   if (hideKeywords || !keywords || keywords.length === 0) return null;
   return (
-    <div className={classNames('myst-keywords mb-10 group', className)}>
+    <div id="myst-keywords" className={classNames('myst-keywords mb-10 group', className)}>
       <span className="myst-keywords-label mr-2 font-semibold">Keywords:</span>
       <span className="myst-keywords-list">
         {keywords.map((k, i) => (
@@ -26,7 +26,7 @@ export function Keywords({
           </span>
         ))}
       </span>
-      <HashLink id="keywords" title="Link to Keywords" hover className="ml-2" />
+      <HashLink id="myst-keywords" title="Link to Keywords" hover className="ml-2" />
     </div>
   );
 }

package/src/components/Navigation/ThemeButton.tsx

@@ -1,6 +1,5 @@
 import { useThemeSwitcher } from '@myst-theme/providers';
-import { MoonIcon } from '@heroicons/react/24/solid';
-import { SunIcon } from '@heroicons/react/24/outline';
+import { MoonIcon, SunIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 
 export function ThemeButton({ className = 'w-10 h-10 mx-3' }: { className?: string }) {
@@ -8,15 +7,15 @@ export function ThemeButton({ className = 'w-10 h-10 mx-3' }: { className?: stri
   return (
     <button
       className={classNames(
-        'myst-theme-button theme rounded-full aspect-square border border-stone-700 dark:border-white hover:bg-neutral-100 border-solid overflow-hidden text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800',
+        'myst-theme-button theme shrink-0 rounded-full border border-stone-700 dark:border-white hover:bg-neutral-100 border-solid overflow-hidden text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800',
         className,
       )}
       title={`Toggle theme between light and dark mode`}
       aria-label={`Toggle theme between light and dark mode`}
       onClick={nextTheme}
     >
-      <MoonIcon className="myst-theme-moon-icon h-full w-full p-0.5 hidden dark:block" />
-      <SunIcon className="myst-theme-sun-icon h-full w-full p-0.5 dark:hidden" />
+      <MoonIcon className="myst-theme-moon-icon h-full w-full p-[18%] hidden dark:block" />
+      <SunIcon className="myst-theme-sun-icon h-full w-full p-[18%] dark:hidden" />
     </button>
   );
 }

package/src/components/Navigation/TopNav.tsx

@@ -128,8 +128,12 @@ export function TopNav({
   const config = useSiteManifest();
   const { title, nav, actions } = config ?? {};
   const { logo, logo_dark, logo_text, logo_url, logo_alt } = config?.options ?? {};
+  // TODO: when the nav wraps to multiple lines the header grows past 60px, but
+  //   there are downstream consumers of DEFAULT_NAV_HEIGHT and this will
+  //   cause a mismatch if the navbar grows. Here we set it to `min-h` to let
+  //   it grow, but we'll need to revisit downstream height consumers eventually.
   return (
-    <div className="myst-top-nav bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-full top-0 z-30 h-[60px]">
+    <div className="myst-top-nav bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-full top-0 z-30 min-h-[60px]">
       <nav className="myst-top-nav-bar flex items-center justify-between flex-nowrap max-w-[1440px] mx-auto">
         <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center shrink-0">
           {
@@ -165,7 +169,7 @@ export function TopNav({
           {/* Search bar */}
           {!hideSearch && <Search />}
           {/* Light/Dark theme button */}
-          <ThemeButton className="w-10 h-10 ml-3" />
+          <ThemeButton className="w-8 h-8 ml-3" />
           {/* Custom part at end of navbar. It is `hidden` up until xl size since it will be in the sidebar drawer up to that point */}
           {navbarEnd && (
             <div className="article myst-navbar-end hidden xl:flex items-center ml-3 [&>*]:m-0">