Merge branch 'main' into mi/170/add-use-cases

interledger · Dec 17, 2024 · b539d6f · b539d6f
2 parents 8039075 + d95bf5b
commit b539d6f
Show file tree

Hide file tree

Showing 22 changed files with 633 additions and 910 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -61,7 +61,6 @@ Refer to the Starlight documentation on [authoring content](https://starlight.as
 We have extracted some of the commonly repeated patterns within the documentation pages into custom docs components that can be reused. There are components which are shared across all our Starlight documentation sites and those which are specific to this project only. This will determine what the import path is.
 
 - CodeBlock (Shared)
-- Disclosure (Shared)
 - Hidden (Shared)
 - LargeImg (Shared)
 - LinkOut (Shared)
@@ -72,10 +71,10 @@ We have extracted some of the commonly repeated patterns within the documentatio
 - [FullSnippet](#fullsnippet-component) (Project-specific)
 - [ChunkedSnippet](#chunkedsnippet-component) (Project-specific)
 
-For the shared components, if you are using both `CodeBlock` and `Disclosure` on the same page, you can import them both like so:
+For the shared components, if you are using both `CodeBlock` and `Tooltip` on the same page, you can import them both like so:
 
 ```jsx
-import { CodeBlock, Disclosure } from '@interledger/docs-design-system'
+import { CodeBlock, Tooltip } from '@interledger/docs-design-system'
 ```
 
 For more information about importing things in Javascript, please refer to [import on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -11,6 +11,17 @@ export default defineConfig({
       title: 'Open Payments',
       description:
         'An API for open access to financial accounts to send and receive payments.',
+      head: [
+        {
+          tag: 'script',
+          attrs: {
+            defer: true,
+            'data-website-id': '76afa57f-78bb-48ab-a9e4-095a32d8a1b9',
+            src: 'https://ilf-site-analytics.netlify.app/script.js',
+            'data-domains': 'openpayments.dev'
+          }
+        }
+      ],
       components: {
         Header: './src/components/Header.astro',
         PageSidebar: './src/components/PageSidebar.astro'

diff --git a/docs/package.json b/docs/package.json
@@ -10,16 +10,16 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.29.0",
-    "@interledger/docs-design-system": "^0.5.2",
-    "astro": "4.16.11",
-    "mermaid": "^11.4.0",
+    "@astrojs/starlight": "^0.30.2",
+    "@interledger/docs-design-system": "^0.6.1",
+    "astro": "5.0.9",
+    "mermaid": "^11.4.1",
     "sharp": "^0.33.5",
-    "shiki": "1.22.2",
-    "starlight-openapi": "^0.8.1",
-    "starlight-links-validator": "^0.13.2"
+    "shiki": "1.24.2",
+    "starlight-openapi": "^0.8.3",
+    "starlight-links-validator": "^0.13.4"
   },
   "devDependencies": {
-    "prettier": "3.3.3"
+    "prettier": "3.4.2"
   }
 }
diff --git a/docs/src/components/ChunkedSnippet.astro b/docs/src/components/ChunkedSnippet.astro
@@ -75,6 +75,87 @@ const output = await prettier.format(rawOutput, {
 const codeBlockTitle = codeChunkArray[chunkNumber].title;
 ---
 
-<CodeBlock title={codeBlockTitle}>
+<CodeBlock title={codeBlockTitle} class="chunked-snippet">
   <Code code={output} lang="ts" theme="css-variables" />
+  <span>Copied!</span>
+  <button data-copy-button type="button">
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='1.75'>
+      <path d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/>
+      <rect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/>
+    </svg>
+    <span class="visually-hidden">Copy</span>
+  </button>
+  <textarea>{output}</textarea>
 </CodeBlock>
+
+<style>
+  .chunked-snippet {
+    position: relative;
+  }
+
+  .chunked-snippet pre:hover ~ button {
+     opacity: 0.7;
+  }
+
+  button {
+    position: absolute;
+    top: 2.5em;
+    right: 0.25em;
+    background-color: var(--sl-color-gray-6);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--sl-color-gray-5);
+    cursor: pointer;
+    padding: var(--space-2xs);
+    opacity: 0;
+    transition: opacity ease-in-out 150ms;
+  }
+
+  button:hover,
+  button.active {
+    opacity: 1;
+  }
+
+  button svg {
+    height: 1em;
+    width: 1em;
+    stroke: var(--sl-color-gray-3);
+  }
+
+  span {
+    position: absolute;
+    top: 1.5em;
+    right: 0.5em;
+    font-size: smaller;
+    display: none;
+  }
+
+  textarea {
+    display: none;
+  }
+</style>
+
+<script>
+  const buttons = document.querySelectorAll('[data-copy-button]');
+  buttons.forEach((button) => {
+    const codeToCopy = (button.nextElementSibling as HTMLTextAreaElement).value
+    const copyMsg = button.previousElementSibling as HTMLSpanElement
+
+    button.addEventListener('click', () => {
+      navigator.clipboard
+        .writeText(codeToCopy)
+        .then(() => {
+          copyMsg.style.display = "block";
+          (button as HTMLButtonElement).classList.add('active');
+
+          setTimeout(() => {
+            copyMsg.style.display = "none";
+            (button as HTMLButtonElement).classList.remove('active');
+          }, 2000);
+        })
+        .catch((error) => {
+          const err = error as Error;
+          console.error(err.name, err.message);
+        })
+    });
+  });
+</script>
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -9,9 +9,13 @@ hero:
       link: introduction/overview/
       icon: open-book
       variant: primary
+      attrs:
+        data-umami-event: Landing page - OP docs
     - text: View on GitHub
       icon: external
       link: https://github.com/interledger/open-payments
+      attrs:
+        data-umami-event: Landing page - OP GitHub
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components'
diff --git a/docs/src/content/docs/introduction/overview.mdx b/docs/src/content/docs/introduction/overview.mdx
@@ -70,7 +70,7 @@ Open Payments aims to simplify and democratize payments by providing a standardi
 
 ## Use cases
 
-Open Payments facilitates various use cases including but not limited to:
+Open Payments facilitates various use cases including:
 
 ### Peer-to-peer payments
 
@@ -94,7 +94,4 @@ Buy Now and Pay Later (BNPL) plans allow customers to pay for high-priced purcha
 
 ### Web Monetization
 
-The <LinkOut href='https://webmonetization.org'>Web Monetization API</LinkOut> allows website visitors to pay an amount they choose to a
-participating website with little to no interaction using Open Payments as the
-payment method. The site and the site visitor must have an Open Payments-enabled
-wallet address to receive and send payments.
+The <LinkOut href='https://webmonetization.org'>Web Monetization API</LinkOut> allows website visitors to pay an amount they choose to a participating website with little to no interaction using Open Payments as the payment method. The site and the site visitor must have an Open Payments-enabled wallet address to receive and send payments.
diff --git a/docs/src/content/docs/snippets/grant-continue.mdx b/docs/src/content/docs/snippets/grant-continue.mdx
@@ -2,7 +2,7 @@
 title: Continue a grant request
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/grant-create.mdx b/docs/src/content/docs/snippets/grant-create.mdx
@@ -2,7 +2,7 @@
 title: Create a grant request
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/grant-revoke.mdx b/docs/src/content/docs/snippets/grant-revoke.mdx
@@ -2,7 +2,7 @@
 title: Revoke a grant request
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/incoming-complete.mdx b/docs/src/content/docs/snippets/incoming-complete.mdx
@@ -2,7 +2,7 @@
 title: Complete an incoming payment
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/incoming-create.mdx b/docs/src/content/docs/snippets/incoming-create.mdx
@@ -2,7 +2,7 @@
 title: Create an incoming payment
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/incoming-get.mdx b/docs/src/content/docs/snippets/incoming-get.mdx
@@ -2,7 +2,7 @@
 title: Get an incoming payment
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/incoming-list.mdx b/docs/src/content/docs/snippets/incoming-list.mdx
@@ -2,7 +2,7 @@
 title: List incoming payments
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/outgoing-create.mdx b/docs/src/content/docs/snippets/outgoing-create.mdx
@@ -2,7 +2,7 @@
 title: Create an outgoing payment
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/outgoing-list.mdx b/docs/src/content/docs/snippets/outgoing-list.mdx
@@ -2,7 +2,7 @@
 title: List outgoing payments
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/quote-create.mdx b/docs/src/content/docs/snippets/quote-create.mdx
@@ -2,7 +2,7 @@
 title: Create a quote
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/quote-get.mdx b/docs/src/content/docs/snippets/quote-get.mdx
@@ -2,7 +2,7 @@
 title: Get a quote
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/content/docs/snippets/wallet-get-keys.mdx b/docs/src/content/docs/snippets/wallet-get-keys.mdx
@@ -2,7 +2,7 @@
 title: Get keys bound to a wallet address
 ---
 
-import { Disclosure, CodeBlock, LinkOut } from '@interledger/docs-design-system'
+import { CodeBlock, LinkOut } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
 import Begin from '/src/partials/before-you-begin.mdx'

diff --git a/docs/src/partials/code-snippets-template.mdx b/docs/src/partials/code-snippets-template.mdx
@@ -2,7 +2,7 @@
 title: Change this title
 ---
 
-import { Disclosure, CodeBlock } from '@interledger/docs-design-system'
+import { CodeBlock } from '@interledger/docs-design-system'
 import { Tabs, TabItem } from '@astrojs/starlight/components'
 import FullSnippet from '/src/components/FullSnippet.astro'
 import ChunkedSnippet from '/src/components/ChunkedSnippet.astro'
@@ -30,9 +30,10 @@ import Ts from '/src/partials/ts-prerequisites.mdx'
 </TabItem>
 </Tabs>
 
-<Disclosure toggleText='View full source' client:load>
+<details>
+<summary>View full source</summary>
 
-Delete the contents of this disclosure and replace it with a link to the raw source
+Delete the contents of this details tag and replace it with a link to the raw source
 file like so:
 
 ```html
@@ -41,7 +42,7 @@ file like so:
 />
 ```
 
-</Disclosure>
+</details>
 
 ## References
 

diff --git a/docs/src/partials/js-prerequisites.mdx b/docs/src/partials/js-prerequisites.mdx
@@ -1,6 +1,7 @@
-import { LinkOut, Disclosure } from '@interledger/docs-design-system'
+import { LinkOut } from '@interledger/docs-design-system'
 
-<Disclosure toggleText='Prerequisites' client:load>
+<details>
+<summary>Prerequisites</summary>
 
 - Node 18 or higher
 - A package manager such as NPM or PNPM
@@ -12,4 +13,4 @@ import { LinkOut, Disclosure } from '@interledger/docs-design-system'
 
 Add `"type": "module"` to `package.json`
 
-</Disclosure>
+</details>
diff --git a/docs/src/partials/ts-prerequisites.mdx b/docs/src/partials/ts-prerequisites.mdx
@@ -1,6 +1,7 @@
-import { LinkOut, Disclosure } from '@interledger/docs-design-system'
+import { LinkOut } from '@interledger/docs-design-system'
 
-<Disclosure toggleText='Prerequisites' client:load>
+<details>
+<summary>Prerequisites</summary>
 
 - Node 18
 - A package manager such as NPM or PNPM
@@ -24,4 +25,4 @@ Add the following to `tsconfig.json`
 }
 ```
 
-</Disclosure>
+</details>