Skip to content

Commit 6f14848

Browse files
alexanderbyalexanderby
committed
Publish 2024-11-25
1 parent 38a8695 commit 6f14848

File tree

20 files changed

+197
-0
lines changed

20 files changed

+197
-0
lines changed

‎elements/safari-top-short.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// @ts-check
2+
3+
import {country, isHCountry} from './locales.js';
4+
import {
5+
createHTMLElement as html,
6+
$,
7+
} from './utils.js';
8+
import {clicker} from './stats.js';
9+
10+
const safariURL = 'https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180';
11+
12+
const htmlText = `
13+
<section class="container">
14+
<i class="safari-icon"></i>
15+
<section class="content">
16+
<div class="label"><span class="dark-reader">Dark Reader</span> for Safari</div>
17+
<div class="description">
18+
Get access to the latest features<br>
19+
on macOS, iOS and iPadOS.
20+
</div>
21+
<div class="links">
22+
<a class="badge-link" href="${safariURL}" target="_blank" rel="noopener" data-s="drsafari-top-badge">
23+
<img src="/images/app-store-badge.svg">
24+
</a>
25+
<a class="text-link" href="${safariURL}" target="_blank" rel="noopener" data-s="drsafari-top-text">
26+
Learn more
27+
</a>
28+
</div>
29+
</section>
30+
</section>`;
31+
32+
const cssText = `
33+
.container {
34+
align-items: flex-start;
35+
display: flex;
36+
flex-direction: row;
37+
gap: 1rem;
38+
justify-content: center;
39+
padding-top: 0;
40+
}
41+
:host {
42+
container-type: inline-size;
43+
width: 100%;
44+
}
45+
.safari-icon {
46+
background-image: url(/images/icon-safari-66x66.svg);
47+
background-position: center;
48+
background-repeat: no-repeat;
49+
background-size: cover;
50+
display: inline-block;
51+
height: 7rem;
52+
margin-top: 0.5rem;
53+
width: 7rem;
54+
}
55+
.content {
56+
color: var(--color-text);
57+
display: flex;
58+
flex-direction: column;
59+
gap: 0.5rem;
60+
}
61+
.label {
62+
color: var(--color-highlight);
63+
font-size: 1.35rem;
64+
font-weight: bold;
65+
line-height: 1;
66+
-webkit-text-stroke: 0.0625rem;
67+
}
68+
.links {
69+
align-items: center;
70+
display: flex;
71+
flex-direction: row;
72+
gap: 0.75rem;
73+
}
74+
.badge-link {
75+
display: inline-block;
76+
}
77+
.badge-link img {
78+
display: inline-block;
79+
width: 8rem;
80+
}
81+
.text-link {
82+
color: var(--color-text);
83+
transition: color 250ms;
84+
}
85+
.text-link:hover {
86+
color: white;
87+
}
88+
@container (width >= 28rem) {
89+
}
90+
`;
91+
92+
class SafariTopShortElement extends HTMLElement {
93+
constructor() {
94+
super();
95+
const shadowRoot = this.attachShadow({mode: 'open'});
96+
97+
const style = html('style', {}, cssText);
98+
shadowRoot.append(style);
99+
style.insertAdjacentHTML('afterend', htmlText);
100+
101+
if (this.hasAttribute('side')) {
102+
shadowRoot.querySelectorAll('[data-s]').forEach((node) => {
103+
const s = node.getAttribute('data-s') ?? '';
104+
node.setAttribute('data-s', s.replace('-top-', '-side-'));
105+
});
106+
}
107+
108+
$(shadowRoot).find('[data-s]').each((node) => clicker(node, node.getAttribute('data-s') ?? ''));
109+
}
110+
}
111+
112+
customElements.define('darkreader-safari-top-short', SafariTopShortElement);

‎elements/stats.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,3 +123,6 @@ if (isPCountry) {
123123
document.documentElement.dataset.p = 'p';
124124
}
125125
document.documentElement.dataset.c = country;
126+
if (navigator.userAgent.toLowerCase().includes('mac')) {
127+
document.documentElement.dataset.o = 'mac';
128+
}

‎help/be/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

‎help/cs/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

‎help/de/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

‎help/en/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

‎help/es/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

‎help/fr/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

‎help/it/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

‎help/ja/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@
4141
<darkreader-backers-top-short></darkreader-backers-top-short>
4242
<script type="module" src="/elements/sponsors-top-short.js"></script>
4343
</div>
44+
<div class="v2-secondary-banner v2-banner-safari">
45+
<darkreader-safari-top-short></darkreader-safari-top-short>
46+
<script type="module" src="/elements/safari-top-short.js"></script>
47+
</div>
4448
</div>
4549
</div>
4650
<header class="page-grid-header">

0 commit comments

Comments
 (0)