From 1f8258f5471b6b4fb681ac5253e9e09feef1866b Mon Sep 17 00:00:00 2001
From: Nick Frostbutter <75431177+nickfrosty@users.noreply.github.com>
Date: Wed, 31 Aug 2022 13:32:36 -0400
Subject: [PATCH] [docs] developers home page (#27436)
* feat: developers landing page
* fix: updated links
* fix: updated labels for translateIds
* refactor: updated index page to use Card component
* style: removed whitespace
* refactor: added static labels for developer sidebar items
* feat: developer's sidebar and new layout file
* chore: removed whitespace
* fix: removed duplicate CLI sidebar item
* fix: card shadows and RPC card text
---
docs/components/Card.jsx | 36 ++++++
docs/docusaurus.config.js | 4 +-
docs/layouts/CardLayout.js | 75 +++++++++++
docs/publish-docs.sh | 3 +-
docs/sidebars.js | 122 +++++++++++++----
docs/src/cli/deploy-a-program.md | 2 +-
docs/src/css/custom.css | 16 ++-
docs/src/pages/developers.js | 168 ++++++++++++++++++++++++
docs/src/pages/index.js | 216 +++++++++++--------------------
9 files changed, 475 insertions(+), 167 deletions(-)
create mode 100644 docs/components/Card.jsx
create mode 100644 docs/layouts/CardLayout.js
create mode 100644 docs/src/pages/developers.js
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}
+
+
+
+
+
+
+ );
+}
+
+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.
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+