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 ( + +
+ {sidebarItems?.length > 0 && ( + + )} + +
{children}
+
+ + ); +} +export default CardLayout; + +/* + Create a simple label based on the string of a doc file path +*/ +const computeLabel = (label) => { + label = label.split("/"); + label = label[label?.length - 1]?.replace("-", " "); + label = label.charAt(0).toUpperCase() + label.slice(1); + return label && label; +}; + +/* + Parser to format a sidebar item to be compatible with the `DocSidebar` component +*/ +const formatter = (item) => { + // handle string only document ids + if (typeof item === "string") { + item = { + type: "link", + href: item, + label: computeLabel(item) || item || "[unknown label]", + }; + } + // handle object style docs + else if (item?.type?.toLowerCase() === "doc") { + item.type = "link"; + item.href = item.id; + item.label = item.label || computeLabel(item.href) || "[unknown label]"; + delete item.id; + } + + return item; +}; diff --git a/docs/publish-docs.sh b/docs/publish-docs.sh index 1ec68a243a..898fd415f5 100755 --- a/docs/publish-docs.sh +++ b/docs/publish-docs.sh @@ -30,7 +30,8 @@ cat > "$CONFIG_FILE" < +
+
+
+

Learn Solana development

+ +
+ + + + + +
+
+ +
+

Learn through coding

+ +
+ + + + + +
+
+ +
+

Setup your local development

+ +
+ + + + {/* future card to replace the RPC API card */} + {/* */} + + +
+
+
+
+ + ); +} + +export default Developers; diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 4c6d4b98f8..80558d6470 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -1,154 +1,96 @@ import React from "react"; -import clsx from "clsx"; import Layout from "@theme/Layout"; -import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -// import useBaseUrl from "@docusaurus/useBaseUrl"; import styles from "./styles.module.css"; -import Translate from "@docusaurus/Translate"; -// import { translate } from "@docusaurus/Translate"; +import Card from "../../components/Card"; function Home() { const context = useDocusaurusContext(); const { siteConfig = {} } = context; + return (
-
- -
-
-

- - ⛏ Start Developing - -

-
-
-

- - Get started building your decentralized app or - marketplace with Solana. - -

-
-
- -
-
- -
-
-

- - 🎛 Run a Validator Node - -

-
-
-

- - Validate transactions, secure the network, and earn - rewards. - -

-
-
- -
-
- -
-
-

- - 🏛 Create an SPL Token - -

-
-
-

- - Launch your own SPL Token, Solana's equivalent of - ERC-20. - -

-
-
- -
-
- -
-
-

- - 🏦 Integrate an Exchange - -

-
-
-

- - Follow our extensive integration guide to ensure a - seamless user experience. - -

-
-
- -
-
- -
-
-

- - 📲 Manage a Wallet - -

-
-
-

- - Create a wallet, check your balance, and learn about - wallet options. - -

-
-
- -
-
- -
-
-

- - 🤯 Learn How Solana Works - -

-
-
-

- - Get a high-level understanding of Solana's - architecture. - -

-
-
- -
+ + + + + + + + + + +