[docs] quickstart guides (#27592)

* feat(wip): rust quickstart page

* feat: added quickstart pages

* fix: updated cards and card layout

* feat: added quickstart home (and to sidebar )

* fix: updated quickstarts

* fix: renamed to get started

* fix: typos and seo

* fix: JS example to interact with the onchain program

docs/components/Card.jsx

@@ -4,7 +4,7 @@ import Link from "@docusaurus/Link";
 import styles from "../src/pages/styles.module.css";
 import Translate from "@docusaurus/Translate";
 
-function Card({ to, header, body }) {
+function Card({ to, header, body, externalIcon = false }) {
   /*
   Both the `header` and `body` expect an object with the following type
   header = {
@@ -21,6 +21,20 @@ function Card({ to, header, body }) {
             <Translate description={header.translateId}>
               {header.label}
             </Translate>
+            {externalIcon && (
+              <svg
+                width="13.5"
+                height="13.5"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                className={styles.iconExternalIcon}
+              >
+                <path
+                  fill="currentColor"
+                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+                ></path>
+              </svg>
+            )}
           </h3>
         </div>
         <div className="card__body">

docs/layouts/CardLayout.js

@@ -20,6 +20,7 @@ function CardLayout({
       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]);
+        sidebarItems[key].collapsed = true;
       } else sidebarItems[key] = formatter(sidebarItems[key]);
     });
   }
@@ -63,6 +64,7 @@ const formatter = (item) => {
       label: computeLabel(item) || item || "[unknown label]",
     };
   }
+
   // handle object style docs
   else if (item?.type?.toLowerCase() === "doc") {
     item.type = "link";
@@ -71,5 +73,15 @@ const formatter = (item) => {
     delete item.id;
   }
 
+  // fix for local routing that does not specify starting at the site root
+  if (
+    !(
+      item?.href.startsWith("/") ||
+      item?.href.startsWith("http:") ||
+      item?.href.startsWith("https")
+    )
+  )
+    item.href = `/${item?.href}`;
+
   return item;
 };

docs/sidebars.js

@@ -83,34 +83,74 @@ module.exports = {
     },
     {
       type: "category",
-      label: "Getting Started",
+      label: "Get Started",
       items: [
+        {
+          type: "link",
+          href: "/getstarted",
+          label: "All guides",
+        },
         {
           type: "doc",
-          id: "developing/intro/programs",
-          label: "What are Programs?",
+          id: "getstarted/hello-world",
+          label: "Hello world",
         },
         {
           type: "doc",
-          id: "developing/intro/rent",
-          label: "What is Rent?",
+          id: "getstarted/local",
+          label: "Local development",
+        },
+        {
+          type: "doc",
+          id: "getstarted/rust",
+          label: "Rust program",
         },
+        // {
+        //   type: "doc",
+        //   id: "getstarted/token",
+        //   label: "Create a token",
+        // },
+        // {
+        //   type: "doc",
+        //   id: "getstarted/nft",
+        //   label: "Create a NFT",
+        // },
+        // {
+        //   type: "doc",
+        //   id: "getstarted/c",
+        //   label: "C / C++",
+        // },
+        // {
+        //   type: "doc",
+        //   id: "getstarted/web3js",
+        //   label: "Web3.js",
+        // },
       ],
     },
     {
       type: "category",
       label: "Core Concepts",
       // collapsed: false,
       items: [
+        {
+          type: "doc",
+          id: "developing/programming-model/accounts",
+          label: "Accounts",
+        },
         {
           type: "doc",
           id: "developing/programming-model/transactions",
           label: "Transactions",
         },
         {
           type: "doc",
-          id: "developing/programming-model/accounts",
-          label: "Accounts",
+          id: "developing/intro/programs",
+          label: "Programs",
+        },
+        {
+          type: "doc",
+          id: "developing/intro/rent",
+          label: "Rent",
         },
         {
           type: "doc",

docs/src/css/custom.css

@@ -44,6 +44,18 @@ main {
   padding: 0 var(--ifm-pre-padding);
 }
 
+.button {
+  background-color: var(--ifm-link-color);
+  color: var(--ifm-background-surface-color) !important;
+  padding: 0.5em 0.8em;
+  border: 0px solid red;
+  font-size: 1em !important;
+}
+
+.container__spacer {
+  margin: 0em 1em 3em 1em;
+}
+
 .cards__container {
   margin: 3em 0;
 }