@docusaurus/theme-classic 2.0.0-beta.8e9b829d9 → 2.0.0-beta.9

package/src/theme/LayoutHead/index.tsx

@@ -16,6 +16,7 @@ import {
   DEFAULT_SEARCH_TAG,
   useTitleFormatter,
   useAlternatePageUtils,
+  useThemeConfig,
 } from '@docusaurus/theme-common';
 import {useLocation} from '@docusaurus/router';
 
@@ -83,12 +84,10 @@ function CanonicalUrlHeaders({permalink}: {permalink?: string}) {
 
 export default function LayoutHead(props: Props): JSX.Element {
   const {
-    siteConfig: {
-      favicon,
-      themeConfig: {metadatas, image: defaultImage},
-    },
+    siteConfig: {favicon},
     i18n: {currentLocale, localeConfigs},
   } = useDocusaurusContext();
+  const {metadatas, image: defaultImage} = useThemeConfig();
   const {title, description, image, keywords, searchMetadatas} = props;
   const faviconUrl = useBaseUrl(favicon);
   const pageTitle = useTitleFormatter(title);
@@ -105,13 +104,14 @@ export default function LayoutHead(props: Props): JSX.Element {
         {favicon && <link rel="shortcut icon" href={faviconUrl} />}
         <title>{pageTitle}</title>
         <meta property="og:title" content={pageTitle} />
-        {image ||
-          (defaultImage && (
-            <meta name="twitter:card" content="summary_large_image" />
-          ))}
+        <meta name="twitter:card" content="summary_large_image" />
       </Head>
 
-      <Seo {...{description, keywords, image}} />
+      {/* image can override the default image */}
+      {defaultImage && <Seo image={defaultImage} />}
+      {image && <Seo image={image} />}
+
+      <Seo description={description} keywords={keywords} />
 
       <CanonicalUrlHeaders />
 

package/src/theme/LayoutProviders/index.tsx

@@ -12,6 +12,7 @@ import {
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
+  ScrollControllerProvider,
 } from '@docusaurus/theme-common';
 import type {Props} from '@theme/LayoutProviders';
 
@@ -20,11 +21,13 @@ export default function LayoutProviders({children}: Props): JSX.Element {
     <ThemeProvider>
       <AnnouncementBarProvider>
         <UserPreferencesProvider>
-          <DocsPreferredVersionContextProvider>
-            <MobileSecondaryMenuProvider>
-              {children}
-            </MobileSecondaryMenuProvider>
-          </DocsPreferredVersionContextProvider>
+          <ScrollControllerProvider>
+            <DocsPreferredVersionContextProvider>
+              <MobileSecondaryMenuProvider>
+                {children}
+              </MobileSecondaryMenuProvider>
+            </DocsPreferredVersionContextProvider>
+          </ScrollControllerProvider>
         </UserPreferencesProvider>
       </AnnouncementBarProvider>
     </ThemeProvider>

package/src/theme/Logo/index.tsx

@@ -12,17 +12,15 @@ import Link from '@docusaurus/Link';
 import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig} from '@docusaurus/theme-common';
 
 const Logo = (props: Props): JSX.Element => {
   const {
-    siteConfig: {
-      title,
-      themeConfig: {
-        navbar: {title: navbarTitle, logo = {src: ''}},
-      },
-    },
-    isClient,
+    siteConfig: {title},
   } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo = {src: ''}},
+  } = useThemeConfig();
 
   const {imageClassName, titleClassName, ...propsRest} = props;
   const logoLink = useBaseUrl(logo.href || '/');
@@ -30,20 +28,26 @@ const Logo = (props: Props): JSX.Element => {
     light: useBaseUrl(logo.src),
     dark: useBaseUrl(logo.srcDark || logo.src),
   };
+  const themedImage = (
+    <ThemedImage
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={logo.alt || navbarTitle || title}
+    />
+  );
 
   return (
     <Link
       to={logoLink}
       {...propsRest}
       {...(logo.target && {target: logo.target})}>
-      {logo.src && (
-        <ThemedImage
-          key={isClient}
-          className={imageClassName}
-          sources={sources}
-          alt={logo.alt || navbarTitle || title}
-        />
-      )}
+      {logo.src &&
+        (imageClassName ? (
+          <div className={imageClassName}>{themedImage}</div>
+        ) : (
+          <>{themedImage}</>
+        ))}
       {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
     </Link>
   );

package/src/theme/MDXComponents/index.tsx

@@ -6,13 +6,32 @@
  */
 
 import React, {ComponentProps, isValidElement, ReactElement} from 'react';
+import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import CodeBlock, {Props} from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import Details from '@theme/Details';
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
+import './styles.css';
+
+// MDX elements are wrapped through the MDX pragma
+// In some cases (notably usage with Head/Helmet) we need to unwrap those elements.
+function unwrapMDXElement(element: ReactElement) {
+  if (element?.props?.mdxType && element?.props?.originalType) {
+    const {mdxType, originalType, ...newProps} = element.props;
+    return React.createElement(element.props.originalType, newProps);
+  }
+  return element;
+}
+
 const MDXComponents: MDXComponentsObject = {
+  head: (props) => {
+    const unwrappedChildren = React.Children.map(props.children, (child) =>
+      unwrapMDXElement(child as ReactElement),
+    );
+    return <Head {...props}>{unwrappedChildren}</Head>;
+  },
   code: (props) => {
     const {children} = props;
 
@@ -34,7 +53,7 @@ const MDXComponents: MDXComponentsObject = {
 
     // See comment for `code` above
     if (isValidElement(children) && isValidElement(children?.props?.children)) {
-      return children?.props.children;
+      return children.props.children;
     }
 
     return (

package/src/theme/MDXComponents/styles.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+ul.contains-task-list {
+  padding-left: 0;
+  list-style: none;
+}

package/src/theme/MDXPage/index.tsx

@@ -18,7 +18,11 @@ import styles from './styles.module.css';
 
 function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
-  const {frontMatter, metadata} = MDXPageContent;
+  const {
+    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
+    frontMatter,
+    metadata,
+  } = MDXPageContent;
 
   const {
     title,
@@ -44,7 +48,11 @@ function MDXPage(props: Props): JSX.Element {
           </div>
           {!hideTableOfContents && MDXPageContent.toc && (
             <div className="col col--2">
-              <TOC toc={MDXPageContent.toc} />
+              <TOC
+                toc={MDXPageContent.toc}
+                minHeadingLevel={frontMatter.toc_min_heading_level}
+                maxHeadingLevel={frontMatter.toc_max_heading_level}
+              />
             </div>
           )}
         </div>

package/src/theme/Navbar/index.tsx

@@ -15,6 +15,7 @@ import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
   usePrevious,
+  useHistoryPopHandler,
 } from '@docusaurus/theme-common';
 import useHideableNavbar from '@theme/hooks/useHideableNavbar';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
@@ -23,6 +24,7 @@ import {useActivePlugin} from '@theme/hooks/useDocs';
 import NavbarItem, {Props as NavbarItemConfig} from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
+import IconClose from '@theme/IconClose';
 
 import styles from './styles.module.css';
 
@@ -57,6 +59,18 @@ function useMobileSidebar() {
 
   const [shown, setShown] = useState(false);
 
+  // Close mobile sidebar on navigation pop
+  // Most likely firing when using the Android back button (but not only)
+  useHistoryPopHandler(() => {
+    if (shown) {
+      setShown(false);
+      // Should we prevent the navigation here?
+      // See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
+      return false; // prevent pop navigation
+    }
+    return undefined;
+  });
+
   const toggle = useCallback(() => {
     setShown((s) => !s);
   }, []);
@@ -155,12 +169,22 @@ function NavbarMobileSidebar({
           imageClassName="navbar__logo"
           titleClassName="navbar__title"
         />
-        {!colorModeToggle.disabled && sidebarShown && (
+        {!colorModeToggle.disabled && (
           <Toggle
+            className={styles.navbarSidebarToggle}
             checked={colorModeToggle.isDarkTheme}
             onChange={colorModeToggle.toggle}
           />
         )}
+        <button
+          type="button"
+          className="clean-btn navbar-sidebar__close"
+          onClick={toggleSidebar}>
+          <IconClose
+            color="var(--ifm-color-emphasis-600)"
+            className={styles.navbarSidebarCloseSvg}
+          />
+        </button>
       </div>
 
       <div
@@ -175,7 +199,7 @@ function NavbarMobileSidebar({
           </ul>
         </div>
 
-        <div className="navbar-sidebar__item navbar-sidebar__item--secondary menu">
+        <div className="navbar-sidebar__item menu">
           {items.length > 0 && (
             <button
               type="button"

package/src/theme/Navbar/styles.module.css

@@ -8,7 +8,7 @@
 /*
 Hide toggle in small viewports
  */
-@media screen and (max-width: 997px) {
+@media (max-width: 996px) {
   .toggle {
     display: none;
   }
@@ -21,3 +21,7 @@ Hide toggle in small viewports
 .navbarHidden {
   transform: translate3d(0, calc(-100% - 2px), 0);
 }
+
+.navbarSidebarToggle {
+  margin-right: 1rem;
+}

package/src/theme/NavbarItem/DefaultNavbarItem.tsx

@@ -16,6 +16,8 @@ import type {
 } from '@theme/NavbarItem/DefaultNavbarItem';
 import IconExternalLink from '@theme/IconExternalLink';
 import isInternalUrl from '@docusaurus/isInternalUrl';
+import {isRegexpStringMatch} from '@docusaurus/theme-common';
+import {getInfimaActiveClassName} from './index';
 
 const dropdownLinkActiveClass = 'dropdown__link--active';
 
@@ -25,7 +27,7 @@ export function NavLink({
   to,
   href,
   label,
-  activeClassName = 'navbar__link--active',
+  activeClassName = '',
   prependBaseUrlToHref,
   ...props
 }: NavLinkProps): JSX.Element {
@@ -45,13 +47,15 @@ export function NavLink({
           }
         : {
             isNavLink: true,
-            activeClassName,
+            activeClassName: !props.className?.includes(activeClassName)
+              ? activeClassName
+              : '',
             to: toUrl,
             ...(activeBasePath || activeBaseRegex
               ? {
                   isActive: (_match, location) =>
                     activeBaseRegex
-                      ? new RegExp(activeBaseRegex).test(location.pathname)
+                      ? isRegexpStringMatch(activeBaseRegex, location.pathname)
                       : location.pathname.startsWith(activeBaseUrl),
                 }
               : null),
@@ -109,7 +113,14 @@ function DefaultNavbarItem({
   ...props
 }: Props): JSX.Element {
   const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
-  return <Comp {...props} />;
+  return (
+    <Comp
+      {...props}
+      activeClassName={
+        props.activeClassName ?? getInfimaActiveClassName(mobile)
+      }
+    />
+  );
 }
 
 export default DefaultNavbarItem;

package/src/theme/NavbarItem/DocNavbarItem.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
 import clsx from 'clsx';
+import {getInfimaActiveClassName} from './index';
 import type {Props} from '@theme/NavbarItem/DocNavbarItem';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {uniq} from '@docusaurus/utils-common';
@@ -31,7 +32,6 @@ Available doc ids are:\n- ${docIds}`,
 
 export default function DocNavbarItem({
   docId,
-  activeSidebarClassName,
   label: staticLabel,
   docsPluginId,
   ...props
@@ -41,19 +41,23 @@ export default function DocNavbarItem({
   const latestVersion = useLatestVersion(docsPluginId);
 
   // Versions used to look for the doc to link to, ordered + no duplicate
-  const versions: GlobalDataVersion[] = uniq(
-    [activeVersion, preferredVersion, latestVersion].filter(Boolean),
+  const versions = uniq(
+    [activeVersion, preferredVersion, latestVersion].filter(
+      Boolean,
+    ) as GlobalDataVersion[],
   );
   const doc = getDocInVersions(versions, docId);
+  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
 
   return (
     <DefaultNavbarItem
       exact
       {...props}
       className={clsx(props.className, {
-        [activeSidebarClassName]:
-          activeDoc && activeDoc.sidebar === doc.sidebar,
+        [activeDocInfimaClassName]:
+          activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar,
       })}
+      activeClassName={activeDocInfimaClassName}
       label={staticLabel ?? doc.id}
       to={doc.path}
     />

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -15,9 +15,11 @@ import {
 } from '@theme/hooks/useDocs';
 import type {Props} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+import {translate} from '@docusaurus/Translate';
+import type {GlobalDataVersion} from '@docusaurus/plugin-content-docs-types';
 
-const getVersionMainDoc = (version) =>
-  version.docs.find((doc) => doc.id === version.mainDocId);
+const getVersionMainDoc = (version: GlobalDataVersion) =>
+  version.docs.find((doc) => doc.id === version.mainDocId)!;
 
 export default function DocsVersionDropdownNavbarItem({
   mobile,
@@ -31,9 +33,8 @@ export default function DocsVersionDropdownNavbarItem({
   const versions = useVersions(docsPluginId);
   const latestVersion = useLatestVersion(docsPluginId);
 
-  const {preferredVersion, savePreferredVersionName} = useDocsPreferredVersion(
-    docsPluginId,
-  );
+  const {preferredVersion, savePreferredVersionName} =
+    useDocsPreferredVersion(docsPluginId);
 
   function getItems() {
     const versionLinks = versions.map((version) => {
@@ -62,7 +63,15 @@ export default function DocsVersionDropdownNavbarItem({
     activeDocContext.activeVersion ?? preferredVersion ?? latestVersion;
 
   // Mobile dropdown is handled a bit differently
-  const dropdownLabel = mobile && items ? 'Versions' : dropdownVersion.label;
+  const dropdownLabel =
+    mobile && items
+      ? translate({
+          id: 'theme.navbar.mobileVersionsDropdown.label',
+          message: 'Versions',
+          description:
+            'The label for the navbar versions dropdown on mobile view',
+        })
+      : dropdownVersion.label;
   const dropdownTo =
     mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path;
 

package/src/theme/NavbarItem/DocsVersionNavbarItem.tsx

@@ -7,12 +7,16 @@
 
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useActiveVersion, useLatestVersion} from '@theme/hooks/useDocs';
+import {
+  useActiveVersion,
+  useLatestVersion,
+  GlobalVersion,
+} from '@theme/hooks/useDocs';
 import type {Props} from '@theme/NavbarItem/DocsVersionNavbarItem';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 
-const getVersionMainDoc = (version) =>
-  version.docs.find((doc) => doc.id === version.mainDocId);
+const getVersionMainDoc = (version: GlobalVersion) =>
+  version.docs.find((doc) => doc.id === version.mainDocId)!;
 
 export default function DocsVersionNavbarItem({
   label: staticLabel,

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -11,6 +11,7 @@ import {
   isSamePath,
   useCollapsible,
   Collapsible,
+  isRegexpStringMatch,
   useLocalPathname,
 } from '@docusaurus/theme-common';
 import type {
@@ -31,10 +32,7 @@ function isItemActive(
   if (isSamePath(item.to, localPathname)) {
     return true;
   }
-  if (
-    item.activeBaseRegex &&
-    new RegExp(item.activeBaseRegex).test(localPathname)
-  ) {
+  if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
     return true;
   }
   if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
@@ -88,7 +86,7 @@ function DropdownNavbarItemDesktop({
         'dropdown--show': showDropdown,
       })}>
       <NavLink
-        className={clsx('navbar__item navbar__link', className)}
+        className={clsx('navbar__link', className)}
         {...props}
         onClick={props.to ? undefined : (e) => e.preventDefault()}
         onKeyDown={(e) => {
@@ -141,7 +139,7 @@ function DropdownNavbarItemMobile({
     if (containsActive) {
       setCollapsed(!containsActive);
     }
-  }, [localPathname, containsActive]);
+  }, [localPathname, containsActive, setCollapsed]);
 
   return (
     <li

package/src/theme/NavbarItem/{LocaleDropdownNavbarItem.tsx → LocaleDropdownNavbarItem/index.tsx}

@@ -11,6 +11,9 @@ import IconLanguage from '@theme/IconLanguage';
 import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
+
+import styles from './styles.module.css';
 
 export default function LocaleDropdownNavbarItem({
   mobile,
@@ -23,11 +26,11 @@ export default function LocaleDropdownNavbarItem({
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
 
-  function getLocaleLabel(locale) {
+  function getLocaleLabel(locale: string) {
     return localeConfigs[locale].label;
   }
 
-  const localeItems = locales.map((locale) => {
+  const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
     const to = `pathname://${alternatePageUtils.createUrl({
       locale,
       fullyQualified: false,
@@ -55,9 +58,7 @@ export default function LocaleDropdownNavbarItem({
       mobile={mobile}
       label={
         <span>
-          <IconLanguage
-            style={{verticalAlign: 'text-bottom', marginRight: 5}}
-          />
+          <IconLanguage className={styles.iconLanguage} />
           <span>{dropdownLabel}</span>
         </span>
       }

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.iconLanguage {
+  vertical-align: text-bottom;
+  margin-right: 5px;
+}

package/src/theme/NavbarItem/index.tsx

@@ -16,7 +16,9 @@ import type {Types, Props} from '@theme/NavbarItem';
 
 const NavbarItemComponents: Record<
   Exclude<Types, undefined>,
-  () => (props) => JSX.Element
+  // TODO: properly type this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  () => (props: any) => JSX.Element
 > = {
   default: () => DefaultNavbarItem,
   localeDropdown: () => LocaleDropdownNavbarItem,
@@ -55,6 +57,9 @@ function getComponentType(
   return type as NavbarItemComponentType;
 }
 
+export const getInfimaActiveClassName = (mobile?: boolean): string =>
+  mobile ? 'menu__link--active' : 'navbar__link--active';
+
 export default function NavbarItem({type, ...props}: Props): JSX.Element {
   const componentType = getComponentType(
     type,

package/src/theme/Seo/index.tsx

@@ -7,8 +7,8 @@
 
 import React from 'react';
 import Head from '@docusaurus/Head';
-import {useThemeConfig, useTitleFormatter} from '@docusaurus/theme-common';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import {useTitleFormatter} from '@docusaurus/theme-common';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 
 import type {Props} from '@theme/Seo';
 
@@ -17,10 +17,11 @@ export default function Seo({
   description,
   keywords,
   image,
+  children,
 }: Props): JSX.Element {
-  const {image: defaultImage} = useThemeConfig();
   const pageTitle = useTitleFormatter(title);
-  const pageImage = useBaseUrl(image || defaultImage, {absolute: true});
+  const {withBaseUrl} = useBaseUrlUtils();
+  const pageImage = image ? withBaseUrl(image, {absolute: true}) : undefined;
 
   return (
     <Head>
@@ -41,6 +42,8 @@ export default function Seo({
 
       {pageImage && <meta property="og:image" content={pageImage} />}
       {pageImage && <meta name="twitter:image" content={pageImage} />}
+
+      {children}
     </Head>
   );
 }

package/src/theme/TOC/index.tsx

@@ -7,48 +7,23 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import useTOCHighlight from '@theme/hooks/useTOCHighlight';
-import type {TOCProps, TOCHeadingsProps} from '@theme/TOC';
+import type {TOCProps} from '@theme/TOC';
+import TOCItems from '@theme/TOCItems';
 import styles from './styles.module.css';
 
-const LINK_CLASS_NAME = 'table-of-contents__link';
-const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
-const TOP_OFFSET = 100;
+// Using a custom className
+// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
-/* eslint-disable jsx-a11y/control-has-associated-label */
-export function TOCHeadings({
-  toc,
-  isChild,
-}: TOCHeadingsProps): JSX.Element | null {
-  if (!toc.length) {
-    return null;
-  }
+function TOC({className, ...props}: TOCProps): JSX.Element {
   return (
-    <ul
-      className={
-        isChild ? '' : 'table-of-contents table-of-contents__left-border'
-      }>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`}
-            className={LINK_CLASS_NAME}
-            // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{__html: heading.value}}
-          />
-          <TOCHeadings isChild toc={heading.children} />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function TOC({toc}: TOCProps): JSX.Element {
-  useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
-  return (
-    <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
-      <TOCHeadings toc={toc} />
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
     </div>
   );
 }

package/src/theme/TOC/styles.module.css

@@ -12,7 +12,7 @@
   top: calc(var(--ifm-navbar-height) + 1rem);
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .tableOfContents {
     display: none;
   }