Deps update

.gitignore

@@ -10,7 +10,7 @@
 # production
 /.build
 /public/static/assets
-/public/docs_sitemap.xml
+/public/sitemap.xml
 /public/algolia_sitemap.xml
 /pages/ver/*
 /utils/articleLinks.json

components/Admonition/Admonition.tsx

@@ -9,7 +9,7 @@ const capitalize = (text: string): string =>
 const types = ["warning", "tip", "note", "danger"] as const;
 
 export interface AdmonitionProps {
-  type: typeof types[number];
+  type: (typeof types)[number];
   title: string;
   children: React.ReactNode;
   scopeOnly: boolean;

components/Link/Link.tsx

@@ -60,6 +60,7 @@ const Link = ({
 
   // At this point, we return Link from the next/link package
   const nextProps: NextLinkProps = {
+    ...linkProps,
     href: normalizedHref,
     as,
     replace,
@@ -70,13 +71,12 @@ const Link = ({
   };
 
   return (
-    <NextLink {...nextProps} prefetch={false}>
-      <a
-        {...linkProps}
-        className={cn(styles.wrapper, styles[scheme], className)}
-      >
-        {children}
-      </a>
+    <NextLink
+      {...nextProps}
+      prefetch={false}
+      className={cn(styles.wrapper, styles[scheme], className)}
+    >
+      {children}
     </NextLink>
   );
 };

components/MDX/Image.module.css

@@ -1,6 +1,7 @@
 .wrapper {
   display: flex;
   flex-direction: column;
+  margin: 0 0 var(--m-2);
 
   &.left {
     align-items: flex-start;
@@ -11,6 +12,11 @@
   }
 }
 
+.image {
+  max-width: 100%;
+  height: auto;
+}
+
 .border {
   box-shadow: 0 1px 4px rgba(0 0 0 / 24%);
 }

components/MDX/Image.tsx

@@ -22,10 +22,10 @@ export const Image = ({
     <span className={cn(styles.wrapper, styles[align])}>
       {bordered ? (
         <span className={styles.border}>
-          <NextImage {...props} layout="intrinsic" />
+          <NextImage {...props} className={styles.image} />
         </span>
       ) : (
-        <NextImage {...props} layout="intrinsic" />
+        <NextImage {...props} className={styles.image} />
       )}
       {caption && <figcaption className={styles.caption}>{caption}</figcaption>}
     </span>
@@ -39,7 +39,11 @@ export type FigureProps = ImageProps & {
 };
 
 export const Figure = ({ children, ...rest }: FigureProps) => {
-  const image = Children.only<ImageComponent>(children);
+  if (Children.count(children) > 0) {
+    const image = Children.toArray(children)[0] as ImageComponent;
 
-  return cloneElement(image, rest);
+    return cloneElement(image, rest);
+  }
+
+  return null;
 };

components/Notice/Notice.tsx

@@ -14,7 +14,7 @@ const typeIcons = {
   danger: "error",
 } as const;
 
-type NoticeType = typeof types[number];
+type NoticeType = (typeof types)[number];
 
 export interface NoticeProps {
   type: NoticeType;

components/Search/Search.tsx

@@ -10,7 +10,7 @@ import { useRouter } from "next/router";
 import { DocsContext } from "layouts/DocsPage/context";
 import { autocomplete } from "@algolia/autocomplete-js";
 import "@algolia/autocomplete-theme-classic";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { debounced } from "utils/debounced";
 import { ProductItem } from "./ProductItem";
 import { getSearchResults, getEmptyNotice } from "./utils";
@@ -30,20 +30,30 @@ const ITEM_LINK: SearchResultRecord = {
 
 const SearchAutocomplete = (props) => {
   const containerRef = useRef(null);
+  const panelRootRef = useRef(null);
+  const rootRef = useRef(null);
 
   useEffect(() => {
     if (!containerRef.current) {
       return undefined;
     }
 
+    // see https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-react/#with-react-18
     const search = autocomplete({
       container: containerRef.current,
-      renderer: { createElement, Fragment },
+      renderer: { createElement, Fragment, render: () => {} },
       onSubmit() {
         window.location.href = "/docs/search-results/";
       },
       render({ children }, root) {
-        render(children, root);
+        if (!panelRootRef.current || rootRef.current !== root) {
+          rootRef.current = root;
+
+          panelRootRef.current?.unmount();
+          panelRootRef.current = createRoot(root);
+        }
+
+        panelRootRef.current.render(children);
       },
       ...props,
     });

components/Variables/Var.tsx

@@ -6,24 +6,24 @@ import type { VarsContextProps } from "./context";
 import styles from "./Var.module.css";
 
 interface VarProps {
-  name: string;
+  name?: string;
   description?: string;
   needLabel?: boolean;
-  isGlobal?: boolean;
+  isGlobal?: string;
 }
 
 export const Var = ({
   name,
   description = "",
   needLabel = false,
-  isGlobal = false,
+  isGlobal = "false",
 }: VarProps) => {
   const { fields, setField, addField } =
     useContext<VarsContextProps>(VarsContext);
   const val = fields[name] || "";
 
   useEffect(() => {
-    addField(name, isGlobal, description);
+    addField(name, isGlobal === "true", description);
   }, [isGlobal, name, addField, description]);
 
   const onChange = useCallback(
@@ -59,5 +59,5 @@ export const Var = ({
     );
   }
 
-  return <div className={cn("wrapper-input", styles.wrapper)}>{input}</div>;
+  return <span className={cn("wrapper-input", styles.wrapper)}>{input}</span>;
 };

components/Variables/VarList.tsx

@@ -13,7 +13,7 @@ export const VarList = () => {
         name={item}
         description={fieldDescriptions[item]}
         needLabel
-        isGlobal
+        isGlobal="true"
       />
     </li>
   ));

components/Variables/context.tsx

@@ -26,10 +26,10 @@ interface VarsProviderProps {
   children: React.ReactNode;
 }
 
-const getName = (rawName) => `global_var_${rawName}`;
+const getName = (rawName: string) => `global_var_${rawName}`;
 
-const saveValue = (raw_name, value): boolean => {
-  const name = getName(raw_name);
+const saveValue = (rawName: string, value: string): boolean => {
+  const name = getName(rawName);
   try {
     sessionStorage.setItem(name, value);
     return true;
@@ -38,8 +38,8 @@ const saveValue = (raw_name, value): boolean => {
   }
 };
 
-const getValue = (raw_name): string | void => {
-  const name = getName(raw_name);
+const getValue = (rawName: string): string | undefined => {
+  const name = getName(rawName);
   try {
     return sessionStorage.getItem(name) || "";
   } catch (e) {

components/VideoBar/VideoBar.module.css

@@ -29,6 +29,10 @@
   flex-shrink: 0;
 }
 
+.objectFit {
+  object-fit: contain;
+}
+
 .icon {
   position: absolute;
   top: 50%;

components/VideoBar/VideoBar.tsx

@@ -26,7 +26,7 @@ export default function VideoBar({
           width={80}
           height={40}
           alt={title}
-          objectFit="contain"
+          className={styles.objectFit}
         />
       </div>
       <div className={styles.info}>

layouts/DocsPage/DocsPage.tsx

@@ -1,5 +1,6 @@
+import type { PageMeta } from "./types";
+
 import cn from "classnames";
-import { MDXProvider } from "@mdx-js/react";
 import { useContext, useEffect } from "react";
 import { VarsProvider } from "components/Variables";
 import AnchorNavigation, { HeaderMeta } from "components/AnchorNavigation";
@@ -10,18 +11,17 @@ import Link, { useCurrentHref } from "components/Link";
 import Notice from "components/Notice";
 import VideoBar from "components/VideoBar";
 import { useFindDestinationPath } from "utils/useFindDestinationPath";
-import { components } from "./components";
+
 import { DocsContext } from "./context";
 import Header from "./Header";
 import Footer from "./Footer";
 import Navigation, { getCurrentCategoryIndex } from "./Navigation";
-import type { PageMeta } from "./types";
 
 import styles from "./DocsPage.module.css";
 
-interface DocsPageProps {
+export interface DocsPageProps {
   meta: PageMeta;
-  tableOfConents: HeaderMeta[];
+  tableOfContents: HeaderMeta[];
   children: React.ReactNode;
 }
 
@@ -38,10 +38,11 @@ const DocsPage = ({
     githubUrl,
     scopes,
   },
-  tableOfConents,
+  tableOfContents,
   children,
 }: DocsPageProps) => {
   const route = useCurrentHref();
+
   const { setVersions, scope, setScope } = useContext(DocsContext);
 
   const { current, latest, available } = versions;
@@ -60,7 +61,7 @@ const DocsPage = ({
   }, [versions, setVersions, setScope, scopes, scope]);
 
   const isSectionLayout = layout === "section";
-  const isTocVisible = (!layout || layout === "doc") && tableOfConents.length;
+  const isTocVisible = (!layout || layout === "doc") && tableOfContents.length;
 
   const categoryId = getCurrentCategoryIndex(navigation, route);
   const icon = navigation[categoryId]?.icon || "book";
@@ -115,21 +116,21 @@ const DocsPage = ({
                   {isBetaVersion && (
                     <>
                       This chapter covers an upcoming release: {current}. We
-                      recommend the <Link href={`${path}`}>latest</Link> version
-                      instead.
+                      recommend the <Link href={`/docs${path}`}>latest</Link>{" "}
+                      version instead.
                     </>
                   )}
                 </Notice>
               )}
               <VarsProvider>
                 <div className={cn(styles.text, styles[layout])}>
-                  <MDXProvider components={components}>{children}</MDXProvider>
+                  {children}
                 </div>
               </VarsProvider>
             </div>
             {isTocVisible && (
               <AnchorNavigation
-                headers={tableOfConents}
+                headers={tableOfContents}
                 className={styles["anchor-navigation"]}
               />
             )}

layouts/DocsPage/Header.tsx

@@ -37,8 +37,8 @@ const DocHeader = ({
     <section className={styles.wrapper}>
       <a href={GITHUB_DOCS} className={styles["github-link"]}>
         <NextImage
-          width="112"
-          height="112"
+          width={112}
+          height={112}
           src={forkmeUrl}
           alt="Fork me on GitHub"
         />

layouts/DocsPage/components.tsx

@@ -44,7 +44,7 @@ export const components = {
   code: Code,
   inlineCode: Code,
   // eslint-disable-next-line jsx-a11y/alt-text
-  img: (props) => <Image {...props} />,
+  img: (props) => <Image {...props} />, // needed to circumvent props mismatch in types
   iframe: IFrame,
   h1: H1,
   h2: H2,
@@ -62,24 +62,24 @@ export const components = {
   th: TH,
   td: TD,
   video: Video,
-  Admonition,
-  Command,
-  CommandLine,
-  CommandComment,
-  Icon,
-  InlineCode,
-  ScopedBlock,
-  Tabs,
-  TabItem,
-  Tile,
-  TileSet,
-  TileList,
-  TileListItem,
-  TileImage,
-  Figure,
-  Notice,
-  Snippet,
-  Details,
-  Var,
-  VarList,
+  admonition: Admonition,
+  command: Command,
+  commandline: CommandLine,
+  commandcomment: CommandComment,
+  icon: Icon,
+  inlinecode: InlineCode,
+  scopedblock: ScopedBlock,
+  tabs: Tabs,
+  tabitem: TabItem,
+  tile: Tile,
+  tileset: TileSet,
+  tilelist: TileList,
+  tilelistitem: TileListItem,
+  tileimage: TileImage,
+  figure: Figure,
+  notice: Notice,
+  snippet: Snippet,
+  details: Details,
+  var: (props) => <Var {...props} />, // needed to circumvent props mismatch in types
+  varlist: VarList,
 };

layouts/DocsPage/index.ts

@@ -1,4 +1,4 @@
 export { default } from "./DocsPage";
 export { VersionWarning } from "./VersionWarning";
 
-export type { NavigationCategory } from "./types";
+export type { NavigationCategory, PageMeta } from "./types";