Multiple Updates to Docs

Reorganized docs, updated the dark theme and how code is displayed.

docs/2.develop/contracts/introduction.md

@@ -3,22 +3,18 @@ id: introduction
 title: Prerequisites
 ---
 
-To develop a smart contract you will need to install Node.js. If you further want to use Rust as your main language, then you need to install `rustup` as well.
-
-<hr class="subsection" />
-
-## Node.js
-Download and install [Node.js](https://nodejs.org/en/download/).
+To develop a smart contract you will need to install [Node.js](https://nodejs.org/en/download/).
 
 :::tip
 We further recommend to install [yarn](https://yarnpkg.com) using `npm install -g yarn`.
 :::
 
-<hr class="subsection" />
+---
 
-## Rust and Wasm
+### Rust
+If you prefer to use Rust as your main language, then you need to install `rustup` as well.
 
-Follow [these instructions](https://doc.rust-lang.org/book/ch01-01-installation.html) for setting up Rust. Then, add the `wasm32-unknown-unknown` toolchain which enables compiling Rust to [Web Assembly (wasm)](https://webassembly.org/), the low-level language used by the NEAR platform.
+Follow the instructions bellow to [setup Rust](https://doc.rust-lang.org/book/ch01-01-installation.html), also adding the toolchain to compiling Rust to [Web Assembly (wasm)](https://webassembly.org/), the low-level language used by the NEAR platform.
 
 ```bash
 # Installing Rust in Linux and MacOS

docs/2.develop/integrate/welcome.md

@@ -51,7 +51,7 @@ Welcome! Here you will find documentation on how to build Web3 applications usin
         </div>
       </a>
     </div>
-        <div class="col col--3">
+    <div class="col col--3">
       <a href="/develop/integrate/backend-login">
         <div class="card">
           <div class="card__image">
@@ -69,29 +69,24 @@ Welcome! Here you will find documentation on how to build Web3 applications usin
 
 
 <FeatureList>
-  <Column title="Build dApps">
-    <Feature url="/develop/quickstart-guide" title="Quickstart" subtitle="Spin-up your first dApp" image="quickstart.png" highlight="true" />
-    <Feature url="/tutorials/welcome" title="Tutorials & Examples" subtitle="Check-out a vast library of examples" image="tutorials.png" />
-    <Feature url="/develop/contracts/introduction" title="Build a Contract" subtitle="Learn how to write smart contracts" image="smartcontract.png" />
-    <Feature url="/develop/testing/introduction" title="Test the Contract" subtitle="Write unit & integration tests" image="test.png" />
-    <Feature url="/develop/integrate/frontend" title="Build a Web Frontend" subtitle="Learn how to make a web dApp" image="frontend.png" />
-    <Feature url="/tools/realtime" title="Track Your Users Activity" subtitle="Learn how to use Indexers" image="monitor.png" />
+  <Column title="Composable Apps">
+    <Feature url="/bos/overview" title="Overview" subtitle="Why you should use BOS" image="bos.png" />
+    <Feature url="/bos/tutorial/quickstart" title="Quickstart" subtitle="Build your first component!" image="quickstart.png" />
+    <Feature url="/bos/components" title="Components" subtitle="Build composable applications" image="frontend-bos.png" />
+    <Feature url="/bos/api/home" title="API" subtitle="Interact with the blockchain" image="api.png" />
+    <Feature url="/bos/dev/vscode" title="VSCode Extension" subtitle="Develop components in vscode" image="vscode.png" />
   </Column>
-  <Column title="Developer Tools">
-    <Feature url="/sdk/js/introduction" title="Javascript SDK" subtitle="Write Contracts in Javascript" image="smartcontract-js.png" />
-    <Feature url="/sdk/rust/introduction" title="Rust SDK" subtitle="Write Contracts in Rust" image="smartcontract-rust.png" />
-    <Feature url="/tools/near-cli" title="NEAR CLI" subtitle="Use NEAR from the Terminal" image="near-cli.png" />
-    <Feature url="/tools/near-api-js/quick-reference" title="NEAR API JS" subtitle="Interact with NEAR from JS" image="near-api-js.png" />
-    <Feature url="/api/rpc/introduction" title="RPC API" subtitle="Interact with the NEAR RPC API" image="rpc.png" />
-    <Feature url="/tools/indexer-for-explorer" title="Indexer for Explorer" subtitle="Query usage information for a contract" image="blocks.png" />
+  <Column title="Tutorials">
+    <Feature url="/bos/tutorial/quickstart" title="Quickstart" subtitle="Build your first component!" image="quickstart.png" />
+    <Feature url="/bos/tutorial/hello-near" title="Contract Interaction" subtitle="Connect your app to a smart contract" image="bos-contract.png" />
+    <Feature url="/bos/tutorial/hello-lido" title="Multi-Chain" subtitle="Connect your app to Ethereum" image="bos-lido.png" />
+    <Feature url="/bos/tutorial/ds-components" title="Styling" subtitle="Style your application" image="multiple.png" />
   </Column>
-  <Column title="Unleash the Web3">
-    <Feature url="/develop/relevant-contracts/ft" title="Fungible Tokens" subtitle="Learn how to use and make FT" image="ft.png" />
-    <Feature url="/develop/relevant-contracts/nft" title="Non-Fungible Tokens" subtitle="Enter the NFT space" image="nft.png" />
-    <Feature url="/develop/relevant-contracts/dao" title="Autonomous Organizations" subtitle="Understand DAOs" image="dao.png" />
-    <Feature url="/develop/relevant-contracts/oracles" title="Oracles" subtitle="Supercharge your app with on-chain oracles" image="oracle.png" />
-    <Feature url="https://rainbowbridge.app/transfer" title="Rainbow Bridge" subtitle="Bridge assets with other chains" image="rainbow.png" />
-    <Feature url="https://aurora.dev" title="Aurora EVM" subtitle="Run Ethereum apps natively" image="aurora.png" />
+  <Column title="Discover Gateways">
+    <Feature url="https://near.org" title="near.org" subtitle="The main access gate to BOS" image="near-logo.png" />
+    <Feature url="https://near.social" title="NEAR Social" subtitle="The first BOS gate" image="near-social.png" />
+    <Feature url="https://bos.gg" title="bos.gg" subtitle="Near Loves Ethereum" image="near-eth.png" />
+    <Feature url="https://welldone-gateway.vercel.app/" title="WellDone Gateway" subtitle="A multichain gateway" image="welldone.png" />
   </Column>
 </FeatureList>
 

docs/2.develop/quickstart.md

@@ -123,8 +123,9 @@ You will find the integration tests for `hello-near` in `integration-tests/`.
 
 ## Moving Forward
 
-That's it for our first quickstart tutorial. You have now seen a fully functional contract with
-a minimal user interface and testing. Go ahead and check our [examples](/tutorials/welcome) or proceed straight to the [Develop section](./contracts/anatomy.md) to know how to write your own contract.
+That's it for our first quickstart tutorial. You have now seen a fully functional contract with a minimal user interface and testing.
+
+Go ahead and check other [examples](/tutorials/examples/guest-book) or proceed straight to the [Develop section](./contracts/anatomy.md) to know how to write your own contract.
 
 If you have any questions, do not hesitate in joining us on [Discord](https://near.chat). We regularly host Office Hours, in which you can join our voice channel and ask questions.
 

docs/bos/index.md

@@ -13,6 +13,7 @@ Build fully decentralized applications for all chains. Publish and get discovere
 <FeatureList>
   <Column title="Build Web Applications">
     <Feature url="/bos/overview" title="Overview" subtitle="Why you should use BOS" image="bos.png" />
+    <Feature url="/bos/tutorial/quickstart" title="Quickstart" subtitle="Build your first component!" image="quickstart.png" />
     <Feature url="/bos/home" title="Components" subtitle="Build composable applications" image="frontend-bos.png" />
     <Feature url="/bos/api/home" title="API" subtitle="Interact with the blockchain" image="api.png" />
     <Feature url="/bos/dev/vscode" title="VSCode Extension" subtitle="Develop components in vscode" image="vscode.png" />

docs/index.md

@@ -50,45 +50,44 @@ Welcome, this is the starting point for all NEAR documentation. Learn to build a
       </a>
     </div>
     <div class="col col--4">
-      <a href="/concepts/welcome">
+      <a href="#">
         <div class="card">
           <div class="card__image">
-            <img src={require("@site/static/docs/assets/welcome-pages/tools.png").default} alt="Tools" />
+            <img src={require("@site/static/docs/assets/welcome-pages/examples.png").default} alt="Solutions" />
           </div>
           <div class="card__body">
-            <h3>NEAR Tools</h3>
-              Info on our SDK, API, CLI, and more.
+            <h3>NEAR Primitives</h3>
+              Reliable solutions powered by NEAR.
           </div>
         </div>
       </a>
     </div>
     <div class="col col--4">
-      <a href="/bos">
+      <a href="/concepts/welcome">
         <div class="card">
           <div class="card__image">
-            <img src={require("@site/static/docs/assets/welcome-pages/data-lake.png").default} alt="Data Lake" />
+            <img src={require("@site/static/docs/assets/welcome-pages/tools.png").default} alt="Tools" />
           </div>
           <div class="card__body">
-            <h3>Query On-Chain Information</h3>
-              Learn about indexers and our data lake.
+            <h3>NEAR Tools</h3>
+              Info on our SDK, API, CLI, and more.
           </div>
         </div>
       </a>
     </div>
     <div class="col col--4">
-      <a href="#">
+      <a href="/bos">
         <div class="card">
           <div class="card__image">
-            <img src={require("@site/static/docs/assets/welcome-pages/examples.png").default} alt="Solutions" />
+            <img src={require("@site/static/docs/assets/welcome-pages/data-lake.png").default} alt="Data Lake" />
           </div>
           <div class="card__body">
-            <h3>Pre-Built Solutions</h3>
-              Reliable solutions powered by NEAR.
+            <h3>Query On-Chain Information</h3>
+              Learn about indexers and our data lake.
           </div>
         </div>
       </a>
     </div>
-
   </div>
 </div>
 
@@ -106,7 +105,7 @@ Welcome, this is the starting point for all NEAR documentation. Learn to build a
     <Feature url="/concepts/basics/transactions/overview" title="Transactions" subtitle="Fast and Inexpensive" image="transaction.png" />
     <Feature url="/concepts/basics/validators" title="Validators" subtitle="Learn how the network stays safe" image="validation.png" />
   </Column>
-  <Column title="Developer Documentation" size="3">
+  <Column title="Developer Docs" size="3">
     <Feature url="/develop/quickstart-guide" title="Quickstart" subtitle="Spin-up your first dApp" image="quickstart.png" />
     <Feature url="/tutorials/welcome" title="Tutorials & Examples" subtitle="Check out a vast library of examples" image="tutorials.png" />
     <Feature url="/develop/contracts/introduction" title="Build a Contract" subtitle="Learn how to write smart contracts" image="smartcontract.png" />

website/docusaurus.config.js

@@ -117,7 +117,7 @@ module.exports = {
           items: [
             { label: "Smart Contracts", href: "/develop/contracts/welcome" },
             { label: "Web3 Applications", href: "/develop/integrate/welcome" },
-            { label: "Monitor the Network (Indexers)", href: "/tools/realtime" },
+            { label: "Monitor the Chain", href: "/tools/realtime" },
             {
               type: 'html',
               value: '<hr/>',

website/sidebars.json

@@ -631,18 +631,14 @@
     {
       "type": "link",
       "label": "Wallet Selector ↗",
-      "href": "/tools/wallet-selector"
+      "href": "tools/wallet-selector"
     },
     {
       "type": "link",
       "label": "BOS CLI",
       "href": "https://github.com/FroVolod/bos-cli-rs"
     },
-    {
-      "type": "link",
-      "label": "VSCODE Extension",
-      "href": "https://github.com/near/near-vscode"
-    }
+    "bos/dev/vscode"
   ],
   "indexers": [
     "tools/realtime",

website/src/css/customTheme.css

@@ -27,6 +27,11 @@
     --near-font-color: #3c3c3c;
 }
 
+[data-theme="dark"] {
+    --ifm-color-primary: #82aaff;
+    --near-color-royal: #82aaff;
+}
+
 .text-center {
     text-align: center !important;
 }
@@ -91,7 +96,6 @@ ol li::marker {
 }
 
 .prism-code {
-    border-radius: 0 !important;
     text-align: left;
 }
 
@@ -149,6 +153,24 @@ a:hover {
     color: var(--ifm-font-color-base);
 }
 
+/* code */
+.codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module {
+    padding: 0.5rem var(--ifm-pre-padding) !important;
+}
+
+.codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module {
+    border-bottom-left-radius: 30px !important;
+}
+
+.tabItem_node_modules-\@docusaurus-theme-classic-lib-theme-TabItem-styles-module {
+    padding: .7rem 0 0 0;
+}
+
+.tabItem_node_modules-\@docusaurus-theme-classic-lib-theme-TabItem-styles-module>.tabItem_node_modules-\@docusaurus-theme-classic-lib-theme-TabItem-styles-module {
+    padding: 0rem;
+    border: none;
+}
+
 /* for image caption */
 img+em,
 .tabs-container+p em {
@@ -168,41 +190,24 @@ img+em,
     margin-bottom: -1rem;
 }
 
-.language-tabs .tabs__item--active {
-    border: 0;
-}
-
 .language-tabs li {
     padding: 0.5em 1em;
 }
 
-[data-theme='light'] .tabs-container>.language-tabs {
-    background-color: #ececec;
-}
-
 .language-tabs li:hover {
     background-color: transparent;
 }
 
 /* Language selection Tabs*/
 .file-tabs {
-    margin-bottom: -1rem;
-    font-size: 12px;
-}
-
-.file-tabs .tabs__item--active {
-    border: 0;
+    margin: -0.5rem 0 -2rem 0;
+    font-size: small;
 }
 
 .file-tabs li {
-    padding: 0.5em 1em;
-}
-
-[data-theme='light'] .tabs-container>.file-tabs {
-    background-color: #292d3e;
-    border-bottom: 1px solid;
-    padding-top: 1px;
-    color: #e3e3e3;
+    padding: 0.5em 0em 0 0em;
+    margin-bottom: 0.5em;
+    margin-right: 1rem;
 }
 
 .file-tabs li:hover {
@@ -214,8 +219,20 @@ img+em,
 }
 
 /* columns */
+.docItemCol_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module {
+    padding: 0 0 0 var(--ifm-spacing-horizontal) !important;
+}
+
 .col {
-    padding: 0 0 0 var(--ifm-spacing-horizontal);
+    padding: 0 calc(var(--ifm-spacing-horizontal)/2);
+}
+
+.col:first-child {
+    padding: 0 calc(var(--ifm-spacing-horizontal)/2) 0 0;
+}
+
+.col:last-child {
+    padding: 0 0 0 calc(var(--ifm-spacing-horizontal)/2);
 }
 
 /* Others */
@@ -1074,45 +1091,45 @@ figcaption a,
     border-radius: 0%;
 }
 
-
-img+em, iframe+em {
-  font-style: normal;
-  display: inherit;
-  text-align: center;
-  font-size: 90%;
-  margin: 0.5em 0 2rem 0;
+img+em,
+iframe+em {
+    font-style: normal;
+    display: inherit;
+    text-align: center;
+    font-size: 90%;
+    margin: 0.5em 0 2rem 0;
 }
 
 .monaco+em {
-  font-style: normal;
-  display: inherit;
-  text-align: right;
-  font-size: 90%;
-  margin: 0.5em 0 0 0;
+    font-style: normal;
+    display: inherit;
+    text-align: right;
+    font-size: 90%;
+    margin: 0.5em 0 0 0;
 }
 
 
 /* Widget Editor */
 .monaco {
-  border-radius: 10px;
-  background-color: #f6f8fa;
-  padding: 1rem;
+    border-radius: 10px;
+    background-color: #f6f8fa;
+    padding: 1rem;
 }
 
 .code_iframe {
-  border-radius: 10px;
-  border: 1px solid #e6e6e6;
-  padding: 1rem;
-  margin-bottom: 3rem;
-  overflow: hidden;
+    border-radius: 10px;
+    border: 1px solid #e6e6e6;
+    padding: 1rem;
+    margin-bottom: 3rem;
+    overflow: hidden;
 }
 
-.code_iframe iframe{
-  min-width: 100%;
-  overflow: hidden;
-  min-height: 160px;
+.code_iframe iframe {
+    min-width: 100%;
+    overflow: hidden;
+    min-height: 160px;
 }
 
 .monaco-editor-background {
-  background-color: #f6f8fa !important;
-}
+    background-color: #f6f8fa !important;
+}