Merge branch 'main' into mi/466/hash-verification

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"
   }
 }

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>

docs/src/content/docs/introduction/overview.mdx

@@ -67,3 +67,31 @@ When an ASE adopts the Open Payments standard, clients (applications and other p
 - ASEs and clients to create and deploy custom integrations to communicate with one another
 
 Open Payments aims to simplify and democratize payments by providing a standardized, easy-to-integrate solution. This reduces development effort and enhances financial inclusion by making payment solutions more affordable and accessible to all.
+
+## Use cases
+
+Open Payments facilitates various use cases including:
+
+### Peer-to-peer payments
+
+A peer-to-peer payment is a type of payment made directly from one person to another via a linked funding source. When ASEs implement the Open Payments standard, applications can call the Open Payments APIs to facilitate peer-to-peer payments. Having a standard means app developers can avoid building custom integrations for each ASE. Plus, app users can hold funding accounts with different Open Payments-enabled ASEs and even use different Open Payments-enabled applications to make peer-to-peer payments.
+
+A peer-to-peer payment can be one-time or recurring. For more information on building an Open Payments client that supports either type, refer to the [one-time payment](/guides/make-onetime-payment) and [recurring payments](/guides/make-recurring-payments) guides.
+
+### E-commerce platforms
+
+Suppose a merchant accepts Open Payments as a payment method. Their customers can then pay using their wallet address instead of entering a credit card number and other personal details on the merchant’s site. Open Payments allows an ASE's account holders to use their wallet addresses for one-time and recurring purchases, such as subscriptions. Refer to the following resources for more details:
+
+- [One-time payment guide](/guides/make-onetime-payment)
+- [Recurring payments guide](/guides/make-recurring-payments)
+- <LinkOut href='https://github.com/interledger/open-payments/tree/main/packages/open-payments#example'>
+    E-commerce example using the Open Payments SDK
+  </LinkOut>
+
+### Buy Now and Pay Later (BNPL)
+
+Buy Now and Pay Later (BNPL) plans allow customers to pay for high-priced purchases over time. A customer is relieved from making a large payment at once by splitting up payments at scheduled intervals. Developers can build Open Payments applications that support BNPL plans through recurring payments. For more details, refer to the [recurring payments guide](/guides/make-recurring-payments).
+
+### 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.