new docs page (#287)

* new docs page

* updates

Author: MichaelMacaulay

navigation/navigation.ts

@@ -162,6 +162,9 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
       {
         slug: 'quick-start',
       },
+      {
+        slug: 'base-testnet',
+      },
       {
         slug: 'migrating-a-subgraph',
       },

pages/en/cookbook/base-testnet.mdx

@@ -0,0 +1,109 @@
+---
+title: Building Subgraphs on Base
+---
+
+This guide will quickly take you through how to initialize, create, and deploy your subgraph on Base testnet.
+
+What you'll need:
+
+- A Base testnet contract address
+- A crypto wallet (e.g. MetaMask or Coinbase Wallet)
+
+## Subgraph Studio
+
+### 1. Install the Graph CLI
+
+The Graph CLI (>=v0.41.0) is written in JavaScript and you will need to have either `npm` or `yarn` installed to use it.
+
+```sh
+# NPM
+npm install -g @graphprotocol/graph-cli
+
+# Yarn
+yarn global add @graphprotocol/graph-cli
+```
+
+### 2. Create your subgraph in the Subgraph Studio
+
+Go to the [Subgraph Studio](https://thegraph.com/studio/) and connect your crypto wallet.
+
+Once connected, click "Create a Subgraph" and enter a name for your subgraph.
+
+Select "Base (testnet)" as the network and click Create Subgraph.
+
+### 3. Initialize your Subgraph
+
+> You can find specific commands for your subgraph in the Subgraph Studio.
+
+Make sure that the graph-cli is updated to latest (above 0.41.0)
+
+```sh
+graph --version
+```
+
+Initialize your subgraph from an existing contract.
+
+```sh
+graph init --studio <SUBGRAPH_SLUG>
+```
+
+Your subgraph slug is an identifier for your subgraph. The CLI tool will walk you through the steps for creating a subgraph, including:
+
+- Protocol: ethereum
+- Subgraph slug: `<SUBGRAPH_SLUG>`
+- Directory to create the subgraph in: `<SUBGRAPH_SLUG>`
+- Ethereum network: base-testnet \_ Contract address: `<CONTRACT_ADDRESS>`
+- Start block (optional)
+- Contract name: `<CONTRACT_NAME>`
+- Yes/no to indexing events (yes means your subgraph will be bootstrapped with entities in the schema and simple mappings for emitted events)
+
+### 3. Write your Subgraph
+
+> If emitted events are the only thing you want to index, then no additional work is required, and you can skip to the next step.
+
+The previous command creates a scaffold subgraph that you can use as a starting point for building your subgraph. When making changes to the subgraph, you will mainly work with three files:
+
+- Manifest (subgraph.yaml) - The manifest defines what datasources your subgraphs will index. Make sure to add `base-testnet` as the network name in manifest file to deploy your subgraph on Base testnet.
+- Schema (schema.graphql) - The GraphQL schema defines what data you wish to retreive from the subgraph.
+- AssemblyScript Mappings (mapping.ts) - This is the code that translates data from your datasources to the entities defined in the schema.
+
+If you want to index additional data, you will need extend the manifest, schema and mappings.
+
+For more information on how to write your subgraph, see [Creating a Subgraph](/developing/creating-a-subgraph).
+
+### 4. Deploy to the Subgraph Studio
+
+Before you can deploy your subgraph, you will need to authenticate with the Subgraph Studio. You can do this by running the following command:
+
+Authenticate the subgraph on studio
+
+```sh
+graph auth --studio <DEPLOY_KEY>
+```
+
+Next, enter your subgraph's directory.
+
+````sh
+    cd <SUBGRAPH_DIRECTORY>
+    ```
+
+Build your subgraph with the following command:
+
+    ```
+    graph codegen && graph build
+    ```
+
+Finally, you can deploy your subgraph using this command:
+
+    ```
+    graph deploy --studio <SUBGRAPH_SLUG>
+    ```
+
+### 5. Query your subgraph
+
+Once your subgraph is deployed, you can query it from your dapp using the `Development Query URL` in the Subgraph Studio.
+
+Note - Studio API is rate-limited. Hence should preferably be used for development and testing.
+
+To learn more about querying data from your subgraph, see the [Querying a Subgraph](/querying/querying-the-graph) page.
+````