mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
committed by
Thomas Osmonson
Thomas Osmonson
11 changed files with 368 additions and 78 deletions
@ -0,0 +1,32 @@ |
|||
@font-face { |
|||
font-family: 'Soehne Mono'; |
|||
src: url('/static/fonts/soehne-mono-web-buch.woff2') format('woff2'), |
|||
url('/static/fonts/soehne-mono-web-buch.woff') format('woff'); |
|||
font-weight: 400; |
|||
font-display: swap; |
|||
font-style: normal; |
|||
} |
|||
@font-face { |
|||
font-family: 'Soehne'; |
|||
src: url('/static/fonts/soehne-web-buch.woff2') format('woff2'), |
|||
url('/static/fonts/soehne-web-buch.woff') format('woff'); |
|||
font-weight: 400; |
|||
font-display: swap; |
|||
font-style: normal; |
|||
} |
|||
@font-face { |
|||
font-family: 'Soehne'; |
|||
src: url('/static/fonts/soehne-web-kraftig_1.woff2') format('woff2'), |
|||
url('/static/fonts/soehne-web-kraftig_1.woff') format('woff'); |
|||
font-weight: 500; |
|||
font-display: swap; |
|||
font-style: normal; |
|||
} |
|||
@font-face { |
|||
font-family: 'Soehne'; |
|||
src: url('/static/fonts/soehne-web-halbfett_1.woff2') format('woff2'), |
|||
url('/static/fonts/soehne-web-halbfett_1.woff') format('woff'); |
|||
font-weight: 600; |
|||
font-display: swap; |
|||
font-style: normal; |
|||
} |
|||
@ -0,0 +1,151 @@ |
|||
import React from 'react'; |
|||
import { Box, BoxProps, useSafeLayoutEffect } from '@blockstack/ui'; |
|||
import { useSpring, animated, config } from 'react-spring'; |
|||
import { useInView } from 'react-intersection-observer'; |
|||
import { makeCancelable } from '@common/utils'; |
|||
|
|||
interface ImageProps { |
|||
/** The source of the image to load */ |
|||
src: string; |
|||
|
|||
/** The source set of the image to load */ |
|||
srcSet?: string; |
|||
|
|||
/** The alt text description of the image you are loading */ |
|||
alt?: string; |
|||
|
|||
/** Sizes descriptor */ |
|||
sizes?: string; |
|||
} |
|||
|
|||
const loadImage = ( |
|||
{ src, srcSet, alt, sizes }: ImageProps, |
|||
experimentalDecode = false |
|||
): Promise<any> => |
|||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|||
new Promise((resolve, reject) => { |
|||
if (typeof Image !== 'undefined') { |
|||
const image = new Image(); |
|||
if (srcSet) { |
|||
image.srcset = srcSet; |
|||
} |
|||
if (alt) { |
|||
image.alt = alt; |
|||
} |
|||
if (sizes) { |
|||
image.sizes = sizes; |
|||
} |
|||
image.src = src; |
|||
|
|||
/** @see: https://www.chromestatus.com/feature/5637156160667648 */ |
|||
if (experimentalDecode && 'decode' in image) { |
|||
return ( |
|||
image |
|||
// NOTE: .decode() is not in the TS defs yet
|
|||
// TODO: consider writing the .decode() definition and sending a PR
|
|||
//@ts-ignore
|
|||
.decode() |
|||
//@ts-ignore
|
|||
.then((image: HTMLImageElement) => resolve(image)) |
|||
.catch((err: any) => reject(err)) |
|||
); |
|||
} |
|||
|
|||
image.onload = resolve; |
|||
image.onerror = reject; |
|||
} |
|||
}); |
|||
|
|||
export const LazyImage: React.FC< |
|||
BoxProps & { |
|||
src?: string; |
|||
srcSet?: string; |
|||
loading?: string; |
|||
placeholder?: string; |
|||
} |
|||
> = ({ src, srcSet, style = {}, placeholder, ...props }) => { |
|||
const [ref, inView] = useInView({ |
|||
triggerOnce: true, |
|||
rootMargin: '200px 0px', |
|||
}); |
|||
|
|||
const [loading, setLoading] = React.useState(false); |
|||
const [source, setSrc] = React.useState({ |
|||
src: undefined, |
|||
srcSet: undefined, |
|||
}); |
|||
|
|||
const loadingPromise = makeCancelable(loadImage({ src, srcSet }, true)); |
|||
|
|||
const onLoad = React.useCallback( |
|||
() => |
|||
requestAnimationFrame(() => { |
|||
console.log('on-load'); |
|||
setSrc({ src, srcSet }); |
|||
}), |
|||
[] |
|||
); |
|||
|
|||
useSafeLayoutEffect(() => { |
|||
if (!source.src && !loading && inView) { |
|||
setLoading(true); |
|||
loadingPromise.promise |
|||
.then(_res => { |
|||
console.log('loaded'); |
|||
onLoad(); |
|||
}) |
|||
.catch(e => { |
|||
// If the Loading Promise was canceled, it means we have stopped
|
|||
// loading due to unmount, rather than an error.
|
|||
if (!e.isCanceled) { |
|||
console.error('failed to load image'); |
|||
} |
|||
}); |
|||
} |
|||
}, [source, loading, inView]); |
|||
|
|||
const styleProps = useSpring({ opacity: source.src ? 1 : 0, config: config.gentle }); |
|||
const placeholderProps = useSpring({ opacity: source.src ? 0 : 1, config: config.gentle }); |
|||
|
|||
return ( |
|||
<Box |
|||
as="span" |
|||
maxWidth="100%" |
|||
width={['100%', '100%', 'inherit', 'inherit']} |
|||
display="block" |
|||
position="absolute" |
|||
ref={ref} |
|||
{...props} |
|||
> |
|||
<Box as="span" top={0} left={0} width="100%" position="absolute"> |
|||
<Box |
|||
as={animated.img} |
|||
width="100%" |
|||
style={{ |
|||
filter: 'blur(5px)', |
|||
...placeholderProps, |
|||
}} |
|||
//@ts-ignore
|
|||
src={placeholder} |
|||
/> |
|||
</Box> |
|||
{source.src ? ( |
|||
<Box |
|||
maxWidth="100%" |
|||
width={['100%', '100%', 'inherit', 'inherit']} |
|||
display="block" |
|||
as={animated.img} |
|||
zIndex={99} |
|||
style={{ |
|||
opacity: 0, |
|||
willChange: 'opacity', |
|||
...style, |
|||
...styleProps, |
|||
}} |
|||
{...source} |
|||
{...props} |
|||
/> |
|||
) : null} |
|||
</Box> |
|||
); |
|||
}; |
|||
@ -0,0 +1,9 @@ |
|||
export default async (req, res) => { |
|||
const response = await fetch('http://status.test-blockstack.com/json'); |
|||
const json = await response.json(); |
|||
if (json) { |
|||
res.statusCode = 200; |
|||
res.setHeader('Content-Type', 'application/json'); |
|||
res.end(JSON.stringify(json.blockRateStatus)); |
|||
} |
|||
}; |
|||
Loading…
Reference in new issue