Skip to content

Commit cc10a24

Browse files
committed
docs(sponsors): update sponsor pack
1 parent 155aee8 commit cc10a24

File tree

6 files changed

+296
-217
lines changed

6 files changed

+296
-217
lines changed

docs/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,12 @@
2020
"@next/mdx": "^9.5.3",
2121
"@next/plugin-google-analytics": "^9.5.3",
2222
"@reactions/component": "^2.0.2",
23+
"@visx/hierarchy": "^1.0.0",
24+
"@visx/responsive": "^1.3.0",
2325
"@zeit/fetch": "^6.0.0",
2426
"@zeit/react-jsx-parser": "^2.0.0",
2527
"async-sema": "^3.1.0",
28+
"axios": "^0.21.1",
2629
"body-scroll-lock": "^3.1.5",
2730
"classnames": "^2.2.6",
2831
"copy-to-clipboard": "^3.3.1",
@@ -38,7 +41,6 @@
3841
"next-images": "^1.5.0",
3942
"next-optimized-images": "^2.6.2",
4043
"node-fetch": "^2.6.1",
41-
"prism-svelte": "^0.4.7",
4244
"prismjs": "^1.21.0",
4345
"react": "^16.13.1",
4446
"react-dom": "^16.13.1",
@@ -80,4 +82,4 @@
8082
"engines": {
8183
"node": ">=12.x"
8284
}
83-
}
85+
}

docs/src/components/LayoutDocs.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const LayoutDocs = props => {
7474
</Sticky>
7575
)}
7676
<Seo
77-
title={title || props.meta.title}
77+
title={props.meta.title || title}
7878
description={props.meta.description}
7979
/>
8080
<div className="block">

docs/src/components/SponsorPack.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import React from 'react'
2+
import { Pack, hierarchy } from '@visx/hierarchy'
3+
import { ParentSize } from '@visx/responsive'
4+
5+
export default function SponsorPack({ sponsors, height }) {
6+
const pack = React.useMemo(
7+
() => ({
8+
children: sponsors,
9+
name: 'root',
10+
radius: 0,
11+
distance: 0,
12+
}),
13+
[sponsors]
14+
)
15+
16+
const root = React.useMemo(
17+
() =>
18+
hierarchy(pack)
19+
.sum(d => 40 + d.monthlyPriceInCents)
20+
.sort(
21+
(a, b) => b.data.monthlyPriceInCents - a.data.monthlyPriceInCents
22+
),
23+
[pack]
24+
)
25+
26+
return (
27+
<ParentSize>
28+
{({ width }) => {
29+
return width < 10 ? null : (
30+
<div
31+
style={{
32+
width,
33+
height,
34+
position: 'relative',
35+
}}
36+
>
37+
<style
38+
dangerouslySetInnerHTML={{
39+
__html: `
40+
41+
.sponsor-link {
42+
transition: all .2s ease;
43+
transform: translate(-50%, -50%);
44+
}
45+
46+
.sponsor-link:hover {
47+
z-index: 10;
48+
transform: translate(-50%, -50%) scale(1.1);
49+
}
50+
51+
.sponsor-link:hover .sponsor-tooltip {
52+
opacity: 1;
53+
}
54+
`,
55+
}}
56+
/>
57+
<Pack root={root} size={[width, height]} padding={width * 0.005}>
58+
{packData => {
59+
const circles = packData.descendants().slice(1) // skip first layer
60+
return (
61+
<div>
62+
{[...circles].reverse().map((circle, i) => (
63+
<a
64+
key={`circle-${i}`}
65+
href={
66+
circle.data.linkUrl ||
67+
`https://github.com/${circle.data.login}`
68+
}
69+
className="sponsor-link absolute shadow-lg bg-white rounded-full z-0"
70+
style={{
71+
left: circle.x,
72+
top: circle.y,
73+
width: circle.r * 2,
74+
height: circle.r * 2,
75+
}}
76+
>
77+
<div
78+
key={`circle-${i}`}
79+
className="absolute bg-no-repeat bg-center bg-contain rounded-full"
80+
style={{
81+
position: 'absolute',
82+
left: '50%',
83+
top: '50%',
84+
transform: 'translate(-50%, -50%)',
85+
width: '90%',
86+
height: '90%',
87+
backgroundImage: `url(${
88+
circle.data.imageUrl ||
89+
`https://avatars0.githubusercontent.com/${circle.data.login}?v=3&s=200`
90+
})`,
91+
}}
92+
/>
93+
{circle.data.name ? (
94+
<div
95+
className="sponsor-tooltip absolute -top-0 left-1/2
96+
text-sm
97+
bg-gray-900 text-white p-2 pointer-events-none
98+
transform -translate-x-1/2 -translate-y-full opacity-0
99+
shadow-xl rounded-lg"
100+
>
101+
<span className="whitespace-no-wrap">
102+
{circle.data.name}
103+
</span>
104+
</div>
105+
) : null}
106+
</a>
107+
))}
108+
</div>
109+
)
110+
}}
111+
</Pack>
112+
</div>
113+
)
114+
}}
115+
</ParentSize>
116+
)
117+
}

0 commit comments

Comments
 (0)