@myst-theme/site 0.5.7 → 0.5.9

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.5.7",
+  "version": "0.5.9",
+  "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,27 +17,29 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.5.7",
-    "@myst-theme/frontmatter": "^0.5.7",
-    "@myst-theme/jupyter": "^0.5.7",
-    "@myst-theme/common": "^0.5.7",
-    "@myst-theme/providers": "^0.5.7",
+    "@myst-theme/diagrams": "^0.5.9",
+    "@myst-theme/frontmatter": "^0.5.9",
+    "@myst-theme/jupyter": "^0.5.9",
+    "@myst-theme/common": "^0.5.9",
+    "@myst-theme/providers": "^0.5.9",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.1.8",
     "myst-spec-ext": "^1.1.8",
     "myst-config": "^1.1.8",
-    "myst-demo": "^0.5.7",
-    "myst-to-react": "^0.5.7",
+    "myst-demo": "^0.5.9",
+    "myst-to-react": "^0.5.9",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
-    "thebe-react": "^0.3.2",
+    "thebe-react": "^0.3.5",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+    "@remix-run/react": "^1.17 || ^2.0",
+    "@remix-run/node": "^1.17 || ^2.0",
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
   },

package/src/components/Abstract.tsx

@@ -1,5 +1,5 @@
 import type { GenericParent } from 'myst-common';
-import { ContentBlocks } from './ContentBlocks';
+import { ContentBlocks } from './ContentBlocks.js';
 import classNames from 'classnames';
 import { HashLink } from 'myst-to-react';
 

package/src/components/DocumentOutline.tsx

@@ -8,7 +8,7 @@ import { useNavigation } from '@remix-run/react';
 import classNames from 'classnames';
 import throttle from 'lodash.throttle';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import DocumentChartBarIcon from '@heroicons/react/24/outline/DocumentChartBarIcon';
+import { DocumentChartBarIcon } from '@heroicons/react/24/outline';
 
 const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', ');
 const HIGHLIGHT_CLASS = 'highlight';

package/src/components/FooterLinksBlock.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
-import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
-import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import type { FooterLinks, NavigationLink } from '@myst-theme/common';
 import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
 

package/src/components/Headers.tsx

@@ -8,7 +8,7 @@ import {
 import { useGridSystemProvider } from '@myst-theme/providers';
 import classNames from 'classnames';
 import type { PageFrontmatter } from 'myst-frontmatter';
-import { ThemeButton } from './Navigation';
+import { ThemeButton } from './Navigation/index.js';
 
 export function ArticleHeader({
   frontmatter,

package/src/components/Navigation/Navigation.tsx

@@ -1,5 +1,5 @@
 import { useNavOpen, useThemeTop } from '@myst-theme/providers';
-import { TableOfContents } from './TableOfContents';
+import { TableOfContents } from './TableOfContents.js';
 
 export function Navigation({
   children,

package/src/components/Navigation/ThemeButton.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@myst-theme/providers';
-import MoonIcon from '@heroicons/react/24/solid/MoonIcon';
-import SunIcon from '@heroicons/react/24/outline/SunIcon';
+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 }) {

package/src/components/Navigation/TopNav.tsx

@@ -2,11 +2,13 @@ import { NavLink } from '@remix-run/react';
 import { Fragment } from 'react';
 import classNames from 'classnames';
 import { Menu, Transition } from '@headlessui/react';
-import EllipsisVerticalIcon from '@heroicons/react/24/solid/EllipsisVerticalIcon';
-import MenuIcon from '@heroicons/react/24/solid/Bars3Icon';
-import ChevronDownIcon from '@heroicons/react/24/solid/ChevronDownIcon';
+import {
+  EllipsisVerticalIcon,
+  ChevronDownIcon,
+  Bars3Icon as MenuIcon,
+} from '@heroicons/react/24/solid';
 import type { SiteManifest, SiteNavItem } from 'myst-config';
-import { ThemeButton } from './ThemeButton';
+import { ThemeButton } from './ThemeButton.js';
 import {
   useBaseurl,
   useLinkProvider,
@@ -14,7 +16,7 @@ import {
   useSiteManifest,
   withBaseurl,
 } from '@myst-theme/providers';
-import { LoadingBar } from './Loading';
+import { LoadingBar } from './Loading.js';
 
 export const DEFAULT_NAV_HEIGHT = 60;
 

package/src/components/Navigation/index.tsx

@@ -1,5 +1,5 @@
-export { ThemeButton } from './ThemeButton';
-export { TopNav, DEFAULT_NAV_HEIGHT } from './TopNav';
-export { Navigation } from './Navigation';
-export { TableOfContents, InlineTableOfContents, useTocHeight } from './TableOfContents';
-export { LoadingBar } from './Loading';
+export { ThemeButton } from './ThemeButton.js';
+export { TopNav, DEFAULT_NAV_HEIGHT } from './TopNav.js';
+export { Navigation } from './Navigation.js';
+export { TableOfContents, InlineTableOfContents, useTocHeight } from './TableOfContents.js';
+export { LoadingBar } from './Loading.js';

package/src/components/SkipToArticle.tsx

@@ -1,14 +1,12 @@
 import { useCallback } from 'react';
 
-function makeSkipClickHander(hash: string) {
+function makeSkipClickHandler(hash: string) {
   return (e: React.UIEvent<HTMLElement, Event>) => {
     e.preventDefault();
     const el = document.querySelector(`#${hash}`);
     if (!el) return;
-    el.scrollIntoView({ behavior: 'smooth' });
+    (el.nextSibling as HTMLElement).focus();
     history.replaceState(undefined, '', `#${hash}`);
-    (el.nextSibling as HTMLElement).focus({ preventScroll: true });
-    (e.target as HTMLElement).blur();
   };
 }
 
@@ -22,8 +20,8 @@ export function SkipToArticle({
   const fm = 'skip-to-frontmatter';
   const art = 'skip-to-article';
 
-  const frontmatterHander = useCallback(() => makeSkipClickHander(fm), [frontmatter]);
-  const articleHandler = useCallback(() => makeSkipClickHander(art), [article]);
+  const frontmatterHandler = useCallback(() => makeSkipClickHandler(fm), [frontmatter]);
+  const articleHandler = useCallback(() => makeSkipClickHandler(art), [article]);
   return (
     <div
       className="fixed top-1 left-1 h-[0px] w-[0px] focus-within:z-40 focus-within:h-auto focus-within:w-auto bg-white overflow-hidden focus-within:p-2 focus-within:ring-1"
@@ -33,7 +31,7 @@ export function SkipToArticle({
         <a
           href={`#${fm}`}
           className="block px-2 py-1 text-black underline"
-          onClick={frontmatterHander}
+          onClick={frontmatterHandler}
         >
           Skip to article frontmatter
         </a>

package/src/components/index.ts

@@ -1,11 +1,11 @@
-export { ContentBlocks } from './ContentBlocks';
-export { DocumentOutline, useOutlineHeight, SupportingDocuments } from './DocumentOutline';
-export { FooterLinksBlock } from './FooterLinksBlock';
-export { ContentReload } from './ContentReload';
-export { Bibliography } from './Bibliography';
-export { ArticleHeader } from './Headers';
-export { Abstract, Keywords } from './Abstract';
-export { ExternalOrInternalLink } from './ExternalOrInternalLink';
-export * from './Navigation';
-export { renderers } from './renderers';
-export * from './SkipToArticle';
+export { ContentBlocks } from './ContentBlocks.js';
+export { DocumentOutline, useOutlineHeight, SupportingDocuments } from './DocumentOutline.js';
+export { FooterLinksBlock } from './FooterLinksBlock.js';
+export { ContentReload } from './ContentReload.js';
+export { Bibliography } from './Bibliography.js';
+export { ArticleHeader } from './Headers.js';
+export { Abstract, Keywords } from './Abstract.js';
+export { ExternalOrInternalLink } from './ExternalOrInternalLink.js';
+export * from './Navigation/index.js';
+export { renderers } from './renderers.js';
+export * from './SkipToArticle.js';

package/src/index.ts

@@ -1,5 +1,5 @@
-export * from './utils';
-export * from './loaders';
-export * from './components';
-export * from './pages';
-export * from './seo';
+export * from './utils.js';
+export * from './loaders/index.js';
+export * from './components/index.js';
+export * from './pages/index.js';
+export * from './seo/index.js';

package/src/loaders/index.ts

@@ -1,3 +1,3 @@
-export * from './errors.server';
-export * from './links';
-export * from './theme.server';
+export * from './errors.server.js';
+export * from './links.js';
+export * from './theme.server.js';

package/src/pages/Article.tsx

@@ -1,18 +1,22 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
-import { Abstract, Bibliography, ContentBlocks, FooterLinksBlock, Keywords } from '../components';
-import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
-import { ErrorProjectNotFound } from './ErrorProjectNotFound';
+import {
+  Abstract,
+  Bibliography,
+  ContentBlocks,
+  FooterLinksBlock,
+  Keywords,
+} from '../components/index.js';
+import { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
+import { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
 import type { PageLoader } from '@myst-theme/common';
 import { copyNode, extractPart, type GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-spec-ext';
 import {
-  useComputeOptions,
   ExecuteScopeProvider,
   BusyScopeProvider,
   NotebookToolbar,
   ConnectionStatusTray,
-  BinderBadge,
   useCanCompute,
   ErrorTray,
 } from '@myst-theme/jupyter';
@@ -30,14 +34,11 @@ export const ArticlePage = React.memo(function ({
   hideKeywords?: boolean;
 }) {
   const canCompute = useCanCompute(article);
-  const { binderBadgeUrl } = useComputeOptions();
   const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.design ?? {};
 
   const tree = copyNode(article.mdast);
   const keywords = article.frontmatter?.keywords ?? [];
   const abstract = showAbstract ? extractPart(tree, 'abstract') : undefined;
-  // take binder url from article frontmatter or fallback to project
-  const binderUrl = article.frontmatter.binder ?? binderBadgeUrl;
 
   return (
     <ReferencesProvider
@@ -53,11 +54,6 @@ export const ArticlePage = React.memo(function ({
               className="pt-5 mb-8"
             />
           )}
-          {binderUrl && !canCompute && (
-            <div className="flex justify-end">
-              <BinderBadge binder={binderUrl} />
-            </div>
-          )}
           {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
           <ErrorTray pageSlug={article.slug} />
           <div id="skip-to-article" />

package/src/pages/Root.tsx

@@ -12,12 +12,13 @@ import {
   Link,
   NavLink,
 } from '@remix-run/react';
-import { DEFAULT_NAV_HEIGHT, renderers } from '../components';
-import { Analytics } from '../seo';
-import { Error404 } from './Error404';
+import { DEFAULT_NAV_HEIGHT, renderers } from '../components/index.js';
+import { Analytics } from '../seo/index.js';
+import { Error404 } from './Error404.js';
 import classNames from 'classnames';
 import { ConfiguredThebeServerProvider } from '@myst-theme/jupyter';
 import { ThebeBundleLoaderProvider } from 'thebe-react';
+import type { BinderOptions, RepoProviderSpec } from 'thebe-core';
 
 export function Document({
   children,
@@ -27,6 +28,7 @@ export function Document({
   title,
   staticBuild,
   baseurl,
+  loadThebeLite,
   top = DEFAULT_NAV_HEIGHT,
 }: {
   children: React.ReactNode;
@@ -36,6 +38,7 @@ export function Document({
   title?: string;
   staticBuild?: boolean;
   baseurl?: string;
+  loadThebeLite?: boolean;
   top?: number;
 }) {
   const links = staticBuild
@@ -63,9 +66,11 @@ export function Document({
       <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
         <ThemeProvider theme={theme} renderers={renderers} {...links} top={top}>
           <BaseUrlProvider baseurl={baseurl}>
-            <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>
+            <ThebeBundleLoaderProvider loadThebeLite={loadThebeLite} publicPath={baseurl}>
               <SiteProvider config={config}>
-                <ConfiguredThebeServerProvider>{children}</ConfiguredThebeServerProvider>
+                <ConfiguredThebeServerProvider siteManifest={config}>
+                  {children}
+                </ConfiguredThebeServerProvider>
               </SiteProvider>
             </ThebeBundleLoaderProvider>
           </BaseUrlProvider>

package/src/pages/index.ts

@@ -1,5 +1,5 @@
-export { ErrorProjectNotFound } from './ErrorProjectNotFound';
-export { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
-export { Error404 } from './Error404';
-export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article';
-export { App, Document, AppCatchBoundary } from './Root';
+export { ErrorProjectNotFound } from './ErrorProjectNotFound.js';
+export { ErrorDocumentNotFound } from './ErrorDocumentNotFound.js';
+export { Error404 } from './Error404.js';
+export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article.js';
+export { App, Document, AppCatchBoundary } from './Root.js';

package/src/seo/index.ts

@@ -1,4 +1,4 @@
-export * from './analytics';
-export * from './meta';
-export * from './sitemap';
-export * from './robots';
+export * from './analytics.js';
+export * from './meta.js';
+export * from './sitemap.js';
+export * from './robots.js';