diff --git a/src/components/subcomponents/TeamMembers.tsx b/src/components/subcomponents/TeamMembers.tsx index 58be54bd64..1d943bab15 100644 --- a/src/components/subcomponents/TeamMembers.tsx +++ b/src/components/subcomponents/TeamMembers.tsx @@ -3,6 +3,7 @@ import React from "react" import styled from "styled-components" import { routeLinks } from '../../config/routing' import { GatsbyImage, getImage } from 'gatsby-plugin-image' +import { useAuthors } from '../../use-authors/use-authors' const TeamMember = styled.article` border: 1px solid rgba(0, 0, 0, 0.125); @@ -69,45 +70,20 @@ const Container = styled.div` margin-bottom: 122px; ` const TeamMembers = () => { - const { - allMarkdownRemark: { nodes }, - } = useStaticQuery(graphql` - query { - allMarkdownRemark( - filter: { frontmatter: { ex: { ne: true }, author_id: { ne: null } } } - sort: { fields: frontmatter___author_id } - ) { - nodes { - frontmatter { - avatar { - childImageSharp { - gatsbyImageData - } - } - author_id - name - short_name - slug - bio - hobby - } - } - } - } - `) + const members = useAuthors() + return ( - {nodes.map(v => { - const member = v.frontmatter + {members.map(member => { return ( - - + +

- {member.short_name} + {member.shortName}

{member.bio}

{member?.hobby}

diff --git a/src/config/routing.ts b/src/config/routing.ts index 76982ec038..292dc70e26 100644 --- a/src/config/routing.ts +++ b/src/config/routing.ts @@ -1,9 +1,17 @@ export const routeLinks = { - aboutUs: '/about-us', + aboutUs(params?: { authorId: string } | { page: 'story' | 'values' | 'team' }) { + if (!params) { + return `/about-us/` + } + if ('authorId' in params) { + return `/about-us/${params.authorId}/` + } + return `/about-us/${params.page}/` + }, whatWeOffer: '/what-we-offer', projects: '/projects', career: '/career', blog: '/blog', startProject: '/start-project', - privacyPolicy: '/privacy-policy' -} \ No newline at end of file + privacyPolicy: '/privacy-policy', +} diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx index ed126f46a4..9373d5db18 100644 --- a/src/layout/Footer.tsx +++ b/src/layout/Footer.tsx @@ -22,7 +22,7 @@ export const Footer = () => {
- {/* + {/*
{ explore more

- about us + about us

what we offer diff --git a/src/layout/TopNavigation.tsx b/src/layout/TopNavigation.tsx index 467a2d4598..0a7dd21af3 100644 --- a/src/layout/TopNavigation.tsx +++ b/src/layout/TopNavigation.tsx @@ -15,7 +15,7 @@ export interface MenuElement { } const TopMenu: MenuElement[] = [ - { link: `${routeLinks.aboutUs}/story`, title: 'why us' }, + { link: routeLinks.aboutUs({page: 'story'}), title: 'why us' }, { link: routeLinks.whatWeOffer, title: 'what we do' }, { link: routeLinks.projects, title: 'case studies' }, { link: routeLinks.career, title: 'career' }, diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx index a1207db499..dd7dcad18d 100644 --- a/src/pages/about-us/index.tsx +++ b/src/pages/about-us/index.tsx @@ -25,7 +25,7 @@ const AboutUsPage: React.FC = ({ children }) => ( {tabs.map(tab => ( diff --git a/src/templates/AboutUsTemplate.tsx b/src/templates/AboutUsTemplate.tsx index fb0808150f..f7036dfeeb 100644 --- a/src/templates/AboutUsTemplate.tsx +++ b/src/templates/AboutUsTemplate.tsx @@ -49,7 +49,7 @@ export default function Template({

- + {/* diff --git a/src/templates/post/AuthorData.tsx b/src/templates/post/AuthorData.tsx index 79da9a569d..4ffb85ccd9 100644 --- a/src/templates/post/AuthorData.tsx +++ b/src/templates/post/AuthorData.tsx @@ -13,7 +13,7 @@ export const AuthorData: React.FC = ({ authorId }) => { const [{ avatar, name, bio }] = authorId ? useAuthors({ authorId, avatarSize: { width: 64 } }) : [] const LinkComponent = authorId - ? (props: { children?: ReactNode }) => {props.children} + ? (props: { children?: ReactNode }) => {props.children} : (props: { children?: ReactNode }) => {props.children} return ( diff --git a/src/use-authors/authors-frontmatter-query-result.ts b/src/use-authors/authors-frontmatter-query-result.ts index 2f20edc5e7..29c031e55b 100644 --- a/src/use-authors/authors-frontmatter-query-result.ts +++ b/src/use-authors/authors-frontmatter-query-result.ts @@ -5,25 +5,25 @@ interface AuthorsFrontmatterItem { avatar: IGatsbyImageData bio: string name: string + short_name: string + hobby: string | undefined web: string | undefined } -export interface Author { - authorId: string - name: string - bio: string - avatar: IGatsbyImageData -} - function toAuthor(frontmatter: AuthorsFrontmatterItem) { return { authorId: frontmatter.author_id, bio: frontmatter.bio, + web: frontmatter.web, avatar: frontmatter.avatar, name: frontmatter.name, + shortName: frontmatter.short_name, + hobby: frontmatter.hobby, } } +export type Author = ReturnType + export function toAuthors(queryResult: AuthorsFrontmatterQueryResult): Author[] { return queryResult.allMarkdownRemark.nodes.map(({ frontmatter }) => toAuthor(frontmatter)) } diff --git a/src/use-authors/use-authors-avatar-default.ts b/src/use-authors/use-authors-avatar-default.ts new file mode 100644 index 0000000000..2b106d0726 --- /dev/null +++ b/src/use-authors/use-authors-avatar-default.ts @@ -0,0 +1,30 @@ +import { graphql, useStaticQuery } from 'gatsby' +import { AuthorsFrontmatterQueryResult, toAuthors } from './authors-frontmatter-query-result' + +const useAuthorsAvatarsDefaultQuery: () => AuthorsFrontmatterQueryResult = () => + useStaticQuery(graphql` + { + allMarkdownRemark( + filter: { frontmatter: { author_id: { ne: null } } } + sort: { fields: frontmatter___author_id } + ) { + nodes { + frontmatter { + author_id + avatar { + childImageSharp { + gatsbyImageData + } + } + name + short_name + slug + bio + hobby + } + } + } + } + `) + +export const useAuthorsAvatarsDefault = () => toAuthors(useAuthorsAvatarsDefaultQuery()) diff --git a/src/use-authors/use-authors.ts b/src/use-authors/use-authors.ts index bbe4b652c2..35b9d689ee 100644 --- a/src/use-authors/use-authors.ts +++ b/src/use-authors/use-authors.ts @@ -1,9 +1,10 @@ import { Author } from './authors-frontmatter-query-result' import { useAuthorsAvatars64 } from './use-authors-avatar-64' +import { useAuthorsAvatarsDefault } from './use-authors-avatar-default' type UseAuthorsParams = { authorId?: string - avatarSize: { width: 64 } + avatarSize?: { width: 64 } } function toAuthorsFilter(props: UseAuthorsParams) { @@ -13,13 +14,16 @@ function toAuthorsFilter(props: UseAuthorsParams) { return () => false } -export const useAuthors = (props: UseAuthorsParams) => { +export const useAuthors = (props: UseAuthorsParams = {}) => { let data: Author[] - switch (props.avatarSize.width) { + switch (props.avatarSize?.width) { case 64: - default: data = useAuthorsAvatars64() + break; + default: + data = useAuthorsAvatarsDefault() + break; } const authorsFilter = toAuthorsFilter(props)