Replace CodeTabs with GDS’s CodeBlock.Tabs

Author: benface

website/src/components/CodeBlock.tsx

@@ -28,10 +28,25 @@ export const CodeBlock = ({ className, children, ...props }: CodeBlockProps) =>
     <ExperimentalCodeBlock
       language={language as ExperimentalCodeBlockProps['language']}
       lineNumbers={lineCount > 1}
-      className={classNames(['graph-docs-not-markdown --:my-8 --:last:mb-0 -:is-[li>*]:my-4', className])}
+      className={classNames([
+        `graph-docs-not-markdown
+        --:not-in-group/code-block-tabs:my-8
+        --:not-in-group/code-block-tabs:last:mb-0
+        -:not-in-group/code-block-tabs:is-[li>*]:my-4`,
+        className,
+      ])}
       {...(props as ComponentProps<'div'>)}
     >
       {code}
     </ExperimentalCodeBlock>
   )
 }
+
+export const CodeBlockTabs = ({ className, ...props }: ComponentProps<typeof ExperimentalCodeBlock.Tabs>) => {
+  return (
+    <ExperimentalCodeBlock.Tabs
+      className={classNames(['graph-docs-not-markdown --my-8 -:is-[li>*]:my-4', className])}
+      {...props}
+    />
+  )
+}

website/src/components/CodeTabs.tsx

@@ -56,6 +56,7 @@ import {
 import {
   Callout,
   CodeBlock,
+  CodeBlockTabs,
   DocSearch,
   Heading,
   Image,
@@ -64,7 +65,6 @@ import {
   Table,
   VideoEmbed,
 } from '@/components'
-import { CodeTab, CodeTabs } from '@/components/CodeTabs'
 import { useI18n } from '@/i18n'
 
 import { MDXContent } from './MDXContent'
@@ -611,12 +611,12 @@ export default function Layout({ pageOpts, children }: NextraThemeLayoutProps<Fr
                 img: ImageWrapper,
                 // TODO: Fix "[Shiki] X instances have been created. Shiki is supposed to be used as a singleton" warnings
                 pre: CodeBlock,
+                CodeBlock,
+                CodeBlockTabs,
                 // TODO: Build and use `ExperimentalTable`
                 table: Table,
                 VideoEmbed,
                 wrapper: MDXContent,
-                CodeTabs,
-                CodeTab,
               }}
             >
               {children}

website/src/layout/Layout.tsx

@@ -13,87 +13,82 @@ Make sure you already have an account on [The Graph Market](https://thegraph.com
 
 Raw API endpoints are authenticated using a header, and the TypeScript Node.js SDK accepts the token as a configuration option.
 
-<CodeTabs>
-    <CodeTab label="cURL">
-        ```shell
-        curl --request GET \
-          --url "https://token-api.thegraph.com/v1/evm/balances?network=mainnet&address=0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208" \
-          --header 'Accept: application/json' \
-          --header 'Authorization: Bearer YOUR_TOKEN'
-        ```
-    </CodeTab>
-    <CodeTab label="Node.js">
-        ```typescript
-        import {EVMChains, TokenAPI} from "@pinax/token-api";
-
-        const client = new TokenAPI({
-            apiToken: process.env.TOKEN_API_KEY || ""
-        });
-
-        const result = await client.evm.tokens.getBalances({
-            network: EVMChains.Ethereum,
-            address: ['0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208']
-        })
-        ```
-    </CodeTab>
-    <CodeTab label="Python">
-        ```python
-        import requests
-
-        res = requests.get(
+<CodeBlockTabs tabs={['cURL', 'Node.js', 'Python', 'Go', 'Rust']}>
+
+    ```shell
+    curl --request GET \
+        --url "https://token-api.thegraph.com/v1/evm/balances?network=mainnet&address=0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208" \
+        --header 'Accept: application/json' \
+        --header 'Authorization: Bearer YOUR_TOKEN'
+    ```
+
+    ```typescript
+    import {EVMChains, TokenAPI} from "@pinax/token-api";
+
+    const client = new TokenAPI({
+        apiToken: process.env.TOKEN_API_KEY || ""
+    });
+
+    const result = await client.evm.tokens.getBalances({
+        network: EVMChains.Ethereum,
+        address: ['0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208']
+    })
+    ```
+
+    ```python
+    import requests
+
+    res = requests.get(
+        "https://token-api.thegraph.com/v1/evm/balances?network=mainnet&address=0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208",
+        headers={"Authorization": "Bearer YOUR_TOKEN"},
+    )
+
+    print(res.json())
+    ```
+
+    ```go
+    package main
+
+    import (
+        "fmt"
+        "encoding/json"
+        "net/http"
+    )
+
+    func main() {
+        req, _ := http.NewRequest("GET",
             "https://token-api.thegraph.com/v1/evm/balances?network=mainnet&address=0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208",
-            headers={"Authorization": "Bearer YOUR_TOKEN"},
+            nil,
         )
+        req.Header.Set("Authorization", "Bearer YOUR_TOKEN")
 
-        print(res.json())
-        ```
-    </CodeTab>
-    <CodeTab label="Go">
-        ```go
-        package main
-
-        import (
-            "fmt"
-            "encoding/json"
-            "net/http"
-        )
+        res, _ := http.DefaultClient.Do(req)
+        defer res.Body.Close()
+
+        var data any
+        json.NewDecoder(res.Body).Decode(&data)
+
+        fmt.Printf("%#v\n", data)
+    }
+    ```
+
+    ```rust
+    use reqwest::Client;
+
+    #[tokio::main]
+    async fn main() -> reqwest::Result<()> {
+        let res = Client::new()
+        .get("https://token-api.thegraph.com/v1/evm/balances?network=mainnet&address=0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208")
+        .bearer_auth("YOUR_TOKEN")
+        .send()
+        .await?;
+
+        println!("{}", res.text().await?);
+        Ok(())
+    }
+    ```
 
-        func main() {
-            req, _ := http.NewRequest("GET",
-                "https://token-api.thegraph.com/v1/evm/balances?network=mainnet&address=0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208",
-                nil,
-            )
-            req.Header.Set("Authorization", "Bearer YOUR_TOKEN")
-
-            res, _ := http.DefaultClient.Do(req)
-            defer res.Body.Close()
-
-            var data any
-            json.NewDecoder(res.Body).Decode(&data)
-
-            fmt.Printf("%#v\n", data)
-        }
-        ```
-    </CodeTab>
-    <CodeTab label="Rust">
-        ```rust
-        use reqwest::Client;
-
-        #[tokio::main]
-        async fn main() -> reqwest::Result<()> {
-            let res = Client::new()
-            .get("https://token-api.thegraph.com/v1/evm/balances?network=mainnet&address=0x2a0c0dbecc7e4d658f48e01e3fa353f44050c208")
-            .bearer_auth("YOUR_TOKEN")
-            .send()
-            .await?;
-
-            println!("{}", res.text().await?);
-            Ok(())
-        }
-        ```
-    </CodeTab>
-
-</CodeTabs>
+</CodeBlockTabs>
 
 ## What's next?