mirror of
https://github.com/System-End/site.git
synced 2026-04-19 22:05:11 +00:00
Switch Photo to use next/image
This commit is contained in:
Lachlan Campbell
parent
798362d2fd
commit
863447683a
6 changed files with 57 additions and 42 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import styled from '@emotion/styled'
|
||||
import { Box, Card, Text, Image, useColorMode } from 'theme-ui'
|
||||
import { Box, Card, Text, useColorMode } from 'theme-ui'
|
||||
import Image from 'next/image'
|
||||
import theme from '../lib/theme'
|
||||
|
||||
const Caption = styled(Text)`
|
||||
|
|
@ -15,12 +16,13 @@ const Caption = styled(Text)`
|
|||
z-index: 0;
|
||||
`
|
||||
|
||||
const Photo = ({ src, alt, showAlt, dark, ...props }) => {
|
||||
const Photo = ({ src, width, height, alt, showAlt, dark, ...props }) => {
|
||||
const [colorMode] = useColorMode()
|
||||
const showCaption = showAlt && alt
|
||||
return (
|
||||
<Card
|
||||
{...props}
|
||||
as="figure"
|
||||
sx={{
|
||||
p: [0, 0, 0],
|
||||
boxShadow: 'elevated',
|
||||
|
|
@ -28,17 +30,21 @@ const Photo = ({ src, alt, showAlt, dark, ...props }) => {
|
|||
position: 'relative',
|
||||
maxWidth: '100%',
|
||||
lineHeight: 0,
|
||||
...props.sx
|
||||
height: 'fit-content',
|
||||
...props.sx,
|
||||
img: { objectFit: 'cover', objectPosition: 'center' }
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
loading="lazy"
|
||||
sx={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
width={width}
|
||||
height={height}
|
||||
layout="responsive"
|
||||
/>
|
||||
{showCaption && (
|
||||
<Caption
|
||||
as="figcaption"
|
||||
variant={dark ? 'cards.translucentDark' : 'cards.translucent'}
|
||||
children={alt}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ module.exports = withMDX({
|
|||
trailingSlash: true,
|
||||
pageExtensions: ['js', 'jsx', 'mdx'],
|
||||
assetPrefix: isProd ? '/v3' : '',
|
||||
images: {
|
||||
domains: ['dl.airtable.com']
|
||||
},
|
||||
webpack: (config, { isServer }) => {
|
||||
if (isServer) {
|
||||
require('./lib/sitemap')
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
"@hackclub/meta": "1.0.0",
|
||||
"@hackclub/theme": "^0.3.0",
|
||||
"@mdx-js/loader": "^1.6.19",
|
||||
"@next/mdx": "^10.0.0",
|
||||
"@next/mdx": "^10.0.1",
|
||||
"airtable-plus": "^1.0.4",
|
||||
"fathom-client": "^3.0.0",
|
||||
"globby": "^11.0.1",
|
||||
"lodash": "^4.17.20",
|
||||
"next": "^10.0.0",
|
||||
"next": "^10.0.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-reveal": "^1.2.2",
|
||||
|
|
|
|||
|
|
@ -206,16 +206,18 @@ const Page = () => (
|
|||
work at their own pace, building websites, apps, & games, and
|
||||
presenting them at the end.
|
||||
</Text>
|
||||
<Grid columns={[null, null, '3fr 2fr']} gap={[3, 4]} pt={[3, 4]}>
|
||||
<Grid columns={[null, null, 2, '3fr 2fr']} gap={[3, 4]} pt={[3, 4]}>
|
||||
<Photo
|
||||
src="https://cloud-7incndho1.vercel.app/2020-09-03_5dby0c0pac7ch2r7fy66q5dvy58x762p.png"
|
||||
alt="Hack Club meeting at State College Area High School, 2017-06-01"
|
||||
src="https://dl.airtable.com/.attachmentThumbnails/904cf56ceac6b0921eceae02958dcd29/5851864a"
|
||||
alt="Summer Creek Hack Club meeting, February 2020"
|
||||
width={3000}
|
||||
height={2550}
|
||||
showAlt
|
||||
/>
|
||||
<Grid
|
||||
columns="auto 1fr"
|
||||
gap={3}
|
||||
sx={{
|
||||
gridColumnGap: 3,
|
||||
span: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
|
|
@ -227,7 +229,7 @@ const Page = () => (
|
|||
fontWeight: 'bold',
|
||||
border: '3px solid currentColor'
|
||||
},
|
||||
p: { mt: 0 },
|
||||
p: { my: 0 },
|
||||
strong: { display: 'block' }
|
||||
}}
|
||||
>
|
||||
|
|
@ -421,8 +423,10 @@ const Page = () => (
|
|||
}
|
||||
>
|
||||
<Photo
|
||||
src="https://cloud-5l827972h.vercel.app/2020-09-09_jwn3zheyafktu0hj5mb4tu7mrz49u6j3.png"
|
||||
src="/home/flagship_megan.png"
|
||||
alt="Megan presenting a workshop at Flagship 2019"
|
||||
width={980}
|
||||
height={653}
|
||||
sx={{ maxWidth: [null, 332] }}
|
||||
/>
|
||||
</Feature>
|
||||
|
|
@ -519,8 +523,10 @@ const Page = () => (
|
|||
}
|
||||
>
|
||||
<Photo
|
||||
src="https://assets.hackclub.com/log/2020-06-29_workshops.jpg"
|
||||
src="/home/workshops.jpg"
|
||||
alt="Students going wild on a Zoom call"
|
||||
width={768}
|
||||
height={463}
|
||||
sx={{ maxWidth: [null, 332] }}
|
||||
/>
|
||||
</Feature>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
56
yarn.lock
56
yarn.lock
|
|
@ -1411,25 +1411,25 @@
|
|||
resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.19.tgz#5d4d8f66536d6653963ab2600490b52c3df546be"
|
||||
integrity sha512-bkkQNSHz3xSr3KRHUQ2Qk2XhewvvXAOUqjIUKwcQuL4ijOA4tUHZfUgXExi5CpMysrX7izcsyICtXjZHlfJUjg==
|
||||
|
||||
"@next/env@10.0.0":
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.0.tgz#eb0239062226a9c8b604d58d4a4204e26c22eb16"
|
||||
integrity sha512-59+6BnOxPoMY64Qy2crDGHtvQgHwIL1SIkWeNiEud1V6ASs59SM9oDGN+Bo/EswII1nn+wQRpMvax0IIN2j+VQ==
|
||||
"@next/env@10.0.1":
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.1.tgz#5f49329fcc4fe8948737aeb8108c9d7d75155f93"
|
||||
integrity sha512-6dwx5YXKG88IR9Q1aai+pprF7WKcmtl0ShQy/iENj5yMWMzsQCem6hxe198u9j7z1IsWyGDXZPsaLEJEatOpeQ==
|
||||
|
||||
"@next/mdx@^10.0.0":
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-10.0.0.tgz#985ecd32d13e3595d2b9c423cae8c673b2cae5db"
|
||||
integrity sha512-QSXaLs1HZhqaREhgdTlTmW4KQNS9uvbu0OUTLzk3KGfDPlRocdgChA32BOuy2m1rp60uLibYxQIZ7JjI6vqH/w==
|
||||
"@next/mdx@^10.0.1":
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-10.0.1.tgz#95f3ddee3c7c6457dd4b1b6cb694921371f7c6d1"
|
||||
integrity sha512-p9EAZwtZnkvgGMj7gYsxYD82/yXXZEo3fruTEhr+xBNEslHehcDYq6nBJUIkbyDu+6WIsNYjTlmhP6Iqqr9cSQ==
|
||||
|
||||
"@next/polyfill-module@10.0.0":
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.0.tgz#17f59cb7325a03f23b66b979fccc56d133411b0a"
|
||||
integrity sha512-FLSwwWQaP/sXjlS7w4YFu+oottbo/bjoh+L+YED7dblsaRJT89ifV+h8zvLvh1hCL7FJUYVar4rehvj/VO5T9w==
|
||||
"@next/polyfill-module@10.0.1":
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.1.tgz#483c8f8692d842800f6badb59f8de74b540580a9"
|
||||
integrity sha512-Vf8HYy74jx8aQgv/ftFXQtD/udJY4/OXYiiBepqrxC0T3PPl4cns1cbrr5f15xjPELMfcqulxwMYEurioBmv+w==
|
||||
|
||||
"@next/react-dev-overlay@10.0.0":
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.0.tgz#ba1acc79bc9d874f1801a0b312e6a45de74bf425"
|
||||
integrity sha512-HJ44TJXtaGfGxVtljPECZvqw+GctVvBr60Rsedo5A+wU2GIiycJ8n5yUSdc9UiYTnPuxfJFicJec6kgR6GSWKA==
|
||||
"@next/react-dev-overlay@10.0.1":
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.1.tgz#38f99f78316e9e7fa61a95e1d883e90d6d1fa4d0"
|
||||
integrity sha512-VYwwGBtV9hqpqYoVABvZEFHBt3oL6PMpiLrDmnHaOwsPDQ+kQsiWd1L8tsYvAC2dgu/x/a/TG0D81FGF77Tohw==
|
||||
dependencies:
|
||||
"@babel/code-frame" "7.10.4"
|
||||
ally.js "1.4.1"
|
||||
|
|
@ -1442,10 +1442,10 @@
|
|||
stacktrace-parser "0.1.10"
|
||||
strip-ansi "6.0.0"
|
||||
|
||||
"@next/react-refresh-utils@10.0.0":
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.0.tgz#45cdd1ad3b55ac442f8431cdc43ff53c3dc44d16"
|
||||
integrity sha512-V1/oiDWb2C1Do0eZONsKX1aqGNkqCUqxUahIiCjwKFu9c3bps+Ygg4JjtaCd9oycv0KzYImUZnU+nqveFUjxUw==
|
||||
"@next/react-refresh-utils@10.0.1":
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.1.tgz#ea6f808a9a6242d2da85138edee5562f17c0243a"
|
||||
integrity sha512-K3thGrgD0uic/x4PZh9oRK/+LWTsn6zmDSHoEXgdft1gtlOjQIVGz7yuPMvuEB9oXDl+giuvRbU+JRlhtSf/eQ==
|
||||
|
||||
"@nodelib/fs.scandir@2.1.3":
|
||||
version "2.1.3"
|
||||
|
|
@ -4709,10 +4709,10 @@ next-tick@~1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
|
||||
integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
|
||||
|
||||
next@^10.0.0:
|
||||
version "10.0.0"
|
||||
resolved "https://registry.yarnpkg.com/next/-/next-10.0.0.tgz#fbc82fa69f05bf82fb5c4e160151f38fb9615e99"
|
||||
integrity sha512-hpJkikt6tqwj7DfD5Mizwc1kDsaaS73TQK6lJL+++Ht8QXIEs+KUqTZULgdMk80mDV2Zhzo9/JYMEranWwAFLA==
|
||||
next@^10.0.1:
|
||||
version "10.0.1"
|
||||
resolved "https://registry.yarnpkg.com/next/-/next-10.0.1.tgz#e1366b41b8547dfc7e9a14d1f7dd8a8584dcf0b2"
|
||||
integrity sha512-EFlcWe82CQc1QkeIhNogcdC25KBz4CBwjyzfRHhig+wp28GW1O2P/mX+2a7EG1wXg69GyW1JYXOkKk2/VjIwVg==
|
||||
dependencies:
|
||||
"@ampproject/toolbox-optimizer" "2.7.0-alpha.1"
|
||||
"@babel/code-frame" "7.10.4"
|
||||
|
|
@ -4733,10 +4733,10 @@ next@^10.0.0:
|
|||
"@babel/runtime" "7.11.2"
|
||||
"@babel/types" "7.11.5"
|
||||
"@hapi/accept" "5.0.1"
|
||||
"@next/env" "10.0.0"
|
||||
"@next/polyfill-module" "10.0.0"
|
||||
"@next/react-dev-overlay" "10.0.0"
|
||||
"@next/react-refresh-utils" "10.0.0"
|
||||
"@next/env" "10.0.1"
|
||||
"@next/polyfill-module" "10.0.1"
|
||||
"@next/react-dev-overlay" "10.0.1"
|
||||
"@next/react-refresh-utils" "10.0.1"
|
||||
ast-types "0.13.2"
|
||||
babel-plugin-transform-define "2.0.0"
|
||||
babel-plugin-transform-react-remove-prop-types "0.4.24"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue