chore: add JS tab to code snippets (#475)

* chore: add JS tab to code snippets * fix: add missing tabs
interledger · May 29, 2024 · 35ce0cf · 35ce0cf
1 parent 39ae12e
commit 35ce0cf
Show file tree

Hide file tree

Showing 18 changed files with 730 additions and 6 deletions.
diff --git a/docs/src/content/docs/snippets/grant-continue.mdx b/docs/src/content/docs/snippets/grant-continue.mdx
@@ -7,6 +7,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'
 import Ts from '/src/partials/ts-prerequisites.mdx'
+import Js from '/src/partials/js-prerequisites.mdx'
 
 During a grant request flow, an authorization server can require an individual (typically a client's end user) to approve the grant by interacting directly with the server. For example, by tapping an Approve button on a web page provided by the auth server.
 
@@ -53,6 +54,40 @@ Run `tsx path/to/directory/index.ts`.
   <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-continuation.ts'>View full source</LinkOut>
 </p>
 
+</TabItem>
+
+<TabItem label='JavaScript'>
+<Js />
+
+#### Get started
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-continuation.ts'
+  chunk='1'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-continuation.ts'
+  chunk='2'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-continuation.ts'
+  chunk='3'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-continuation.ts'
+  chunk='4'
+/>
+
+Run `node path/to/directory/index.js`.
+
+{/* prettier-ignore */}
+<p>
+  <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-continuation.js'>View full source</LinkOut>
+</p>
+
 </TabItem>
 </Tabs>
 

diff --git a/docs/src/content/docs/snippets/grant-create.mdx b/docs/src/content/docs/snippets/grant-create.mdx
@@ -7,6 +7,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'
 import Ts from '/src/partials/ts-prerequisites.mdx'
+import Js from '/src/partials/js-prerequisites.mdx'
 
 Before a client can call the Open Payments API, it must request/receive a grant from the appropriate authorization server. The request must indicate the resource type the client intends to work with and the actions the client wants to take at the resource server.
 
@@ -65,6 +66,49 @@ Run `tsx path/to/directory/index.ts`.
   <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-incoming-payment.ts'>View full source</LinkOut>
 </p>
 
+</TabItem>
+<TabItem label='JavaScript'>
+<Js />
+
+#### Get started
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-incoming-payment.ts'
+  chunk='1'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-incoming-payment.ts'
+  chunk='2'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-incoming-payment.ts'
+  chunk='3'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-incoming-payment.ts'
+  chunk='4'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-incoming-payment.ts'
+  chunk='5'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-incoming-payment.ts'
+  chunk='6'
+/>
+
+Run `node path/to/directory/index.js`.
+
+{/* prettier-ignore */}
+<p>
+  <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-incoming-payment.js'>View full source</LinkOut>
+</p>
+
 </TabItem>
 </Tabs>
 
@@ -113,6 +157,49 @@ Run `tsx path/to/directory/index.ts`.
   <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-quote.ts'>View full source</LinkOut>
 </p>
 
+</TabItem>
+<TabItem label='JavaScript'>
+<Js />
+
+#### Get started
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-quote.ts'
+  chunk='1'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-quote.ts'
+  chunk='2'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-quote.ts'
+  chunk='3'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-quote.ts'
+  chunk='4'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-quote.ts'
+  chunk='5'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-quote.ts'
+  chunk='6'
+/>
+
+Run `node path/to/directory/index.js`.
+
+{/* prettier-ignore */}
+<p>
+  <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-quote.js'>View full source</LinkOut>
+</p>
+
 </TabItem>
 </Tabs>
 
@@ -156,14 +243,59 @@ In Open Payments, an outgoing payment grant must be interactive. An interactive
   chunk='6'
 />
 
-</TabItem>
-</Tabs>
+Run `tsx path/to/directory/index.ts`.
 
 {/* prettier-ignore */}
 <p>
   <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-outgoing-payment.ts'>View full source</LinkOut>
 </p>
 
+</TabItem>
+<TabItem label='JavaScript'>
+<Js />
+
+#### Get started
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-outgoing-payment.ts'
+  chunk='1'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-outgoing-payment.ts'
+  chunk='2'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-outgoing-payment.ts'
+  chunk='3'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-outgoing-payment.ts'
+  chunk='4'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-outgoing-payment.ts'
+  chunk='5'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-outgoing-payment.ts'
+  chunk='6'
+/>
+
+Run `node path/to/directory/index.js`.
+
+{/* prettier-ignore */}
+<p>
+  <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-outgoing-payment.js'>View full source</LinkOut>
+</p>
+
+</TabItem>
+</Tabs>
+
 ## References
 
 - [API specification](/apis/auth-server/operations/post-request)

diff --git a/docs/src/content/docs/snippets/grant-revoke.mdx b/docs/src/content/docs/snippets/grant-revoke.mdx
@@ -7,6 +7,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'
 import Ts from '/src/partials/ts-prerequisites.mdx'
+import Js from '/src/partials/js-prerequisites.mdx'
 
 If an authorized client no longer needs access to protected resources, the client can revoke the corresponding grant request.
 
@@ -46,6 +47,34 @@ Run `tsx path/to/directory/index.ts`.
   <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-revoke.ts'>View full source</LinkOut>
 </p>
 
+</TabItem>
+<TabItem label='JavaScript'>
+<Js />
+
+#### Get started
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-revoke.ts'
+  chunk='1'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-revoke.ts'
+  chunk='2'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/grant/grant-revoke.ts'
+  chunk='3'
+/>
+
+Run `node path/to/directory/index.js`.
+
+{/* prettier-ignore */}
+<p>
+  <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/grant/grant-revoke.js'>View full source</LinkOut>
+</p>
+
 </TabItem>
 </Tabs>
 

diff --git a/docs/src/content/docs/snippets/incoming-complete.mdx b/docs/src/content/docs/snippets/incoming-complete.mdx
@@ -7,6 +7,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'
 import Ts from '/src/partials/ts-prerequisites.mdx'
+import Js from '/src/partials/js-prerequisites.mdx'
 
 An authorized client can complete an unexpired incoming payment to indicate it will not send any additional payments to the wallet address.
 
@@ -51,6 +52,39 @@ Run `tsx path/to/directory/index.ts`.
   <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/incoming-payment/incoming-payment-complete.ts'>View full source</LinkOut>
 </p>
 
+</TabItem>
+<TabItem label='JavaScript'>
+<Js />
+
+#### Get started
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-complete.ts'
+  chunk='1'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-complete.ts'
+  chunk='2'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-complete.ts'
+  chunk='3'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-complete.ts'
+  chunk='4'
+/>
+
+Run `node path/to/directory/index.js`.
+
+{/* prettier-ignore */}
+<p>
+  <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/incoming-payment/incoming-payment-complete.js'>View full source</LinkOut>
+</p>
+
 </TabItem>
 </Tabs>
 

diff --git a/docs/src/content/docs/snippets/incoming-create.mdx b/docs/src/content/docs/snippets/incoming-create.mdx
@@ -7,6 +7,7 @@ import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'
 import Ts from '/src/partials/ts-prerequisites.mdx'
+import Js from '/src/partials/js-prerequisites.mdx'
 
 Once an authorized client obtains the requisite grant from the recipient’s authentication server, the client must create an incoming payment resource before any payments can be sent to the recipient’s wallet address.
 
@@ -44,16 +45,49 @@ These code snippets create an incoming payment of $10 USD at a given wallet addr
   chunk='4'
 />
 
-</TabItem>
-</Tabs>
-
 Run `tsx path/to/directory/index.ts`.
 
 {/* prettier-ignore */}
 <p>
   <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/incoming-payment/incoming-payment-create.ts'>View full source</LinkOut>
 </p>
 
+</TabItem>
+<TabItem label='JavaScript'>
+<Js />
+
+#### Get started
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-create.ts'
+  chunk='1'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-create.ts'
+  chunk='2'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-create.ts'
+  chunk='3'
+/>
+
+<ChunkedSnippet
+  source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-create.ts'
+  chunk='4'
+/>
+
+Run `node path/to/directory/index.js`.
+
+{/* prettier-ignore */}
+<p>
+  <LinkOut href='https://github.com/interledger/open-payments-snippets/blob/main/incoming-payment/incoming-payment-create.js'>View full source</LinkOut>
+</p>
+
+</TabItem>
+</Tabs>
+
 ## References
 
 - [API specification](/apis/resource-server/operations/create-incoming-payment)