diff --git a/docs/components/Card.jsx b/docs/components/Card.jsx
new file mode 100644
index 0000000000..7b94dadea7
--- /dev/null
+++ b/docs/components/Card.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import styles from "../src/pages/styles.module.css";
+import Translate from "@docusaurus/Translate";
+
+function Card({ to, header, body }) {
+ /*
+ Both the `header` and `body` expect an object with the following type
+ header = {
+ label: String, //
+ translateId: String //
+ }
+ */
+
+ return (
+
+
+
+
+
+ {header.label}
+
+
+
+
+
+ {body.label}
+
+
+
+
+ );
+}
+
+export default Card;
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index fd7bdac977..088f7ca7bd 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -68,7 +68,7 @@ module.exports = {
position: "left",
},
{
- to: "developing/programming-model/overview",
+ to: "/developers",
label: "Developers",
position: "left",
},
@@ -131,7 +131,7 @@ module.exports = {
},
{
label: "Developers",
- to: "developing/programming-model/overview",
+ to: "/developers",
},
{
label: "Validators",
diff --git a/docs/layouts/CardLayout.js b/docs/layouts/CardLayout.js
new file mode 100644
index 0000000000..7fbcd71de7
--- /dev/null
+++ b/docs/layouts/CardLayout.js
@@ -0,0 +1,75 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import DocSidebar from "@theme/DocSidebar";
+import ThemeClassNames from "@docusaurus/theme-classic/lib/theme/DocPage/styles.module.css";
+import sidebar from "../sidebars";
+
+function CardLayout({
+ children,
+ sidebarKey = false,
+ title = "",
+ description = "",
+ path = "",
+}) {
+ // load the sidebar item from the master `sidebars.js` file
+ const sidebarItems = (sidebarKey && sidebar?.[sidebarKey]) || [];
+
+ // process each of the loaded sidebar items for formatting
+ if (sidebarItems?.length) {
+ Object.keys(sidebarItems).forEach((key) => {
+ if (sidebarItems[key]?.type?.toLowerCase() === "category") {
+ for (let i = 0; i < sidebarItems[key]?.items?.length; i++)
+ sidebarItems[key].items[i] = formatter(sidebarItems[key].items[i]);
+ } else sidebarItems[key] = formatter(sidebarItems[key]);
+ });
+ }
+
+ // return the page layout, ready to go
+ return (
+
+