Move XRPLoader component to better place

content/@theme/components/XRPLoader.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface XRPLoaderProps {
+    message?: string
+}
+
+export default function XRPLoader(props: XRPLoaderProps) {
+  return (
+  <div className="loader collapse">
+    <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
+    {props.message}
+  </div>);
+}

content/@theme/markdoc/components.tsx

@@ -4,6 +4,8 @@ import dynamicReact from '@markdoc/markdoc/dist/react';
 import { usePageSharedData } from '@portal/hooks';
 import { Link } from '@portal/Link';
 
+export {default as XRPLoader} from '../components/XRPLoader';
+
 function slugify(text: string) {
     return text
       .toLowerCase()
@@ -41,7 +43,7 @@ export function StartStep(props: { children: React.ReactNode; stepIdx: number; s
             data-steplabel={stepLabel}
             data-stepid={stepId}
           >
-            {props.steps.map((step, idx) => {
+            {props.steps?.map((step, idx) => {
               const iterStepId = slugify(step).toLowerCase();
               let className = `breadcrumb-item bc-${iterStepId}`;
               if (idx > 0) className += ' disabled';

content/@theme/markdoc/schema.ts

@@ -48,3 +48,69 @@ export const codePageName: Schema & { tagName: string } = {
   render: 'CodePageName',
   selfClosing: true,
 };
+
+export const interactiveBlock: Schema & { tagName: string } = {
+  tagName: 'interactive-block',
+  attributes: {
+    label: {
+      type: 'String',
+      required: true,
+    },
+    stepIdx: {
+      type: 'Number',
+      required: true,
+    },
+    steps: {
+      type: 'Array',
+      required: true,
+    },
+    network: {
+      type: 'Object',
+      required: false,
+      default: {
+        name: "Testnet",
+        websocket: "wss://s.altnet.rippletest.net:51233",
+        explorer: "https://testnet.xrpl.org",
+        faucet: "https://faucet.altnet.rippletest.net/accounts",
+      }
+    }
+  },
+  transform(node, config) {
+    const attributes = node.transformAttributes(config);
+    const children = replaceHtmlAttributeValuesVariables(node.transformChildren(config), config.variables.env);
+    return new Tag(this.render, attributes, children);
+  },
+  render: 'InteractiveBlock',
+};
+
+function replaceHtmlAttributeValuesVariables(nodes, variables) {
+  for (const n of nodes) {
+    if (n.attributes) {
+      for (const attribName of Object.keys(n.attributes)) {
+        const v = n.attributes[attribName];
+        if (typeof v !== 'string') continue;
+        n.attributes[attribName] = v.replace(/{%\s*\$env.([\w_\d]+)\s*%}/g, (_, name) => {
+          return variables[name];
+        });
+      }
+    }
+    if (n.children) {
+      replaceHtmlAttributeValuesVariables(n.children, variables);
+    }
+  }
+
+  return nodes;
+}
+
+export const xrpLoader: Schema & { tagName: string } = {
+  tagName: 'loading-icon',
+  attributes: {
+    message: {
+      type: 'String',
+      required: false,
+      default: "...",
+    },
+  },
+  render: 'XRPLoader',
+  selfClosing: true,
+};