docs: adding extension doc (#488)

* docs: adding extension doc

* docs: added images, minor updates

* compress images

* don't wrap heading with `<a>` with "manually-add-key" id

* docs: updates and trying to fix build error

---------

Co-authored-by: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>

astro.config.mjs

@@ -56,7 +56,6 @@ export default defineConfig({
       components: {
         Header: './src/components/docs/Header.astro',
         PageSidebar: './src/components/docs/PageSidebar.astro',
-        PageTitle: './src/components/docs/PageTitle.astro',
       },
       social: {
         github: 'https://github.com/WICG/webmonetization',
@@ -82,6 +81,10 @@ export default defineConfig({
               label: 'Web Monetization flow',
               link: '/docs/intro/web-monetization-flow',
             },
+            {
+              label: 'Web Monetization extension',
+              link: '/docs/intro/web-monetization-extension',
+            },
           ],
         },
         {

src/content/docs/docs.mdx

@@ -21,9 +21,9 @@ It can take a bit of work to implement payments on a website. If your site alrea
 
 ## Introducing Web Monetization
 
-Web Monetization (WM) aims to simplify the payment experience for you and your website visitors. It’s an open technology that allows websites to automatically receive payments from visitors, facilitated by the visitor’s browser and their preferred WM provider.
+Web Monetization aims to simplify the payment experience for you and your website visitors. It’s an open technology that allows websites to automatically receive payments from visitors.
 
-It’s a proposed standard that allows your visitors to pay an amount of their choosing with little to no user interaction. It enables a website to automatically signal to web browsers that it can accept payments and enables web browsers to facilitate a payment by:
+It’s a proposed standard that allows your visitors to pay an amount of their choosing with little to no user interaction. It enables a website to automatically signal to web browsers that it can accept payments. With this signal, web browsers facilitate a payment from the visitor to the site by:
 
 - Obtaining authorization to initiate the payment.
 - Gathering details and issuing instructions to start the money movement process.
@@ -49,13 +49,13 @@ The following image shows the Web Monetization flow at a high level. Some steps
 
 Web Monetization doesn’t allow a website to specify a payment amount or currency. It only allows the site to tell the browser it can accept payments.
 
-With the help of a <Tooltip content='The entity sending a payment' client:load><a href="./resources/glossary#web-monetization-provider">WM provider</a></Tooltip>, your visitor decides whether to make a payment, how much and how often to pay, and in which currency. Your <Tooltip content='The entity receiving a payment' client:load><a href="./resources/glossary#web-monetization-receiver">WM receiver</a></Tooltip> can then exchange the currency of incoming payments based on what you want to receive. This flexibility allows you and your visitors to choose the monetization methods that best suit your needs.
+With the help of a <Tooltip content='The entity sending a payment' client:load><a href="./resources/glossary#web-monetization-provider">Web Monetization provider</a></Tooltip>, your visitor decides whether to make a payment, how much and how often to pay, and in which currency. Your <Tooltip content='The entity receiving a payment' client:load><a href="./resources/glossary#web-monetization-receiver">Web Monetization receiver</a></Tooltip> can then exchange the currency of incoming payments based on what you want to receive. This flexibility allows you and your visitors to choose the monetization methods that best suit you both.
 
 ### Processing and settling payments
 
 Web Monetization’s role is to help coordinate payments. It does not process or settle payments.
 
-At each end of Web Monetization is an account that supports <LinkOut href="https://openpayments.guide">Open Payments</LinkOut>. The WM provider supplies your visitor with a funded sending account. In some cases, the visitor could even act as their own WM provider. The WM receiver supplies you with a receiving account.
+At each end of Web Monetization is an account that supports <LinkOut href="https://openpayments.guide">Open Payments</LinkOut>. The Web Monetization provider supplies your visitor with a funded sending account. In some cases, the visitor could even act as their own Web Monetization provider. The Web Monetization receiver supplies you with a receiving account.
 
 Web Monetization communicates with the sending and receiving accounts to obtain the necessary authorizations and instructions for a payment to be sent and received. Payment processing and settlement then occurs between the sending and receiving accounts, outside of the Web Monetization flow.
 

src/content/docs/docs/guides/add-a-streaming-payments-counter.mdx

@@ -66,7 +66,7 @@ The `monetization` event contains details about the payments that occur. The `am
     console.log(`Browser sent ${currency} ${value}.`);
 ```
 
-The `currency` is set on the first payment and doesn't change. Remember, it represents the sent payment's currency, which may be different from the currency you receive (depending on how your receiving account is set up with your WM receiver).
+The `currency` is set on the first payment and doesn't change. Remember, it represents the sent payment's currency, which may be different from the currency you receive (depending on how your receiving account is set up with your Web Monetization receiver).
 
 ```js
 // initialize currency on first progress event

src/content/docs/docs/guides/monetize-page.mdx

@@ -9,7 +9,7 @@ This page provides basic instructions for adding Web Monetization to a web page.
 ## Prerequisites
 
 - Web monetized pages must be secure and served over HTTPS.
-- You must have the wallet address assigned to you by your WM receiver.
+- You must have the wallet address assigned to you by your Web Monetization-enabled [wallet provider](/docs/resources/op-wallets).
 
 ## Monetize a page
 
@@ -30,7 +30,7 @@ For example:
 
 ### Multiple monetization links
 
-A single HTML document can contain multiple monetization `<link>` elements; however, it's up to each WM provider to decide how they want to handle this scenario. We recommend WM providers split the payments evenly between the links.
+A single HTML document can contain multiple monetization `<link>` elements; however, it's up to each Web Monetization provider to decide how they want to handle this scenario. We recommend Web Monetization providers split the payments evenly between the links.
 
 ## Next steps
 

src/content/docs/docs/intro/receiving-payments.mdx

@@ -4,29 +4,29 @@ title: Receiving payments
 
 import { LinkOut } from '@interledger/docs-design-system'
 
-Two key components of receiving a Web Monetization (WM) payment are WM receivers and Open Payments-enabled accounts.
+Two key components of receiving a Web Monetization payment are Web Monetization receivers and Open Payments-enabled accounts.
 
 :::note
-This page describes the role of WM receivers within the Web Monetization ecosystem. It does not explain how to become a receiver.
+This page describes the role of Web Monetization receivers within the Web Monetization ecosystem. It does not explain how to become a receiver.
 :::
 
-## WM receivers
+## Web Monetization receivers
 
-A WM receiver is an entity that provides an Open Payments-enabled account into which payments can be received. Individuals interested in receiving Web Monetization payments can establish a relationship with a WM receiver of their choice by signing up for an account.
+A Web Monetization receiver is an entity that provides an Open Payments-enabled account into which payments can be received. Individuals interested in receiving Web Monetization payments can establish a relationship with a Web Monetization receiver of their choice by signing up for an account.
 
-We anticipate most WM receivers to offer some form of digital wallet to their users. Many digital wallet providers, not just WM receivers, are often required to verify their users’ identities before allowing funds to be withdrawn.
+We anticipate most Web Monetization receivers to offer some form of digital wallet to their users. Many digital wallet providers, not just Web Monetization receivers, are often required to verify their users’ identities before allowing funds to be withdrawn.
 
 ## Open Payments and wallet addresses
 
-Open Payments enables open and interoperable payments between WM providers and WM receivers. As such, accounts supplied by both WM providers and WM receivers must implement the <LinkOut href="https://openpayments.guide">Open Payments (OP) specification</LinkOut>.
+Open Payments enables open and interoperable payments between Web Monetization providers and Web Monetization receivers. As such, accounts supplied by both Web Monetization providers and Web Monetization receivers must implement the <LinkOut href="https://openpayments.guide">Open Payments (OP) specification</LinkOut>.
 
 The OP specification defines standards for **_access_** to accounts. When granted access, applications and other entities can integrate payments into their feature sets by connecting to their users’ accounts. The ability to then **_execute_** payments between OP-enabled accounts relies on the availability of a common payment rail between the accounts.
 
 ### Wallet addresses
 
 Access to an OP-enabled account, whether for sending or receiving, always starts with a wallet address. In this context, a wallet address is a unique URL that identifies an OP account and provides an entry point for the Open Payments API.
 
-When an individual establishes an account with a WM receiver, the receiver assigns the account one or more wallet addresses. Wallet addresses allow certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A WM agent is an example of a third-party.
+When an individual establishes an account with a Web Monetization receiver, the receiver assigns the account one or more wallet addresses. Wallet addresses allow certain account details to be safely shared with third-parties. Third-parties use the details to initiate payments to or from the account. A Web Monetization agent is an example of a third-party.
 
 A wallet address is required to web monetize a page and must be added as the `href` value within the monetization `<link>` element.
 
@@ -36,23 +36,23 @@ For example:
 <link rel="monetization" href="https://wallet.example/alice" />
 ```
 
-The WM agent uses the wallet address to begin the money movement process.
+The Web Monetization agent uses the wallet address to begin the money movement process.
 
 ## Receiving a payment
 
-When an individual visits a web monetized page, their WM agent detects the monetization `<link>` element and associated wallet address. The WM agent sends a request to the wallet address, which is the beginning of a series of API calls needed to:
+When an individual visits a web monetized page, their Web Monetization agent detects the monetization `<link>` element and associated wallet address. The Web Monetization agent sends a request to the wallet address, which is the beginning of a series of API calls needed to:
 
 1. Get the details about the underlying receiving account
 2. Receive permission to send a payment to the account
 3. Create a monetization session within the site visitor's browser tab/window
 4. Create the outgoing payment request
 
-When the payment is successful, the funds are deducted from the WM provider’s account and deposited into the WM receiver’s account.
+When the payment is successful, the funds are deducted from the Web Monetization provider’s account and deposited into the Web Monetization receiver’s account.
 
 For more information, visit the [Web Monetization flow](/docs/intro/web-monetization-flow) page.
 
 ## Specifying a payment amount
 
-Web Monetization does not enable a site to specify the amount it wants to receive. The amount, frequency, and other payment parameters are controlled by the web monetized visitor, through their relationship with their WM provider.
+Web Monetization does not enable a site to specify the amount it wants to receive. The amount, frequency, and other payment parameters are controlled by the web monetized visitor, through their relationship with their Web Monetization provider.
 
 If a site should specify a price, then integration with the W3C’s <LinkOut href="https://www.w3.org/TR/payment-request">Payment Request API</LinkOut> may be a better alternative to Web Monetization. The Payment Request API allows sites to ask to be paid a certain amount, then the browser (typically with the user’s approval) pays that amount.