@myst-theme/site 0.13.3 → 0.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -21,25 +21,22 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.13.3",
-    "@myst-theme/diagrams": "^0.13.3",
-    "@myst-theme/frontmatter": "^0.13.3",
-    "@myst-theme/jupyter": "^0.13.3",
-    "@myst-theme/providers": "^0.13.3",
-    "@myst-theme/search": "^0.13.3",
+    "@myst-theme/common": "^0.13.5",
+    "@myst-theme/diagrams": "^0.13.5",
+    "@myst-theme/frontmatter": "^0.13.5",
+    "@myst-theme/jupyter": "^0.13.5",
+    "@myst-theme/providers": "^0.13.5",
+    "@myst-theme/search": "^0.13.5",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-roving-focus": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.7.3",
     "myst-config": "^1.7.3",
-    "myst-demo": "^0.13.3",
+    "myst-demo": "^0.13.5",
     "myst-spec-ext": "^1.7.3",
-    "myst-to-react": "^0.13.3",
+    "myst-to-react": "^0.13.5",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/components/Bibliography.tsx

@@ -3,14 +3,14 @@ import classNames from 'classnames';
 import { HashLink } from 'myst-to-react';
 import { useState } from 'react';
 
-const HIDE_OVER_N_REFERENCES = 5;
-
 export function Bibliography({
   containerClassName,
   innerClassName,
+  hideLongBibliography = 15,
 }: {
   containerClassName?: string;
   innerClassName?: string;
+  hideLongBibliography?: false | number;
 }) {
   const references = useReferences();
   const grid = useGridSystemProvider();
@@ -18,14 +18,14 @@ export function Bibliography({
   const filtered = order?.filter((l) => l);
   const [hidden, setHidden] = useState(true);
   if (!filtered || !data || filtered.length === 0) return null;
-  const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
+  const refs = hidden && hideLongBibliography ? filtered.slice(0, hideLongBibliography) : filtered;
   return (
     <section
       id="references"
       className={classNames(grid, 'subgrid-gap col-screen', containerClassName)}
     >
       <div className={innerClassName}>
-        {filtered.length > HIDE_OVER_N_REFERENCES && (
+        {!!hideLongBibliography && filtered.length > hideLongBibliography && (
           <button
             onClick={() => setHidden(!hidden)}
             className="float-right p-1 px-2 text-xs border rounded hover:border-blue-500 dark:hover:border-blue-400"
@@ -56,7 +56,7 @@ export function Bibliography({
               />
             );
           })}
-          {filtered.length > HIDE_OVER_N_REFERENCES && (
+          {!!hideLongBibliography && filtered.length > hideLongBibliography && (
             <li className="text-center list-none">
               <button
                 onClick={() => setHidden(!hidden)}

package/src/components/ContentBlocks.tsx

@@ -1,4 +1,4 @@
-import { MyST } from 'myst-to-react';
+import { Details, MyST } from 'myst-to-react';
 import { SourceFileKind } from 'myst-spec-ext';
 import type { GenericParent } from 'myst-common';
 import classNames from 'classnames';
@@ -22,17 +22,18 @@ export function Block({
   className?: string;
 }) {
   const grid = useGridSystemProvider();
-  const subGrid = `${grid} subgrid-gap col-screen`;
+  const subGrid = node.visibility === 'hide' ? '' : `${grid} subgrid-gap col-screen`;
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =
     (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
-  return (
+  const block = (
     <div
       key={`block-${id}`}
       id={id}
       className={classNames('relative group/block', className, dataClassName, {
         [subGrid]: !noSubGrid,
+        hidden: node.visibility === 'remove',
       })}
     >
       {pageKind === SourceFileKind.Notebook && isACodeCell(node) && (
@@ -53,6 +54,10 @@ export function Block({
       <MyST ast={node.children} />
     </div>
   );
+  if (node.visibility === 'hide') {
+    return <Details title="Notebook Cell">{block}</Details>;
+  }
+  return block;
 }
 
 export function ContentBlocks({

package/src/components/DocumentOutline.tsx

@@ -12,6 +12,7 @@ import type { RefObject } from 'react';
 import { DocumentChartBarIcon } from '@heroicons/react/24/outline';
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { slugToUrl } from 'myst-common';
 
 const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', ');
 
@@ -351,6 +352,7 @@ function useMarginOccluder() {
 
 export const DocumentOutline = ({
   outlineRef,
+  title = 'Contents',
   top = 0,
   className,
   selector = SELECTOR,
@@ -359,6 +361,7 @@ export const DocumentOutline = ({
   isMargin,
 }: {
   outlineRef?: React.RefObject<HTMLElement>;
+  title?: React.ReactNode;
   top?: number;
   height?: number;
   className?: string;
@@ -405,7 +408,7 @@ export const DocumentOutline = ({
         }}
       >
         <div className="flex flex-row gap-2 mb-4 text-sm leading-6 uppercase rounded-lg text-slate-900 dark:text-slate-100">
-          In this article
+          {title}
           <Collapsible.Trigger asChild>
             <button className="self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2">
               <ChevronRightIcon
@@ -443,7 +446,7 @@ export function SupportingDocuments() {
             return (
               <li key={p.slug}>
                 <NavLink
-                  to={withBaseurl(`/${p.slug}#main`, baseurl)}
+                  to={withBaseurl(`/${slugToUrl(p.slug)}#main`, baseurl)}
                   prefetch="intent"
                   className={({ isActive }) =>
                     classNames('no-underline flex self-center hover:text-blue-700', {

package/src/components/Navigation/PrimarySidebar.tsx

@@ -174,7 +174,7 @@ export const PrimarySidebar = ({
           },
         )}
       >
-        <div className="flex-grow py-6 overflow-y-auto">
+        <div className="flex-grow py-6 overflow-y-auto primary-scrollbar">
           {nav && (
             <nav
               aria-label="Navigation"

package/src/components/Navigation/Search.tsx

@@ -1,4 +1,12 @@
-import { useEffect, useState, useMemo, useCallback, useRef, forwardRef } from 'react';
+import {
+  createElement,
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+  useRef,
+  forwardRef,
+} from 'react';
 import type { KeyboardEventHandler, Dispatch, SetStateAction, FormEvent, MouseEvent } from 'react';
 import { useFetcher } from '@remix-run/react';
 import {
@@ -42,10 +50,21 @@ function matchAll(text: string, pattern: RegExp) {
  * Highlight a text string with an array of match words
  *
  * @param text - text to highlight
- * @param result - search result to use for highlighting
- * @param limit - limit to the number of tokens after first match
+ * @param matches - regular expression patterns to match against
+ * @param limit - limit to the number of characters after first match
+ * @param classname - CSS classname to use
  */
-function MarkedText({ text, matches, limit }: { text: string; matches: string[]; limit?: number }) {
+function MarkedText({
+  text,
+  matches,
+  limit,
+  className,
+}: {
+  text: string;
+  matches: string[];
+  limit?: number;
+  className?: string;
+}) {
   // Split by delimeter, but _keep_ delimeter!
   const splits = matchAll(text, SPACE_OR_PUNCTUATION);
   const tokens: string[] = [];
@@ -79,23 +98,38 @@ function MarkedText({ text, matches, limit }: { text: string; matches: string[];
     lastIndex = tokens.length;
   } else {
     firstIndex = tokens.findIndex((token) => pattern.test(token));
-    lastIndex = firstIndex + limit;
+    let numChars = 0;
+    for (
+      lastIndex = firstIndex + 1;
+      lastIndex < tokens.length - 1 && numChars + tokens[lastIndex].length <= limit;
+      lastIndex++
+    ) {
+      numChars += tokens[lastIndex].length;
+    }
   }
 
   if (tokens.length === 0) {
-    return <>{...tokens}</>;
+    return <span className={className}>{...tokens}</span>;
   } else {
     const firstRenderer = renderToken(tokens[firstIndex]);
     const remainingTokens = tokens.slice(firstIndex + 1, lastIndex);
     const remainingRenderers = remainingTokens.map((token) => renderToken(token));
 
     return (
-      <>
-        {hasLimit && '... '}
+      <span
+        className={classNames(
+          className,
+          {
+            "before:content-['..._']": hasLimit,
+            "after:content-['_...']": hasLimit,
+          },
+          'truncate',
+          'w-full',
+        )}
+      >
         {firstRenderer}
         {...remainingRenderers}
-        {hasLimit && ' ...'}
-      </>
+      </span>
     );
   }
 }
@@ -178,8 +212,10 @@ function SearchShortcut() {
 function SearchResultItem({
   result,
   closeSearch,
+  charLimit,
 }: {
   result: RankedSearchResult;
+  charLimit?: number;
   closeSearch?: () => void;
 }) {
   const { hierarchy, type, url, queries } = result;
@@ -187,14 +223,13 @@ function SearchResultItem({
   const Link = useLinkProvider();
 
   // Render the icon
-  const iconRenderer =
-    type === 'lvl1' ? (
-      <DocumentIcon className="inline-block w-6 mx-2" />
-    ) : type === 'content' ? (
-      <Bars3BottomLeftIcon className="inline-block w-6 mx-2" />
-    ) : (
-      <HashtagIcon className="inline-block w-6 mx-2" />
-    );
+  const iconProps = useMemo(() => {
+    return { className: 'inline-block w-6 mx-2 shrink-0' };
+  }, []);
+  const iconRenderer = createElement(
+    type === 'lvl1' ? DocumentIcon : type === 'content' ? Bars3BottomLeftIcon : HashtagIcon,
+    iconProps,
+  );
 
   // Generic "this document matched"
   const title = result.type === 'content' ? result['content'] : hierarchy[type as HeadingLevel]!;
@@ -202,7 +237,12 @@ function SearchResultItem({
 
   // Render the title, i.e. content or heading
   const titleRenderer = (
-    <MarkedText text={title} matches={matches} limit={type === 'content' ? 16 : undefined} />
+    <MarkedText
+      text={title}
+      matches={matches}
+      limit={type === 'content' ? charLimit : undefined}
+      className="text-sm"
+    />
   );
 
   // Render the subtitle i.e. file name
@@ -211,7 +251,7 @@ function SearchResultItem({
     subtitleRenderer = undefined;
   } else {
     const subtitle = result.hierarchy.lvl1!;
-    subtitleRenderer = <MarkedText text={subtitle} matches={matches} />;
+    subtitleRenderer = <MarkedText text={subtitle} matches={matches} className="text-xs" />;
   }
 
   const enterIconRenderer = (
@@ -227,9 +267,9 @@ function SearchResultItem({
     >
       <div className="flex flex-row h-11">
         {iconRenderer}
-        <div className="flex flex-col justify-center grow">
-          <span className="text-sm">{titleRenderer}</span>
-          {subtitleRenderer && <span className="text-xs">{subtitleRenderer}</span>}
+        <div className="flex flex-col justify-center truncate grow">
+          {titleRenderer}
+          {subtitleRenderer}
         </div>
         {enterIconRenderer}
       </div>
@@ -242,6 +282,7 @@ interface SearchResultsProps {
   searchListID: string;
   searchLabelID: string;
   selectedIndex: number;
+  charLimit?: number;
   onHoverSelect: (index: number) => void;
   className?: string;
   closeSearch?: () => void;
@@ -251,6 +292,7 @@ function SearchResults({
   searchResults,
   searchListID,
   searchLabelID,
+  charLimit,
   className,
   selectedIndex,
   onHoverSelect,
@@ -325,7 +367,7 @@ function SearchResults({
               // Trigger selection on movement, so that scrolling doesn't trigger handler
               onMouseMove={handleMouseMove}
             >
-              <SearchResultItem result={result} closeSearch={closeSearch} />
+              <SearchResultItem result={result} closeSearch={closeSearch} charLimit={charLimit} />
             </li>
           ))}
         </ul>
@@ -541,11 +583,12 @@ const SearchPlaceholderButton = forwardRef<
 
 export interface SearchProps {
   debounceTime?: number;
+  charLimit?: number;
 }
 /**
  * Component that implements a basic search interface
  */
-export function Search({ debounceTime = 500 }: SearchProps) {
+export function Search({ debounceTime = 500, charLimit = 64 }: SearchProps) {
   const [open, setOpen] = useState(false);
   const [searchResults, setSearchResults] = useState<RankedSearchResult[] | undefined>();
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -624,6 +667,7 @@ export function Search({ debounceTime = 500 }: SearchProps) {
               selectedIndex={selectedIndex}
               onHoverSelect={setSelectedIndex}
               closeSearch={triggerClose}
+              charLimit={charLimit}
             />
           )}
         </Dialog.Content>

package/src/pages/Article.tsx

@@ -44,6 +44,9 @@ export const ArticlePage = React.memo(function ({
   const keywords = article.frontmatter?.keywords ?? [];
   const parts = extractKnownParts(tree, article.frontmatter?.parts);
 
+  const { thebe } = manifest as any;
+  const { location } = article;
+
   return (
     <ReferencesProvider
       references={{ ...article.references, article: article.mdast }}
@@ -55,6 +58,8 @@ export const ArticlePage = React.memo(function ({
             <FrontmatterBlock
               kind={article.kind}
               frontmatter={{ ...article.frontmatter, downloads }}
+              thebe={thebe}
+              location={location}
               className="mb-8 pt-9"
             />
           )}