[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

@@ -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 (
+    <div className={clsx("col col--4 ", styles.feature)}>
+      <Link className="navbar__link card" to={to}>
+        <div className="card__header">
+          <h3>
+            <Translate description={header.translateId}>
+              {header.label}
+            </Translate>
+          </h3>
+        </div>
+        <div className="card__body">
+          <p>
+            <Translate description={body.translateId}>{body.label}</Translate>
+          </p>
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export default Card;

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",

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 (
+    <Layout title={title} description={description}>
+      <div className={ThemeClassNames.docPage}>
+        {sidebarItems?.length > 0 && (
+          <aside className={ThemeClassNames.docSidebarContainer}>
+            <DocSidebar sidebar={sidebarItems} path={path}></DocSidebar>
+          </aside>
+        )}
+
+        <main className={ThemeClassNames.docPage}>{children}</main>
+      </div>
+    </Layout>
+  );
+}
+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;
+};

docs/publish-docs.sh

@@ -30,7 +30,8 @@ cat > "$CONFIG_FILE" <<EOF
   "name": "$PROJECT_NAME",
   "scope": "solana-labs",
   "redirects": [
-    { "source": "/apps", "destination": "/developing/programming-model/overview" },
+    { "source": "/apps", "destination": "/developers" },
+    { "source": "/developing/programming-model/overview", "destination": "/developers" },
     { "source": "/apps/backwards-compatibility", "destination": "/developing/backwards-compatibility" },
     { "source": "/apps/break", "destination": "/developing/on-chain-programs/examples" },
     { "source": "/apps/builtins", "destination": "/developing/runtime-facilities/programs" },

docs/sidebars.js

@@ -48,9 +48,9 @@ module.exports = {
       items: [
         "terminology",
         {
-          type: "ref",
+          type: "link",
+          href: "/developers",
           label: "Developers",
-          id: "developing/programming-model/overview",
         },
         {
           type: "ref",
@@ -75,40 +75,100 @@ module.exports = {
       ],
     },
   ],
-  developingSidebar: [
+  developerSidebar: [
     {
-      type: "doc",
-      id: "developing/programming-model/overview",
+      type: "link",
+      href: "/developers",
       label: "Overview",
     },
+    {
+      type: "category",
+      label: "Getting Started",
+      items: [
+        {
+          type: "doc",
+          id: "developing/intro/programs",
+          label: "What are Programs?",
+        },
+        {
+          type: "doc",
+          id: "developing/intro/rent",
+          label: "What is Rent?",
+        },
+      ],
+    },
     {
       type: "category",
       label: "Core Concepts",
       // collapsed: false,
       items: [
-        "developing/programming-model/transactions",
-        "developing/programming-model/accounts",
-        "developing/programming-model/calling-between-programs",
-        "developing/programming-model/runtime",
+        {
+          type: "doc",
+          id: "developing/programming-model/transactions",
+          label: "Transactions",
+        },
+        {
+          type: "doc",
+          id: "developing/programming-model/accounts",
+          label: "Accounts",
+        },
+        {
+          type: "doc",
+          id: "developing/programming-model/calling-between-programs",
+          label: "Calling between programs",
+        },
+        {
+          type: "doc",
+          id: "developing/programming-model/runtime",
+          label: "Runtime",
+        },
       ],
     },
     {
       type: "category",
       label: "Clients",
       items: [
-        "developing/clients/jsonrpc-api",
-        "developing/clients/javascript-api",
-        "developing/clients/javascript-reference",
-        "developing/clients/rust-api",
+        {
+          type: "doc",
+          id: "developing/clients/jsonrpc-api",
+          label: "JSON RPC API",
+        },
+        {
+          type: "doc",
+          id: "developing/clients/javascript-api",
+          label: "Web3 JavaScript API",
+        },
+        {
+          type: "doc",
+          id: "developing/clients/javascript-reference",
+          label: "Web3 API Reference",
+        },
+        {
+          type: "doc",
+          id: "developing/clients/rust-api",
+          label: "Rust API",
+        },
       ],
     },
     {
       type: "category",
       label: "Writing Programs",
       items: [
-        "developing/on-chain-programs/overview",
-        "developing/on-chain-programs/developing-rust",
-        "developing/on-chain-programs/developing-c",
+        {
+          type: "doc",
+          id: "developing/on-chain-programs/overview",
+          label: "Overview",
+        },
+        {
+          type: "doc",
+          id: "developing/on-chain-programs/developing-rust",
+          label: "Developing with Rust",
+        },
+        {
+          type: "doc",
+          id: "developing/on-chain-programs/developing-c",
+          label: "Developing with C/C++",
+        },
         {
           type: "doc",
           label: "Deploying",
@@ -119,8 +179,16 @@ module.exports = {
           label: "Debugging",
           id: "developing/on-chain-programs/debugging",
         },
-        "developing/on-chain-programs/examples",
-        "developing/on-chain-programs/faq",
+        {
+          type: "doc",
+          id: "developing/on-chain-programs/examples",
+          label: "Program Examples",
+        },
+        {
+          type: "doc",
+          id: "developing/on-chain-programs/faq",
+          label: "FAQ",
+        },
       ],
     },
     {
@@ -132,16 +200,30 @@ module.exports = {
           label: "Overview",
           id: "developing/runtime-facilities/programs",
         },
-        "developing/runtime-facilities/sysvars",
+        {
+          type: "doc",
+          id: "developing/runtime-facilities/sysvars",
+          label: "Sysvar Cluster Data",
+        },
       ],
     },
     {
       type: "category",
       label: "Local Development",
       collapsed: false,
-      items: ["developing/test-validator"],
+      items: [
+        {
+          type: "doc",
+          id: "developing/test-validator",
+          label: "Solana Test Validator",
+        },
+      ],
+    },
+    {
+      type: "doc",
+      id: "developing/backwards-compatibility",
+      label: "Backward Compatibility Policy",
     },
-    "developing/backwards-compatibility",
   ],
   validatorsSidebar: [
     "running-validator",
@@ -175,7 +257,6 @@ module.exports = {
   cliSidebar: [
     "cli",
     "cli/install-solana-cli-tools",
-    "cli/install-solana-cli-tools",
     {
       type: "category",
       label: "Command-line Wallets",

docs/src/cli/deploy-a-program.md

@@ -6,7 +6,7 @@ Developers can deploy on-chain [programs](terminology.md#program) (often called
 smart contracts elsewhere) with the Solana tools.
 
 To learn about developing and executing programs on Solana, start with the
-[overview](developing/programming-model/overview.md) and then dig into the
+[intro to Solana programs](developing/intro/programs.md) and then dig into the
 details of [on-chain programs](developing/on-chain-programs/overview.md).
 
 To deploy a program, use the Solana tools to interact with the on-chain loader

docs/src/css/custom.css

@@ -27,10 +27,10 @@
 }
 
 @keyframes fadeInUp {
-  0% {
+  /* 0% {
     opacity: 0;
     transform: translateY(1.5rem);
-  }
+  } */
 }
 
 main {
@@ -44,14 +44,24 @@ main {
   padding: 0 var(--ifm-pre-padding);
 }
 
+.cards__container {
+  margin: 3em 0;
+}
+
+.cards__container .col {
+  margin-bottom: 1em;
+}
+
 .card {
   padding: 1rem;
   margin-top: 0rem;
   animation: fadeInUp 400ms backwards;
   animation-delay: 150ms;
   transition-property: all;
   transition-duration: 200ms;
-  box-shadow: 0 8px 28px 4px rgba(86, 91, 115, 0.15);
+  align-items: start;
+  height: 100%;
+  box-shadow: 0 8px 15px 2px rgba(86, 91, 115, 0.1);
 }
 
 .card a {