chore: sync shared Docusaurus components

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

@@ -116,7 +116,12 @@ export default function AgentPrompt({ prompt }: { prompt: string }) {
                   key={agent.id}
                   type="button"
                   role="menuitem"
-                  className={`${styles.item} plausible-event-name=open+agent+prompt plausible-event-agent=${agent.id} plausible-event-page=${pageName}`}
+                  className={[
+                    styles.item,
+                    "plausible-event-name=open+agent+prompt",
+                    `plausible-event-agent=${agent.id}`,
+                    `plausible-event-page=${pageName}`,
+                  ].join(" ")}
                   onClick={() => openAgent(agent)}
                 >
                   {agent.label}

docs/site/src/shared/components/AgentPrompt/styles.module.css

@@ -66,14 +66,26 @@
 }
 
 .copyBtn {
-  border: 1px solid var(--ifm-color-emphasis-300);
+  border: 1px solid var(--ifm-color-emphasis-500);
   background: transparent;
-  color: var(--ifm-color-emphasis-800);
+  color: var(--ifm-color-emphasis-900);
+}
+
+:global([data-theme='dark']) .copyBtn {
+  color: #faf8f5;
+  border-color: rgba(255, 255, 255, 0.25);
 }
 
 .copyBtn:hover {
-  border-color: var(--ifm-color-emphasis-500);
-  color: var(--ifm-heading-color);
+  border-color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-900);
+}
+
+:global([data-theme='dark']) .copyBtn:hover {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .agentBtn {
@@ -82,11 +94,19 @@
   color: #ffffff;
 }
 
+:global([data-theme='dark']) .agentBtn {
+  color: #1c2228;
+}
+
 .agentBtn:hover {
   background: var(--ifm-color-primary-dark);
   border-color: var(--ifm-color-primary-dark);
 }
 
+:global([data-theme='dark']) .agentBtn:hover {
+  color: #1c2228;
+}
+
 .caret {
   font-size: 0.7rem;
   line-height: 1;

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

@@ -6,7 +6,7 @@
 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;
@@ -17,27 +17,25 @@ interface CardProps {
 
 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 {
@@ -47,13 +45,12 @@ export function Card({ title, href, className, children }: CardProps) {
 
   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>
@@ -78,13 +75,14 @@ export function Cards({ children, type, ...props }: CardsProps) {
     "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

@@ -23,7 +23,7 @@ type Meta = {
 
 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

@@ -5,7 +5,7 @@
 
 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

@@ -6,32 +6,30 @@
 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] ||
@@ -45,7 +43,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

@@ -12,11 +12,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

@@ -2,14 +2,23 @@
 // Copyright (c) Mysten Labs, Inc.
 // 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",
@@ -18,35 +27,27 @@ const injectCode = (context, opts) => {
       );
       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: [
@@ -57,10 +58,6 @@ const injectCode = (context, opts) => {
                 {
                   loader: path.resolve(__dirname, "./stepLoader.js"),
                 },
-                {
-                  loader: path.resolve(__dirname, "./injectLoader.js"),
-                  options: loaderOptions,
-                },
               ],
             },
           ],