@myst-theme/site 0.17.1 → 1.0.0

package/package.json

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

package/src/components/Abstract.tsx

@@ -1,5 +1,6 @@
 import type { GenericParent } from 'myst-common';
 import { MyST, HashLink } from 'myst-to-react';
+import classNames from 'classnames';
 
 export function Abstract({
   content,
@@ -14,13 +15,13 @@ export function Abstract({
 }) {
   if (!content) return null;
   return (
-    <div className={className}>
-      <h2 id={id} className="mb-3 text-base font-semibold group">
+    <div className={classNames('myst-abstract', className)}>
+      <h2 id={id} className="myst-abstract-title mb-3 text-base font-semibold group">
         {title}
         <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
-      <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
-        <MyST ast={content} className="col-body" />
+      <div className="myst-abstract-box px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
+        <MyST ast={content} className="myst-abstract-content col-body" />
       </div>
     </div>
   );

package/src/components/Backmatter.tsx

@@ -13,7 +13,7 @@ export function BackmatterParts({
   innerClassName?: string;
 }) {
   return (
-    <div className={containerClassName}>
+    <div className={classNames('myst-backmatter-parts', containerClassName)}>
       <Backmatter
         className={innerClassName}
         title="Acknowledgments"
@@ -43,15 +43,20 @@ export function Backmatter({
 }) {
   if (!content) return null;
   return (
-    <div className={classNames('flex flex-col w-full md:flex-row group/backmatter', className)}>
+    <div
+      className={classNames(
+        'myst-backmatter flex flex-col w-full md:flex-row group/backmatter',
+        className,
+      )}
+    >
       <h2
         id={id}
-        className="mt-5 text-base font-semibold group md:w-[200px] self-start md:flex-none opacity-90 group-hover/backmatter:opacity-100"
+        className="myst-backmatter-title mt-5 text-base font-semibold group md:w-[200px] self-start md:flex-none opacity-90 group-hover/backmatter:opacity-100"
       >
         {title}
         <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
-      <div className="grow opacity-90 group-hover/backmatter:opacity-100 col-screen">
+      <div className="myst-backmatter-content grow opacity-90 group-hover/backmatter:opacity-100 col-screen">
         <MyST ast={getChildren(content)} />
       </div>
     </div>

package/src/components/Bibliography.tsx

@@ -22,25 +22,30 @@ export function Bibliography({
   return (
     <section
       id="references"
-      className={classNames(grid, 'subgrid-gap col-screen', containerClassName)}
+      className={classNames(
+        'myst-bibliography',
+        grid,
+        'subgrid-gap col-screen',
+        containerClassName,
+      )}
     >
       <div className={innerClassName}>
         {!!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"
+            className="myst-bibliography-toggle float-right p-1 px-2 text-xs border rounded hover:border-blue-500 dark:hover:border-blue-400"
           >
             {hidden ? 'Show All' : 'Collapse'}
           </button>
         )}
-        <header className="text-lg font-semibold text-stone-900 dark:text-white group">
+        <header className="myst-bibliography-header text-lg font-semibold text-stone-900 dark:text-white group">
           References
           <HashLink id="references" title="Link to References" hover className="ml-2" />
         </header>
       </div>
       <div
         className={classNames(
-          'pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
+          'myst-bibliography-list pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
           innerClassName,
         )}
       >
@@ -50,7 +55,7 @@ export function Bibliography({
             return (
               <li
                 key={label}
-                className="break-words"
+                className="myst-bibliography-item break-words"
                 id={`cite-${label}`}
                 dangerouslySetInnerHTML={{ __html: html || '' }}
               />
@@ -60,7 +65,7 @@ export function Bibliography({
             <li className="text-center list-none">
               <button
                 onClick={() => setHidden(!hidden)}
-                className="p-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
+                className="myst-bibliography-toggle p-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
               >
                 {hidden ? `Show all ${filtered.length} references` : 'Collapse references'}
               </button>

package/src/components/ContentBlocks.tsx

@@ -1,6 +1,7 @@
 import type { SourceFileKind } from 'myst-spec-ext';
 import type { GenericParent } from 'myst-common';
 import { MyST, Block as MystBlock } from 'myst-to-react';
+import classNames from 'classnames';
 
 /**
  * @deprecated This component is not maintained, in favor of the generic `MyST` component
@@ -13,7 +14,7 @@ export function ContentBlocks({
   pageKind?: SourceFileKind;
   className?: string;
 }) {
-  return <MyST ast={mdast} className={className} />;
+  return <MyST ast={mdast} className={classNames('myst-content-blocks', className)} />;
 }
 
 /** @deprecated use `import { Block } from 'myst-to-react';` */

package/src/components/DocumentOutline.tsx

@@ -35,15 +35,16 @@ type Props = {
  * scrollIntoView is used to ensure that when a user clicks on an item, it will smoothly scroll.
  */
 const Headings = ({ headings, activeId }: Props) => (
-  <ul className="text-sm leading-6 text-slate-400">
+  <ul className="myst-outline-list text-sm leading-6 text-slate-400">
     {headings.map((heading) => (
       <li
         key={heading.id}
-        className={classNames('border-l-2 hover:border-l-blue-500', {
+        className={classNames('myst-outline-item border-l-2 hover:border-l-blue-500', {
           'text-blue-600': heading.id === activeId,
           'border-l-gray-300 dark:border-l-gray-50': heading.id !== activeId,
           'border-l-blue-500': heading.id === activeId,
           'bg-blue-50 dark:bg-slate-800': heading.id === activeId,
+          'myst-outline-item-active': heading.id === activeId,
         })}
       >
         <a
@@ -393,25 +394,25 @@ export const DocumentOutline = ({
   }
 
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen}>
+    <Collapsible.Root open={open} onOpenChange={setOpen} className="myst-outline-section">
       <nav
         ref={outlineRef}
         aria-label="Document Outline"
         className={classNames(
-          'not-prose overflow-y-auto',
+          'myst-outline not-prose overflow-y-auto',
           'transition-opacity duration-700', // Animation on load
           className,
         )}
         style={{
           top: top,
-          maxHeight: `calc(100vh - ${top + 20}px)`,
+          maxHeight: `calc(100vh - ${top + 100}px)`,
         }}
       >
-        <div className="flex flex-row gap-2 mb-4 text-sm leading-6 uppercase rounded-lg text-slate-900 dark:text-slate-100">
+        <div className="myst-outline-header flex flex-row gap-2 mb-4 text-sm leading-6 uppercase rounded-lg text-slate-900 dark:text-slate-100">
           {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"
+              className="myst-outline-collapsible self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2"
               aria-label="Open Contents"
             >
               <ChevronRightIcon
@@ -439,7 +440,7 @@ export function SupportingDocuments() {
   if (!pages || pages.length === 0) return null;
   return (
     <>
-      <div className="my-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
+      <div className="myst-supporting-documents my-4 text-sm leading-6 uppercase text-slate-900 dark:text-slate-100">
         Supporting Documents
       </div>
       <ul className="flex flex-col gap-2 pl-0 text-sm leading-6 list-none text-slate-700 dark:text-slate-300">

package/src/components/FooterLinksBlock.tsx

@@ -15,7 +15,10 @@ export const FooterLink = ({
   return (
     <Link
       prefetch="intent"
-      className="flex-1 block p-4 font-normal text-gray-600 no-underline border border-gray-200 rounded shadow-sm group hover:border-blue-600 dark:hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400 dark:text-gray-100 dark:border-gray-500 hover:shadow-lg dark:shadow-neutral-700"
+      className={classNames(
+        'myst-footer-link flex-1 block p-4 font-normal text-gray-600 no-underline border border-gray-200 rounded shadow-sm group hover:border-blue-600 dark:hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400 dark:text-gray-100 dark:border-gray-500 hover:shadow-lg dark:shadow-neutral-700',
+        { 'myst-footer-link-prev': right, 'myst-footer-link-next': !right },
+      )}
       to={withBaseurl(url, baseurl)}
     >
       <div className="flex h-full align-middle">
@@ -23,18 +26,20 @@ export const FooterLink = ({
           <ArrowLeftIcon
             width="1.5rem"
             height="1.5rem"
-            className="self-center transition-transform group-hover:-translate-x-1 shrink-0"
+            className="myst-footer-link-icon 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>
+          <div className="myst-footer-link-group text-xs text-gray-500 dark:text-gray-400">
+            {group || ' '}
+          </div>
           {short_title || title}
         </div>
         {!right && (
           <ArrowRightIcon
             width="1.5rem"
             height="1.5rem"
-            className="self-center transition-transform group-hover:translate-x-1 shrink-0"
+            className="myst-footer-link-icon self-center transition-transform group-hover:translate-x-1 shrink-0"
           />
         )}
       </div>
@@ -45,7 +50,7 @@ export const FooterLink = ({
 export function FooterLinksBlock({ links }: { links?: FooterLinks }) {
   if (!links || (!links.navigation?.prev && !links.navigation?.next)) return null;
   return (
-    <div className="flex pt-10 mb-10 space-x-4">
+    <div className="myst-footer-links flex pt-10 mb-10 space-x-4">
       {links.navigation?.prev && <FooterLink {...links.navigation?.prev} right />}
       {links.navigation?.next && <FooterLink {...links.navigation?.next} />}
     </div>

package/src/components/Footnotes.tsx

@@ -20,29 +20,33 @@ export function Footnotes({
   return (
     <section
       id="footnotes"
-      className={classNames(grid, 'subgrid-gap col-screen', containerClassName)}
+      className={classNames('myst-footnotes', grid, 'subgrid-gap col-screen', containerClassName)}
     >
       <div className={innerClassName}>
-        <header className="text-lg font-semibold text-stone-900 dark:text-white group">
+        <header className="myst-footnotes-header text-lg font-semibold text-stone-900 dark:text-white group">
           Footnotes
           <HashLink id="footnotes" title="Link to Footnotes" hover className="ml-2" />
         </header>
       </div>
       <div
         className={classNames(
-          'pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
+          'myst-footnotes-list pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
           innerClassName,
         )}
       >
         <ol>
           {defs.map((fn) => {
             return (
-              <li key={(fn as GenericNode).key} id={`fn-${fn.identifier}`} className="group">
+              <li
+                key={(fn as GenericNode).key}
+                id={`fn-${fn.identifier}`}
+                className="myst-footnotes-item group"
+              >
                 <div className="flex flex-row">
-                  <div className="break-words grow">
+                  <div className="myst-footnote-content break-words grow">
                     <MyST ast={fn.children} />
                   </div>
-                  <div className="flex flex-col grow-0">
+                  <div className="myst-footnote-backlinks flex flex-col grow-0">
                     {refs
                       .filter((ref) => ref.identifier === fn.identifier)
                       .map((ref) => (

package/src/components/FrontmatterParts.tsx

@@ -1,6 +1,7 @@
 import { type KnownParts } from '../utils.js';
 import { Abstract } from './Abstract.js';
 import { Keywords } from './Keywords.js';
+import classNames from 'classnames';
 
 export function FrontmatterParts({
   parts,
@@ -17,21 +18,28 @@ export function FrontmatterParts({
 }) {
   if (!parts.abstract && !parts.keypoints && !parts.summary) return null;
   return (
-    <div className={containerClassName}>
-      <Abstract className={innerClassName} content={parts.abstract} />
+    <div className={classNames('myst-fm-parts', containerClassName)}>
       <Abstract
-        className={innerClassName}
+        className={classNames('myst-fm-section', innerClassName)}
+        content={parts.abstract}
+      />
+      <Abstract
+        className={classNames('myst-fm-section', innerClassName)}
         content={parts.keypoints}
         title="Key Points"
         id="keypoints"
       />
       <Abstract
-        className={innerClassName}
+        className={classNames('myst-fm-section', innerClassName)}
         content={parts.summary}
         title="Plain Language Summary"
         id="summary"
       />
-      <Keywords className={innerClassName} keywords={keywords} hideKeywords={hideKeywords} />
+      <Keywords
+        className={classNames('myst-fm-section', innerClassName)}
+        keywords={keywords}
+        hideKeywords={hideKeywords}
+      />
     </div>
   );
 }

package/src/components/Headers.tsx

@@ -15,11 +15,13 @@ export function ArticleHeader({
   children,
   toggleTheme,
   className,
+  hideAuthors,
 }: {
   frontmatter: PageFrontmatterWithDownloads;
   children?: React.ReactNode;
   toggleTheme?: boolean;
   className?: string;
+  hideAuthors?: boolean;
 }) {
   const grid = useGridSystemProvider();
   const { subject, venue, volume, issue, ...rest } = frontmatter ?? {};
@@ -32,12 +34,12 @@ export function ArticleHeader({
     'col-page-left': grid === 'article-grid',
   };
   return (
-    <header className="relative col-screen">
+    <header className="myst-article-header relative col-screen">
       {frontmatter?.banner && (
         // This is the banner contained in a full-bleed div
         <div
           className={classNames(
-            'absolute',
+            'myst-article-header-background absolute',
             grid,
             'subgrid-gap col-screen bg-no-repeat bg-cover bg-top w-full h-full -z-10 pointer-events-none',
           )}
@@ -48,7 +50,7 @@ export function ArticleHeader({
       )}
       <div
         className={classNames(
-          'w-full relative col-screen article',
+          'myst-article-header-content w-full relative col-screen article',
           grid,
           'subgrid-gap',
           {
@@ -59,7 +61,7 @@ export function ArticleHeader({
         )}
       >
         <div
-          className={classNames(positionBackground, {
+          className={classNames('myst-article-header-banner', positionBackground, {
             'shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur': frontmatter?.banner,
           })}
         >
@@ -83,16 +85,19 @@ export function ArticleHeader({
               <OpenAccessBadge open_access={frontmatter?.open_access} />
               <GitHubLink github={frontmatter?.github} />
             </div>
-            {toggleTheme && <ThemeButton className="inline-block w-5 h-5 mt-0.5 ml-1" />}
+            {toggleTheme && (
+              <ThemeButton className="myst-article-header-theme-button inline-block w-5 h-5 mt-0.5 ml-1" />
+            )}
           </div>
           <div className="flex flex-col mb-10 md:flex-row">
             <FrontmatterBlock
               frontmatter={rest}
               authorStyle="list"
-              className={classNames('flex-grow', {
+              className={classNames('myst-article-header-fm flex-grow', {
                 'pt-6 px-6': frontmatter?.banner,
                 ...positionFrontmatter,
               })}
+              hideAuthors={hideAuthors}
               hideBadges
               hideExports
             />

package/src/components/Keywords.tsx

@@ -12,18 +12,20 @@ export function Keywords({
 }) {
   if (hideKeywords || !keywords || keywords.length === 0) return null;
   return (
-    <div className={classNames('mb-10 group', className)}>
-      <span className="mr-2 font-semibold">Keywords:</span>
-      {keywords.map((k, i) => (
-        <span
-          key={k}
-          className={classNames({
-            "after:content-[','] after:mr-1": i < keywords.length - 1,
-          })}
-        >
-          {k}
-        </span>
-      ))}
+    <div 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) => (
+          <span
+            key={k}
+            className={classNames('myst-keywords-item', {
+              "after:content-[','] after:mr-1": i < keywords.length - 1,
+            })}
+          >
+            {k}
+          </span>
+        ))}
+      </span>
       <HashLink id="keywords" title="Link to Keywords" hover className="ml-2" />
     </div>
   );

package/src/components/Navigation/ActionMenu.tsx

@@ -7,9 +7,9 @@ import type { SiteManifest } from 'myst-config';
 export function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
   if (!actions || actions.length === 0) return null;
   return (
-    <Menu as="div" className="relative">
+    <Menu as="div" className="myst-action-menu relative">
       <div>
-        <Menu.Button className="flex text-sm bg-transparent rounded-full focus:outline-none">
+        <Menu.Button className="myst-action-menu-button flex text-sm bg-transparent rounded-full focus:outline-none">
           <span className="sr-only">Open Menu</span>
           <div className="flex items-center text-stone-200 hover:text-white">
             <EllipsisVerticalIcon width="2rem" height="2rem" className="p-1" />
@@ -25,13 +25,14 @@ export function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="myst-action-menu-dropdown absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           {actions?.map((action) => (
             <Menu.Item key={action.url}>
               {({ active }) => (
                 <a
                   href={action.url}
                   className={classNames(
+                    'myst-action-menu-item',
                     active ? 'bg-gray-100' : '',
                     'block px-4 py-2 text-sm text-gray-700',
                   )}

package/src/components/Navigation/HomeLink.tsx

@@ -19,13 +19,13 @@ export function HomeLink({
   const nothingSet = !logo && !logoText;
   return (
     <Link
-      className="flex items-center ml-3 dark:text-white w-fit md:ml-5 xl:ml-7"
+      className="myst-home-link flex items-center ml-3 dark:text-white w-fit md:ml-5 xl:ml-7"
       to={url ? url : withBaseurl('/', baseurl)}
       prefetch="intent"
     >
       {logo && (
         <div
-          className={classNames('p-1 mr-3', {
+          className={classNames('myst-home-link-logo p-1 mr-3', {
             'dark:bg-white dark:rounded': !logoDark,
           })}
         >

package/src/components/Navigation/Loading.tsx

@@ -48,9 +48,9 @@ export function LoadingBar() {
   return (
     <div
       className={classNames(
-        'w-screen h-[2px] bg-blue-500 absolute left-0 bottom-0 transition-transform',
+        'myst-loading-bar w-screen h-[2px] bg-blue-500 absolute left-0 bottom-0 transition-transform',
         {
-          'animate-load scale-x-40': isLoading,
+          'myst-loading-bar-progress animate-load scale-x-40': isLoading,
           'scale-x-100': !isLoading,
         },
       )}

package/src/components/Navigation/Navigation.tsx

@@ -92,7 +92,7 @@ export const ConfigurablePrimaryNavigation = ({
     <>
       {open && !mobileOnly && headings && (
         <div
-          className="fixed inset-0 z-30 bg-black opacity-50"
+          className="myst-navigation-overlay fixed inset-0 z-30 bg-black opacity-50"
           style={{ marginTop: top }}
           onClick={() => setOpen(false)}
         ></div>

package/src/components/Navigation/PrimarySidebar.tsx

@@ -7,6 +7,9 @@ import {
   useGridSystemProvider,
   useThemeTop,
   useIsWide,
+  useBaseurl,
+  withBaseurl,
+  useBannerState,
 } from '@myst-theme/providers';
 import type { Heading } from '@myst-theme/common';
 import { Toc } from './TableOfContentsItems.js';
@@ -16,12 +19,14 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 
 export function SidebarNavItem({ item }: { item: SiteNavItem }) {
+  const baseurl = useBaseurl();
   if (!item.children?.length) {
     return (
       <ExternalOrInternalLink
         nav
-        to={item.url ?? ''}
+        to={withBaseurl(item.url, baseurl) ?? ''}
         className={classNames(
+          'myst-primary-sidebar-item-short',
           'p-2 my-1 rounded-lg',
           'hover:bg-slate-300/30',
           'block break-words focus:outline outline-blue-200 outline-2 rounded',
@@ -36,38 +41,40 @@ export function SidebarNavItem({ item }: { item: SiteNavItem }) {
     <Collapsible.Root className="w-full" open={open} onOpenChange={setOpen}>
       <div
         className={classNames(
+          'myst-primary-sidebar-item',
           'flex flex-row w-full gap-2 px-2 my-1 text-left rounded-lg outline-none',
           'hover:bg-slate-300/30',
         )}
       >
         <ExternalOrInternalLink
           nav
-          to={item.url ?? ''}
-          className={classNames('py-2 grow', {})}
+          to={withBaseurl(item.url, baseurl) ?? ''}
+          className={classNames('myst-primary-sidebar-item-title py-2 grow', {})}
           onClick={() => setOpen(!open)}
         >
           {item.title}
         </ExternalOrInternalLink>
         <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="myst-primary-sidebar-item-child self-center flex-none rounded-md group hover:bg-slate-300/30 focus:outline outline-blue-200 outline-2"
             aria-label="Open Folder"
           >
             <ChevronRightIcon
-              className="transition-transform duration-300 group-data-[state=open]:rotate-90 text-text-slate-700 dark:text-slate-100"
+              className="myst-primary-sidebar-item-icon transition-transform duration-300 group-data-[state=open]:rotate-90 text-text-slate-700 dark:text-slate-100"
               height="1.5rem"
               width="1.5rem"
             />
           </button>
         </Collapsible.Trigger>
       </div>
-      <Collapsible.Content className="pl-3 pr-[2px] collapsible-content">
+      <Collapsible.Content className="myst-primary-sidebar-item-content pl-3 pr-[2px] collapsible-content">
         {item.children.map((action) => (
           <ExternalOrInternalLink
             nav
             key={action.url}
-            to={action.url || ''}
+            to={withBaseurl(action.url, baseurl) || ''}
             className={classNames(
+              'myst-primary-sidebar-item-link',
               'p-2 my-1 rounded-lg',
               'hover:bg-slate-300/30',
               'block break-words focus:outline outline-blue-200 outline-2 rounded',
@@ -97,15 +104,18 @@ export function useSidebarHeight<T extends HTMLElement = HTMLElement>(top = 0, i
   const toc = useRef<HTMLDivElement>(null);
   const transitionState = useNavigation().state;
   const wide = useIsWide();
+  const { bannerState } = useBannerState();
+  const totalTop = top + bannerState.height;
+
   const setHeight = () => {
     if (!container.current || !toc.current) return;
     const height = container.current.offsetHeight - window.scrollY;
     const div = toc.current.firstChild as HTMLDivElement;
     if (div)
       div.style.height = wide
-        ? `min(calc(100vh - ${top}px), ${height + inset}px)`
-        : `calc(100vh - ${top}px)`;
-    if (div) div.style.height = `min(calc(100vh - ${top}px), ${height + inset}px)`;
+        ? `min(calc(100vh - ${totalTop}px), ${height + inset}px)`
+        : `calc(100vh - ${totalTop}px)`;
+    if (div) div.style.height = `min(calc(100vh - ${totalTop}px), ${height + inset}px)`;
     const nav = toc.current.querySelector('nav');
     if (nav) nav.style.opacity = height > 150 ? '1' : '0';
   };
@@ -117,7 +127,7 @@ export function useSidebarHeight<T extends HTMLElement = HTMLElement>(top = 0, i
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [container, toc, transitionState, wide]);
+  }, [container, toc, transitionState, wide, totalTop]);
   return { container, toc };
 }
 
@@ -137,6 +147,7 @@ export const PrimarySidebar = ({
   mobileOnly?: boolean;
 }) => {
   const top = useThemeTop();
+  const { bannerState } = useBannerState();
   const grid = useGridSystemProvider();
   const footerRef = useRef<HTMLDivElement>(null);
   const [open] = useNavOpen();
@@ -155,16 +166,18 @@ export const PrimarySidebar = ({
     <div
       ref={sidebarRef as any}
       className={classNames(
+        'myst-primary-sidebar',
         'fixed',
         `xl:${grid}`, // for example, xl:article-grid
         'grid-gap xl:w-screen xl:pointer-events-none overflow-auto max-xl:min-w-[300px]',
         { 'lg:hidden': nav && hide_toc },
         { hidden: !open, 'z-30': open, 'z-10': !open },
       )}
-      style={{ top }}
+      style={{ top: top + bannerState.height }}
     >
       <div
         className={classNames(
+          'myst-primary-sidebar-pointer',
           'pointer-events-auto',
           'xl:col-margin-left flex-col',
           'overflow-hidden',
@@ -177,11 +190,11 @@ export const PrimarySidebar = ({
           },
         )}
       >
-        <div className="flex-grow py-6 overflow-y-auto primary-scrollbar">
+        <div className="myst-primary-sidebar-nav flex-grow py-6 overflow-y-auto primary-scrollbar">
           {nav && (
             <nav
               aria-label="Navigation"
-              className="overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px] lg:hidden"
+              className="myst-primary-sidebar-topnav overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px] lg:hidden"
             >
               <SidebarNav nav={nav} />
             </nav>
@@ -190,7 +203,7 @@ export const PrimarySidebar = ({
           {headings && (
             <nav
               aria-label="Table of Contents"
-              className="flex-grow overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px]"
+              className="myst-primary-sidebar-toc flex-grow overflow-y-hidden transition-opacity ml-3 xl:ml-0 mr-3 max-w-[350px]"
             >
               <Toc headings={headings} />
             </nav>
@@ -198,7 +211,7 @@ export const PrimarySidebar = ({
         </div>
         {footer && (
           <div
-            className="flex-none py-6 transition-all duration-700 translate-y-6 opacity-0"
+            className="myst-primary-sidebar-footer flex-none py-6 transition-all duration-700 translate-y-6 opacity-0"
             ref={footerRef}
           >
             {footer}

package/src/components/Navigation/Search.tsx

@@ -174,7 +174,7 @@ function SearchShortcut() {
   return (
     <div
       aria-hidden
-      className="items-center hidden mx-1 font-mono text-sm text-gray-400 sm:flex gap-x-1"
+      className="myst-search-shortcut items-center hidden mx-1 font-mono text-sm text-gray-600 sm:flex gap-x-1"
     >
       <kbd
         className={classNames(
@@ -224,7 +224,7 @@ function SearchResultItem({
 
   // Render the icon
   const iconProps = useMemo(() => {
-    return { className: 'inline-block w-6 mx-2 shrink-0' };
+    return { className: 'myst-search-result-icon inline-block w-6 mx-2 shrink-0' };
   }, []);
   const iconRenderer = createElement(
     type === 'lvl1' ? DocumentIcon : type === 'content' ? Bars3BottomLeftIcon : HashtagIcon,
@@ -241,7 +241,7 @@ function SearchResultItem({
       text={title}
       matches={matches}
       limit={type === 'content' ? charLimit : undefined}
-      className="text-sm"
+      className="myst-search-result-highlight text-sm"
     />
   );
 
@@ -338,7 +338,7 @@ function SearchResults({
     [onHoverSelect],
   );
   return (
-    <div className="mt-4 overflow-y-scroll">
+    <div className="myst-search-results mt-4 overflow-y-scroll">
       {searchResults.length ? (
         <ul
           // Accessiblity:
@@ -363,7 +363,7 @@ function SearchResults({
               //   Indicate whether this is selected
               aria-selected={selectedIndex === index}
               // Allow for nested-highlighting
-              className="group"
+              className="myst-search-result-item group"
               // Trigger selection on movement, so that scrolling doesn't trigger handler
               onMouseMove={handleMouseMove}
             >
@@ -372,7 +372,7 @@ function SearchResults({
           ))}
         </ul>
       ) : (
-        <span>No results found.</span>
+        <span className="myst-search-no-results">No results found.</span>
       )}
     </div>
   );
@@ -506,8 +506,9 @@ function SearchForm({
     <>
       <form onSubmit={onSubmit}>
         <div className="relative flex w-full h-10 flow-row gap-x-1 ">
-          <label id={searchListID} htmlFor={searchInputID}>
-            <MagnifyingGlassIcon className="absolute text-gray-400 inset-y-0 start-0 h-10 w-10 p-2.5 aspect-square flex items-center pointer-events-none" />
+          <label id={searchLabelID} htmlFor={searchInputID}>
+            <MagnifyingGlassIcon className="absolute text-gray-600 inset-y-0 start-0 h-10 w-10 p-2.5 aspect-square flex items-center pointer-events-none" />
+            <span className="hidden">Search query</span>
           </label>
           <input
             autoComplete="off"
@@ -515,7 +516,7 @@ function SearchForm({
             disabled={!enabled}
             autoCapitalize="false"
             className={classNames(
-              'block flex-grow p-2 ps-10 placeholder-gray-400',
+              'myst-search-input block flex-grow p-2 ps-10 placeholder-gray-400',
               'border border-gray-300 dark:border-gray-600',
               'rounded-lg bg-gray-50 dark:bg-gray-700',
               'focus:ring-blue-500 dark:focus:ring-blue-500',
@@ -540,7 +541,7 @@ function SearchForm({
         </div>
       </form>
       {!enabled && (
-        <div className="mx-2 mt-4 text-sm text-gray-500">
+        <div className="myst-search-no-results mx-2 mt-4 text-sm text-gray-500">
           Search is not enabled for this site. :(
         </div>
       )}
@@ -560,12 +561,13 @@ const SearchPlaceholderButton = forwardRef<
     <button
       {...props}
       className={classNames(
+        'myst-search-bar',
         className,
-        'flex items-center h-10 aspect-square sm:w-64 text-left text-gray-400',
+        'flex items-center h-10 aspect-square sm:w-64 text-left text-gray-600',
         'border border-gray-300 dark:border-gray-600',
         'rounded-lg bg-gray-50 dark:bg-gray-700',
         {
-          'hover:ring-blue-500': !disabled,
+          'myst-search-bar-disabled hover:ring-blue-500': !disabled,
           'dark:hover:ring-blue-500': !disabled,
           'hover:border-blue-500': !disabled,
           'dark:hover:border-blue-500': !disabled,
@@ -575,7 +577,7 @@ const SearchPlaceholderButton = forwardRef<
       ref={ref}
     >
       <MagnifyingGlassIcon className="p-2.5 h-10 w-10 aspect-square" />
-      <span className="hidden sm:block grow">Search</span>
+      <span className="myst-search-text-placeholder hidden sm:block grow">Search</span>
       <SearchShortcut />
     </button>
   );
@@ -630,7 +632,7 @@ export function Search({ debounceTime = 500, charLimit = 64 }: SearchProps) {
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-[#656c85cc] z-[1000]" />
         <Dialog.Content
-          className="fixed flex flex-col top-0 bg-white dark:bg-stone-900 z-[1001] h-screen w-screen sm:left-1/2 sm:-translate-x-1/2 sm:w-[90vw] sm:max-w-screen-sm sm:h-auto sm:max-h-[var(--content-max-height)] sm:top-[var(--content-top)] sm:rounded-md p-4 text-gray-900 dark:text-white"
+          className="myst-search-dialog fixed flex flex-col top-0 bg-white dark:bg-stone-900 z-[1001] h-screen w-screen sm:left-1/2 sm:-translate-x-1/2 sm:w-[90vw] sm:max-w-screen-sm sm:h-auto sm:max-h-[var(--content-max-height)] sm:top-[var(--content-top)] sm:rounded-md p-4 text-gray-900 dark:text-white"
           // Store state as CSS variables so that we can set the style with tailwind variants
           style={
             {

package/src/components/Navigation/TableOfContentsItems.tsx

@@ -65,7 +65,7 @@ function childrenOpen(headings: NestedHeading[], pathname: string, baseurl?: str
 export const Toc = ({ headings }: { headings: Heading[] }) => {
   const nested = nestToc(headings);
   return (
-    <div className="w-full px-1 dark:text-white">
+    <div className="myst-toc w-full px-1 dark:text-white">
       {nested.map((item) => (
         <NestedToc heading={item} key={item.id} />
       ))}
@@ -93,7 +93,7 @@ function LinkItem({
       <Link
         title={`${heading.enumerator ? `${heading.enumerator} ` : ''}${heading.title}`}
         className={classNames(
-          'block break-words focus:outline outline-blue-200 outline-2 rounded',
+          'myst-toc-heading block break-words focus:outline outline-blue-200 outline-2 rounded',
           className,
         )}
         to={heading.url}
@@ -159,8 +159,8 @@ const NestedToc = ({ heading }: { heading: NestedHeading }) => {
   if (!heading.children || heading.children.length === 0) {
     return (
       <LinkItem
-        className={classNames('p-2 my-1 rounded-lg', {
-          'bg-blue-300/30': exact,
+        className={classNames('myst-toc-item p-2 my-1 rounded-lg', {
+          'myst-toc-item-exact bg-blue-300/30': exact,
           'hover:bg-slate-300/30': !exact,
           'font-bold': heading.level === 'index',
         })}
@@ -172,9 +172,9 @@ const NestedToc = ({ heading }: { heading: NestedHeading }) => {
     <Collapsible.Root className="w-full" open={open} onOpenChange={setOpen}>
       <div
         className={classNames(
-          '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 px-2 my-1 text-left rounded-lg outline-none',
           {
-            'bg-blue-300/30': exact,
+            'myst-toc-item-exact bg-blue-300/30': exact,
             'hover:bg-slate-300/30': !exact,
           },
         )}

package/src/components/Navigation/ThemeButton.tsx

@@ -8,15 +8,15 @@ export function ThemeButton({ className = 'w-8 h-8 mx-3' }: { className?: string
   return (
     <button
       className={classNames(
-        '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 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',
         className,
       )}
       title={`Toggle theme between light and dark mode`}
       aria-label={`Toggle theme between light and dark mode`}
       onClick={nextTheme}
     >
-      <MoonIcon className="h-full w-full p-0.5 hidden dark:block" />
-      <SunIcon className="h-full w-full p-0.5 dark:hidden" />
+      <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" />
     </button>
   );
 }

package/src/components/Navigation/TopNav.tsx

@@ -24,7 +24,7 @@ export function NavItem({ item }: { item: SiteNavItem }) {
   const baseurl = useBaseurl();
   if (!('children' in item)) {
     return (
-      <div className="relative inline-block mx-2 grow-0">
+      <div className="myst-top-nav-item relative inline-block mx-2 grow-0">
         <ExternalOrInternalLink
           nav
           to={withBaseurl(item.url, baseurl) ?? ''}
@@ -43,7 +43,7 @@ export function NavItem({ item }: { item: SiteNavItem }) {
     );
   }
   return (
-    <Menu as="div" className="relative inline-block mx-2 grow-0">
+    <Menu as="div" className="myst-top-nav-dropdown relative inline-block mx-2 grow-0">
       <div className="inline-block">
         <Menu.Button className="inline-flex items-center justify-center w-full py-1 mx-2 font-medium rounded-md text-md text-stone-900 dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
           <span>{item.title}</span>
@@ -63,14 +63,14 @@ export function NavItem({ item }: { item: SiteNavItem }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="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">
+        <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="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black"
+                  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"
                 >
@@ -81,7 +81,7 @@ export function NavItem({ item }: { item: SiteNavItem }) {
                   to={action.url || ''}
                   className={({ isActive }) =>
                     classNames(
-                      ' block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-black ',
+                      '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,
                       },
@@ -116,8 +116,8 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
   const { title, nav, actions } = config ?? {};
   const { logo, logo_dark, logo_text, logo_url } = config?.options ?? {};
   return (
-    <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-screen top-0 z-30 h-[60px]">
-      <nav className="flex items-center justify-between flex-nowrap max-w-[1440px] mx-auto">
+    <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-screen top-0 z-30 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">
           {
             <div
@@ -127,7 +127,7 @@ export function TopNav({ hideToc, hideSearch }: { hideToc?: boolean; hideSearch?
               })}
             >
               <button
-                className="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 border-stone-400 text-stone-800 hover:text-stone-900 dark:text-stone-200 hover:dark:text-stone-100"
                 onClick={() => {
                   setOpen(!open);
                 }}

package/src/components/SkipToArticle.tsx

@@ -31,13 +31,13 @@ export function SkipToArticle({
   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"
+      className="myst-skip-to-article 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"
       aria-label="skip to content options"
     >
       {frontmatter && (
         <a
           href={`#${fm}`}
-          className="block px-2 py-1 text-black underline"
+          className="myst-skip-to-link block px-2 py-1 text-black underline"
           onClick={frontmatterHandler}
         >
           Skip to article frontmatter
@@ -46,7 +46,7 @@ export function SkipToArticle({
       {article && (
         <a
           href={`#${art}`}
-          className="block px-2 py-1 text-black underline"
+          className="myst-skip-to-link block px-2 py-1 text-black underline"
           onClick={articleHandler}
         >
           Skip to article content
@@ -62,14 +62,14 @@ export function SkipToArticle({
 export const SkipTo = React.memo(({ targets }: { targets: { id: string; title: string }[] }) => {
   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"
+      className="myst-skip-to-article 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"
       aria-label="skip to content options"
     >
       {targets.map(({ id, title }) => (
         <a
           key={id}
           href={`#${id}`}
-          className="block px-2 py-1 text-black underline"
+          className="myst-skip-to-link block px-2 py-1 text-black underline"
           onClick={makeSkipClickHandler(id)}
         >
           {title}

package/src/components/Spinner.tsx

@@ -1,9 +1,9 @@
 export function Spinner({ size }: { size: number }) {
   return (
-    <div role="status">
+    <div role="status" className="myst-spinner">
       <svg
         aria-hidden="true"
-        className={`w-[${size}px] h-[${size}px] mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-600`}
+        className={`myst-spinner-icon w-[${size}px] h-[${size}px] mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-600`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"