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

Commit9092e66

Browse files
authored
add reusable ExtensionLinks component, use on /install page (WICG#510)
1 parent2266ccc commit9092e66

File tree

4 files changed

+120
-89
lines changed

4 files changed

+120
-89
lines changed

‎public/img/icon-github.svg‎

Lines changed: 4 additions & 1 deletion
Loading
Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
interfaceProps {
3+
utm?:Partial<
4+
Record<`utm_${'source'|'medium'|'content'|'campaign'}`,string>
5+
>
6+
includeGitHub?:boolean
7+
}
8+
9+
const { utm, includeGitHub=false }=Astro.props
10+
11+
const URLS= {
12+
chrome:`https://chromewebstore.google.com/detail/web-monetization/oiabcfomehhigdepbbclppomkhlknpii`,
13+
firefox:`https://addons.mozilla.org/en-US/firefox/addon/web-monetization-extension/`,
14+
edge:`https://microsoftedge.microsoft.com/addons/detail/web-monetization/imjgemgmeoioefpmfefmffbboogighjl`,
15+
github:`https://github.com/interledger/web-monetization-extension/releases/latest`,
16+
}
17+
18+
const toURL= (url:string)=> {
19+
const result=newURL(url)
20+
if (utm&&!utm.utm_source) {
21+
result.searchParams.set('utm_source',Astro.site!.hostname)
22+
}
23+
for (const [k, v]ofObject.entries(utm|| {})) {
24+
result.searchParams.set(k,v)
25+
}
26+
returnresult.href
27+
}
28+
---
29+
30+
<ul>
31+
<li>
32+
<ahref={toURL(URLS.chrome)}title='Chrome Web Store'>
33+
<img
34+
alt='Chrome Web Store'
35+
src='/img/chrome-webstore.png'
36+
width='200'
37+
height='200'
38+
/>
39+
</a>
40+
</li>
41+
<li>
42+
<ahref={toURL(URLS.firefox)}title='Firefox Add-ons'>
43+
<img
44+
alt='Firefox Add-ons'
45+
src='/img/Fx-Browser-icon.png'
46+
width='200'
47+
height='200'
48+
/>
49+
</a>
50+
</li>
51+
<li>
52+
<ahref={toURL(URLS.edge)}title='Edge Add-ons'>
53+
<img
54+
alt='Edge Add-ons'
55+
src='/img/microsoft-edge.png'
56+
width='200'
57+
height='200'
58+
/>
59+
</a>
60+
</li>
61+
{
62+
includeGitHub&& (
63+
<li>
64+
<ahref={toURL(URLS.github)}title='Latest release on GitHub'>
65+
<img
66+
alt='Latest release on GitHub'
67+
src='/img/icon-github.svg'
68+
width='24'
69+
height='24'
70+
/>
71+
</a>
72+
</li>
73+
)
74+
}
75+
</ul>
76+
77+
<style>
78+
ul {
79+
list-style: none;
80+
display: inline-flex;
81+
align-items: baseline;
82+
justify-content: center;
83+
flex-wrap: wrap;
84+
gap: var(--space-m);
85+
padding: 0;
86+
}
87+
88+
a {
89+
padding: 0.5rem;
90+
display: flex;
91+
border-radius: 0.5rem;
92+
--shadow-color: rgba(191, 191, 191, 1);
93+
--shadow-x: 2px;
94+
box-shadow:
95+
var(--shadow-x) 2px 8px var(--shadow-color),
96+
var(--shadow-x) 2px 2px 1px var(--shadow-color);
97+
transition: box-shadow 0.2s ease-in-out;
98+
}
99+
100+
img {
101+
width: 3rem;
102+
height: 3rem;
103+
transition: transform 0.2s ease-in-out;
104+
}
105+
106+
a:hover {
107+
--shadow-x: 3px;
108+
}
109+
a:hover img {
110+
transform: scale(1.05);
111+
}
112+
</style>

‎src/content/docs/supporters/get-started.mdx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
---
22
title:Get started with the extension
3-
head:
4-
-tag:style
5-
content: .chrome {background-color:white;background-image:url('/img/chrome-webstore.png');background-size:50px;background-repeat:no-repeat;background-position:50%;border:none;cursor:pointer;border-radius:10px;text-decoration:none;color:white !important;width:70px;height:70px;margin:15px 15px 15px 0;box-shadow:2px 2px 2px 1px rgba(191, 191, 191, 1), 2px 2px 2px 1px rgba(191, 191, 191, 1)} .firefox {background-color:white;background-image:url('/img/Fx-Browser-icon.png');background-size:50px;background-repeat:no-repeat;background-position:50%;border:none;cursor:pointer;border-radius:10px;text-decoration:none;color:white !important;width:70px;height:70px;margin:15px 15px 15px 0;box-shadow:2px 2px 2px 1px rgba(191, 191, 191, 1), 2px 2px 2px 1px rgba(191, 191, 191, 1)} .edge {background-color:white;background-image:url('/img/microsoft-edge.png');background-size:50px;background-repeat:no-repeat;background-position:50%;border:none;cursor:pointer;border-radius:10px;text-decoration:none;color:white !important;width:70px;height:70px;margin:15px 15px 15px 0;box-shadow:2px 2px 2px 1px rgba(191, 191, 191, 1), 2px 2px 2px 1px rgba(191, 191, 191, 1)}
63
---
74

85
import {Steps,Tabs,TabItem }from'@astrojs/starlight/components'
96
import {LinkOut,StylishHeader }from'@interledger/docs-design-system'
7+
importExtensionLinksfrom"/src/components/ExtensionLinks.astro"
108

119
The Interledger Foundation's Web Monetization browser extension lets you support your favorite web monetized sites directly from your web browser in a quick, non-intrusive, and privacy-preserving way.
1210

@@ -28,11 +26,7 @@ The sites you pay are not provided with any of your personally identifiable info
2826

2927
##Install the extension
3028

31-
<ahref="https://chromewebstore.google.com/detail/web-monetization/oiabcfomehhigdepbbclppomkhlknpii"target="_blank"><buttonclass="chrome"></button></a>
32-
33-
<ahref="https://addons.mozilla.org/en-US/firefox/addon/web-monetization-extension/"target="_blank"><buttonclass="firefox"></button></a>
34-
35-
<ahref="https://microsoftedge.microsoft.com/addons/detail/web-monetization/imjgemgmeoioefpmfefmffbboogighjl"target="_blank"><buttonclass="edge"></button></a>
29+
<ExtensionLinksutm={{ utm_campaign:'supporters_get_started' }} />
3630

3731
:::note[Permissions]
3832
The extension asks for permission to access your browser tabs and your data for all websites. The extension requires these permissions to check each page you visit for Web Monetization.

‎src/pages/install.astro‎

Lines changed: 2 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
importi18next, {t,changeLanguage }from"i18next"
33
importBasefrom"../layouts/Base.astro"
4+
importExtensionLinksfrom"../components/ExtensionLinks.astro"
45
56
changeLanguage("en")
67
@@ -28,58 +29,7 @@ const description = t("site.description")
2829
<divclass="card">
2930
<divclass="cardContent">
3031
<h2class="heading3">Support content with the web extension</h2>
31-
<ulclass="icons">
32-
<liclass="icon">
33-
<a
34-
href="https://chromewebstore.google.com/detail/web-monetization/oiabcfomehhigdepbbclppomkhlknpii"
35-
>
36-
<img
37-
alt="Chrome Web Store logo"
38-
src="/img/chrome-webstore.png"
39-
width="200px"
40-
height="200px"
41-
/>
42-
</a>
43-
</li>
44-
<liclass="icon">
45-
<a
46-
href="https://addons.mozilla.org/en-US/firefox/addon/web-monetization-extension"
47-
>
48-
<img
49-
alt="Firefox Browser Add-ons"
50-
src="/img/Fx-Browser-icon.png"
51-
width="200px"
52-
height="200px"
53-
/>
54-
</a>
55-
</li>
56-
<liclass="icon">
57-
<a
58-
href="https://microsoftedge.microsoft.com/addons/detail/web-monetization/imjgemgmeoioefpmfefmffbboogighjl"
59-
>
60-
<img
61-
alt="Edge Add-ons"
62-
src="/img/microsoft-edge.png"
63-
width="200px"
64-
height="200px"
65-
/>
66-
</a>
67-
</li>
68-
</ul>
69-
<ulclass="icons">
70-
<liclass="icon">
71-
<a
72-
href="https://github.com/interledger/web-monetization-extension"
73-
>
74-
<img
75-
alt="GitHub repository"
76-
src="/img/icon-github.svg"
77-
width="98px"
78-
height="96px"
79-
/>
80-
</a>
81-
</li>
82-
</ul>
32+
<ExtensionLinksincludeGitHubutm={{ utm_campaign:'install_page' }} />
8333
</div>
8434
</div>
8535
<divclass="card">
@@ -166,32 +116,4 @@ const description = t("site.description")
166116
.card:hover::after {
167117
opacity: 1;
168118
}
169-
170-
/* Icon section styles */
171-
.icons {
172-
list-style: none;
173-
display: flex;
174-
flex-wrap: wrap;
175-
justify-content: center;
176-
gap: var(--space-m);
177-
padding: var(--space-xs) var(--space-s);
178-
}
179-
180-
.icon {
181-
flex: 0 0 3em;
182-
max-width: 3em;
183-
}
184-
185-
.icon img {
186-
height: auto;
187-
}
188-
189-
.icon a {
190-
display: block;
191-
transition: transform 0.2s ease-in-out;
192-
}
193-
194-
.icon a:hover {
195-
transform: scale(1.1);
196-
}
197119
</style>

0 commit comments

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