@myst-theme/site 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -8,6 +8,10 @@
     "src"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jupyter-book/myst-theme.git"
+  },
   "sideEffects": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -21,11 +25,11 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^1.0.0",
-    "@myst-theme/diagrams": "^1.0.0",
-    "@myst-theme/frontmatter": "^1.0.0",
-    "@myst-theme/providers": "^1.0.0",
-    "@myst-theme/search": "^1.0.0",
+    "@myst-theme/common": "^1.1.0",
+    "@myst-theme/diagrams": "^1.1.0",
+    "@myst-theme/frontmatter": "^1.1.0",
+    "@myst-theme/providers": "^1.1.0",
+    "@myst-theme/search": "^1.1.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
@@ -33,9 +37,9 @@
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.8.1",
     "myst-config": "^1.7.9",
-    "myst-demo": "^1.0.0",
+    "myst-demo": "^1.1.0",
     "myst-spec-ext": "^1.8.1",
-    "myst-to-react": "^1.0.0",
+    "myst-to-react": "^1.1.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Navigation/HomeLink.tsx

@@ -25,8 +25,8 @@ export function HomeLink({
     >
       {logo && (
         <div
-          className={classNames('myst-home-link-logo p-1 mr-3', {
-            'dark:bg-white dark:rounded': !logoDark,
+          className={classNames('myst-home-link-logo mr-3 flex items-center', {
+            'dark:bg-white dark:rounded px-1': !logoDark,
           })}
         >
           <img

package/src/components/Navigation/Link.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLinkProvider, useNavLinkProvider } from '@myst-theme/providers';
+import { isExternalUrl, useLinkProvider, useNavLinkProvider } from '@myst-theme/providers';
 
 export function ExternalOrInternalLink({
   to,
@@ -19,7 +19,7 @@ export function ExternalOrInternalLink({
   const Link = useLinkProvider();
   const NavLink = useNavLinkProvider();
   const staticClass = typeof className === 'function' ? className({ isActive: false }) : className;
-  if (to.startsWith('http') || to.startsWith('mailto:')) {
+  if (isExternalUrl(to)) {
     return (
       <a
         href={to}

package/src/components/Navigation/TableOfContentsItems.tsx

@@ -172,7 +172,7 @@ const NestedToc = ({ heading }: { heading: NestedHeading }) => {
     <Collapsible.Root className="w-full" open={open} onOpenChange={setOpen}>
       <div
         className={classNames(
-          'myst-toc-item flex flex-row w-full gap-2 px-2 my-1 text-left rounded-lg outline-none',
+          'myst-toc-item flex flex-row w-full gap-2 pl-2 my-1 text-left rounded-lg outline-none',
           {
             'myst-toc-item-exact bg-blue-300/30': exact,
             'hover:bg-slate-300/30': !exact,
@@ -189,7 +189,7 @@ const NestedToc = ({ heading }: { heading: NestedHeading }) => {
         />
         <Collapsible.Trigger asChild>
           <button
-            className="self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2"
+            className="self-stretch flex items-center flex-none px-1 rounded-l-md group hover:bg-slate-300/30 focus-visible:outline outline-blue-200 outline-2"
             aria-label="Open Folder"
           >
             <ChevronRightIcon

package/src/components/Navigation/ThemeButton.tsx

@@ -3,7 +3,7 @@ import { MoonIcon } from '@heroicons/react/24/solid';
 import { SunIcon } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 
-export function ThemeButton({ className = 'w-8 h-8 mx-3' }: { className?: string }) {
+export function ThemeButton({ className = 'w-10 h-10 mx-3' }: { className?: string }) {
   const { nextTheme } = useThemeSwitcher();
   return (
     <button

package/src/components/Navigation/TopNav.tsx

@@ -64,35 +64,38 @@ export function NavItem({ item }: { item: SiteNavItem }) {
         leaveTo="transform opacity-0 scale-95"
       >
         <Menu.Items className="myst-top-nav-dropdown-items absolute w-48 py-1 mt-2 origin-top-left bg-white rounded-sm shadow-lg left-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
-          {item.children?.map((action) => (
-            <Menu.Item key={action.url}>
-              {/* This is really ugly, BUT, the action needs to be defined HERE or the click away doesn't work for some reason */}
-              {action.url?.startsWith('http') ? (
-                <a
-                  href={action.url || ''}
-                  className="myst-top-nav-dropdown-item block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {action.title}
-                </a>
-              ) : (
-                <NavLink
-                  to={action.url || ''}
-                  className={({ isActive }) =>
-                    classNames(
-                      'myst-top-nav-dropdown-item block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black',
-                      {
-                        'text-black font-bold': isActive,
-                      },
-                    )
-                  }
-                >
-                  {action.title}
-                </NavLink>
-              )}
-            </Menu.Item>
-          ))}
+          {item.children?.map((action) => {
+            const url = withBaseurl(action.url, baseurl) || '';
+            return (
+              <Menu.Item key={action.url}>
+                {/* This is really ugly, BUT, the action needs to be defined HERE or the click away doesn't work for some reason */}
+                {action.url?.startsWith('http') ? (
+                  <a
+                    href={url}
+                    className="myst-top-nav-dropdown-item block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {action.title}
+                  </a>
+                ) : (
+                  <NavLink
+                    to={url}
+                    className={({ isActive }) =>
+                      classNames(
+                        'myst-top-nav-dropdown-item block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black',
+                        {
+                          'text-black font-bold': isActive,
+                        },
+                      )
+                    }
+                  >
+                    {action.title}
+                  </NavLink>
+                )}
+              </Menu.Item>
+            );
+          })}
         </Menu.Items>
       </Transition>
     </Menu>
@@ -127,12 +130,12 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
               })}
             >
               <button
-                className="myst-top-nav-menu-button flex items-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
+                className="myst-top-nav-menu-button flex items-center justify-center border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100 w-10 h-10"
                 onClick={() => {
                   setOpen(!open);
                 }}
               >
-                <MenuIcon width="2rem" height="2rem" className="m-1" />
+                <MenuIcon width="1.5rem" height="1.5rem" />
                 <span className="sr-only">Open Menu</span>
               </button>
             </div>