Skip to content

Commit 5c217f2

Browse files
JonnyBurgerJonnyBurger
authored
Merge pull request #2949 from zcesur/main
Former-commit-id: cc3d1ca
2 parents 0fe6bea + f51fe6d commit 5c217f2

File tree

5 files changed

+438
-9
lines changed

5 files changed

+438
-9
lines changed

‎packages/docs/components/Bounties.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { algora, type AlgoraOutput } from "@algora/sdk";
2+
import { useColorMode } from "@docusaurus/theme-common";
3+
import clsx from "clsx";
4+
import React, { useEffect, useState } from "react";
5+
6+
import "./bounties.css";
7+
8+
const org = "remotion";
9+
const limit = 3;
10+
11+
type RemoteData<T> =
12+
| { _tag: "loading" }
13+
| { _tag: "failure"; error: Error }
14+
| { _tag: "success"; data: T };
15+
16+
type Bounty = AlgoraOutput["bounty"]["list"]["items"][number];
17+
18+
export const Bounties = () => {
19+
const { isDarkTheme } = useColorMode();
20+
21+
const [bounties, setBounties] = useState<RemoteData<Bounty[]>>({
22+
_tag: "loading",
23+
});
24+
25+
useEffect(() => {
26+
const ac = new AbortController();
27+
28+
algora.bounty.list
29+
.query({ org, limit, status: "active" }, { signal: ac.signal })
30+
.then(({ items: data }) => setBounties({ _tag: "success", data }))
31+
.catch((error) => setBounties({ _tag: "failure", error }));
32+
33+
return () => ac.abort();
34+
}, []);
35+
36+
return (
37+
<div className={clsx("bounty-grid", isDarkTheme && "dark")}>
38+
{bounties._tag === "success" &&
39+
bounties.data.map((bounty) => (
40+
<div key={bounty.id}>
41+
<BountyCard bounty={bounty} />
42+
</div>
43+
))}
44+
{bounties._tag === "loading" &&
45+
[...Array(limit).keys()].map((i) => (
46+
<div key={i}>
47+
<BountyCardSkeleton />
48+
</div>
49+
))}
50+
</div>
51+
);
52+
};
53+
54+
const BountyCard = (props: { bounty: Bounty }) => (
55+
<a
56+
href={props.bounty.task.url}
57+
target="_blank"
58+
rel="noopener"
59+
className="bounty-card"
60+
>
61+
<div className="bounty-content">
62+
<div className="bounty-reward">{props.bounty.reward_formatted}</div>
63+
<div className="bounty-issue">
64+
{props.bounty.task.repo_name}#{props.bounty.task.number}
65+
</div>
66+
<div className="bounty-title">{props.bounty.task.title}</div>
67+
</div>
68+
</a>
69+
);
70+
71+
const BountyCardSkeleton = () => (
72+
<div className="bounty-skeleton">
73+
<div className="bounty-content">
74+
<div className="bounty-reward" />
75+
<div className="bounty-issue" />
76+
<div className="bounty-title" />
77+
</div>
78+
</div>
79+
);

‎packages/docs/components/bounties.css‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
.bounty-grid {
2+
--gray-50: 248, 250, 252;
3+
--gray-100: 241, 245, 249;
4+
--gray-200: 226, 232, 240;
5+
--gray-300: 203, 213, 225;
6+
--gray-400: 148, 163, 184;
7+
--gray-500: 100, 116, 139;
8+
--gray-600: 71, 85, 105;
9+
--gray-700: 51, 65, 85;
10+
--gray-800: 30, 41, 59;
11+
--gray-900: 15, 23, 42;
12+
--gray-950: 2, 6, 23;
13+
14+
--accent-50: 239, 246, 255;
15+
--accent-100: 219, 234, 254;
16+
--accent-200: 191, 219, 254;
17+
--accent-300: 147, 197, 253;
18+
--accent-400: 96, 165, 250;
19+
--accent-500: 59, 130, 246;
20+
--accent-600: 37, 99, 235;
21+
--accent-700: 29, 78, 216;
22+
--accent-800: 30, 64, 175;
23+
--accent-900: 30, 58, 138;
24+
--accent-950: 23, 37, 84;
25+
26+
--green-50: 236, 253, 245;
27+
--green-100: 209, 250, 229;
28+
--green-200: 167, 243, 208;
29+
--green-300: 110, 231, 183;
30+
--green-400: 52, 211, 153;
31+
--green-500: 16, 185, 129;
32+
--green-600: 5, 150, 105;
33+
--green-700: 4, 120, 87;
34+
--green-800: 6, 95, 70;
35+
--green-900: 6, 78, 59;
36+
--green-950: 2, 44, 34;
37+
}
38+
39+
.bounty-grid {
40+
display: grid;
41+
gap: 0.5rem;
42+
}
43+
44+
.bounty-grid.bounty-grid-clamp > *:not(:first-child) {
45+
display: none;
46+
}
47+
48+
@media (min-width: 640px) {
49+
.bounty-grid {
50+
grid-template-columns: repeat(2, minmax(0, 1fr));
51+
}
52+
.bounty-grid.bounty-grid-clamp > *:nth-child(-n + 2) {
53+
display: block;
54+
}
55+
}
56+
57+
@media (min-width: 768px) {
58+
.bounty-grid {
59+
grid-template-columns: repeat(3, minmax(0, 1fr));
60+
}
61+
.bounty-grid.bounty-grid-clamp > *:nth-child(-n + 3) {
62+
display: block;
63+
}
64+
}
65+
66+
@keyframes bounty-pulse {
67+
0%,
68+
100% {
69+
opacity: 1;
70+
}
71+
50% {
72+
opacity: 0.5;
73+
}
74+
}
75+
76+
.bounty-grid {
77+
--gradient-to: rgba(var(--accent-400), 0.4);
78+
--gradient-from: rgba(var(--accent-400), 0.2);
79+
--gradient-stops: var(--gradient-from), rgba(var(--accent-400), 0.3),
80+
var(--gradient-to);
81+
}
82+
83+
.bounty-grid.dark {
84+
--gradient-to: rgba(var(--accent-600), 0.2);
85+
--gradient-from: rgba(var(--accent-600), 0.3);
86+
--gradient-stops: var(--gradient-from), rgba(var(--accent-600), 0.4),
87+
var(--gradient-to);
88+
}
89+
90+
.bounty-grid .bounty-card {
91+
text-decoration-line: none;
92+
display: block;
93+
position: relative;
94+
border-radius: 0.5rem;
95+
border-width: 1px;
96+
height: 100%;
97+
background-image: linear-gradient(to bottom right, var(--gradient-stops));
98+
}
99+
100+
.bounty-grid .bounty-card *,
101+
.bounty-grid .bounty-skeleton * {
102+
transition-property: background-color, color, border-color;
103+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
104+
transition-duration: 300ms;
105+
}
106+
107+
.bounty-grid .bounty-card:hover {
108+
border-color: rgb(var(--gray-400));
109+
}
110+
111+
.bounty-grid .bounty-card .bounty-content {
112+
position: relative;
113+
padding: 1rem;
114+
height: 100%;
115+
}
116+
117+
.bounty-grid .bounty-card .bounty-reward {
118+
font-size: 1.5rem;
119+
line-height: 2rem;
120+
font-weight: 700;
121+
color: rgb(var(--green-500));
122+
}
123+
124+
.bounty-grid .bounty-card .bounty-issue {
125+
margin-top: 0.125rem;
126+
font-size: 0.875rem;
127+
line-height: 1.25rem;
128+
color: rgb(var(--gray-700));
129+
}
130+
131+
.bounty-grid .bounty-card .bounty-title {
132+
margin-top: 0.75rem;
133+
font-size: 1.125rem;
134+
line-height: 1.75rem;
135+
font-weight: 500;
136+
line-height: 1.25;
137+
color: rgb(var(--gray-800));
138+
word-break: break-all;
139+
display: -webkit-box;
140+
-webkit-line-clamp: 2;
141+
-webkit-box-orient: vertical;
142+
overflow: hidden;
143+
}
144+
145+
.bounty-grid.dark .bounty-card .bounty-reward {
146+
color: rgb(var(--green-400));
147+
}
148+
149+
.bounty-grid.dark .bounty-card .bounty-issue {
150+
color: rgb(var(--accent-200));
151+
}
152+
153+
.bounty-grid.dark .bounty-card .bounty-title {
154+
color: rgb(var(--accent-50));
155+
}
156+
157+
.bounty-grid .bounty-card:hover {
158+
background-color: rgba(var(--gray-300), 0.1);
159+
border-color: rgb(var(--gray-400));
160+
}
161+
162+
.bounty-grid .bounty-card:hover .bounty-reward {
163+
color: rgb(var(--green-600));
164+
}
165+
166+
.bounty-grid .bounty-card:hover .bounty-issue {
167+
color: rgb(var(--gray-800));
168+
}
169+
170+
.bounty-grid .bounty-card:hover .bounty-title {
171+
color: rgb(var(--gray-900));
172+
}
173+
174+
.bounty-grid.dark .bounty-card:hover {
175+
background-color: rgba(var(--gray-600), 0.05);
176+
border-color: rgb(var(--accent-500));
177+
}
178+
179+
.bounty-grid.dark .bounty-card:hover .bounty-reward {
180+
color: rgb(var(--green-300));
181+
}
182+
183+
.bounty-grid.dark .bounty-card:hover .bounty-issue {
184+
color: rgb(var(--accent-100));
185+
}
186+
187+
.bounty-grid.dark .bounty-card:hover .bounty-title {
188+
color: white;
189+
}
190+
191+
.bounty-grid .bounty-skeleton {
192+
border-radius: 0.5rem;
193+
background-color: rgb(var(--gray-200));
194+
animation: bounty-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
195+
height: 122px;
196+
}
197+
198+
.bounty-grid.dark .bounty-skeleton {
199+
background-color: rgb(var(--gray-800));
200+
}
201+
202+
.bounty-grid .bounty-skeleton .bounty-content {
203+
position: relative;
204+
padding: 1rem;
205+
height: 100%;
206+
}
207+
208+
.bounty-grid .bounty-skeleton .bounty-reward {
209+
margin-top: 0.25rem;
210+
border-radius: 0.375rem;
211+
height: 25px;
212+
width: 59px;
213+
background-color: rgb(var(--gray-300));
214+
}
215+
216+
.bounty-grid .bounty-skeleton .bounty-issue {
217+
margin-top: 0.625rem;
218+
border-radius: 0.375rem;
219+
height: 14px;
220+
width: 86px;
221+
background-color: rgb(var(--gray-300));
222+
}
223+
224+
.bounty-grid .bounty-skeleton .bounty-title {
225+
margin-top: 1rem;
226+
border-radius: 0.375rem;
227+
height: 20px;
228+
background-color: rgb(var(--gray-300));
229+
}
230+
231+
.bounty-grid.dark .bounty-skeleton .bounty-reward {
232+
background-color: rgb(var(--gray-700));
233+
}
234+
235+
.bounty-grid.dark .bounty-skeleton .bounty-issue {
236+
background-color: rgb(var(--gray-700));
237+
}
238+
239+
.bounty-grid.dark .bounty-skeleton .bounty-title {
240+
background-color: rgb(var(--gray-700));
241+
}

‎packages/docs/docs/contributing/bounty.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ sidebar_label: Bounty issues
55
crumb: Contributing
66
---
77

8+
import { Bounties } from "../../components/Bounties.tsx";
9+
810
Some issues carry cash bounties that you can earn by solving them.
911

12+
<Bounties />
13+
1014
## Find bounties
1115

1216
All bounties can be tracked in Remotion’s GitHub Issues. Issues with a bounty have a label `💎 Bounty` on them. <br/>

‎packages/docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"remotion": "remotion studio src/remotion/entry.ts"
1919
},
2020
"dependencies": {
21+
"@algora/sdk": "^0.1.2",
2122
"@aws-sdk/s3-request-presigner": "3.215.0",
2223
"@babel/plugin-transform-modules-commonjs": "^7.15.4",
2324
"@docusaurus/core": "2.4.1",

0 commit comments

Comments
 (0)