[docs] new JSON RPC API docs format (backport #29772)

docs/components/CodeDocBlock.jsx

@@ -0,0 +1,161 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+// import clsx from "clsx";
+import styles from "../src/pages/CodeDocBlock.module.css";
+
+export function DocBlock({ children }) {
+  return <section className={styles.DocBlock}>{children}</section>;
+}
+
+export function DocSideBySide({ children }) {
+  return <section className={styles.DocSideBySide}>{children}</section>;
+}
+
+export function CodeParams({ children }) {
+  return <section className={styles.CodeParams}>{children}</section>;
+}
+
+export function CodeSnippets({ children }) {
+  return (
+    <section className={styles.CodeSnippets}>
+      {/* <p className={styles.Heading}>Code Sample:</p> */}
+
+      {children}
+    </section>
+  );
+}
+
+/*
+  Display a single Parameter
+*/
+export function Parameter(props) {
+  const {
+    name = null,
+    type = null,
+    required = null,
+    optional = null,
+    children,
+  } = computeHeader(props);
+
+  return (
+    <section className={styles.Parameter}>
+      <p className={styles.ParameterHeader}>
+        {name && name} {type && type} {required && required}{" "}
+        {optional && optional}
+      </p>
+
+      {children}
+    </section>
+  );
+}
+
+/*
+  Display a single Parameter's field data
+*/
+export function Field(props) {
+  const {
+    name = null,
+    type = null,
+    values = null,
+    required = null,
+    defaultValue = null,
+    optional = null,
+    children,
+  } = computeHeader(props);
+
+  return (
+    <section className={styles.Field}>
+      <p className={styles.ParameterHeader}>
+        {name && name} {type && type} {required && required}{" "}
+        {optional && optional}
+        {defaultValue && defaultValue}
+      </p>
+
+      <section>
+        {values && values}
+
+        {children}
+      </section>
+    </section>
+  );
+}
+
+/*
+  Parse an array of string values to display
+*/
+export function Values({ values = null }) {
+  // format the Parameter's values
+  if (values && Array.isArray(values) && values?.length) {
+    values = values.map((value) => (
+      <code style={{ marginRight: ".5em" }} key={value}>
+        {value}
+      </code>
+    ));
+  }
+
+  return (
+    <p style={{}}>
+      <span className={styles.SubHeading}>Values:</span>&nbsp;{values}
+    </p>
+  );
+}
+
+/*
+  Compute the formatted Parameter and Field component's header meta data
+*/
+function computeHeader({
+  name = null,
+  type = null,
+  href = null,
+  values = null,
+  required = null,
+  defaultValue = null,
+  optional = null,
+  children,
+}) {
+  // format the Parameter's name
+  if (name) {
+    name = <span className={styles.ParameterName}>{name}</span>;
+
+    if (href) name = <Link href={href}>{name}</Link>;
+  }
+
+  // format the Parameter's type
+  if (type) type = <code>{type}</code>;
+
+  // format the Parameter's values
+  if (values && Array.isArray(values)) {
+    values = values.map((value) => (
+      <code style={{ marginRight: ".5em" }}>{value}</code>
+    ));
+  }
+
+  // format the `defaultValue` flag
+  if (defaultValue) {
+    defaultValue = (
+      <span className={styles.FlagItem}>
+        Default: <code>{defaultValue.toString()}</code>
+      </span>
+    );
+  }
+
+  // format the `required` flag
+  if (required) {
+    required = <span className={styles.FlagItem}>required</span>;
+  }
+  // format the `optional` flag
+  else if (optional) {
+    optional = <span className={styles.FlagItem}>optional</span>;
+  }
+
+  return {
+    name,
+    type,
+    href,
+    values,
+    required,
+    defaultValue,
+    optional,
+    children,
+  };
+}

docs/publish-docs.sh

@@ -38,7 +38,8 @@ cat > "$CONFIG_FILE" <<EOF
     { "source": "/apps/drones", "destination": "/developing/on-chain-programs/examples" },
     { "source": "/apps/hello-world", "destination": "/developing/on-chain-programs/examples" },
     { "source": "/apps/javascript-api", "destination": "/developing/clients/javascript-api" },
-    { "source": "/apps/jsonrpc-api", "destination": "/developing/clients/jsonrpc-api" },
+    { "source": "/apps/jsonrpc-api", "destination": "/api" },
+    { "source": "/developing/clients/jsonrpc-api", "destination": "/api" },
     { "source": "/apps/programming-faq", "destination": "/developing/on-chain-programs/faq" },
     { "source": "/apps/rent", "destination": "/developing/programming-model/accounts#rent" },
     { "source": "/apps/sysvars", "destination": "/developing/runtime-facilities/sysvars" },

docs/sidebars.js

@@ -1,4 +1,6 @@
 module.exports = {
+  // load the API specific sidebars file
+  ...require("./sidebars/api.js"),
   introductionSidebar: [
     {
       type: "category",
@@ -185,8 +187,8 @@ module.exports = {
       label: "Clients",
       items: [
         {
-          type: "doc",
-          id: "developing/clients/jsonrpc-api",
+          type: "link",
+          href: "/api",
           label: "JSON RPC API",
         },
         {