### Local Development Commands

Source: https://github.com/interledger/paymentpointers.org/blob/main/README.md

Common commands for local development using Bun, including installing dependencies, starting the dev server, building, and previewing the site.

```sh
bun install
```

```sh
bun run start
```

```sh
bun run build
```

```sh
bun run preview
```

```sh
bun run astro ...
```

```sh
bun run astro -- --help
```

```sh
bun run format
```

```sh
bun run lint
```

--------------------------------

### Install Bun Package Manager

Source: https://github.com/interledger/paymentpointers.org/blob/main/README.md

Command to install the Bun package manager. This is the recommended package manager for this project.

```sh
curl -fsSL https://bun.sh/install | bash
```

--------------------------------

### Payment Pointer Resolution Examples

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/syntax.md

Illustrates the mapping from various Payment Pointer formats to their corresponding resolved HTTPS URLs.

```text
$example.com                  ->  https://example.com/.well-known/pay
$example.com/invoices/12345   ->  https://example.com/invoices/12345
$bob.example.com              ->  https://bob.example.com/.well-known/pay
$example.com/bob              ->  https://example.com/bob
```

--------------------------------

### Referencing Static Assets

Source: https://github.com/interledger/paymentpointers.org/blob/main/README.md

Example of how to reference static assets like images within markdown files. Ensure the asset is placed in the 'public/' directory.

```markdown
![A lovely description of your beautiful image](/img/YOUR_BEAUTIFUL_IMAGE.png)
```

--------------------------------

### Discover Open Payments Endpoints

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/flow.md

Use this HTTP GET request to query the resolved Open Payments account URL and discover available services. Ensure the client verifies the endpoint host.

```http
GET /.well-known/pay HTTP/1.1
Host: alice.wallet.example
Accept: application/json
```

--------------------------------

### Project Structure Overview

Source: https://github.com/interledger/paymentpointers.org/blob/main/README.md

Illustrates the directory structure of the paymentpointers.org project.

```tree
. 
├── public/
├── src/
│   ├── components/
│   ├── content/
│   │   ├── docs/
│   └── content.config.ts
│   └── env.d.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json
```

--------------------------------

### Code Formatting and Linting

Source: https://github.com/interledger/paymentpointers.org/blob/main/README.md

Commands to format code and check for linting issues using ESLint and Prettier. Run 'bun run format' to fix issues and 'bun run lint' to check.

```sh
bun run format
```

```sh
bun run lint
```

--------------------------------

### Event Listener for Payment Pointer Input

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/flow.md

Attaches a keyup event listener to an input field with the ID 'pp-input'. When the user types a Payment Pointer, it attempts to resolve it into a URL using `resolveUrl` and updates the 'url-input' field. Displays errors if resolution fails.

```javascript
document.getElementById("pp-input").addEventListener("keyup", (event) => {
    const pp = event.srcElement.value;
    try {
      if (pp.length > 3) {
        const url = resolveUrl(pp);
        document.getElementById("url-input").value = url;
      }
      toggleError();
    } catch (e) {
      toggleError(e.message);
    }
  });
```

--------------------------------

### Event Listener for URL Input

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/flow.md

Attaches a keyup event listener to an input field with the ID 'url-input'. When the user types, it attempts to convert the input URL into a Payment Pointer using `createPaymentPointer` and updates the 'pp-input' field. Displays errors if conversion fails.

```javascript
document.getElementById("url-input").addEventListener("keyup", (event) => {
    const url = event.srcElement.value;
    try {
      if (url.length > 8) {
        const pp = createPaymentPointer(url);
        document.getElementById("pp-input").value = pp;
      }
      toggleError();
    } catch (e) {
      toggleError(e.message);
    }
  });
```

--------------------------------

### Interactive Payment Pointer Converter

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/index.md

This JavaScript code powers an interactive tool that allows users to convert between URLs and Payment Pointers in real-time, providing immediate feedback on errors.

```javascript
function toggleError(msg) {
    const error = document.getElementById("error");
    if (msg) {
      error.innerHTML = msg;
    } else {
      error.innerHTML = "";
    }
  }

  document.getElementById("url-input").addEventListener("keyup", (event) => {
    const url = event.srcElement.value;
    try {
      if (url.length > 8) {
        const pp = createPaymentPointer(url);
        document.getElementById("pp-input").value = pp;
      }
      toggleError();
    } catch (e) {
      toggleError(e.message);
    }
  });

  document.getElementById("pp-input").addEventListener("keyup", (event) => {
    const pp = event.srcElement.value;
    try {
      if (pp.length > 3) {
        const url = resolveUrl(pp);
        document.getElementById("url-input").value = url;
      }
      toggleError();
    } catch (e) {
      toggleError(e.message);
    }
  });
```

--------------------------------

### Payment Pointer Syntax

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/syntax.md

Defines the basic structure of a Payment Pointer using ABNF notation.

```abnf
"$" host path-abempty
```

--------------------------------

### Create Payment Pointer from URL

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/index.md

Generates a Payment Pointer string from a given URL. It enforces that the URL must use HTTPS and adhere to specific formatting rules.

```javascript
function createPaymentPointer(url) {
    const u = typeof url === "string" ? new URL(url) : url;
    if (u instanceof URL) {
      if (u.protocol !== "https:") {
        throw new Error(
          'Payment Pointers can only point to URLs with a protocol of "https"'
        );
      }
      if (u.port) {
        throw new Error(
          "Payment Pointers cannot point to URLs with a custom port"
        );
      }
      if (u.username || u.password) {
        throw new Error(
          "Payment Pointers cannot point to URLs containing `userinfo`"
        );
      }
      if (u.search) {
        throw new Error(
          "Payment Pointers cannot point to URLs with query parameters"
        );
      }
      if (u.hash) {
        throw new Error("Payment Pointers cannot point to URLs with a fragment");
      }
      const path = u.pathname.endsWith("/")
        ? u.pathname.slice(0, -1)
        : u.pathname;
      if (path === "") {
        throw new Error(
          "Payment Pointers cannot point to URLs with an empty path"
        );
      }
      return "$" + u.hostname + (path === "/.well-known/pay" ? "" : path);
    }
    throw new Error("url must be a valid URL string or URL object");
  }
```

--------------------------------

### Resolve Payment Pointer to URL

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/index.md

Converts a Payment Pointer string into a URL that can be used to interact with a wallet. It includes validation to ensure the pointer is well-formed.

```javascript
function resolveUrl(pointer) {
    if (typeof pointer !== "string") {
      throw new Error("Payment Pointer must be a string");
    }
    if (pointer.charAt(0) !== "$") {
      throw new Error('Payment Pointer must start with "$"');
    }
    const url = new URL("https://" + pointer.slice(1));
    if (url.port) {
      throw new Error("Payment Pointers cannot be defined with a port");
    }
    if (url.username || url.password) {
      throw new Error("Payment Pointers cannot be defined with userinfo");
    }
    if (url.search) {
      throw new Error("Payment Pointers cannot be defined with query parameters");
    }
    if (url.hash) {
      throw new Error("Payment Pointers cannot be defined with a fragment");
    }
    if (url.pathname === "" || url.pathname === "/") {
      url.pathname = "/.well-known/pay";
    }
    return url.href;
  }
```

--------------------------------

### Payment Pointer Resolution to HTTPS URL

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/syntax.md

Specifies how a Payment Pointer resolves to an HTTPS endpoint URL. If the path is empty or '/', it defaults to '/.well-known/pay'.

```abnf
"https://" host path-abempty
```

--------------------------------

### Toggle Error Message Display

Source: https://github.com/interledger/paymentpointers.org/blob/main/src/content/docs/flow.md

Updates the content of an HTML element with the ID 'error' to display or clear an error message. Used to provide user feedback on invalid input.

```javascript
function toggleError(msg) {
    const error = document.getElementById("error");
    if (msg) {
      error.innerHTML = msg;
    } else {
      error.innerHTML = "";
    }
  }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.