Skip to content

Commit 68ed1aa

Browse files
timothyistimothyis
authored
Update introduction to use Git buttons, and update components (#1609)
* WIP updating components * Fix image TSX errors * Git interation buttons, still WIP * Use amp img if docs renders via amp * Update buttons to use /new links
1 parent d78316d commit 68ed1aa

File tree

15 files changed

+920
-657
lines changed

15 files changed

+920
-657
lines changed

‎components/avatar/avatar.js

-73
This file was deleted.

‎components/avatar/avatar.tsx

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import React, { useState, useEffect, useRef } from 'react'
2+
import { useAmp } from 'next/amp'
3+
import cn from 'classnames'
4+
5+
export const GenericAvatar = React.memo(
6+
({
7+
title,
8+
src,
9+
size,
10+
placeholder = false,
11+
className
12+
}: {
13+
title?: string
14+
src?: string
15+
size: number
16+
placeholder?: boolean
17+
className?: string
18+
}) => {
19+
const [ready, setReady] = useState(false)
20+
const imgRef = useRef<HTMLImageElement>(null)
21+
useEffect(() => {
22+
imgRef?.current?.complete && setReady(true)
23+
}, [])
24+
25+
return (
26+
<span
27+
className={cn('geist-avatar', className)}
28+
key={src}
29+
style={{
30+
width: size,
31+
height: size
32+
}}
33+
>
34+
{placeholder ? null : (
35+
useAmp() ? (
36+
React.createElement('amp-img', { src, width: size, height: size, title, alt: title })
37+
) : (
38+
<img
39+
ref={imgRef}
40+
key={src}
41+
alt={title}
42+
title={title}
43+
src={src}
44+
width={size}
45+
height={size}
46+
onLoad={() => setReady(true)}
47+
className={ready ? 'ready' : ''}
48+
/>
49+
)
50+
)}
51+
<style jsx>
52+
{`
53+
.geist-avatar {
54+
flex-shrink: 0;
55+
border-radius: 100%;
56+
display: inline-block;
57+
overflow: hidden;
58+
border: 1px solid var(--accents-2);
59+
line-height: 0;
60+
vertical-align: top;
61+
mask-image: -webkit-radial-gradient(circle, white, black);
62+
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
63+
background: var(--geist-background);
64+
transition: border 0.2s ease, background 0.2s ease;
65+
}
66+
.geist-avatar img {
67+
width: 100%;
68+
height: 100%;
69+
}
70+
71+
img {
72+
opacity: 0;
73+
transition: opacity 0.2s ease-in;
74+
}
75+
76+
img.ready {
77+
opacity: 1;
78+
}
79+
`}
80+
</style>
81+
</span>
82+
)
83+
}
84+
)
85+
86+
interface Props {
87+
title?: string
88+
size?: number
89+
height?: number | string
90+
boxSize?: number
91+
teamId?: string
92+
username?: string
93+
placeholder?: boolean
94+
seed?: string
95+
uid?: string
96+
hash?: string
97+
url?: string
98+
className?: string
99+
}
100+
101+
export const Avatar: React.FC<Props> = React.memo(
102+
({
103+
title,
104+
size = 80,
105+
height,
106+
boxSize = null,
107+
teamId = null,
108+
username = null,
109+
placeholder,
110+
seed,
111+
uid,
112+
hash,
113+
url,
114+
className
115+
}) => {
116+
const avatarSize = parseInt((height || boxSize || size) as string)
117+
118+
if (placeholder) {
119+
if (seed) {
120+
return (
121+
<GenericAvatar
122+
size={avatarSize}
123+
title={title}
124+
src={`https://zeit.co/api/www/avatar?seed=${seed}`}
125+
className={className}
126+
/>
127+
)
128+
}
129+
return (
130+
<GenericAvatar
131+
size={avatarSize}
132+
title={title}
133+
placeholder
134+
className={className}
135+
/>
136+
)
137+
}
138+
let query
139+
const hasSHA = hash && /^[0-9a-f]{40}$/.test(hash)
140+
141+
if (hasSHA) {
142+
query = hash
143+
} else {
144+
query =
145+
username != null
146+
? `?u=${username}`
147+
: teamId != null
148+
? `?teamId=${teamId}`
149+
: (uid ? uid : '') + '?'
150+
}
151+
152+
const sizePrefix = hasSHA ? '?' : '&'
153+
const _url =
154+
url || `https://zeit.co/api/www/avatar/${query + sizePrefix}s=${size * 2}`
155+
156+
return (
157+
<GenericAvatar
158+
size={avatarSize}
159+
title={title}
160+
src={_url}
161+
className={className}
162+
/>
163+
)
164+
}
165+
)
166+
167+
export default Avatar

‎components/layout/header/badge.js renamed to ‎components/badge/index.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { memo } from 'react'
22
import PropTypes from 'prop-types'
3-
import { useDarkMode } from '~/lib/with-dark-mode'
43

54
const Badge = memo(
65
({
76
content,
87
backgroundColor = '#f00',
9-
darkFontColor = '#000',
108
fontColor = '#fff',
119
hoverBackgroundColor
1210
}) => {
13-
const darkBg = useDarkMode()
1411
const isNumber = typeof content === 'number' ? true : false
1512

1613
return (
@@ -19,7 +16,7 @@ const Badge = memo(
1916
<style jsx>
2017
{`
2118
.badge {
22-
color: ${darkBg ? darkFontColor : fontColor};
19+
color: ${fontColor};
2320
background: ${backgroundColor};
2421
display: inline-block;
2522
font-size: 10px;
@@ -51,7 +48,6 @@ const Badge = memo(
5148
Badge.propTypes = {
5249
content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
5350
backgroundColor: PropTypes.string,
54-
darkFontColor: PropTypes.string,
5551
fontColor: PropTypes.string,
5652
hoverBackgroundColor: PropTypes.string
5753
}

‎components/card/card.js

+32-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,17 @@ import cn from 'classnames'
22
import NextLink from 'next/link'
33
import Text, { H4 } from '~/components/text'
44
import ArrowRight from '~/components/icons/chevron-right'
5+
import Plus from '~/components/icons/plus'
56

6-
export function IconCard({ href, buttonHref, icon, label, width, arrowed }) {
7+
export function IconCard({
8+
href,
9+
buttonHref,
10+
icon,
11+
label,
12+
width,
13+
arrowed,
14+
plus
15+
}) {
716
return (
817
<NextLink href={href}>
918
<a className={cn('icon-card', { button: !!buttonHref })}>
@@ -14,6 +23,11 @@ export function IconCard({ href, buttonHref, icon, label, width, arrowed }) {
1423
<ArrowRight />
1524
</span>
1625
)}
26+
{plus && (
27+
<span className="plus">
28+
<Plus />
29+
</span>
30+
)}
1731
<style jsx>{`
1832
.icon-card {
1933
background: var(--geist-background);
@@ -42,6 +56,23 @@ export function IconCard({ href, buttonHref, icon, label, width, arrowed }) {
4256
transition: color 0.12s ease;
4357
}
4458
59+
.plus {
60+
background: var(--geist-success);
61+
border-radius: 5px;
62+
margin-left: auto;
63+
color: var(--geist-background);
64+
height: 32px;
65+
width: 32px;
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
transition: background 0.12s ease;
70+
}
71+
72+
.icon-card:hover .plus {
73+
background: var(--geist-success-dark);
74+
}
75+
4576
.icon-card:hover .arrow {
4677
color: var(--accents-6);
4778
}

‎components/icons/plus.js

+4-19
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,5 @@
1-
const Plus = ({ className, width = 14 }) => (
2-
<svg
3-
className={className}
4-
height={width}
5-
width={width}
6-
viewBox="174 112 11 12"
7-
xmlns="http://www.w3.org/2000/svg"
8-
>
9-
<g
10-
fill="none"
11-
fillRule="evenodd"
12-
strokeLinecap="square"
13-
stroke="currentColor"
14-
>
15-
<path d="M179.5 113v10M174.5 118h10" />
16-
</g>
17-
</svg>
18-
)
1+
import withIcon from '~/lib/with-icon'
192

20-
export default Plus
3+
const Plus = `<path d="M12 5v14"/><path d="M5 12h14"/>`
4+
5+
export default withIcon(Plus)

0 commit comments

Comments
 (0)