Skip to content

Commit 78067af

Browse files
DigitalBrainJSDigitalBrainJS
authoredAug 19, 2024
Improve sponsor list generator (axios#200)
* feat: add sponsor list generator; * feat: added deploy action; * fix: fixed layout; * fix: use utm links inside tooltips; * fix(CI): set engine version; * chore: reverted the start button title change; * fix: add the ability to retry the request to get a list of sponsors; * chore: change sponsors config & fix sponsor card layout; * chore: hide 'incognito' sponsor from the list of sponsors; * chore: add Route4Me sponsor; * chore: fixed resolution of utm link for manually added sponsors; * chore: fixed sponsors' tiers resolving; * chore: draft; * chore(sponsors): disable utm links generation for `slotozilla-deutschland`; * chore(draft): Improve sponsors list generator; * chore(draft): fix origin preset; * chore(draft): delete generated icon; * chore(draft): add check to ensure dir exists; * chore(draft): add check to ensure dir exists; * chore(draft): activate GitHub data pulling; * chore(draft): fix crown chevron styling; * chore(draft): reduce logo min-width; * chore(draft): add missed `route4me` light logo; * chore(draft): add a title for readme sponsor block; * chore(draft): fix description resolving; * chore(draft): add utm links for sponsors rendered to markdown; * chore(draft): respect autoUTMLinks for utm links generation; * chore(draft): set user theme timeout to 24 hours; * chore(draft): set utm link for markdown output; * chore(draft): add sponsors' logos; * chore(draft): fix sponsor.json; * chore(draft): fix sponsor.json; * chore(draft): add principal logo; * chore(draft): add a hotfix for svg logos; * chore(draft): use image metadata instead of file extension to determine image format; * chore(draft): add Stytch & Descope links; * chore(draft): fix utm link generator to respect sponsor's params; * chore(draft): add page active link rendering; * chore(draft): notes block refactoring; * chore(draft): remove graphql packages;
1 parent b68c0fc commit 78067af

24 files changed

+2061
-249
lines changed
 

‎assets/icons/crown.svg

+14
Loading

‎assets/sponsors/descope.png

44.6 KB
Loading

‎assets/sponsors/descope_white.png

35.8 KB
Loading

‎assets/sponsors/principal.svg

+1
Loading

‎assets/sponsors/route4me_icon_55e4b23adce0b1e9f721fc797800e1839c230f79.png

-1.34 KB
Binary file not shown.

‎assets/sponsors/route4me_white.png

18.7 KB
Loading

‎assets/sponsors/stytch.png

13.9 KB
Loading

‎assets/sponsors/stytch_white.png

11.3 KB
Loading

‎data/sponsors.json

+54-4
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@
22
"totalAmountDonatedThreshold": 200,
33
"monthlyContributionThreshold": 15,
44
"disappearCredit": 20,
5-
"scoreTierPriceFactor": 0.70,
5+
"scoreTierPriceFactor": 0.80,
66
"scoreTotalAmountFactor": 0.2,
77
"tiers": {
8+
"backer" : {
9+
"price": 20,
10+
"benefits": {
11+
"showAtSponsorList": true
12+
},
13+
"period": 2
14+
},
815
"bronze": {
916
"price": 49,
1017
"benefits": {
@@ -15,21 +22,34 @@
1522
"price": 99,
1623
"benefits": {
1724
"showAtSponsorList": true,
18-
"showAtPages": true
25+
"github": true,
26+
"showAtPages": false
1927
}
2028
},
2129
"gold" : {
2230
"price": 299,
2331
"benefits": {
2432
"showAtSponsorList": true,
25-
"showAtPages": true
33+
"github": true,
34+
"showAtPages": true,
35+
"links": 3,
36+
"video": true,
37+
"readme": true,
38+
"crown": true,
39+
"maxReadmeDescLength": 100
2640
}
2741
},
2842
"platinum" : {
2943
"price": 599,
3044
"benefits": {
3145
"showAtSponsorList": true,
32-
"showAtPages": true
46+
"github": true,
47+
"showAtPages": true,
48+
"links": 4,
49+
"video": true,
50+
"readme": true,
51+
"crown": true,
52+
"maxReadmeDescLength": 150
3353
}
3454
}
3555
},
@@ -51,10 +71,13 @@
5171
"hide": true
5272
},
5373
"route4me": {
74+
"tier": "gold",
5475
"image": "/assets/sponsors/route4me.png",
76+
"image_dark": "/assets/sponsors/route4me_white.png",
5577
"website": "https://route4me.com/",
5678
"displayName": "Route4Me",
5779
"alt": "Route Planner and Route Optimizer",
80+
"description": "Best Route Planning And Route Optimization Software",
5881
"isActive": true,
5982
"totalAmountDonated": 300,
6083
"createdAt": "2024-07-12 00:00",
@@ -67,6 +90,33 @@
6790
},
6891
"slotozilla-deutschland" : {
6992
"autoUTMLinks": false
93+
},
94+
"stytch": {
95+
"tier": "gold",
96+
"description": "API-first authentication, authorization, and fraud prevention",
97+
"image": "/assets/sponsors/stytch.png",
98+
"image_dark": "/assets/sponsors/stytch_white.png",
99+
"targetLink": "https://stytch.com/?utm_source=oss-sponsorship&utm_medium=paid_sponsorship&utm_content=website-link&utm_campaign=axios-http",
100+
"links": {
101+
"Website": "https://stytch.com/?utm_source=oss-sponsorship&utm_medium=paid_sponsorship&utm_content=website-link&utm_campaign=axios-http",
102+
"Documentation": "https://stytch.com/docs?utm_source=oss-sponsorship&utm_medium=paid_sponsorship&utm_content=docs-link&utm_campaign=axios-http",
103+
"Node.js": "https://github.com/stytchauth/stytch-node?utm_source=oss-sponsorship&utm_medium=paid_sponsorship&utm_content=node-sdk&utm_campaign=axios-http"
104+
}
105+
},
106+
"descope": {
107+
"tier": "gold",
108+
"image": "/assets/sponsors/descope.png",
109+
"image_dark": "/assets/sponsors/descope_white.png",
110+
"targetLink": "https://www.descope.com/?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship",
111+
"links": {
112+
"Website": "https://www.descope.com/?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship",
113+
"Documentation": "https://docs.descope.com/?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship",
114+
"Community": "https://www.descope.com/community?utm_source=axios&utm_medium=referral&utm_campaign=axios-oss-sponsorship"
115+
}
116+
},
117+
"principal": {
118+
"tier": "gold",
119+
"image": "/assets/sponsors/principal.svg"
70120
}
71121
}
72122
}

‎en.lang.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ module.exports = {
1515
Axios provides a simple to use library in a small package with a very
1616
extensible interface.`,
1717
sponsors: `<p>Thank you for considering supporting our project.</p>
18-
<p>You will be automatically added to this list within 24 hours if the tier you select provides this benefit.</p>`
18+
<p>You will be automatically added to this list within 24 hours if the tier you select provides this benefit.</p>
19+
<div class="social"><a class="link" href="/docs/sponsor">Read more...</a></div>
20+
`
1921
},
2022
// `t` stands fot `translation`. This will contain translations of single words or phrases
2123
t: {
@@ -38,7 +40,8 @@ module.exports = {
3840
"Axios Project Copy Right Footer": undefined,
3941
"License Label Footer": undefined,
4042
"Sponsors": undefined,
41-
"Become a sponsor": undefined
43+
"Become a sponsor": undefined,
44+
"Gold Sponsors": undefined
4245
},
4346
sidebar: [
4447
{
@@ -127,6 +130,11 @@ module.exports = {
127130
type: "heading",
128131
text: "Contributors",
129132
},
133+
{
134+
type: "link",
135+
href: "/docs/sponsor",
136+
text: "Sponsoring Axios",
137+
},
130138
{
131139
type: "link",
132140
href: "https://github.com/axios/axios/blob/master/CODE_OF_CONDUCT.md",

‎inert.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ module.exports = {
328328
},
329329
...langs.map(
330330
(lang) => ({
331-
folder: `posts/${lang.postsDir || lang.prefix.slice(1, -1)}`,
331+
folder: `posts/${lang.postsDir || lang.prefix.slice(1, -1)}`,
332332
build: {
333333
traverseLevel: "recursive",
334334
filePipeline: [

‎package-lock.json

+552-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,13 @@
1818
"devDependencies": {
1919
"axios": "^1.3.2",
2020
"cheerio": "^1.0.0-rc.12",
21+
"handlebars": "^4.7.8",
2122
"html-escaper": "^2.0.2",
2223
"http-server": "^14.1.0",
2324
"inert-ssg": "^2.0.0-alpha.15",
25+
"joi": "^17.13.3",
2426
"mime-types": "^2.1.35",
25-
"sharp": "^0.31.3"
27+
"sharp": "^0.31.3",
28+
"showdown": "^2.1.0"
2629
}
2730
}

‎posts/en/api_intro.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,4 @@ For convenience aliases have been provided for all supported request methods.
5858
##### axios.putForm(url[, data[, config]])
5959
##### axios.patchForm(url[, data[, config]])
6060

61-
###### NOTE
62-
When using the alias methods `url`, `method`, and `data` properties don't need to be specified in config.
61+
> NOTE: When using the alias methods `url`, `method`, and `data` properties don't need to be specified in config.

‎posts/en/sponsor.md

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
title: 'Sponsoring Axios'
3+
---
4+
5+
Thank you for considering supporting our project. Your donation will be used to maintain and develop Axios.
6+
7+
As a benefit to our major sponsors, we provide the opportunity to add your logo and brief
8+
information to our website and/or Readme.md depending on the tier of support you choose.
9+
This process is fully automated if you donate through [OpenCollective.com](https://opencollective.com/axios/contribute),
10+
so your logo will be added within 24 hours.
11+
12+
Your logo can be placed:
13+
- in the carousel on the main page
14+
- in carousels on each page of the documentation
15+
- at the top of Readme.md in our repo
16+
17+
Place in the carousel depends on:
18+
- newness of the sponsor (new sponsors temporarily receive higher places)
19+
- selected support tier
20+
- total amount of money donated
21+
- consistency of donations
22+
23+
If you donate through [GitHub](https://github.com/sponsors/axios), you will need to contact us later if you want your logo to be promoted according
24+
to our support tiers.
25+
26+
### Tiers
27+
28+
See tiers list on [Open Collective](https://opencollective.com/axios/contribute)
29+
30+
| | Bronze | Silver | Gold | Platinum |
31+
|---------------------------------------------|:----------:|:-----------:|:-----------:|:----------------:|
32+
| Main page | small logo | medium logo | large logo | extra large logo |
33+
| Docs pages | | | medium logo | large logo |
34+
| [Readme.md](https://github.com/axios/axios) | | | small logo | medium logo |
35+
| Data merging from sponsor's Github repo | | + | + | + |
36+
| Links block in tooltip* | | | + | + |
37+
| Embedded Youtube video in tooltip* | | | + | + |
38+
| Max description length in Readme.md (chars) | | | 100 | 150 |
39+
40+
> Note:
41+
> The extra links block and video can only be set via `sponsors.json`
42+
43+
### Backer tier
44+
45+
You can create a custom tier, in which case you will get the benefits of the highest existing tier whose price
46+
is covered by your donation. The extra donation amount above the existing tier will be taken into account
47+
when sorting sponsors in a carousel.
48+
49+
### Sponsor logo
50+
51+
Your logo will be downloaded to our server, optimized, trimmed empty borders and resized with preservation of proportions.
52+
If the width of the logo is significantly greater than its height, then the text caption will be hidden,
53+
and the logo will take up all the available space. The maximum logo height is the same for all tiers.
54+
55+
### Description
56+
57+
If the description is not provided, we will try to parse it from the sponsor's site meta tags.
58+
59+
### GitHub
60+
61+
If you have set up your GitHub profile in your Open Collective profile,
62+
you can create a special repository called `axios-sponsor` with `sponsor.json` in its root to manage your sponsor profile data.
63+
64+
The data from this file will be merged with your Open Collective profile which allows you to provide some extra info for advertising.
65+
66+
`sponsor.json` has the following structure (each field is optional):
67+
68+
```json
69+
{
70+
"displayName": "Umbrella Corporation",
71+
"targetLink": "https://umbrellacorp.com/",
72+
"alt": "Umbrella Corporation",
73+
"image": "https://fake.com/logo.png",
74+
"image_dark": "https://fake.com/logo_dark.png",
75+
"description": "The Umbrella Corporation is a pharmaceutical company",
76+
"website": "https://google.com/",
77+
"github": "https://github.com/fakeGitHib",
78+
"icon": "https://fake.com/icon.png",
79+
"video": "https://www.youtube.com/embed/isosE4Bowh0",
80+
"twitter": "https://x.com/profile",
81+
"showCaption": true,
82+
"crown": false,
83+
"hide": false,
84+
"links": {
85+
"link1": "https://google.com/",
86+
"link2": "https://google.com/"
87+
}
88+
}
89+
```
90+
Every 24 hour our backend will pull this data when update sponsors list on the website.

‎scripts/updateData.js

+549-101
Large diffs are not rendered by default.

‎scss/home.scss

+39-110
Original file line numberDiff line numberDiff line change
@@ -201,149 +201,78 @@ html[dir="rtl"] {
201201
}
202202
}
203203

204-
#sponsors {
205-
.splide {
206-
padding: 0 40px;
207-
margin: 0 -50px;
208-
}
204+
.sponsors_container{
205+
margin: 8px 0 10px 0;
209206
}
210207

211-
li.sponsor-card {
212-
margin-bottom: 20px;
213-
padding: 10px;
214-
215-
&:hover {
216-
opacity: 1;
217-
}
208+
.link-sponsors {
209+
color: var(--col-fg);
210+
}
218211

212+
/*
213+
.become_sponsor{
219214
> a {
220-
height: 100%;
221-
overflow: hidden;
222-
display: flex;
223-
flex-direction: row;
224-
flex-wrap: nowrap;
225-
align-items: center;
226215
justify-content: center;
227-
padding-left: 0.5rem;
228-
}
229-
230-
.caption{
231-
font-size: 3rem;
232-
overflow: hidden;
233-
text-overflow: ellipsis;
234-
padding-left: 0.5rem;
235-
}
236-
237-
img + .caption {
238-
font-size: 1.5rem;
239-
}
240-
241-
img{
242-
max-width: 100%;
243-
max-height: 7rem;
244-
position: relative;
216+
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.1);
217+
margin: 0;
218+
padding: 1rem;
219+
text-align: center;
245220
}
246221
}
247-
248-
li.sponsor-card[data-is-active = "yes"] {
249-
opacity: 1;
250-
}
251-
252-
/*.splide {
253-
.splide__arrows {
254-
opacity: 0.5;
255-
transition-duration: 200ms;
256-
}
257-
258-
&:hover {
259-
.splide__arrows {
260-
opacity: 1;
261-
}
262-
}
263-
}*/
222+
*/
264223

265224
.tippy-box {
266225
background-color: var(--primary-color);
267-
pointer-events: all;
268-
269-
*{
270-
color: white;
271-
}
272226

273227
.tippy-arrow{
274228
color: var(--primary-color);
275229
}
230+
}
276231

277-
.tier {
278-
font-size: 0.75rem;
279-
}
280-
281-
.description{
282-
word-break: break-word;
283-
}
232+
.splide {
233+
height: 9rem;
234+
padding: 0 45px;
235+
margin: 0 -55px;
236+
}
284237

285-
.links {
286-
padding: 5px 0px;
287-
}
238+
li.sponsor-card {
239+
width: calc(12%);
288240

289-
.links a:not(:first-child):before {
290-
content: "|";
291-
padding: 0 10px 0 5px;
241+
&[data-tier=silver] {
242+
width: calc(17%);
292243
}
293244

294-
.caption {
295-
display: flex;
296-
align-items: center;
245+
&[data-tier=gold] {
246+
width: calc(22%);
297247
}
298248

299-
.sponsor-icon {
300-
padding-right: 3px;
249+
&[data-tier=platinum] {
250+
width: calc(30%);
301251
}
252+
}
302253

303-
.social {
304-
display: flex;
305-
justify-content: center;
306-
align-items: center;
254+
@media (max-width: 1400px) {
255+
li.sponsor-card {
256+
width: calc(20%);
307257

308-
> a{
309-
margin: 0.4rem 1rem 0 1rem;
258+
&[data-tier=silver] {
259+
width: calc(25%);
310260
}
311261

312-
.icon{
313-
max-width: 3rem;
314-
max-height: 3rem;
262+
&[data-tier=gold] {
263+
width: calc(30%);
315264
}
316-
}
317-
}
318-
319-
.opacity_100 {
320-
opacity: 1;
321-
}
322265

323-
.opacity_75 {
324-
opacity: 0.75;
325-
}
326-
327-
.opacity_50 {
328-
opacity: 0.5;
329-
}
330-
331-
.opacity_25 {
332-
opacity: 0.25;
333-
}
334-
335-
.become_sponsor{
336-
> a {
337-
justify-content: center;
338-
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.1);
339-
margin: 0;
340-
padding: 1rem;
341-
text-align: center;
266+
&[data-tier=platinum] {
267+
width: calc(35%);
268+
}
342269
}
343270
}
344271

345272
@media (max-width: 1000px) {
346273
li.sponsor-card img + .caption {
347274
display: none;
348275
}
276+
277+
349278
}

‎scss/index.scss

+19
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,13 @@ body {
3232
}
3333

3434
&.dark {
35+
.aside-container {
36+
a.selected {
37+
color: var(--primary-color);
38+
background: #262631;
39+
/* background: repeating-linear-gradient(45deg, #2a2a36, #2a2a36 10px, #262631 10px, #262631 20px);*/
40+
}
41+
}
3542
.light {
3643
svg {
3744
opacity: 0.7;
@@ -164,6 +171,18 @@ aside {
164171
position: relative;
165172
overflow: auto;
166173
padding: 1rem;
174+
175+
a.selected {
176+
color: white;
177+
/* background-color: #671ddf;*/
178+
background: repeating-linear-gradient(
179+
45deg,
180+
#6e24e1,
181+
#6e24e1 10px,
182+
#671ddf 10px,
183+
#671ddf 20px
184+
);
185+
}
167186
}
168187

169188
#home-theme {

‎scss/post.scss

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
li.sponsor-card {
2+
3+
width: calc(15%);
4+
5+
/* &[data-has-logo=true] .caption {
6+
display: none;
7+
}*/
8+
9+
&[data-tier=gold] {
10+
width: calc(25%);
11+
}
12+
13+
&[data-tier=platinum] {
14+
width: calc(33%);
15+
}
16+
}
17+
18+
.body {
19+
table{
20+
border-collapse: collapse;
21+
width: 100%;
22+
}
23+
24+
table,th,td{
25+
border: 1px solid #1f1c24;
26+
padding: 3px;
27+
}
28+
}
29+
30+
blockquote{
31+
border-left: 5px solid var(--primary-color);
32+
margin-left: 1rem;
33+
34+
> p {
35+
padding: 10px;
36+
}
37+
}

‎scss/sponsors.scss

+406
Large diffs are not rendered by default.

‎scss/variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919

2020
/* Delays */
2121
--transition-delay: 0ms;
22+
23+
2224
}
2325

2426
body.dark {

‎templates/home.ejs

+87-24
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Axios</title>
7+
<link rel="stylesheet" href="/style/sponsors.css" />
78
<link rel="stylesheet" href="/style/home.css" />
89
<style>
910
* {
@@ -39,7 +40,7 @@
3940
<script src="https://cdn.usefathom.com/script.js" data-site="PHYVDASO" defer></script>
4041
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
4142
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
42-
<!-- <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>-->
43+
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
4344
<script src="https://unpkg.com/@popperjs/core@2"></script>
4445
<script src="https://unpkg.com/tippy.js@6"></script>
4546
</head>
@@ -69,27 +70,59 @@
6970
</div>
7071

7172
</section>
72-
<section id="sponsors" aria-label="Axios sponsors">
73-
<h2><%= locale.t['Sponsors'] || 'Sponsors' %>:</h2>
74-
<div class="splide" oncontextmenu="return false;">
73+
<section class="sponsors_container" aria-label="Axios sponsors">
74+
<div>
75+
<a class="link-sponsors" href="/docs/sponsor"><h2><%= locale.t['Sponsors'] || 'Sponsors' %></h2></a>
76+
<span class="btn-container">
77+
<a class="btn tip" href="https://opencollective.com/axios/contribute" <% if(locale.p['sponsors']){%>data-tippy-content="<%= locale.p['sponsors'] %>"<% } %>>
78+
<svg
79+
width="24"
80+
height="24"
81+
viewBox="0 0 24 24"
82+
fill="none"
83+
xmlns="http://www.w3.org/2000/svg"
84+
>
85+
<path
86+
stroke="#000000"
87+
stroke-opacity="30%"
88+
fill-rule="evenodd"
89+
clip-rule="evenodd"
90+
d="M12.0122 5.57169L10.9252 4.48469C8.77734 2.33681 5.29493 2.33681 3.14705 4.48469C0.999162 6.63258 0.999162 10.115 3.14705 12.2629L11.9859 21.1017L11.9877 21.0999L12.014 21.1262L20.8528 12.2874C23.0007 10.1395 23.0007 6.65711 20.8528 4.50923C18.705 2.36134 15.2226 2.36134 13.0747 4.50923L12.0122 5.57169ZM11.9877 18.2715L16.9239 13.3352L18.3747 11.9342L18.3762 11.9356L19.4386 10.8732C20.8055 9.50635 20.8055 7.29028 19.4386 5.92344C18.0718 4.55661 15.8557 4.55661 14.4889 5.92344L12.0133 8.39904L12.006 8.3918L12.005 8.39287L9.51101 5.89891C8.14417 4.53207 5.92809 4.53207 4.56126 5.89891C3.19442 7.26574 3.19442 9.48182 4.56126 10.8487L7.10068 13.3881L7.10248 13.3863L11.9877 18.2715Z"
91+
fill="white"
92+
/>
93+
</svg>
94+
<span>Become a sponsor</span>
95+
</a>
96+
</span>
97+
</div>
98+
<section class="splide" aria-label="Axios sponsors" oncontextmenu="return false;">
7599
<div class="splide__track">
76100
<ul class="splide__list">
77-
<% config.custom.sponsors && config.custom.sponsors.forEach(sponsor => { %>
78-
<% if(!sponsor.hide && sponsor.benefits.showAtSponsorList ){ %>
79-
<li class="splide__slide sponsor-card <%= sponsor.visual.className || "" %> opacity_<%= Math.round(4 * sponsor.visual.opacity) * 25 %>" data-is-active="<%= sponsor.hasActiveTier ? "yes" : "no" %>" <% if(sponsor.tooltip){ %>data-tippy-content="<%= sponsor.tooltip %>"<% } %>>
80-
<a href="<%= sponsor.utmLink || '' %>" target="_blank" >
81-
<% if(sponsor.image){ %><img src="<%= sponsor.image %>" alt="<%= sponsor.alt %>"/><% } %>
82-
<% if(sponsor.showCaption !== false){ %><span class="caption"><span><%= sponsor.displayName %></span></span><% } %>
83-
</a>
84-
</li>
85-
<% } %>
86-
<% }) %>
101+
<% const count = config.custom.sponsors.filter(({benefits}) => benefits.showAtPages).length %>
102+
103+
<% if (count) { %>
104+
<% config.custom.sponsors && config.custom.sponsors.forEach(sponsor => { %>
105+
<% if(sponsor.isActive && !sponsor.hide && sponsor.benefits.showAtSponsorList ){ %>
106+
<li class="splide__slide sponsor-card <%= sponsor.visual.className || "" %> opacity_<%= Math.round(4 * sponsor.visual.opacity) * 25 %>" data-tier="<%=sponsor.associatedTierId%>" data-is-wide="<%= !!sponsor.isWideImage %>" data-is-active="<%= sponsor.isActive ? "yes" : "no" %>" data-image-type="<%= sponsor.imageType || '' %>" <% if(sponsor.tooltip){ %>data-tippy-content="<%= sponsor.tooltip %>"<% } %>>
107+
<a href="<%= sponsor.targetLink || '#' %>" target="_blank" >
108+
<% if(sponsor.image){ %>
109+
<div>
110+
<% if(sponsor.benefits.crown) { %><div class="chevron"><span class="sponsor_chevron_crown"></span></div><% } %>
111+
<img src="<%= sponsor.image %>" alt="<%= sponsor.alt %>"/>
112+
</div><% } %>
113+
<% if(sponsor.showCaption !== false){ %><span class="caption"><%= sponsor.displayName %></span><% } %>
114+
</a>
115+
</li>
116+
<% } %>
117+
<% }) %>
118+
<% } else { %>
87119
<li class="splide__slide sponsor-card become_sponsor" <% if(locale.p['sponsors']){%>data-tippy-content="<%= locale.p['sponsors'] %>"<% } %>>
88-
<a class="button" href="https://opencollective.com/axios/contribute"><%= locale.t['Become a sponsor'] || 'Become a sponsor' %></a>
120+
<div><a class="button" href="https://opencollective.com/axios/contribute"><%= locale.t['Become a sponsor'] || 'Become a sponsor' %></a></div>
89121
</li>
122+
<% } %>
90123
</ul>
91124
</div>
92-
</div>
125+
</section>
93126
</section>
94127
</main>
95128
<footer>
@@ -184,30 +217,60 @@
184217

185218
<script>
186219
const splide = new Splide( '.splide', {
187-
type : 'slide',
220+
//type : 'slide',
221+
type : 'loop',
188222
drag : 'free',
189223
focus : 'left',
190224
perPage: 5,
191-
/* autoScroll: {
192-
speed: 0.5,
193-
},*/
225+
snap : true,
226+
autoWidth: true,
227+
pagination: false,
228+
autoScroll: {
229+
speed: 0.7,
230+
autoStart: false
231+
}
232+
});
233+
234+
document.addEventListener('DOMContentLoaded', () => {
235+
setTimeout(() => {
236+
splide.Components.AutoScroll.play();
237+
}, 3000);
194238
});
195239
196-
splide.mount(/*window.splide.Extensions*/);
240+
splide.mount(window.splide.Extensions);
241+
242+
let timer;
197243
198-
tippy('.sponsor-card', {
244+
const stop = () => {
245+
if( timer ) {
246+
clearTimeout(timer);
247+
timer = null;
248+
}
249+
}
250+
251+
tippy('.sponsor-card, .tip', {
199252
trigger: 'mouseenter focus focusin oncontextmenu',
200-
delay: [500, 200],
253+
delay: [500, 500],
201254
animation: 'fade',
202255
allowHTML: true,
203256
hideOnClick: true,
204257
interactive: true,
205-
maxWidth: '450px',
258+
maxWidth: '470px',
206259
appendTo: () => document.body,
207260
onShow(instance) {
208261
if (instance.props.content.trim() === '') {
209262
return false;
210263
}
264+
265+
splide.Components.AutoScroll.pause();
266+
},
267+
268+
onHide() {
269+
stop();
270+
271+
timer = setTimeout(() => {
272+
splide.Components.AutoScroll.play();
273+
}, 5000);
211274
}
212275
});
213276
</script>

‎templates/post.ejs

+164-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title><%= data.attributes.title %> | <%= locale.title || config.custom.title %></title>
77
<link rel="stylesheet" href="/style/index.css" />
8+
<link rel="stylesheet" href="/style/post.css" />
9+
<link rel="stylesheet" href="/style/sponsors.css" />
810
<style>
911
* {
1012
<%= locale.fontSans ? 'font-family: ' + locale.fontSans + ';' : '' %>
@@ -34,11 +36,39 @@
3436
<body>
3537
<script>
3638
let isDarkThemeActive = false;
39+
const THEME_TIMEOUT = 24 * 3600; // 24 hours
3740
const userDefaultTheme = localStorage.getItem("@axios-docs:theme");
38-
if (userDefaultTheme && userDefaultTheme == "true") {
41+
const userTS = +localStorage.getItem("@axios-docs:ts");
42+
const darkQuery = "(prefers-color-scheme: dark)";
43+
const darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {};
44+
45+
if (
46+
((!userTS || (Date.now() - userTS) / 1000 > THEME_TIMEOUT) && darkMQL.media === darkQuery) ||
47+
(userDefaultTheme && userDefaultTheme === "true")
48+
) {
3949
document.body.classList.add("dark");
4050
isDarkThemeActive = true;
4151
}
52+
53+
localStorage.setItem("@axios-docs:ts", Date.now());
54+
55+
const updateImagesTheme = (isDark) => {
56+
const attrName = 'data-dark';
57+
const pics = document.querySelectorAll('img');
58+
59+
pics.forEach(image => {
60+
const darkSource = image.getAttribute(attrName);
61+
if (darkSource && image.src) {
62+
if (isDark) {
63+
image.setAttribute('data-light', image.getAttribute('src'));
64+
image.src = darkSource;
65+
} else {
66+
image.src = image.getAttribute('data-light');
67+
}
68+
}
69+
});
70+
}
71+
4272
</script>
4373
<header>
4474
<div></div>
@@ -90,7 +120,7 @@
90120
<div class="aside-container">
91121
<% locale.sidebar.forEach(side => { %>
92122
<% if (side.type === 'link') { %>
93-
<a href="<%= side.href.startsWith('/') ? (locale.prefix + side.href.slice(1)) : side.href %>"><%= side.text %></a>
123+
<a class="<%= side.href && new URL(side.href, 'https://localhost').pathname.endsWith('/' + file.withoutExtension) ? 'selected' : '' %>" href="<%= side.href.startsWith('/') ? (locale.prefix + side.href.slice(1)) : side.href %>"><%= side.text %></a>
94124
<% } else { %>
95125
<h3 class="group-name"><%= side.text %></h3>
96126
<% } %>
@@ -151,6 +181,59 @@
151181
<h1 class="title"><%= data.attributes.title %></h1>
152182
<p class="description"><%= data.attributes.description %></p>
153183
<%- data.body %>
184+
<div class="sponsors_container">
185+
<a class="link-sponsors" href="https://opencollective.com/axios/contribute"><h4><%= locale.t['Gold Sponsors'] || 'Gold Sponsors' %></h4></a>
186+
<span class="btn-container">
187+
<a class="btn tip" href="https://opencollective.com/axios/contribute" <% if(locale.p['sponsors']){%>data-tippy-content="<%= locale.p['sponsors'] %>"<% } %>>
188+
<svg
189+
width="24"
190+
height="24"
191+
viewBox="0 0 24 24"
192+
fill="none"
193+
xmlns="http://www.w3.org/2000/svg"
194+
>
195+
<path
196+
stroke="#000000"
197+
stroke-opacity="30%"
198+
fill-rule="evenodd"
199+
clip-rule="evenodd"
200+
d="M12.0122 5.57169L10.9252 4.48469C8.77734 2.33681 5.29493 2.33681 3.14705 4.48469C0.999162 6.63258 0.999162 10.115 3.14705 12.2629L11.9859 21.1017L11.9877 21.0999L12.014 21.1262L20.8528 12.2874C23.0007 10.1395 23.0007 6.65711 20.8528 4.50923C18.705 2.36134 15.2226 2.36134 13.0747 4.50923L12.0122 5.57169ZM11.9877 18.2715L16.9239 13.3352L18.3747 11.9342L18.3762 11.9356L19.4386 10.8732C20.8055 9.50635 20.8055 7.29028 19.4386 5.92344C18.0718 4.55661 15.8557 4.55661 14.4889 5.92344L12.0133 8.39904L12.006 8.3918L12.005 8.39287L9.51101 5.89891C8.14417 4.53207 5.92809 4.53207 4.56126 5.89891C3.19442 7.26574 3.19442 9.48182 4.56126 10.8487L7.10068 13.3881L7.10248 13.3863L11.9877 18.2715Z"
201+
fill="white"
202+
/>
203+
</svg>
204+
<span>Become a sponsor</span>
205+
</a>
206+
</span>
207+
<section class="splide" aria-label="Axios sponsors" oncontextmenu="return false;">
208+
<div class="splide__track">
209+
<ul class="splide__list">
210+
<% const count = config.custom.sponsors.filter(({isActive, benefits, hide}) => isActive && !hide && benefits.showAtPages).length %>
211+
212+
<% if (count) { %>
213+
<% config.custom.sponsors && config.custom.sponsors.forEach(sponsor => { %>
214+
<% if(sponsor.isActive && !sponsor.hide && sponsor.benefits.showAtPages ){ %>
215+
<li class="splide__slide sponsor-card <%= sponsor.visual.className || "" %> opacity_<%= Math.round(4 * sponsor.visual.opacity) * 25 %>" data-tier="<%=sponsor.associatedTierId%>" data-is-wide="<%= !!sponsor.isWideImage %>" data-has-logo="<%= !!sponsor.image %>" data-is-active="<%= sponsor.isActive ? "yes" : "no" %>" data-image-type="<%= sponsor.imageType || '' %>" <% if(sponsor.tooltip){ %>data-tippy-content="<%= sponsor.tooltip %>"<% } %>>
216+
<a href="<%= sponsor.targetLink || '#' %>" target="_blank" >
217+
<% if(sponsor.image){ %><div>
218+
<% if (sponsor.tierId=== 'platinum' && sponsor.benefits.crown) { %><div class="chevron"><span class="sponsor_chevron_crown"></span></div><% } %>
219+
<img src="<%= sponsor.image %>" <% if(sponsor.image_dark){ %>data-dark="<%= sponsor.image_dark %>" <% } %> alt="<%= sponsor.alt %>"/>
220+
</div><% } %>
221+
<% if(sponsor.showCaption !== false){ %><span class="caption"><%= sponsor.displayName %></span><% } %>
222+
</a>
223+
</li>
224+
<% } %>
225+
<% }) %>
226+
<% } else { %>
227+
<li class="splide__slide">
228+
<a class="become_sponsor tip" href="https://opencollective.com/axios/contribute" <% if(locale.p['sponsors']){%>data-tippy-content="<%= locale.p['sponsors'] %>"<% } %>>
229+
<div><span class="plus">+</span><span>Your Logo here</span></div>
230+
</a>
231+
</li>
232+
<% } %>
233+
</ul>
234+
</div>
235+
</section>
236+
</div>
154237
<div class="links">
155238
<% if (data.attributes.prev_link) { %>
156239
<a href="<%= data.attributes.prev_link %>" class="next-link">
@@ -160,7 +243,6 @@
160243
<% } %>
161244
<span>
162245

163-
164246
</span>
165247
<% if (data.attributes.next_link) { %>
166248
<a href="<%= data.attributes.next_link %>" class="next-link">
@@ -181,9 +263,12 @@
181263
document.querySelector("button.theme").addEventListener("click", () => {
182264
isDarkThemeActive = !isDarkThemeActive;
183265
localStorage.setItem("@axios-docs:theme", isDarkThemeActive);
266+
localStorage.setItem("@axios-docs:ts", Date.now());
184267
185268
document.body.classList.toggle("dark");
186269
document.querySelector("button.theme").classList.toggle("dark");
270+
271+
updateImagesTheme(isDarkThemeActive);
187272
});
188273
189274
// switch `dir` of those RTL oriented elements that start with an
@@ -199,9 +284,85 @@
199284
window.onload = () => {
200285
if (isDarkThemeActive) {
201286
document.querySelector("button.theme").classList.toggle("dark");
287+
updateImagesTheme(true);
202288
}
203289
document.documentElement.style.setProperty('--transition-delay', '300ms');
204290
};
291+
292+
const sponsorsCount = <%= count %>;
293+
294+
const splide = new Splide('.splide', {
295+
//type: 'slide',
296+
type: '<%= count > 4 ? 'loop' : 'slide' %>',
297+
drag: 'free',
298+
focus: 'left',
299+
perPage: <%= Math.max(3, Math.min(count, 7)) %>,
300+
snap: true,
301+
pagination: false,
302+
autoWidth: true,
303+
autoScroll: {
304+
speed: 0.7,
305+
autoStart: false
306+
}
307+
});
308+
309+
splide.mount(window.splide.Extensions);
310+
311+
let timer;
312+
313+
const stop = () => {
314+
if( timer ) {
315+
clearTimeout(timer);
316+
timer = null;
317+
}
318+
}
319+
320+
tippy('.sponsor-card, .tip', {
321+
trigger: 'mouseenter focus focusin oncontextmenu',
322+
delay: [500, 500],
323+
animation: 'fade',
324+
allowHTML: true,
325+
hideOnClick: true,
326+
interactive: true,
327+
maxWidth: '470px',
328+
appendTo: () => document.body,
329+
onShow(instance) {
330+
if (instance.props.content.trim() === '') {
331+
return false;
332+
}
333+
334+
const tier = instance.reference.getAttribute('data-tier');
335+
336+
tier && instance.popper.setAttribute('data-tier', tier);
337+
338+
splide.Components.AutoScroll.pause();
339+
},
340+
341+
onHide() {
342+
stop();
343+
344+
timer = setTimeout(() => {
345+
splide.Components.AutoScroll.play();
346+
}, 5000);
347+
}
348+
});
349+
350+
const $splide = document.querySelector('.splide');
351+
352+
const onScroll = (e) => {
353+
const {bottom} = $splide.getBoundingClientRect();
354+
355+
if (bottom < window.innerHeight) {
356+
window.removeEventListener('scroll', onScroll);
357+
358+
setTimeout(() => {
359+
splide.Components.AutoScroll.play();
360+
}, 3000);
361+
}
362+
}
363+
364+
window.addEventListener('scroll', onScroll);
365+
205366
</script>
206367
</body>
207368
</html>

‎templates/sponsors.hbs

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{{#if sponsors}}
2+
<h3 align="center">
3+
{{caption}}
4+
<br>
5+
</h3>
6+
7+
{{#table sponsors cells separate}}
8+
{{#if displayName}}
9+
{{#if image}}
10+
<a href="{{targetLink}}" style="padding: 10px; display: inline-block">
11+
{{#if image_dark}}
12+
<picture>
13+
<source width="{{readmeImageWidth}}px" height="{{readmeImageHeight}}px" media="(prefers-color-scheme: dark)" srcset="{{image_dark}}">
14+
<img width="{{readmeImageWidth}}px" height="{{readmeImageHeight}}px" src="{{image}}" alt="{{displayName}}"/>
15+
</picture>
16+
{{else}}
17+
<img width="{{readmeImageWidth}}px" height="{{readmeImageHeight}}px" src="{{image}}" alt="{{displayName}}"/>
18+
{{/if}}
19+
</a>
20+
{{else}}
21+
<h3>{{displayName}}</h3>
22+
{{/if}}
23+
{{#if description}}<p align="center" title="{{description}}">{{#short benefits.maxReadmeDescLength}}{{description}}{{/short}}</p>{{else}}{{#if showCaptions}}<p align="center">{{displayName}}</p>{{/if}}{{/if}}
24+
{{#if links}}<p align="center">
25+
{{#each links}}<a href="{{this}}"><b>{{@key}}</b></a>{{#sep}} | {{/sep}}{{/each}}
26+
</p>{{/if}}
27+
{{else}}
28+
- {{displayName}}
29+
{{/if}}
30+
{{/table}}
31+
{{/if}}

0 commit comments

Comments
 (0)
Please sign in to comment.