From eb8e57a4098256d1a307b6b2968d538754b46d9f Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sat, 8 Jan 2022 19:56:36 +0200 Subject: [PATCH 1/8] Placeholder images for first four projects --- components/projects.tsx | 7 ++++++- pages/projects/[id].tsx | 8 +++++++- queries.ts | 1 + types.ts | 1 + 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/components/projects.tsx b/components/projects.tsx index d56bd38..06ee7dd 100644 --- a/components/projects.tsx +++ b/components/projects.tsx @@ -232,7 +232,7 @@ interface ProjectProps { } const Project: React.FC = ({ project, onSelect }) => { - const { titleShort, client, role, asset } = project + const { titleShort, client, role, asset, assetPlaceholder } = project const { observe, width, height } = useDimensions() const controls = useAnimation() const [ref, inView] = useInView() @@ -247,6 +247,10 @@ const Project: React.FC = ({ project, onSelect }) => { onSelect(project) } + const placeholderProps: any = assetPlaceholder + ? { placeholder: 'blur', blurDataURL: assetPlaceholder } + : {} + return ( = ({ project, onSelect }) => { = ({ data }) => { // TODO: Put data in provider? const { project } = data.data - const { asset, title, role, startdate, enddate, city } = project + const { asset, assetPlaceholder, title, role, startdate, enddate, city } = + project + + const placeholderProps: any = assetPlaceholder + ? { placeholder: 'blur', blurDataURL: assetPlaceholder } + : {} return ( <> @@ -209,6 +214,7 @@ const Project: React.FC = ({ data }) => { layout="fill" loading="eager" priority + {...placeholderProps} motionProps={{ initial: { transformOrigin: 'top right', scale: 1.1 }, animate: { scale: 1 }, diff --git a/queries.ts b/queries.ts index ff292b7..03e3b49 100644 --- a/queries.ts +++ b/queries.ts @@ -59,5 +59,6 @@ export const getProjectPageData = (id: string) => `{ asset { url } + assetPlaceholder } }` diff --git a/types.ts b/types.ts index 65c948b..a529f9b 100644 --- a/types.ts +++ b/types.ts @@ -19,6 +19,7 @@ export interface ProjectType { date: string tags: string[] asset: ImageType + assetPlaceholder?: string startdate: string enddate: string city: string From 2479eb98e7bedc0fbd94959c2cc41bd8621357d2 Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sat, 8 Jan 2022 20:02:39 +0200 Subject: [PATCH 2/8] Fixes --- components/projectContent.tsx | 2 +- stitches.config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/projectContent.tsx b/components/projectContent.tsx index 5788324..4850476 100644 --- a/components/projectContent.tsx +++ b/components/projectContent.tsx @@ -65,7 +65,7 @@ const TabsTrigger = styled(TabsPrimitive.TabsTrigger, { '@bp1': { height: '40px', fontSize: '$fontSize3', - $$marginRight: '$space$space6', + $$marginRight: '$space$space4', }, '@bp2': { diff --git a/stitches.config.ts b/stitches.config.ts index 5cb0f9a..f6e322f 100644 --- a/stitches.config.ts +++ b/stitches.config.ts @@ -171,6 +171,6 @@ export const globalStyles = globalCss({ '#__next': { height: '100%', - minHeight: '100%', + minHeight: '100vh', }, }) From bb1f92c8bb689cda5577662d0a0cd034352340cd Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sat, 8 Jan 2022 20:06:01 +0200 Subject: [PATCH 3/8] Font fixes --- components/projectContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/projectContent.tsx b/components/projectContent.tsx index 4850476..20ef4cf 100644 --- a/components/projectContent.tsx +++ b/components/projectContent.tsx @@ -10,7 +10,7 @@ const Tabs = styled(TabsPrimitive.Tabs, { display: 'flex', flexDirection: 'column', width: '80%', - minHeight: '200px', + minHeight: '240px', '@bp1': { width: '100%', @@ -94,7 +94,7 @@ const TabsContent = styled(TabsPrimitive.TabsContent, { lineHeight: '140%', '@bp1': { - fontSize: '$fontSize2', + fontSize: '$fontSize3', }, '@bp2': { From 6c40db743bdecb68da7359efa793787a14748e71 Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sun, 9 Jan 2022 16:34:59 +0200 Subject: [PATCH 4/8] Remove header (for now) --- pages/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 04d2594..e88c8c5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,7 +9,6 @@ import { PAGES_SEO_SETTINGS } from '../utils/pagesSeo' import { Hero } from '../components/hero' import { Projects } from '../components/projects' import { Spacer } from '../components/spacer' -import { Header } from '../components/header' const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN @@ -101,7 +100,6 @@ const Index: React.FC = ({ data }) => { /> - {/*
*/}
From cdfed2010708f9cb3cc18968fd50fe74fcc67e01 Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sun, 9 Jan 2022 19:17:31 +0200 Subject: [PATCH 5/8] Refactorings --- queries.ts => client-api/graphql/queries.ts | 4 +- client-api/indexPageApi.ts | 63 ++++++ components/hero.tsx | 4 +- components/projectContent.tsx | 14 +- components/projectTitle.tsx | 92 ++++++++ components/projects.tsx | 4 +- components/socialMediaLinks.tsx | 4 +- pages/index.tsx | 78 +++---- pages/projects/[id].tsx | 221 ++++++-------------- providers/DataContextProvider.tsx | 16 -- providers/IndexPageDataProvider.tsx | 25 +++ providers/ProjectPageDataProvider.tsx | 25 +++ utils/projectHelper.ts | 6 +- 13 files changed, 318 insertions(+), 238 deletions(-) rename queries.ts => client-api/graphql/queries.ts (92%) create mode 100644 client-api/indexPageApi.ts create mode 100644 components/projectTitle.tsx delete mode 100644 providers/DataContextProvider.tsx create mode 100644 providers/IndexPageDataProvider.tsx create mode 100644 providers/ProjectPageDataProvider.tsx diff --git a/queries.ts b/client-api/graphql/queries.ts similarity index 92% rename from queries.ts rename to client-api/graphql/queries.ts index 03e3b49..0a50723 100644 --- a/queries.ts +++ b/client-api/graphql/queries.ts @@ -34,7 +34,7 @@ export const getIndexPageData = `{ } }` -export const getAllProjects = `{ +export const getAllProjectsQuery = `{ projects: projectCollection(order: startdate_DESC) { items { sys { @@ -44,7 +44,7 @@ export const getAllProjects = `{ } }` -export const getProjectPageData = (id: string) => `{ +export const getProjectPageDataQuery = (id: string) => `{ project(id: "${id}") { title titleShort diff --git a/client-api/indexPageApi.ts b/client-api/indexPageApi.ts new file mode 100644 index 0000000..33897c6 --- /dev/null +++ b/client-api/indexPageApi.ts @@ -0,0 +1,63 @@ +import { + getAllProjectsQuery, + getIndexPageData as getIndexPageDataQuery, + getProjectPageDataQuery, +} from './graphql/queries' +import { AllProjectsData, IndexPageData, ProjectPageData } from '../types' + +const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID +const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN + +export const getIndexPageData = async () => { + const res = await fetch( + `https://graphql.contentful.com/content/v1/spaces/${space}`, + { + method: 'POST', + headers: { + 'content-type': 'application/json', + authorization: `Bearer ${accessToken}`, + }, + body: JSON.stringify({ + query: getIndexPageDataQuery, + }), + } + ) + + return await (res.json() as Promise) +} + +export const getAllProjects = async () => { + const res = await fetch( + `https://graphql.contentful.com/content/v1/spaces/${space}`, + { + method: 'POST', + headers: { + 'content-type': 'application/json', + authorization: `Bearer ${accessToken}`, + }, + body: JSON.stringify({ + query: getAllProjectsQuery, + }), + } + ) + + return await (res.json() as Promise) +} + +export const getProjectDetails = async (projectId: string) => { + const res = await fetch( + `https://graphql.contentful.com/content/v1/spaces/${space}`, + { + method: 'POST', + headers: { + 'content-type': 'application/json', + authorization: `Bearer ${accessToken}`, + }, + body: JSON.stringify({ + query: getProjectPageDataQuery(projectId), + }), + } + ) + + return await (res.json() as Promise) +} diff --git a/components/hero.tsx b/components/hero.tsx index fb60344..804fa99 100644 --- a/components/hero.tsx +++ b/components/hero.tsx @@ -3,7 +3,7 @@ import RichText from '@madebyconnor/rich-text-to-jsx' import { motion, useMotionValue, useTransform } from 'framer-motion' import { styled } from '../stitches.config' -import { useData } from '../providers/DataContextProvider' +import { useIndexPageData } from '../providers/IndexPageDataProvider' import { Sparkles } from './sparkle' import { SocialMediaLinks } from './socialMediaLinks' import { ContentfulImage } from './contentfulImage' @@ -171,7 +171,7 @@ const PerspectiveWrapper = styled('div', { }) export const Hero: React.FC = () => { - const { data } = useData() + const { data } = useIndexPageData() const [angle] = useState(10) const y = useMotionValue(0.5) diff --git a/components/projectContent.tsx b/components/projectContent.tsx index 20ef4cf..291225c 100644 --- a/components/projectContent.tsx +++ b/components/projectContent.tsx @@ -5,6 +5,7 @@ import scrollIntoView from 'smooth-scroll-into-view-if-needed' import { styled } from '../stitches.config' import { ProjectType } from '../types' import { Spacer } from './spacer' +import { useProjectPageData } from '../providers/ProjectPageDataProvider' const Tabs = styled(TabsPrimitive.Tabs, { display: 'flex', @@ -118,12 +119,9 @@ const Tags = styled('div', { fontFamily: 'Share Tech Mono, Lucida Console, Courier New, monospace', }) -interface Props { - project: ProjectType -} - -export const ProjectDetails: React.FC = ({ project }) => { - const { description, me, title, tags } = project +export const ProjectDetails: React.FC = () => { + const { data } = useProjectPageData() + const { description, me, title, tags } = data?.project || {} const handleOnTabClick = (event: any) => scrollIntoView(event.target, { @@ -150,10 +148,10 @@ export const ProjectDetails: React.FC = ({ project }) => { - + - +
Team information will come...
diff --git a/components/projectTitle.tsx b/components/projectTitle.tsx new file mode 100644 index 0000000..5d5a596 --- /dev/null +++ b/components/projectTitle.tsx @@ -0,0 +1,92 @@ +import { useProjectPageData } from '../providers/ProjectPageDataProvider' +import { styled } from '../stitches.config' +import { formatProjectDates } from '../utils/projectHelper' +import { Spacer } from './spacer' + +const TitleWrapper = styled('div', { + overflowY: 'hidden', + + '@bp1': { + maxWidth: '100%', + minHeight: '120px', + }, + + '@bp2': { + maxWidth: '70%', + height: '400px', + }, + + '@bp3': { + maxWidth: '60%', + height: '440px', + }, + + '@bp4': { + maxWidth: '60%', + height: '480px', + }, + + '@bp5': { + maxWidth: '50%', + height: '480px', + }, +}) + +const SectionTitle = styled('h1', { + color: '$color10', + textShadow: + '1px 1px 10px rgba(17, 17, 17, 0.2), 1px 1px 10px rgba(17, 17, 17, 0.2)', + letterSpacing: '-1.5px', + lineHeight: '120%', + transition: 'font-size 0.8s ease-in-out', + fontFamily: 'Playfair Display, Helvetica Neue, Helvetica, Arial, sans-serif;', + fontWeight: 700, + + '@bp1': { + fontSize: '$fontSize8', + }, + + '@bp2': { + fontSize: '$fontSize9', + }, + + '@bp3': { + fontSize: '$fontSize10', + }, + + '@bp4': { + fontSize: '$fontSize11', + }, + + '@bp5': { + fontSize: '$fontSize11', + }, +}) + +const Info = styled('div', { + fontSize: '$fontSize2', + + strong: { + color: '$colorful4', + }, + + '@bp1': { + fontSize: '$fontSize1', + }, +}) + +export const ProjectTitle: React.FC = () => { + const { data } = useProjectPageData() + const { title, role, city, startdate, enddate } = data?.project || {} + + return ( + + {title} + + + {role} {formatProjectDates(startdate, enddate)} in{' '} + {city} + + + ) +} diff --git a/components/projects.tsx b/components/projects.tsx index 06ee7dd..40291f9 100644 --- a/components/projects.tsx +++ b/components/projects.tsx @@ -5,7 +5,7 @@ import { useInView } from 'react-intersection-observer' import useDimensions from 'react-cool-dimensions' import { styled } from '../stitches.config' -import { useData } from '../providers/DataContextProvider' +import { useIndexPageData } from '../providers/IndexPageDataProvider' import { ProjectType } from '../types' import { event } from '../utils/gtag' import { Spacer } from './spacer' @@ -42,7 +42,7 @@ const SectionTitle = styled('h2', { }) export const Projects: React.FC = () => { - const { data } = useData() + const { data } = useIndexPageData() const handleOnSelect = (project: ProjectType) => { event({ diff --git a/components/socialMediaLinks.tsx b/components/socialMediaLinks.tsx index 041742a..06e14d7 100644 --- a/components/socialMediaLinks.tsx +++ b/components/socialMediaLinks.tsx @@ -1,6 +1,6 @@ import React, { useMemo } from 'react' -import { useData } from '../providers/DataContextProvider' +import { useIndexPageData } from '../providers/IndexPageDataProvider' import { VisuallyHidden } from './visuallyHidden' import { styled, theme } from '../stitches.config' import { ContactType } from '../types' @@ -64,7 +64,7 @@ const Container = styled('div', { }) export const SocialMediaLinks: React.FC = () => { - const { data } = useData() + const { data } = useIndexPageData() const socialMediaLinks = useMemo( () => data?.me.contacts.items.filter((contact) => contact.medium !== 'Email'), diff --git a/pages/index.tsx b/pages/index.tsx index e88c8c5..4c167a7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,41 +2,14 @@ import React from 'react' import Head from 'next/head' import { styled } from '../stitches.config' -import { IndexPageData, ProjectType } from '../types' -import { getIndexPageData } from '../queries' -import { DataContextProvider } from '../providers/DataContextProvider' +import { IndexPageData } from '../types' +import { getIndexPageData } from '../client-api/indexPageApi' +import { IndexPageDataContextProvider } from '../providers/IndexPageDataProvider' import { PAGES_SEO_SETTINGS } from '../utils/pagesSeo' import { Hero } from '../components/hero' import { Projects } from '../components/projects' import { Spacer } from '../components/spacer' -const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID -const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN - -export const getStaticProps = async () => { - const res = await fetch( - `https://graphql.contentful.com/content/v1/spaces/${space}`, - { - method: 'POST', - headers: { - 'content-type': 'application/json', - authorization: `Bearer ${accessToken}`, - }, - body: JSON.stringify({ - query: getIndexPageData, - }), - } - ) - - const data = await (res.json() as Promise) - - return { - props: { - data, - }, - } -} - const ContentSpacer = () => ( ( + + {PAGES_SEO_SETTINGS.INDEX.title} + + + + +) + interface IndexProps { data: IndexPageData } @@ -84,22 +72,8 @@ interface IndexProps { const Index: React.FC = ({ data }) => { return ( <> - - {PAGES_SEO_SETTINGS.INDEX.title} - - - - - + +
@@ -107,9 +81,19 @@ const Index: React.FC = ({ data }) => {
- + ) } export default Index + +export const getStaticProps = async () => { + const data = await getIndexPageData() + + return { + props: { + data, + }, + } +} diff --git a/pages/projects/[id].tsx b/pages/projects/[id].tsx index 8deb95c..0c6f54e 100644 --- a/pages/projects/[id].tsx +++ b/pages/projects/[id].tsx @@ -3,66 +3,20 @@ import Head from 'next/head' import { AnimatePresence } from 'framer-motion' import { styled } from '../../stitches.config' -import { AllProjectsData, ProjectPageData } from '../../types' -import { getAllProjects, getProjectPageData } from '../../queries' +import { ProjectPageData, ProjectType } from '../../types' +import { + ProjectPageDataContextProvider, + useProjectPageData, +} from '../../providers/ProjectPageDataProvider' import { PAGES_SEO_SETTINGS } from '../../utils/pagesSeo' import { BackgroundImage } from '../../components/backgroundImage' -import { Spacer } from '../../components/spacer' -import { formatProjectDates } from '../../utils/projectHelper' import { ProjectDetails } from '../../components/projectContent' - -const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID -const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN - -export const getStaticPaths: GetStaticPaths = async () => { - const res = await fetch( - `https://graphql.contentful.com/content/v1/spaces/${space}`, - { - method: 'POST', - headers: { - 'content-type': 'application/json', - authorization: `Bearer ${accessToken}`, - }, - body: JSON.stringify({ - query: getAllProjects, - }), - } - ) - - const { data } = await (res.json() as Promise) - const paths = data.projects.items - .map(({ sys: { id } }) => id) - .map((id) => ({ params: { id } })) - - return { - paths, - fallback: false, - } -} - -export const getStaticProps: GetStaticProps = async ({ params }) => { - const res = await fetch( - `https://graphql.contentful.com/content/v1/spaces/${space}`, - { - method: 'POST', - headers: { - 'content-type': 'application/json', - authorization: `Bearer ${accessToken}`, - }, - body: JSON.stringify({ - query: getProjectPageData((params as { id: string }).id), - }), - } - ) - - const data = await (res.json() as Promise) - - return { - props: { - data, - }, - } -} +import { ProjectTitle } from '../../components/projectTitle' +import { Spacer } from '../../components/spacer' +import { + getAllProjects, + getProjectDetails, +} from '../../client-api/indexPageApi' const Main = styled('main', { minWidth: '320px', @@ -90,35 +44,6 @@ const Main = styled('main', { }, }) -const TitleWrapper = styled('div', { - overflowY: 'hidden', - - '@bp1': { - maxWidth: '100%', - minHeight: '120px', - }, - - '@bp2': { - maxWidth: '70%', - height: '400px', - }, - - '@bp3': { - maxWidth: '60%', - height: '440px', - }, - - '@bp4': { - maxWidth: '60%', - height: '480px', - }, - - '@bp5': { - maxWidth: '50%', - height: '480px', - }, -}) - const TopSpacer = styled(Spacer, { '@bp1': { marginTop: '35vh', @@ -133,80 +58,48 @@ const ProjectBackgroundImage = styled(BackgroundImage, { }, }) -const SectionTitle = styled('h1', { - color: '$color10', - textShadow: - '1px 1px 10px rgba(17, 17, 17, 0.2), 1px 1px 10px rgba(17, 17, 17, 0.2)', - letterSpacing: '-1.5px', - lineHeight: '120%', - transition: 'font-size 0.8s ease-in-out', - fontFamily: 'Playfair Display, Helvetica Neue, Helvetica, Arial, sans-serif;', - fontWeight: 700, +const SEO: React.FC = () => { + const { data } = useProjectPageData() + const { project } = data || {} - '@bp1': { - fontSize: '$fontSize8', - }, - - '@bp2': { - fontSize: '$fontSize9', - }, - - '@bp3': { - fontSize: '$fontSize10', - }, - - '@bp4': { - fontSize: '$fontSize11', - }, - - '@bp5': { - fontSize: '$fontSize11', - }, -}) - -const Info = styled('div', { - fontSize: '$fontSize2', - - strong: { - color: '$colorful4', - }, + if (!project) { + return null + } - '@bp1': { - fontSize: '$fontSize1', - }, -}) + return ( + + {PAGES_SEO_SETTINGS.PROJECT(project).title} + + + + + ) +} interface ProjectProps { data: ProjectPageData } const Project: React.FC = ({ data }) => { - // TODO: Put data in provider? const { project } = data.data - const { asset, assetPlaceholder, title, role, startdate, enddate, city } = - project + const { asset, assetPlaceholder } = project const placeholderProps: any = assetPlaceholder ? { placeholder: 'blur', blurDataURL: assetPlaceholder } : {} return ( - <> - - {PAGES_SEO_SETTINGS.PROJECT(project).title} - - - - + + = ({ data }) => { animate: { scale: 1 }, exit: { scale: 0.9 }, transition: { - duration: 0.5, + duration: 0.75, ease: [0.61, 1, 0.88, 1], }, }} >
- - {title} - - - {role} {formatProjectDates(startdate, enddate)}{' '} - in {city} - - + - +
- + ) } export default Project + +export const getStaticPaths: GetStaticPaths = async () => { + const { data } = await getAllProjects() + const paths = data.projects.items + .map(({ sys: { id } }) => id) + .map((id) => ({ params: { id } })) + + return { + paths, + fallback: false, + } +} + +export const getStaticProps: GetStaticProps = async ({ params }) => { + const projectId = (params as { id: string }).id + const data = await getProjectDetails(projectId) + + return { + props: { + data, + }, + } +} diff --git a/providers/DataContextProvider.tsx b/providers/DataContextProvider.tsx deleted file mode 100644 index f5f6be6..0000000 --- a/providers/DataContextProvider.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { createContext, useContext } from 'react' -import { IndexPageData } from '../types' - -const DataContext = createContext({ - data: undefined, -}) - -interface Props { - data: IndexPageData -} - -export const DataContextProvider: React.FC = ({ data, children }) => { - return {children} -} - -export const useData = () => useContext(DataContext) diff --git a/providers/IndexPageDataProvider.tsx b/providers/IndexPageDataProvider.tsx new file mode 100644 index 0000000..87e0646 --- /dev/null +++ b/providers/IndexPageDataProvider.tsx @@ -0,0 +1,25 @@ +import React, { createContext, useContext } from 'react' +import { IndexPageData } from '../types' + +const IndexPageDataContext = createContext( + { + data: undefined, + } +) + +interface Props { + data: IndexPageData +} + +export const IndexPageDataContextProvider: React.FC = ({ + data, + children, +}) => { + return ( + + {children} + + ) +} + +export const useIndexPageData = () => useContext(IndexPageDataContext) diff --git a/providers/ProjectPageDataProvider.tsx b/providers/ProjectPageDataProvider.tsx new file mode 100644 index 0000000..c86a80a --- /dev/null +++ b/providers/ProjectPageDataProvider.tsx @@ -0,0 +1,25 @@ +import React, { createContext, useContext } from 'react' +import { ProjectPageData } from '../types' + +const ProjectPageDataContext = createContext< + ProjectPageData | { data: undefined } +>({ + data: undefined, +}) + +interface Props { + data: ProjectPageData +} + +export const ProjectPageDataContextProvider: React.FC = ({ + data, + children, +}) => { + return ( + + {children} + + ) +} + +export const useProjectPageData = () => useContext(ProjectPageDataContext) diff --git a/utils/projectHelper.ts b/utils/projectHelper.ts index e5af3f1..a1cfed9 100644 --- a/utils/projectHelper.ts +++ b/utils/projectHelper.ts @@ -12,10 +12,10 @@ export const sortProjectsOnStartDate = ( } export const formatProjectDates = ( - startdate: number | string, - enddate: number | string + startdate: number | string | undefined, + enddate: number | string | undefined ): string | undefined => { - if (!startdate && !enddate) { + if (typeof startdate === 'undefined' || typeof enddate === 'undefined') { return } From 6c9cd9daca90c5df70c61e9f99a3005b5adc0c9f Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sun, 9 Jan 2022 20:13:25 +0200 Subject: [PATCH 6/8] src folder --- {assets => src/assets}/social-media/facebook.svg | 0 {assets => src/assets}/social-media/github.svg | 0 {assets => src/assets}/social-media/instagram.svg | 0 {assets => src/assets}/social-media/linkedin.svg | 0 {assets => src/assets}/social-media/medium.svg | 0 {assets => src/assets}/social-media/stackoverflow.svg | 0 {assets => src/assets}/social-media/twitter.svg | 0 {client-api => src/client-api}/graphql/queries.ts | 0 {client-api => src/client-api}/indexPageApi.ts | 2 +- {components => src/components}/backgroundImage.tsx | 2 +- {components => src/components}/contentfulImage.tsx | 0 {components => src/components}/header.tsx | 2 +- {components => src/components}/hero.tsx | 2 +- {components => src/components}/parallaxEffect.tsx | 2 +- {components => src/components}/projectContent.tsx | 4 ++-- {components => src/components}/projectTitle.tsx | 2 +- {components => src/components}/projects.tsx | 4 ++-- {components => src/components}/responsiveImage.tsx | 0 {components => src/components}/scrollRestorer.tsx | 0 {components => src/components}/socialMediaLinks.tsx | 4 ++-- {components => src/components}/spacer.tsx | 2 +- {components => src/components}/sparkle.tsx | 2 +- {components => src/components}/visuallyHidden.tsx | 0 {hooks => src/hooks}/useRandomInterval.ts | 0 {hooks => src/hooks}/useScrollRestoration.ts | 0 {hooks => src/hooks}/useWindowSize.ts | 0 {pages => src/pages}/_app.tsx | 0 {pages => src/pages}/_document.js | 2 +- {pages => src/pages}/index.tsx | 4 ++-- {pages => src/pages}/projects/[id].tsx | 4 ++-- {providers => src/providers}/IndexPageDataProvider.tsx | 2 +- {providers => src/providers}/ProjectPageDataProvider.tsx | 2 +- {utils => src/utils}/backgroundChanger.ts | 0 {utils => src/utils}/contentfulImageLoader.ts | 0 {utils => src/utils}/gtag.ts | 0 {utils => src/utils}/isMobile.ts | 0 {utils => src/utils}/isRenderingOnServer.ts | 0 {utils => src/utils}/pagesSeo.ts | 2 +- {utils => src/utils}/projectHelper.ts | 2 +- {utils => src/utils}/random.ts | 0 {utils => src/utils}/range.ts | 0 41 files changed, 23 insertions(+), 23 deletions(-) rename {assets => src/assets}/social-media/facebook.svg (100%) rename {assets => src/assets}/social-media/github.svg (100%) rename {assets => src/assets}/social-media/instagram.svg (100%) rename {assets => src/assets}/social-media/linkedin.svg (100%) rename {assets => src/assets}/social-media/medium.svg (100%) rename {assets => src/assets}/social-media/stackoverflow.svg (100%) rename {assets => src/assets}/social-media/twitter.svg (100%) rename {client-api => src/client-api}/graphql/queries.ts (100%) rename {client-api => src/client-api}/indexPageApi.ts (99%) rename {components => src/components}/backgroundImage.tsx (97%) rename {components => src/components}/contentfulImage.tsx (100%) rename {components => src/components}/header.tsx (95%) rename {components => src/components}/hero.tsx (99%) rename {components => src/components}/parallaxEffect.tsx (97%) rename {components => src/components}/projectContent.tsx (97%) rename {components => src/components}/projectTitle.tsx (97%) rename {components => src/components}/projects.tsx (98%) rename {components => src/components}/responsiveImage.tsx (100%) rename {components => src/components}/scrollRestorer.tsx (100%) rename {components => src/components}/socialMediaLinks.tsx (96%) rename {components => src/components}/spacer.tsx (88%) rename {components => src/components}/sparkle.tsx (97%) rename {components => src/components}/visuallyHidden.tsx (100%) rename {hooks => src/hooks}/useRandomInterval.ts (100%) rename {hooks => src/hooks}/useScrollRestoration.ts (100%) rename {hooks => src/hooks}/useWindowSize.ts (100%) rename {pages => src/pages}/_app.tsx (100%) rename {pages => src/pages}/_document.js (98%) rename {pages => src/pages}/index.tsx (95%) rename {pages => src/pages}/projects/[id].tsx (96%) rename {providers => src/providers}/IndexPageDataProvider.tsx (91%) rename {providers => src/providers}/ProjectPageDataProvider.tsx (91%) rename {utils => src/utils}/backgroundChanger.ts (100%) rename {utils => src/utils}/contentfulImageLoader.ts (100%) rename {utils => src/utils}/gtag.ts (100%) rename {utils => src/utils}/isMobile.ts (100%) rename {utils => src/utils}/isRenderingOnServer.ts (100%) rename {utils => src/utils}/pagesSeo.ts (92%) rename {utils => src/utils}/projectHelper.ts (98%) rename {utils => src/utils}/random.ts (100%) rename {utils => src/utils}/range.ts (100%) diff --git a/assets/social-media/facebook.svg b/src/assets/social-media/facebook.svg similarity index 100% rename from assets/social-media/facebook.svg rename to src/assets/social-media/facebook.svg diff --git a/assets/social-media/github.svg b/src/assets/social-media/github.svg similarity index 100% rename from assets/social-media/github.svg rename to src/assets/social-media/github.svg diff --git a/assets/social-media/instagram.svg b/src/assets/social-media/instagram.svg similarity index 100% rename from assets/social-media/instagram.svg rename to src/assets/social-media/instagram.svg diff --git a/assets/social-media/linkedin.svg b/src/assets/social-media/linkedin.svg similarity index 100% rename from assets/social-media/linkedin.svg rename to src/assets/social-media/linkedin.svg diff --git a/assets/social-media/medium.svg b/src/assets/social-media/medium.svg similarity index 100% rename from assets/social-media/medium.svg rename to src/assets/social-media/medium.svg diff --git a/assets/social-media/stackoverflow.svg b/src/assets/social-media/stackoverflow.svg similarity index 100% rename from assets/social-media/stackoverflow.svg rename to src/assets/social-media/stackoverflow.svg diff --git a/assets/social-media/twitter.svg b/src/assets/social-media/twitter.svg similarity index 100% rename from assets/social-media/twitter.svg rename to src/assets/social-media/twitter.svg diff --git a/client-api/graphql/queries.ts b/src/client-api/graphql/queries.ts similarity index 100% rename from client-api/graphql/queries.ts rename to src/client-api/graphql/queries.ts diff --git a/client-api/indexPageApi.ts b/src/client-api/indexPageApi.ts similarity index 99% rename from client-api/indexPageApi.ts rename to src/client-api/indexPageApi.ts index 33897c6..0ede396 100644 --- a/client-api/indexPageApi.ts +++ b/src/client-api/indexPageApi.ts @@ -3,7 +3,7 @@ import { getIndexPageData as getIndexPageDataQuery, getProjectPageDataQuery, } from './graphql/queries' -import { AllProjectsData, IndexPageData, ProjectPageData } from '../types' +import { AllProjectsData, IndexPageData, ProjectPageData } from '../../types' const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN diff --git a/components/backgroundImage.tsx b/src/components/backgroundImage.tsx similarity index 97% rename from components/backgroundImage.tsx rename to src/components/backgroundImage.tsx index b173434..865115e 100644 --- a/components/backgroundImage.tsx +++ b/src/components/backgroundImage.tsx @@ -1,7 +1,7 @@ import { motion } from 'framer-motion' import { ImageProps } from 'next/image' -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' import { ContentfulImage } from './contentfulImage' const ImageContainer = styled('div', { diff --git a/components/contentfulImage.tsx b/src/components/contentfulImage.tsx similarity index 100% rename from components/contentfulImage.tsx rename to src/components/contentfulImage.tsx diff --git a/components/header.tsx b/src/components/header.tsx similarity index 95% rename from components/header.tsx rename to src/components/header.tsx index 5bcdb59..669178f 100644 --- a/components/header.tsx +++ b/src/components/header.tsx @@ -7,7 +7,7 @@ import { useViewportScroll, } from 'framer-motion' -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' const Container = styled(motion.header, { position: 'fixed', diff --git a/components/hero.tsx b/src/components/hero.tsx similarity index 99% rename from components/hero.tsx rename to src/components/hero.tsx index 804fa99..a9b27ec 100644 --- a/components/hero.tsx +++ b/src/components/hero.tsx @@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react' import RichText from '@madebyconnor/rich-text-to-jsx' import { motion, useMotionValue, useTransform } from 'framer-motion' -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' import { useIndexPageData } from '../providers/IndexPageDataProvider' import { Sparkles } from './sparkle' import { SocialMediaLinks } from './socialMediaLinks' diff --git a/components/parallaxEffect.tsx b/src/components/parallaxEffect.tsx similarity index 97% rename from components/parallaxEffect.tsx rename to src/components/parallaxEffect.tsx index 4ab6dc2..4bd6561 100644 --- a/components/parallaxEffect.tsx +++ b/src/components/parallaxEffect.tsx @@ -7,7 +7,7 @@ import { } from 'framer-motion' import useWindowSize from '../hooks/useWindowSize' -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' const Container = styled('div', { height: '100%', diff --git a/components/projectContent.tsx b/src/components/projectContent.tsx similarity index 97% rename from components/projectContent.tsx rename to src/components/projectContent.tsx index 291225c..44a5b72 100644 --- a/components/projectContent.tsx +++ b/src/components/projectContent.tsx @@ -2,8 +2,8 @@ import * as TabsPrimitive from '@radix-ui/react-tabs' import RichText from '@madebyconnor/rich-text-to-jsx' import scrollIntoView from 'smooth-scroll-into-view-if-needed' -import { styled } from '../stitches.config' -import { ProjectType } from '../types' +import { styled } from '../../stitches.config' +import { ProjectType } from '../../types' import { Spacer } from './spacer' import { useProjectPageData } from '../providers/ProjectPageDataProvider' diff --git a/components/projectTitle.tsx b/src/components/projectTitle.tsx similarity index 97% rename from components/projectTitle.tsx rename to src/components/projectTitle.tsx index 5d5a596..cb31d2c 100644 --- a/components/projectTitle.tsx +++ b/src/components/projectTitle.tsx @@ -1,5 +1,5 @@ import { useProjectPageData } from '../providers/ProjectPageDataProvider' -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' import { formatProjectDates } from '../utils/projectHelper' import { Spacer } from './spacer' diff --git a/components/projects.tsx b/src/components/projects.tsx similarity index 98% rename from components/projects.tsx rename to src/components/projects.tsx index 40291f9..131c15a 100644 --- a/components/projects.tsx +++ b/src/components/projects.tsx @@ -4,9 +4,9 @@ import { motion, useAnimation } from 'framer-motion' import { useInView } from 'react-intersection-observer' import useDimensions from 'react-cool-dimensions' -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' import { useIndexPageData } from '../providers/IndexPageDataProvider' -import { ProjectType } from '../types' +import { ProjectType } from '../../types' import { event } from '../utils/gtag' import { Spacer } from './spacer' import { ContentfulImage } from './contentfulImage' diff --git a/components/responsiveImage.tsx b/src/components/responsiveImage.tsx similarity index 100% rename from components/responsiveImage.tsx rename to src/components/responsiveImage.tsx diff --git a/components/scrollRestorer.tsx b/src/components/scrollRestorer.tsx similarity index 100% rename from components/scrollRestorer.tsx rename to src/components/scrollRestorer.tsx diff --git a/components/socialMediaLinks.tsx b/src/components/socialMediaLinks.tsx similarity index 96% rename from components/socialMediaLinks.tsx rename to src/components/socialMediaLinks.tsx index 06e14d7..cbe0292 100644 --- a/components/socialMediaLinks.tsx +++ b/src/components/socialMediaLinks.tsx @@ -2,8 +2,8 @@ import React, { useMemo } from 'react' import { useIndexPageData } from '../providers/IndexPageDataProvider' import { VisuallyHidden } from './visuallyHidden' -import { styled, theme } from '../stitches.config' -import { ContactType } from '../types' +import { styled, theme } from '../../stitches.config' +import { ContactType } from '../../types' import { event } from '../utils/gtag' import FacebookLogo from '../assets/social-media/facebook.svg' diff --git a/components/spacer.tsx b/src/components/spacer.tsx similarity index 88% rename from components/spacer.tsx rename to src/components/spacer.tsx index f65be49..d1f8431 100644 --- a/components/spacer.tsx +++ b/src/components/spacer.tsx @@ -1,4 +1,4 @@ -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' export const Spacer = styled('div', { variants: { diff --git a/components/sparkle.tsx b/src/components/sparkle.tsx similarity index 97% rename from components/sparkle.tsx rename to src/components/sparkle.tsx index 774d321..94be417 100644 --- a/components/sparkle.tsx +++ b/src/components/sparkle.tsx @@ -2,7 +2,7 @@ import { useState } from 'react' import { isMobile, isTablet } from 'react-device-detect' import { useReducedMotion } from 'framer-motion' -import { keyframes, styled, theme } from '../stitches.config' +import { keyframes, styled, theme } from '../../stitches.config' import { useRandomInterval } from '../hooks/useRandomInterval' import { random } from '../utils/random' diff --git a/components/visuallyHidden.tsx b/src/components/visuallyHidden.tsx similarity index 100% rename from components/visuallyHidden.tsx rename to src/components/visuallyHidden.tsx diff --git a/hooks/useRandomInterval.ts b/src/hooks/useRandomInterval.ts similarity index 100% rename from hooks/useRandomInterval.ts rename to src/hooks/useRandomInterval.ts diff --git a/hooks/useScrollRestoration.ts b/src/hooks/useScrollRestoration.ts similarity index 100% rename from hooks/useScrollRestoration.ts rename to src/hooks/useScrollRestoration.ts diff --git a/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts similarity index 100% rename from hooks/useWindowSize.ts rename to src/hooks/useWindowSize.ts diff --git a/pages/_app.tsx b/src/pages/_app.tsx similarity index 100% rename from pages/_app.tsx rename to src/pages/_app.tsx diff --git a/pages/_document.js b/src/pages/_document.js similarity index 98% rename from pages/_document.js rename to src/pages/_document.js index 8ac9a77..1635480 100644 --- a/pages/_document.js +++ b/src/pages/_document.js @@ -1,7 +1,7 @@ import React from 'react' import Document, { Html, Head, Main, NextScript } from 'next/document' -import { getCssText, globalStyles } from '../stitches.config' +import { getCssText, globalStyles } from '../../stitches.config' class MyDocument extends Document { static async getInitialProps(ctx) { diff --git a/pages/index.tsx b/src/pages/index.tsx similarity index 95% rename from pages/index.tsx rename to src/pages/index.tsx index 4c167a7..d8d6bcc 100644 --- a/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,8 +1,8 @@ import React from 'react' import Head from 'next/head' -import { styled } from '../stitches.config' +import { styled } from '../../stitches.config' -import { IndexPageData } from '../types' +import { IndexPageData } from '../../types' import { getIndexPageData } from '../client-api/indexPageApi' import { IndexPageDataContextProvider } from '../providers/IndexPageDataProvider' import { PAGES_SEO_SETTINGS } from '../utils/pagesSeo' diff --git a/pages/projects/[id].tsx b/src/pages/projects/[id].tsx similarity index 96% rename from pages/projects/[id].tsx rename to src/pages/projects/[id].tsx index 0c6f54e..b617a17 100644 --- a/pages/projects/[id].tsx +++ b/src/pages/projects/[id].tsx @@ -2,8 +2,8 @@ import { GetStaticPaths, GetStaticProps } from 'next' import Head from 'next/head' import { AnimatePresence } from 'framer-motion' -import { styled } from '../../stitches.config' -import { ProjectPageData, ProjectType } from '../../types' +import { styled } from '../../../stitches.config' +import { ProjectPageData, ProjectType } from '../../../types' import { ProjectPageDataContextProvider, useProjectPageData, diff --git a/providers/IndexPageDataProvider.tsx b/src/providers/IndexPageDataProvider.tsx similarity index 91% rename from providers/IndexPageDataProvider.tsx rename to src/providers/IndexPageDataProvider.tsx index 87e0646..460d8aa 100644 --- a/providers/IndexPageDataProvider.tsx +++ b/src/providers/IndexPageDataProvider.tsx @@ -1,5 +1,5 @@ import React, { createContext, useContext } from 'react' -import { IndexPageData } from '../types' +import { IndexPageData } from '../../types' const IndexPageDataContext = createContext( { diff --git a/providers/ProjectPageDataProvider.tsx b/src/providers/ProjectPageDataProvider.tsx similarity index 91% rename from providers/ProjectPageDataProvider.tsx rename to src/providers/ProjectPageDataProvider.tsx index c86a80a..e64972d 100644 --- a/providers/ProjectPageDataProvider.tsx +++ b/src/providers/ProjectPageDataProvider.tsx @@ -1,5 +1,5 @@ import React, { createContext, useContext } from 'react' -import { ProjectPageData } from '../types' +import { ProjectPageData } from '../../types' const ProjectPageDataContext = createContext< ProjectPageData | { data: undefined } diff --git a/utils/backgroundChanger.ts b/src/utils/backgroundChanger.ts similarity index 100% rename from utils/backgroundChanger.ts rename to src/utils/backgroundChanger.ts diff --git a/utils/contentfulImageLoader.ts b/src/utils/contentfulImageLoader.ts similarity index 100% rename from utils/contentfulImageLoader.ts rename to src/utils/contentfulImageLoader.ts diff --git a/utils/gtag.ts b/src/utils/gtag.ts similarity index 100% rename from utils/gtag.ts rename to src/utils/gtag.ts diff --git a/utils/isMobile.ts b/src/utils/isMobile.ts similarity index 100% rename from utils/isMobile.ts rename to src/utils/isMobile.ts diff --git a/utils/isRenderingOnServer.ts b/src/utils/isRenderingOnServer.ts similarity index 100% rename from utils/isRenderingOnServer.ts rename to src/utils/isRenderingOnServer.ts diff --git a/utils/pagesSeo.ts b/src/utils/pagesSeo.ts similarity index 92% rename from utils/pagesSeo.ts rename to src/utils/pagesSeo.ts index c7606dc..1cd7e4e 100644 --- a/utils/pagesSeo.ts +++ b/src/utils/pagesSeo.ts @@ -1,4 +1,4 @@ -import { ProjectType } from '../types' +import { ProjectType } from '../../types' export const PAGES_SEO_SETTINGS = { INDEX: { diff --git a/utils/projectHelper.ts b/src/utils/projectHelper.ts similarity index 98% rename from utils/projectHelper.ts rename to src/utils/projectHelper.ts index a1cfed9..45b61b8 100644 --- a/utils/projectHelper.ts +++ b/src/utils/projectHelper.ts @@ -1,4 +1,4 @@ -import { ProjectsType } from '../types' +import { ProjectsType } from '../../types' export const sortProjectsOnStartDate = ( projects: ProjectsType diff --git a/utils/random.ts b/src/utils/random.ts similarity index 100% rename from utils/random.ts rename to src/utils/random.ts diff --git a/utils/range.ts b/src/utils/range.ts similarity index 100% rename from utils/range.ts rename to src/utils/range.ts From 2f1b0c9e330e72d1abf1eae7c48954b1301f61ce Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sun, 9 Jan 2022 20:23:42 +0200 Subject: [PATCH 7/8] Add email --- src/assets/social-media/email.svg | 3 +++ src/components/socialMediaLinks.tsx | 8 +++----- 2 files changed, 6 insertions(+), 5 deletions(-) create mode 100644 src/assets/social-media/email.svg diff --git a/src/assets/social-media/email.svg b/src/assets/social-media/email.svg new file mode 100644 index 0000000..74fc338 --- /dev/null +++ b/src/assets/social-media/email.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/socialMediaLinks.tsx b/src/components/socialMediaLinks.tsx index cbe0292..fc793b6 100644 --- a/src/components/socialMediaLinks.tsx +++ b/src/components/socialMediaLinks.tsx @@ -13,6 +13,7 @@ import LinkedinLogo from '../assets/social-media/linkedin.svg' import MediumLogo from '../assets/social-media/medium.svg' import StackOverflowLogo from '../assets/social-media/stackoverflow.svg' import TwitterLogo from '../assets/social-media/twitter.svg' +import Email from '../assets/social-media/email.svg' const logos: { [name: string]: any } = { facebook: FacebookLogo, @@ -22,6 +23,7 @@ const logos: { [name: string]: any } = { medium: MediumLogo, 'stack overflow': StackOverflowLogo, twitter: TwitterLogo, + email: Email, } const Container = styled('div', { @@ -65,11 +67,7 @@ const Container = styled('div', { export const SocialMediaLinks: React.FC = () => { const { data } = useIndexPageData() - const socialMediaLinks = useMemo( - () => - data?.me.contacts.items.filter((contact) => contact.medium !== 'Email'), - [data?.me.contacts.items] - ) + const socialMediaLinks = data?.me.contacts.items const handleOnContactClick = (medium: string) => { event({ From 6ac713f3e07985f98271c3ba0487aa7261fadb7b Mon Sep 17 00:00:00 2001 From: Per Jansson Date: Sun, 9 Jan 2022 21:16:31 +0200 Subject: [PATCH 8/8] Focus ring --- package.json | 1 + src/components/focusable.tsx | 19 +++++++++ src/components/projects.tsx | 63 ++++++++++++++++------------- src/components/socialMediaLinks.tsx | 19 ++++++--- yarn.lock | 57 +++++++++++++++++++++++++- 5 files changed, 124 insertions(+), 35 deletions(-) create mode 100644 src/components/focusable.tsx diff --git a/package.json b/package.json index a4298c4..548bb64 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@madebyconnor/rich-text-to-jsx": "^2.1.3", "@radix-ui/react-tabs": "^0.1.4", "@radix-ui/react-visually-hidden": "^0.1.3", + "@react-aria/focus": "^3.5.0", "@stitches/react": "^1.2.6", "@svgr/webpack": "^6.1.2", "framer-motion": "^4.1.17", diff --git a/src/components/focusable.tsx b/src/components/focusable.tsx new file mode 100644 index 0000000..061bdea --- /dev/null +++ b/src/components/focusable.tsx @@ -0,0 +1,19 @@ +import { styled } from '../../stitches.config' + +export const Focusable = styled('div', { + variants: { + isFocusVisible: { + true: { + boxShadow: '0 0 0 3px $colors$color2, 0 0 0 6px $colors$colorful6', + }, + false: { + boxShadow: 'none', + }, + }, + }, +}) + +export const AnchorWithinFocusable = styled('a', { + outline: 'none', + textDecoration: 'none', +}) diff --git a/src/components/projects.tsx b/src/components/projects.tsx index 131c15a..ed26954 100644 --- a/src/components/projects.tsx +++ b/src/components/projects.tsx @@ -3,6 +3,7 @@ import Link from 'next/link' import { motion, useAnimation } from 'framer-motion' import { useInView } from 'react-intersection-observer' import useDimensions from 'react-cool-dimensions' +import { useFocusRing } from '@react-aria/focus' import { styled } from '../../stitches.config' import { useIndexPageData } from '../providers/IndexPageDataProvider' @@ -11,6 +12,7 @@ import { event } from '../utils/gtag' import { Spacer } from './spacer' import { ContentfulImage } from './contentfulImage' import { ParallaxEffect } from './parallaxEffect' +import { AnchorWithinFocusable, Focusable } from './focusable' const SectionTitle = styled('h2', { color: '$color12', @@ -236,6 +238,7 @@ const Project: React.FC = ({ project, onSelect }) => { const { observe, width, height } = useDimensions() const controls = useAnimation() const [ref, inView] = useInView() + const { isFocusVisible, focusProps } = useFocusRing({ within: true }) useEffect(() => { if (inView) { @@ -252,33 +255,37 @@ const Project: React.FC = ({ project, onSelect }) => { : {} return ( - - - - {role} at {client} - - {titleShort} - - - - - - - - - + + + + + + {role} at {client} + + {titleShort} + + + + + + + + + + + ) } diff --git a/src/components/socialMediaLinks.tsx b/src/components/socialMediaLinks.tsx index fc793b6..d8bb698 100644 --- a/src/components/socialMediaLinks.tsx +++ b/src/components/socialMediaLinks.tsx @@ -1,8 +1,10 @@ -import React, { useMemo } from 'react' +import React from 'react' +import { useFocusRing } from '@react-aria/focus' +import { styled, theme } from '../../stitches.config' import { useIndexPageData } from '../providers/IndexPageDataProvider' import { VisuallyHidden } from './visuallyHidden' -import { styled, theme } from '../../stitches.config' +import { AnchorWithinFocusable, Focusable } from './focusable' import { ContactType } from '../../types' import { event } from '../utils/gtag' @@ -102,10 +104,15 @@ const SocialMediaLink: React.FC = ({ onClick, }) => { const Logo = logos[contact.medium.toLowerCase()] + const { isFocusVisible, focusProps } = useFocusRing({ within: true }) return ( - + + ) } diff --git a/yarn.lock b/yarn.lock index 2a10516..4554098 100644 --- a/yarn.lock +++ b/yarn.lock @@ -992,7 +992,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.13.10", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.13.10", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== @@ -1392,6 +1392,56 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "0.1.3" +"@react-aria/focus@^3.5.0": + version "3.5.0" + resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.5.0.tgz#02b85f97d6114af1eccc0902ce40723b626cb7f9" + integrity sha512-Eib75Q6QgQdn8VVVByg5Vipaaj/C//8Bs++sQY7nkomRx4sdArOnXbDppul3YHP6mRfU9VRLvAigEUlReQF/Xw== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/interactions" "^3.6.0" + "@react-aria/utils" "^3.9.0" + "@react-types/shared" "^3.9.0" + clsx "^1.1.1" + +"@react-aria/interactions@^3.6.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.7.0.tgz#eb19c1068b557a6b6df1e1c4abef07de719e9f25" + integrity sha512-Xomchjb9bqvh3ocil+QCEYFSxsTy8PHEz43mNP6z2yuu3UqTpl2FsWfyKgF/Yy0WKVkyV2dO2uz758KJTCLZhw== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/utils" "^3.10.0" + "@react-types/shared" "^3.10.0" + +"@react-aria/ssr@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22" + integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug== + dependencies: + "@babel/runtime" "^7.6.2" + +"@react-aria/utils@^3.10.0", "@react-aria/utils@^3.9.0": + version "3.11.0" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.11.0.tgz#215ea23a5435672a822cd713bdb8217972c5c80b" + integrity sha512-4yFA8E9xqDCUlolYSsoyp/qxrkiQrnEqx1BQOrKDuicpW7MBJ39pJC23YFMpyK2a6xEptc6xJEeIEFJXp57jJw== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/ssr" "^3.1.0" + "@react-stately/utils" "^3.3.0" + "@react-types/shared" "^3.10.1" + clsx "^1.1.1" + +"@react-stately/utils@^3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.3.0.tgz#99866c5788539268a06035acd5925b25bb4cedde" + integrity sha512-f//Y8q0+FFcS04xvCNvbba7WWRLHzj2AegLgdgwTxsnk9Gb+AyuasdRrRY7bGQhdHuEJ7OIiQZ9EQWndDbrTcg== + dependencies: + "@babel/runtime" "^7.6.2" + +"@react-types/shared@^3.10.0", "@react-types/shared@^3.10.1", "@react-types/shared@^3.9.0": + version "3.10.1" + resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.10.1.tgz#16cd3038361dee63f351fa4d0fd25d90480a149b" + integrity sha512-U3dLJtstvOiZ8XLrWdNv9WXuruoDyfIfSXguTs9N0naDdO+M0MIbt/1Hg7Toe43ueAe56GM14IFL+S0/jhv8ow== + "@rushstack/eslint-patch@^1.0.8": version "1.1.0" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323" @@ -2377,6 +2427,11 @@ clipboardy@2.3.0: execa "^1.0.0" is-wsl "^2.1.1" +clsx@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"