Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit399c2df

Browse files
docs: link element to partials (WICG#519)
* docs: link element to partialsThe link-element page is placed in the main table of contents within For Developers > Wallet linking and also within API docs > HTML DOM API. The reason is that this page is appropriate in both places.However, since it's the same page, but with different table of contents titles, there's a navigation issue. If you click Next at the bottom of Wallet linking > Webpage (HTML), it takes you to the Feed page. If you click Next at the bottom of HTML DOM API > Monetization link element, it ALSO takes you to Feed instead of taking you to Monetization interfaces. If you use Next to navigate, you end up stuck in a loop.I've made the content of the link-element page into a partials so that the partials can be embedded within two different pages, allowing the navigation to behave as expected.* docs: fix broken linksRemoved links to #web-monetization-agent from the -multilink and -iframes partials since they were breaking.
1 parent6eff3f7 commit399c2df

13 files changed

+185
-101
lines changed

‎astro.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default defineConfig({
107107
items:[
108108
{
109109
label:'Webpage (HTML)',
110-
link:'/developers/link-element',
110+
link:'/developers/link-element-webpage',
111111
},
112112
{
113113
label:'Feed (RSS, Atom, JSON Feed)',
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title:Monetization <link> element
3+
---
4+
import {Badge }from'@astrojs/starlight/components'
5+
importOverviewfrom"/src/partials/link-element-overview.mdx";
6+
importPrereqsfrom"/src/partials/link-element-prereqs.mdx";
7+
importSyntaxfrom"/src/partials/link-element-syntax.mdx";
8+
importPlacementfrom"/src/partials/link-element-placement.mdx";
9+
importMultiLinkfrom"/src/partials/link-element-multilink.mdx";
10+
importIframesfrom"/src/partials/link-element-iframes.mdx";
11+
importMediafrom"/src/partials/link-element-media.mdx";
12+
importHowHtmlfrom"/src/partials/link-element-how-html.mdx";
13+
importHowRelfrom"/src/partials/link-element-how-rel.mdx";
14+
importHowAgentfrom"/src/partials/link-element-how-agent.mdx";
15+
importSpecificationfrom'/src/components/docs/Specification.astro'
16+
17+
<Badgetext='HTML DOM API'style='position: relative; top:-30px;' />
18+
19+
<Overview />
20+
21+
##Prerequisites
22+
23+
<Prereqs />
24+
25+
##Monetization`<link>` element
26+
27+
###Syntax
28+
29+
<Syntax />
30+
31+
###Placement
32+
33+
<Placement />
34+
35+
###Multiple monetization links
36+
37+
<MultiLink />
38+
39+
###Iframes
40+
41+
<Iframes />
42+
43+
###Audio, video, and picture elements
44+
45+
<Media />
46+
47+
##How it works
48+
49+
###HTMLLinkElement
50+
<HowHtml />
51+
52+
###rel="monetization" link type
53+
<HowRel />
54+
55+
###Web Monetization agent
56+
<HowAgent />
57+
58+
##Specification
59+
60+
<Specificationanchor='link-type-monetization' />
Lines changed: 23 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,61 @@
11
---
22
title:Monetization <link> element
3-
tableOfContents:
4-
maxHeadingLevel:4
53
---
64

7-
import {LinkOut,Hidden }from'@interledger/docs-design-system'
5+
import {Badge }from'@astrojs/starlight/components'
6+
importOverviewfrom"/src/partials/link-element-overview.mdx";
7+
importPrereqsfrom"/src/partials/link-element-prereqs.mdx";
8+
importSyntaxfrom"/src/partials/link-element-syntax.mdx";
9+
importPlacementfrom"/src/partials/link-element-placement.mdx";
10+
importMultiLinkfrom"/src/partials/link-element-multilink.mdx";
11+
importIframesfrom"/src/partials/link-element-iframes.mdx";
12+
importMediafrom"/src/partials/link-element-media.mdx";
13+
importHowHtmlfrom"/src/partials/link-element-how-html.mdx";
14+
importHowRelfrom"/src/partials/link-element-how-rel.mdx";
15+
importHowAgentfrom"/src/partials/link-element-how-agent.mdx";
816
importSpecificationfrom'/src/components/docs/Specification.astro'
9-
importBrowserCompatfrom'/src/components/docs/BrowserCompat.astro'
10-
importdatafrom'/src/data/browser-compat-data/link.json'
11-
import {Steps,Tabs,TabItem,Badge }from'@astrojs/starlight/components'
1217

1318
<Badgetext='HTML DOM API'style='position: relative; top:-30px;' />
1419

15-
From a creator/developer perspective, the monetization`<link>` element is one of the two key pieces to web monetizing a page. The second piece is a wallet address/payment pointer.
20+
<Overview />
1621

1722
##Prerequisites
1823

19-
To web monetize an HTML page:
20-
21-
- You must have an account with a[compatible wallet provider](/wallets)
22-
- You must have the wallet address, or payment pointer in <LinkOuthref="https://paymentpointers.org">URL format</LinkOut>, from your wallet provider
23-
- Your document must be served over HTTPS
24+
<Prereqs />
2425

2526
##Monetization`<link>` element
2627

27-
The monetization`<link>` element is what indicates your HTML page supports Web Monetization.
28-
2928
###Syntax
3029

31-
```html
32-
<linkrel="monetization"href="https://(paymentUrl)" />
33-
```
34-
35-
- The`rel` attribute is always`monetization`
36-
- The`href` attribute equals your wallet address or your payment pointer in URL format
37-
38-
For example:
39-
40-
```html
41-
<linkrel="monetization"href="https://wallet.example.com/alice" />
42-
```
30+
<Syntax />
4331

4432
###Placement
4533

46-
A monetization`<link>` is`body-ok`, meaning it's allowed in your page's`<head>` and/or`<body>`.
34+
<Placement />
4735

4836
###Multiple monetization links
4937

50-
An HTML page can contain multiple monetization`<link>` elements; however, your site visitor’s[Web Monetization agent](#web-monetization-agent) could be designed to handle multiple links in a particular way. For example, an agent might:
51-
52-
- Split payments evenly between all links
53-
- Split payments between the first few links it finds
54-
- Send the amount only to the first link it finds and ignore all others
55-
56-
:::tip[Recommendation]
57-
The Web Monetization agent built into the <LinkOuthref="https://github.com/interledger/web-monetization-extension">Interledger Foundation's extension</LinkOut> splits payments evenly between all links. We recommend other extension developers follow this approach.
58-
:::
38+
<MultiLink />
5939

6040
###Iframes
6141

62-
Nested browsing contexts (iframes) can contain monetization`<link>` elements; however, your site visitor's[Web Monetization agent](#web-monetization-agent) determines how iframes are monetized. A few examples of how a Web Monetization agent can monetize iframes include:
63-
64-
- Splitting payments evenly between all monetization links within both the parent and the iframe
65-
- Splitting payments evenly between all monetization links in the parent and the first monetization link it finds in the iframe's`<head>`, while ignoring any other monetization links in the iframe
66-
:::note
67-
This is the approach used in the <LinkOuthref="https://github.com/interledger/web-monetization-extension">Interledger Foundation's extension</LinkOut>.
68-
:::
69-
- Sending payments to the first monetization link it finds in the parent browsing context and ignoring all other monetization links in the parent and the iframe
42+
<Iframes />
7043

7144
###Audio, video, and picture elements
7245

73-
The following HTML elements can be web monetized by adding the`<link>` element between the open and close tags.
74-
75-
<Tabs>
76-
<TabItemlabel="<audio>"icon="seti:audio">
77-
```html
78-
<audiosrc="music.mp3">
79-
<linkrel="monetization"href="https://wallet.example.com/bob">
80-
</audio>
81-
```
82-
</TabItem>
83-
<TabItemlabel="<video>"icon="seti:video">
84-
```html
85-
<videosrc="myvideo">
86-
<linkrel="monetization"href="https://wallet.example.com/bob">
87-
</video>
88-
```
89-
</TabItem>
90-
<TabItemlabel="<picture>"icon="seti:image">
91-
```html
92-
<picturesrcset="cat.jpeg">
93-
<linkrel="monetization"href="https://wallet.example.com/bob">
94-
</picture>
95-
```
96-
</TabItem>
97-
</Tabs>
46+
<Media />
9847

9948
##How it works
10049

10150
###HTMLLinkElement
102-
103-
The <LinkOuthref="https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API">HTML DOM API's</LinkOut>`HTMLLinkElement` interface defines how the`<link>` element functions. The`<link>` element is what allows you to link your HTML page to a resource.
104-
105-
The two most recognizable`HTMLLinkElement` properties are`href` and`rel`. The`href` property defines the URL to the resource. The`rel` property indicates the type of link, or relationship, the resource has to the current page.
51+
<HowHtml />
10652

10753
###rel="monetization" link type
108-
109-
Browsers already know how to interpret certain`rel` values because of web standards. One such standard is`stylesheet`. When a browser loads a page that contains`<link href="styles.css" rel="stylesheet">`, the browser automatically knows to import a style sheet from the given URL.
110-
111-
The`monetization` link type, however, is not yet a standard. Major web browsers don't automatically know what to do when encountering this link type in a page. Until`monetization` becomes a standard, browsers must rely on a Web Monetization agent.
54+
<HowRel />
11255

11356
###Web Monetization agent
57+
<HowAgent />
11458

115-
A Web Monetization agent is a non-user facing component of the <LinkOuthref="https://github.com/interledger/web-monetization-extension">Interledger Foundation's extension</LinkOut>.
116-
117-
The purpose of the Web Monetization agent is to recognize when a page is web monetized and automatically carry out certain tasks. These tasks include:
118-
119-
- Extending the HTML DOM API so that`monetization` is a valid link type
120-
- Processing the monetization link or links within an HTML page
121-
- Instrumenting payments by calling the[Open Payments APIs](/developers/about-receiving#a-deeper-dive-into-payments), which are APIs implemented by wallet providers
122-
- Firing[`monetization`](/developers/events) events after an outgoing payment is created
123-
- Processing`monetization` events sent to the browser window via the`onmonetization` event handler
124-
- Enabling the CSP[`monetization-src`](/developers/csp) and Permissions Policy[`monetization`](/developers/permissions-policy) directives
125-
126-
Until Web Monetization agents are natively built in to web browsers, an agent must be added to browsers in some other way. That's why the agent is included as part of the Interledger Foundation's extension.
127-
128-
<Hidden>
129-
130-
// ## Browser compatibility
131-
132-
<BrowserCompatjson={data} />
133-
134-
</Hidden>
135-
136-
##Specifications
59+
##Specification
13760

138-
<Specificationanchor='link-type-monetization' />
61+
<Specificationanchor='link-type-monetization' />
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {LinkOut,Hidden }from'@interledger/docs-design-system'
2+
importBrowserCompatfrom'/src/components/docs/BrowserCompat.astro'
3+
importdatafrom'/src/data/browser-compat-data/link.json'
4+
5+
A Web Monetization agent is a non-user facing component of the <LinkOuthref="https://github.com/interledger/web-monetization-extension">Interledger Foundation's extension</LinkOut>.
6+
7+
The purpose of the Web Monetization agent is to recognize when a page is web monetized and automatically carry out certain tasks. These tasks include:
8+
9+
- Extending the HTML DOM API so that`monetization` is a valid link type
10+
- Processing the monetization link or links within an HTML page
11+
- Instrumenting payments by calling the[Open Payments APIs](/developers/about-receiving#a-deeper-dive-into-payments), which are APIs implemented by wallet providers
12+
- Firing[`monetization`](/developers/events) events after an outgoing payment is created
13+
- Processing`monetization` events sent to the browser window via the`onmonetization` event handler
14+
- Enabling the CSP[`monetization-src`](/developers/csp) and Permissions Policy[`monetization`](/developers/permissions-policy) directives
15+
16+
Until Web Monetization agents are natively built in to web browsers, an agent must be added to browsers in some other way. That's why the agent is included as part of the Interledger Foundation's extension.
17+
18+
<Hidden>
19+
20+
// ## Browser compatibility
21+
22+
<BrowserCompatjson={data} />
23+
24+
</Hidden>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {LinkOut }from'@interledger/docs-design-system'
2+
3+
The <LinkOuthref="https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API">HTML DOM API's</LinkOut>`HTMLLinkElement` interface defines how the`<link>` element functions. The`<link>` element is what allows you to link your HTML page to a resource.
4+
5+
The two most recognizable`HTMLLinkElement` properties are`href` and`rel`. The`href` property defines the URL to the resource. The`rel` property indicates the type of link, or relationship, the resource has to the current page.
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Browsers already know how to interpret certain`rel` values because of web standards. One such standard is`stylesheet`. When a browser loads a page that contains`<link href="styles.css" rel="stylesheet">`, the browser automatically knows to import a style sheet from the given URL.
2+
3+
The`monetization` link type, however, is not yet a standard. Major web browsers don't automatically know what to do when encountering this link type in a page. Until`monetization` becomes a standard, browsers must rely on a Web Monetization agent.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {LinkOut }from'@interledger/docs-design-system'
2+
3+
Nested browsing contexts (iframes) can contain monetization`<link>` elements; however, your site visitor’s Web Monetization agent determines how iframes are monetized. A few examples of how a Web Monetization agent can monetize iframes include:
4+
5+
* Splitting payments evenly between all monetization links within both the parent and the iframe
6+
* Splitting payments evenly between all monetization links in the parent and the first monetization link it finds in the iframe’s`<head>`, while ignoring any other monetization links in the iframe
7+
:::note
8+
This is the approach used in the <LinkOuthref="https://github.com/interledger/web-monetization-extension">Interledger Foundation’s extension</LinkOut>.
9+
:::
10+
* Sending payments to the first monetization link it finds in the parent browsing context and ignoring all other monetization links in the parent and the iframe
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {Tabs,TabItem }from'@astrojs/starlight/components'
2+
3+
The following HTML elements can be web monetized by adding the`<link>` element between the open and close tags.
4+
5+
<Tabs>
6+
<TabItemlabel="<audio>"icon="seti:audio">
7+
```html wrap
8+
<audiosrc="music.mp3">
9+
<linkrel="monetization"href="https://wallet.example.com/bob">
10+
</audio>
11+
```
12+
</TabItem>
13+
<TabItemlabel="<video>"icon="seti:video">
14+
```html wrap
15+
<videosrc="myvideo">
16+
<linkrel="monetization"href="https://wallet.example.com/bob">
17+
</video>
18+
```
19+
</TabItem>
20+
<TabItemlabel="<picture>"icon="seti:image">
21+
```html wrap
22+
<picturesrcset="cat.jpeg">
23+
<linkrel="monetization"href="https://wallet.example.com/bob">
24+
</picture>
25+
```
26+
</TabItem>
27+
</Tabs>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {LinkOut }from'@interledger/docs-design-system'
2+
3+
An HTML page can contain multiple monetization`<link>` elements; however, your site visitor’s Web Monetization agent could be designed to handle multiple links in a particular way. For example, an agent might:
4+
5+
* Split payments evenly between all links
6+
* Split payments between the first few links it finds
7+
* Send the amount only to the first link it finds and ignore all others
8+
9+
:::tip[Recommendation]
10+
The Web Monetization agent built into the <LinkOuthref="https://github.com/interledger/web-monetization-extension">Interledger Foundation’s extension</LinkOut> splits payments evenly between all links. We recommend other extension developers follow this approach.
11+
:::
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
From a creator/developer perspective, the monetization`<link>` element is one of the two key pieces to web monetizing a page. The second piece is a wallet address/payment pointer.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp