@myst-theme/site 0.2.9 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,21 +16,21 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.14",
-    "@myst-theme/diagrams": "^0.2.9",
-    "@myst-theme/frontmatter": "^0.2.9",
-    "@myst-theme/jupyter": "^0.2.9",
-    "@myst-theme/providers": "^0.2.9",
+    "@myst-theme/diagrams": "^0.3.0",
+    "@myst-theme/frontmatter": "^0.3.0",
+    "@myst-theme/jupyter": "^0.3.0",
+    "@myst-theme/providers": "^0.3.0",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^0.0.16",
-    "myst-config": "^0.0.14",
-    "myst-demo": "^0.2.9",
-    "myst-to-react": "^0.2.9",
+    "myst-common": "^1.0.0",
+    "myst-config": "^1.0.0",
+    "myst-demo": "^0.3.0",
+    "myst-to-react": "^0.3.0",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.7",
-    "unist-util-select": "^4.0.1",
-    "thebe-react": "^0.0.7"
+    "thebe-react": "^0.0.7",
+    "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
     "@remix-run/node": "^1.12.0",

package/src/components/FooterLinksBlock.tsx

@@ -4,7 +4,13 @@ import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
 import type { FooterLinks, NavigationLink } from '../types';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
 
-const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boolean }) => {
+const FooterLink = ({
+  title,
+  short_title,
+  url,
+  group,
+  right,
+}: NavigationLink & { right?: boolean }) => {
   const baseurl = useBaseurl();
   const Link = useLinkProvider();
   return (
@@ -15,14 +21,14 @@ const FooterLink = ({ title, url, group, right }: NavigationLink & { right?: boo
     >
       <div className="flex align-middle h-full">
         {right && (
-          <ArrowLeftIcon className="w-6 h-6 self-center transition-transform group-hover:-translate-x-1" />
+          <ArrowLeftIcon className="w-6 h-6 self-center transition-transform group-hover:-translate-x-1 shrink-0" />
         )}
         <div className={classNames('flex-grow', { 'text-right': right })}>
           <div className="text-xs text-gray-500 dark:text-gray-400">{group || ' '}</div>
-          {title}
+          {short_title || title}
         </div>
         {!right && (
-          <ArrowRightIcon className="w-6 h-6 self-center transition-transform group-hover:translate-x-1" />
+          <ArrowRightIcon className="w-6 h-6 self-center transition-transform group-hover:translate-x-1 shrink-0" />
         )}
       </div>
     </Link>

package/src/components/Navigation/TableOfContents.tsx

@@ -185,7 +185,7 @@ export const TableOfContents = ({
       >
         <nav
           aria-label="Table of Contents"
-          className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3"
+          className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3 max-w-[350px]"
         >
           <Headings folder={projectSlug} headings={headings} sections={config?.projects} />
         </nav>

package/src/loaders/utils.ts

@@ -32,6 +32,7 @@ export function getProjectHeadings(
   const headings: Heading[] = [
     {
       title: project.title,
+      short_title: project.short_title,
       slug: project.index,
       path: project.slug ? `/${project.slug}` : '/',
       level: 'index',
@@ -42,10 +43,10 @@ export function getProjectHeadings(
     }),
   ];
   if (opts.addGroups) {
-    let lastTitle = project.title;
+    let lastTitle = project.short_title || project.title;
     return headings.map((heading) => {
       if (!heading.slug || heading.level === 'index') {
-        lastTitle = heading.title;
+        lastTitle = heading.short_title || heading.title;
       }
       return { ...heading, group: lastTitle };
     });
@@ -60,6 +61,7 @@ function getHeadingLink(currentSlug: string, headings?: Heading[]): NavigationLi
   if (!link?.path) return undefined;
   return {
     title: link.title,
+    short_title: link.short_title,
     url: link.path,
     group: link.group,
   };
@@ -70,7 +72,7 @@ export function getFooterLinks(
   projectSlug?: string,
   slug?: string,
 ): FooterLinks {
-  if (!projectSlug || !slug || !config) return {};
+  if (!slug || !config) return {};
   const pages = getProjectHeadings(config, projectSlug, {
     addGroups: true,
   });

package/src/types.ts

@@ -25,6 +25,7 @@ export type NavigationLink = {
   group?: string;
   title: string;
   url: string;
+  short_title?: string;
 };
 
 export type FooterLinks = {