docs: switch to CodeHike code blocks

apibara · Nov 23, 2023 · c7da38b · c7da38b
1 parent cf7c736
commit c7da38b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 63 deletions.
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -37,29 +37,23 @@ data.
 
 We start by installing the `@apibara/protocol` and `@apibara/starknet` packages:
 
-<CodeBlock.Multi>
-  <CodeBlock.Language language="npm">
-    ```npm file=terminal group=install
-    npm add @apibara/protocol @apibara/starknet
-    ```
-  </CodeBlock.Language>
-  <CodeBlock.Language language="yarn">
-    ```yarn file=terminal group=install
-    yarn install @apibara/protocol @apibara/starknet
-    ```
-  </CodeBlock.Language>
-  <CodeBlock.Language language="pnpm">
-    ```pnpm file=terminal group=install
-    pnpm add @apibara/protocol @apibara/starknet
-    ```
-  </CodeBlock.Language>
-</CodeBlock.Multi>
+<CH.Code>
+```console npm
+npm add @apibara/protocol @apibara/starknet
+```
+```console yarn
+yarn install @apibara/protocol @apibara/starknet
+```
+```console pnpm
+pnpm add @apibara/protocol @apibara/starknet
+```
+</CH.Code>
 
 Then we can create a DNA client. If you're using a DNA stream hosted by
 Apibara, you will need to specify an API token. You can create an API token for
 free on [the Apibara website](https://www.apibara.com).
 
-```typescript file=main.ts
+```typescript main.ts
 import { StreamClient } from '@apibara/protocol'
 
 // Grab Apibara DNA token from environment, if any.
@@ -85,7 +79,7 @@ In this example, we create a Starknet filter for all `Transfer` events of the ET
 Together with events, we want to receive block headers and storage changes.
 
 
-```typescript file=main.ts
+```typescript main.ts
 import { StarkNetCursor, Filter, FieldElement, v1alpha2 as starknet } from '@apibara/starknet'
 
 const address = FieldElement.fromBigInt(
@@ -115,7 +109,7 @@ iterator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-
 that handles low-level details such as reconnecting after disconnect.
 
 
-```typescript file=main.ts
+```typescript main.ts
 const cursor = StarkNetCursor.createWithBlockNumber(1045)
 
 client.configure({

diff --git a/docs/reference/protocol.mdx b/docs/reference/protocol.mdx
@@ -15,23 +15,17 @@ This package contains the client used to stream data from Apibara.
 Install the package from [npm](https://www.npmjs.com/package/@apibara/protocol):
 
 
-<CodeBlock.Multi>
-  <CodeBlock.Language language="npm">
-    ```npm file=terminal group=install
-    npm add @apibara/protocol
-    ```
-  </CodeBlock.Language>
-  <CodeBlock.Language language="yarn">
-    ```yarn file=terminal group=install
-    yarn install @apibara/protocol
-    ```
-  </CodeBlock.Language>
-  <CodeBlock.Language language="pnpm">
-    ```pnpm file=terminal group=install
-    pnpm add @apibara/protocol
-    ```
-  </CodeBlock.Language>
-</CodeBlock.Multi>
+<CH.Code>
+```console npm
+npm add @apibara/protocol
+```
+```console yarn
+yarn install @apibara/protocol
+```
+```console pnpm
+pnpm add @apibara/protocol
+```
+</CH.Code>
 
 
 ### Example
@@ -41,7 +35,7 @@ Ethereum ERC20 token `Transfer` events.
 
 Start by importing the types and classes used by this example.
 
-```typescript file=main.ts
+```typescript main.ts
 import {
   StreamClient,
   ChannelCredentials,
@@ -60,7 +54,7 @@ ask the stream for specific data, in this case the stream will only contain
 events matching the given key (the `Transfer` event) and emitted from the given
 smart contract.
 
-```typescript file=main.ts
+```typescript main.ts
 const address = FieldElement.fromBigInt(
   '0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7'
 )
@@ -84,7 +78,7 @@ const filter = Filter.create()
 Then create the client, specifying the authorization token created in the
 Apibara dashboard.
 
-```typescript file=main.ts
+```typescript main.ts
 const client = new StreamClient({
   url: 'mainnet.starknet.a5a.ch',
   token: '<dna_token>'
@@ -93,7 +87,7 @@ const client = new StreamClient({
 
 If you're connecting to a local instance of Apibara you need to disable SSL.
 
-```typescript file=main.ts
+```typescript main.ts
 const client = new StreamClient({
   url: 'localhost:7171',
   credentials: ChannelCredentials.createInsecure(),
@@ -102,7 +96,7 @@ const client = new StreamClient({
 
 You can specify [gRPC options](https://www.npmjs.com/package/@grpc/grpc-js) using the `clientOptions` argument:
 
-```typescript file=main.ts
+```typescript main.ts
 const client = new StreamClient({
   url: 'mainnet.starknet.a5a.ch',
   clientOptions: {
@@ -116,7 +110,7 @@ This method accepts a filter (each stream type has a different filter), a batch
 
 Apibara sends historical data in batches to maximize performance, the batch size can be tweaked to optimize syncing speed.
 
-```typescript file=main.ts
+```typescript main.ts
 await client.configure({
   filter,
   batchSize: 10,
@@ -126,7 +120,7 @@ await client.configure({
 
 Finally, we can iterate over the async stream generated by the client. Each message contains a batch of data.
 
-```typescript file=main.ts
+```typescript main.ts
 for await (const message of client) {
   if (message.data?.data) {
     // handle data

diff --git a/docs/reference/starknet.mdx b/docs/reference/starknet.mdx
@@ -17,30 +17,24 @@ package to decode data received by one of the StarkNet streams.
 
 Install the package from [npm](https://www.npmjs.com/package/@apibara/starknet):
 
-<CodeBlock.Multi>
-  <CodeBlock.Language language="npm">
-    ```npm file=terminal group=install
-    npm add @apibara/starknet
-    ```
-  </CodeBlock.Language>
-  <CodeBlock.Language language="yarn">
-    ```yarn file=terminal group=install
-    yarn install @apibara/starknet
-    ```
-  </CodeBlock.Language>
-  <CodeBlock.Language language="pnpm">
-    ```pnpm file=terminal group=install
-    pnpm add @apibara/starknet
-    ```
-  </CodeBlock.Language>
-</CodeBlock.Multi>
+<CH.Code>
+```console npm
+npm add @apibara/starknet
+```
+```console yarn
+yarn install @apibara/starknet
+```
+```console pnpm
+pnpm add @apibara/starknet
+```
+</CH.Code>
 
 
 ## FieldElement
 
 The Apibara stream encodes StarkNet field elements (also known as felts) into 4 uint64 numbers. The SDK provides helper functions to convert from this representation into Javascript's `bigint`.
 
-```typescript file=main.ts
+```typescript main.ts
 import { FieldElement } from '@apibara/starknet'
 
 // converts the encoded value to bigint
@@ -60,7 +54,7 @@ SDK contains an helper module to construct filters.  You can find more about
 filters in the [StarkNet section](/docs/starknet#filter).
 
 
-```typescript file=main.ts
+```typescript main.ts
 import { Filter } from '@apibara/starknet'
 
 const filter = Filter.create()