Fixes from Melissa's feedback

astro.config.mjs

@@ -30,6 +30,8 @@ export default defineConfig({
       components: {
         Header: './src/components/docs/Header.astro',
         PageSidebar: './src/components/docs/PageSidebar.astro',
+        Footer: './src/components/docs/Footer.astro',
+        PageTitle: './src/components/docs/PageTitle.astro',
       },
       social: {
         github: 'https://github.com/WICG/webmonetization',

package.json

@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.1.1",
-    "@astrojs/starlight": "^0.21.3",
-    "@interledger/docs-design-system": "^0.3.2",
+    "@astrojs/starlight": "^0.21.4",
+    "@interledger/docs-design-system": "../dds",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
-    "astro": "4.5.15",
+    "astro": "4.5.16",
     "astro-i18next": "^1.0.0-beta.21",
     "prettier": "^3.2.5",
     "prism-react-renderer": "^2.3.1",

src/components/docs/Footer.astro

@@ -0,0 +1,27 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+
+import EditLink from "@astrojs/starlight/components/EditLink.astro";
+import Pagination from "@astrojs/starlight/components/Pagination.astro";
+---
+
+<footer>
+	<div class="meta sl-flex">
+		<EditLink {...Astro.props} />
+	</div>
+	<Pagination {...Astro.props} />
+</footer>
+
+<style>
+	.meta {
+		gap: 0.75rem 3rem;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		margin-block: 3rem 1.5rem;
+		font-size: var(--sl-text-sm);
+		color: var(--sl-color-gray-3);
+	}
+	.meta > :global(p:only-child) {
+		margin-inline-start: auto;
+	}
+</style>

src/components/docs/PageTitle.astro

@@ -0,0 +1,25 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/PageTitle.astro';
+
+const { labels, lang, lastUpdated } = Astro.props;
+---
+
+<Default {...Astro.props}><slot /></Default>
+{
+	lastUpdated && (
+		<p class="last-updated">
+			{labels['page.lastUpdated']}{' '}
+			<time datetime={lastUpdated.toISOString()}>
+				{lastUpdated.toLocaleDateString(lang, { dateStyle: 'medium', timeZone: 'UTC' })}
+			</time>
+		</p>
+	)
+}
+
+<style>
+  .last-updated {
+    margin-block-start: var(--space-2xs);
+    font-style: italic;
+  }
+</style>

src/content/docs/docs/wallet-address/faq.mdx

@@ -1,19 +1,19 @@
 ---
 title: Wallet address FAQ
 banner:
-    content: You must have a wallet address to send and/or receive Web Monetization payments.
+  content: You must have a wallet address to send and/or receive Web Monetization payments.
 ---
 
-import { LinkOut, CodeBlock, Tooltip } from "@interledger/docs-design-system";
+import { LinkOut, CodeBlock, Tooltip } from '@interledger/docs-design-system'
 
 Before you implement Web Monetization (WM) on your site or send a payment to someone who has, you must have a wallet address that supports receiving and/or sending Web Monetization payments.
 
 ## What is a wallet address?
 
-The term *wallet address* has existed for some time and is used in a number of different contexts. In Web Monetization, a wallet address is a secure, unique URL that:
+The term _wallet address_ has existed for some time and is used in a number of different contexts. In Web Monetization, a wallet address is a secure, unique URL that:
 
-* Represents an [Open Payments-enabled account](#what-is-an-open-payments-enabled-account)
-* Provides an entry point to the Open Payments APIs
+- Represents an [Open Payments-enabled account](#what-is-an-open-payments-enabled-account)
+- Provides an entry point to the Open Payments APIs
 
 <CodeBlock title="Example">
 
@@ -33,11 +33,14 @@ An Open Payments-enabled account is a payment account issued by an [account serv
 
 ## What is an account servicing entity?
 
-An account servicing entity (ASE) is an entity that provides and maintains payment accounts. ASEs that maintain financial accounts are regulated entities within the countries they operate and are often required to verify the identity of a customer before allowing the customer to open an account. Examples of ASEs include banks, digital wallet providers, mobile money providers, and crypto wallets. 
+An account servicing entity (ASE) is an entity that provides and maintains payment accounts. ASEs that maintain financial accounts are regulated entities within the countries they operate and are often required to verify the identity of a customer before allowing the customer to open an account. Examples of ASEs include banks, digital wallet providers, mobile money providers, and crypto wallets.
 
 ## What is the Open Payments standard?
 
-<LinkOut href="https://openpayments.dev">Open Payments</LinkOut> is an open standard and set of APIs meant for implementation by <Tooltip content="Account servicing entities" client:load>ASEs</Tooltip>. When an ASE implements Open Payments, their customers' accounts become Open Payments-enabled.
+{/* prettier-ignore */}
+<LinkOut href='https://openpayments.dev'>Open Payments</LinkOut> is an open standard
+and set of APIs meant for implementation by <Tooltip content='Account servicing entities' client:load>ASEs</Tooltip>. When an ASE implements Open Payments, their customers' accounts become Open
+Payments-enabled.
 
 The purpose of the standard is to allow third-party applications and other programs to connect to their users' payment accounts (with the user's permission). Reasons why an application would want to connect to a user's payment account include retrieving the user's transaction history and sending a payment from the user's account on the user's behalf.
 
@@ -47,4 +50,4 @@ Integrating with the standard takes a bit of work, so there's only a handful of
 
 ## How do I get a wallet address?
 
-Sign up with an account servicing entity that has implemented Open Payments. There's only a handful of entities that offer Open Payments-enabled accounts and wallet addresses at this time. These entities are listed on the [wallet address providers](/docs/wallet-address/wallets) page.
+Sign up with an account servicing entity that has implemented Open Payments. There's only a handful of entities that offer Open Payments-enabled accounts and wallet addresses at this time. These entities are listed on the [wallet address providers](/docs/wallet-address/wallets) page.

src/content/docs/docs/wallet-address/wallets.mdx

@@ -1,27 +1,29 @@
 ---
 title: Wallet address providers
 next:
-    label: Support web monetized content
+  label: Support web monetized content
 lastUpdated: true
 ---
 
-import { LinkOut } from "@interledger/docs-design-system";
+import { LinkOut } from '@interledger/docs-design-system'
 
-The providers listed on this page have implemented <LinkOut href="https://openpayments.guide/">Open Payments</LinkOut> and can issue wallet addresses. You must have a wallet address to send and/or receive Web Monetization payments. 
+The providers listed on this page have implemented <LinkOut href="https://openpayments.guide/">Open Payments</LinkOut> and can issue wallet addresses. You must have a wallet address to send and/or receive Web Monetization payments.
 
 ## Digital wallet providers
 
-Some digital wallet providers may only be available in certain regions. Check their websites for more information. 
+Some digital wallet providers may only be available in certain regions. Check their websites for more information.
 
 ### Fynbos
+
 <p>
-<mark>Brief description; short list of currencies/regions supported</mark>
+  <mark>Brief description; short list of currencies/regions supported</mark>
 </p>
 Create an account and get a wallet address at [Fynbos.app](https://fynbos.app).
 
 ### Gatehub
+
 <p>
-<mark>Brief description; short list of currencies/regions supported</mark>
+  <mark>Brief description; short list of currencies/regions supported</mark>
 </p>
 Create an account and get a wallet address at [Gatehub.net](https://gatehub.net).
 
@@ -31,12 +33,12 @@ Test wallets provide a great way to test Web Monetization without using real mon
 
 ### Interledger's Test Wallet
 
-Interledger's test wallet is an open source application developed and maintained by the [Interledger Foundation](https://interledger.org). 
+Interledger's test wallet is an open source application developed and maintained by the [Interledger Foundation](https://interledger.org).
 
 Create an account and get a wallet address at [Rafiki.money](https://rafiki.money).
 
 ## Web Monetization service providers
 
 <mark>None yet</mark>
 
-If you're unable to obtain your own Open Payments-enabled account and wallet address, you may be able to sign up with a Web Monetization provider. 
+If you're unable to obtain your own Open Payments-enabled account and wallet address, you may be able to sign up with a Web Monetization provider.