chore: sync shared Docusaurus components

docs/site/src/shared/components/Cards/index.tsx

@@ -1,9 +1,10 @@
 // Copyright (c) Walrus Foundation
 // SPDX-License-Identifier: Apache-2.0
+
 import React, { useEffect, useState } from "react";
 import { useHistory } from "@docusaurus/router";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import styles from "../../../css/cards.module.css";
+import styles from "@site/src/css/cards.module.css";
 
 interface CardProps {
   title: string;
@@ -14,27 +15,25 @@
 
 export function Card({ title, href, className, children }: CardProps) {
   const history = useHistory();
-  const [url, setUrl] = useState();
+  const [url, setUrl] = useState<string | undefined>();
 
   useEffect(() => {
     if (url) {
       window.open(url, "_blank");
     }
-    return;
   }, [url]);
 
-  const { descriptions } = usePluginData("sui-description-plugin");
+  const data = usePluginData("hashi-description-plugin") as
+    | { descriptions: { id: string; description: string }[] }
+    | undefined;
   let h = href;
   if (!h.match(/^\//)) {
     h = `/${h}`;
   }
-  const d = descriptions.find((desc) => desc["id"] === h);
-  let description = "";
-  if (typeof d !== "undefined") {
-    description = d.description;
-  }
+  const d = data?.descriptions?.find((desc) => desc.id === h);
+  const description = d?.description ?? "";
 
-  const handleClick = (loc) => {
+  const handleClick = (loc: string) => {
     if (loc.match(/^https?/)) {
       setUrl(loc);
     } else {
@@ -44,13 +43,12 @@
 
   return (
     <div
-      className={`${styles.card} ${className}`}
+      className={`${styles.card} ${className ?? ""}`}
       onClick={() => handleClick(href)}
     >
       <div className={styles.card__header}>
         <h2 className={styles.card__header__copy}>{title}</h2>
       </div>
-
       <div className={styles.card__copy}>
         {children ? children : description}
       </div>
@@ -75,13 +73,14 @@
     "pb-8",
   ].join(" ");
 
-  const typeClass = type === "steps"
-    ? styles["step-card-container"]
-    : styles["card-container"];
+  const typeClass =
+    type === "steps" ? styles["step-card-container"] : styles["card-container"];
 
   return (
     <div className={`${baseClasses} ${typeClass}`} {...props}>
       {children}
     </div>
   );
 }
+
+export default Cards;

docs/site/src/shared/components/RelatedLink/index.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) Walrus Foundation
 // SPDX-License-Identifier: Apache-2.0
 
-
 // src/components/RelatedLink.tsx
 import React from "react";
 import Link from "@docusaurus/Link";
@@ -22,7 +21,7 @@
 
 function useDescriptionsSafe(): Meta[] | null {
   try {
-    const raw = usePluginData("sui-description-plugin") as any;
+    const raw = usePluginData("hashi-description-plugin") as any;
     if (!raw) return null;
     if (Array.isArray(raw)) return raw as Meta[];
     if (Array.isArray(raw?.items)) return raw.items as Meta[];

docs/site/src/shared/components/SidebarIframe/index.js

@@ -1,10 +1,9 @@
 // Copyright (c) Walrus Foundation
 // SPDX-License-Identifier: Apache-2.0
 
-
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import styles from "../../../css/sidebar.module.css";
+import styles from "@site/src/css/sidebar.module.css";
 
 export default function SidebarIframe({
   url,

docs/site/src/shared/components/Snippet/index.tsx

@@ -1,36 +1,33 @@
 // Copyright (c) Walrus Foundation
 // SPDX-License-Identifier: Apache-2.0
 
-
 import React from "react";
 
 /**
- * We glob-import every MDX file under @site/snippets/**.
- * Docusaurus (Webpack 5) supports require.context at build time.
+ * Glob-imports every MDX file under docs/snippets at build time via
+ * Webpack's require.context.
  */
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const req = require.context("../../../../content/snippets", true, /\.mdx$/);
+const req = (require as any).context(
+  "../../../../docs/snippets",
+  true,
+  /\.mdx$/,
+);
 
 type SnippetModule = { default: React.ComponentType<any> };
-
 const SNIPPETS: Record<string, React.ComponentType<any>> = {};
 req.keys().forEach((k: string) => {
-  const mod = req<SnippetModule>(k);
-  const keyWithExt = k.replace(/^\.\//, ""); // e.g. "sub/foo.mdx"
-  const keyNoExt = keyWithExt.replace(/\.mdx$/, ""); // e.g. "sub/foo"
+  const mod = req(k) as SnippetModule;
+  const keyWithExt = k.replace(/^\.\//, "");
+  const keyNoExt = keyWithExt.replace(/\.mdx$/, "");
   SNIPPETS[keyWithExt] = mod.default;
   SNIPPETS[keyNoExt] = mod.default;
 });
 
 type Props = {
-  /** Path under snippets/, e.g. "subfolder-of-snippet/file" or "subfolder-of-snippet/file.mdx" */
   source: string;
 } & Record<string, any>;
 
-/**
- * Renders the MDX snippet inline, inheriting parent MDX providers
- * (so code blocks, custom components, etc. all work).
- */
 export default function Snippet({ source, ...rest }: Props) {
   const Comp =
     SNIPPETS[source] ||
@@ -44,7 +41,5 @@ export default function Snippet({ source, ...rest }: Props) {
       </div>
     );
   }
-
-  // Render the snippet's MDX component inline
   return <Comp {...rest} />;
 }

docs/site/src/shared/components/UnsafeLink/index.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) Walrus Foundation
 // SPDX-License-Identifier: Apache-2.0
 
-
 import React from "react";
 
 type Props = {
@@ -11,11 +10,8 @@ type Props = {
 };
 
 /**
- * Renders either a Docusaurus <Link> for internal paths
- * or an <a target="_blank"> for external URLs.
- * This bypasses the broken-link checker since it’s a component,
- * not a raw markdown link. Should never have an external link
- * using this, but jic.
+ * Renders either an internal anchor or an external <a target="_blank">.
+ * Bypasses the broken-link checker since it's a component, not raw markdown.
  */
 export default function UnsafeLink({ href, children, className }: Props) {
   const isExternal = /^https?:\/\//.test(href);

docs/site/src/shared/plugins/inject-code/index.js

@@ -1,13 +1,22 @@
 // Copyright (c) Walrus Foundation
 // SPDX-License-Identifier: Apache-2.0
+//
+// Registers the stepLoader webpack loader on .md/.mdx files so step heading
+// shorthands (`##step Foo` / `###substep Bar`) get rewritten to numbered
+// headings before docusaurus-plugin-content-docs's MDX loader sees them.
+//
+// In the Sui upstream this plugin used to also register an injectLoader to
+// power <ImportContent mode="code">. That loader is no longer in the upstream
+// tree; <ImportContent mode="code"> now uses the importContentMap generated by
+// scripts/generate-import-context.js at prebuild time.
 
 const path = require("path");
 
-const injectCode = (context, opts) => {
+const injectCode = (_context, _opts) => {
   return {
-    name: "sui-inject-code-plugin",
+    name: "hashi-inject-code-plugin",
 
-    configureWebpack(config, _isServer, _utils) {
+    configureWebpack(config) {
       const pluginContentDocsPath = path.join(
         "plugin-content-docs",
         "lib",
@@ -16,35 +25,27 @@
       );
       let docsPluginInclude = [];
       if (config.module && config.module.rules) {
-        var foundContentDocsPlugin = false;
+        let foundContentDocsPlugin = false;
         config.module.rules.forEach((rule) => {
-          if (rule === "...") {
-            return;
-          }
-
+          if (rule === "...") return;
           if (!foundContentDocsPlugin && rule.use && rule.include) {
-            const includesArray = rule.include;
             const useArray = rule.use;
             useArray.forEach((useItem) => {
-              if (typeof useItem == "object" && useItem.loader) {
-                if (useItem.loader.endsWith(pluginContentDocsPath)) {
-                  foundContentDocsPlugin = true;
-                }
+              if (
+                typeof useItem === "object" &&
+                useItem.loader &&
+                useItem.loader.endsWith(pluginContentDocsPath)
+              ) {
+                foundContentDocsPlugin = true;
               }
             });
             if (foundContentDocsPlugin) {
-              docsPluginInclude = [...includesArray]; // copy the include paths docusaurus-plugin-content-docs
+              docsPluginInclude = [...rule.include];
             }
           }
         });
       }
 
-      const loaderOptions = {
-        replacements: opts.replacements,
-        embeds: opts.embeds,
-        sharedFolders: opts.sharedFolders,
-      };
-
       return {
         module: {
           rules: [
@@ -55,10 +56,6 @@
                 {
                   loader: path.resolve(__dirname, "./stepLoader.js"),
                 },
-                {
-                  loader: path.resolve(__dirname, "./injectLoader.js"),
-                  options: loaderOptions,
-                },
               ],
             },
           ],