m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00
Code Releases Activity

graphql query cleanup

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-11-11 21:46:14 +01:00
parent 3ff8e67fac
commit d9fa36608e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 92 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Layout.jsx
View File

@ -1,27 +1,19 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import posed, { PoseGroup } from 'react-pose' import posed, { PoseGroup } from 'react-pose'
import { graphql, useStaticQuery } from 'gatsby'
import { fadeIn } from './atoms/Transitions' import { fadeIn } from './atoms/Transitions'
import Typekit from './atoms/Typekit' import Typekit from './atoms/Typekit'
import HostnameCheck from './atoms/HostnameCheck' import HostnameCheck from './atoms/HostnameCheck'
import Header from './organisms/Header' import Header from './organisms/Header'
import Footer from './organisms/Footer' import Footer from './organisms/Footer'
import styles from './Layout.module.scss' import styles from './Layout.module.scss'
import { useMeta } from '../hooks/use-meta'
// if (process.env.NODE_ENV !== 'production') { // if (process.env.NODE_ENV !== 'production') {
// const { whyDidYouUpdate } = require('why-did-you-update') // const { whyDidYouUpdate } = require('why-did-you-update')
// whyDidYouUpdate(React) // whyDidYouUpdate(React)
// } // }
const query = graphql`
query {
metaYaml {
allowedHosts
}
}
`
Layout.propTypes = { Layout.propTypes = {
children: PropTypes.any.isRequired, children: PropTypes.any.isRequired,
location: PropTypes.shape({ location: PropTypes.shape({
@ -30,7 +22,7 @@ Layout.propTypes = {
} }
export default function Layout({ children, location }) { export default function Layout({ children, location }) {
const { metaYaml } = useStaticQuery(query) const { allowedHosts } = useMeta()
const timeout = 200 const timeout = 200
const RoutesContainer = posed.div(fadeIn) const RoutesContainer = posed.div(fadeIn)
const isHomepage = const isHomepage =
@ -40,7 +32,7 @@ export default function Layout({ children, location }) {
return ( return (
<> <>
<Typekit /> <Typekit />
<HostnameCheck allowedHosts={metaYaml.allowedHosts} /> <HostnameCheck allowedHosts={allowedHosts} />
<PoseGroup animateOnMount={true}> <PoseGroup animateOnMount={true}>
<RoutesContainer <RoutesContainer

132
src/components/atoms/SEO.jsx
View File

@ -1,60 +1,35 @@
import React, { PureComponent } from 'react' import React from 'react'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby' import { useMeta } from '../../hooks/use-meta'
const query = graphql` const MetaTags = ({ title, description, url, image, meta }) => (
query { <Helmet
metaYaml { defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
title titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
tagline title={title}
description >
url <html lang="en" />
img {
childImageSharp {
resize(width: 980) {
src
}
}
}
social {
Twitter
}
gpg
addressbook
}
}
`
const MetaTags = ({ title, description, url, image, meta }) => { {/* General tags */}
return ( <meta name="description" content={description} />
<Helmet <meta name="image" content={`${meta.url}${image}`} />
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`} <link rel="canonical" href={url} />
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
title={title}
>
<html lang="en" />
{/* General tags */} {/* OpenGraph tags */}
<meta name="description" content={description} /> <meta property="og:url" content={url} />
<meta name="image" content={`${meta.url}${image}`} /> <meta property="og:title" content={title} />
<link rel="canonical" href={url} /> <meta property="og:description" content={description} />
<meta property="og:image" content={`${meta.url}${image}`} />
{/* OpenGraph tags */} {/* Twitter Card tags */}
<meta property="og:url" content={url} /> <meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content={title} /> <meta name="twitter:creator" content={meta.social.Twitter} />
<meta property="og:description" content={description} /> <meta name="twitter:title" content={title} />
<meta property="og:image" content={`${meta.url}${image}`} /> <meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${meta.url}${image}`} />
{/* Twitter Card tags */} </Helmet>
<meta name="twitter:card" content="summary_large_image" /> )
<meta name="twitter:creator" content={meta.social.Twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${meta.url}${image}`} />
</Helmet>
)
}
MetaTags.propTypes = { MetaTags.propTypes = {
title: PropTypes.string, title: PropTypes.string,
@ -64,37 +39,26 @@ MetaTags.propTypes = {
meta: PropTypes.object meta: PropTypes.object
} }
export default class SEO extends PureComponent { SEO.propTypes = {
static propTypes = { project: PropTypes.object
project: PropTypes.object }
}
export default function SEO({ project }) {
render() { const meta = useMeta()
return ( const title = (project && project.title) || null
<StaticQuery const description = (project && project.fields.excerpt) || meta.description
query={query} const image =
render={data => { (project && project.img.childImageSharp.twitterImage.src) ||
const { project } = this.props meta.img.childImageSharp.resize.src
const meta = data.metaYaml const url = (project && `${meta.url}${project.slug}`) || meta.url
const title = (project && project.title) || null
const description = return (
(project && project.fields.excerpt) || meta.description <MetaTags
const image = title={title}
(project && project.img.childImageSharp.twitterImage.src) || description={description}
meta.img.childImageSharp.resize.src url={url}
const url = (project && `${meta.url}${project.slug}`) || meta.url image={image}
meta={meta}
return ( />
<MetaTags )
title={title}
description={description}
url={url}
image={image}
meta={meta}
/>
)
}}
/>
)
}
} }

39
src/components/atoms/Typekit.jsx
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet' import Helmet from 'react-helmet'
import { useMeta } from '../../hooks/use-meta'
const TypekitScript = typekitID => ( const TypekitScript = typekitID => (
<script> <script>
@ -17,33 +17,18 @@ const TypekitScript = typekitID => (
</script> </script>
) )
const query = graphql` const Typekit = () => {
query { const { typekitID } = useMeta()
metaYaml {
typekitID
}
}
`
const Typekit = () => ( return typekitID ? (
<StaticQuery <Helmet>
query={query} <link rel="preconnect" href="https://typekit.com" />
render={data => { <link rel="preconnect" href="https://use.typekit.net" />
const { typekitID } = data.metaYaml <link rel="preconnect" href="https://p.typekit.net" />
return ( {TypekitScript(typekitID)}
typekitID && ( </Helmet>
<Helmet> ) : null
<link rel="preconnect" href="https://typekit.com" /> }
<link rel="preconnect" href="https://use.typekit.net" />
<link rel="preconnect" href="https://p.typekit.net" />
{TypekitScript(typekitID)}
</Helmet>
)
)
}}
/>
)
export default Typekit export default Typekit

32
src/components/atoms/Vcard.jsx
View File

@ -1,38 +1,10 @@
import React from 'react' import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import saveAs from 'file-saver' import saveAs from 'file-saver'
import vCard from 'vcf' import vCard from 'vcf'
import { useMeta } from '../../hooks/use-meta'
const query = graphql`
query {
metaYaml {
title
tagline
description
url
email
avatar {
childImageSharp {
resize {
src
}
}
}
social {
Email
Blog
Twitter
GitHub
Dribbble
}
gpg
addressbook
}
}
`
export default function Vcard() { export default function Vcard() {
const { metaYaml } = useStaticQuery(query) const metaYaml = useMeta()
const handleAddressbookClick = e => { const handleAddressbookClick = e => {
e.preventDefault() e.preventDefault()

15
src/components/molecules/LogoUnit.jsx
View File

@ -1,27 +1,18 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link, graphql, useStaticQuery } from 'gatsby' import { Link } from 'gatsby'
import posed from 'react-pose' import posed from 'react-pose'
import { useMeta } from '../../hooks/use-meta'
import { moveInBottom } from '../atoms/Transitions' import { moveInBottom } from '../atoms/Transitions'
import { ReactComponent as Logo } from '../../images/logo.svg' import { ReactComponent as Logo } from '../../images/logo.svg'
import styles from './LogoUnit.module.scss' import styles from './LogoUnit.module.scss'
const query = graphql`
query {
metaYaml {
title
tagline
}
}
`
LogoUnit.propTypes = { LogoUnit.propTypes = {
minimal: PropTypes.bool minimal: PropTypes.bool
} }
export default function LogoUnit({ minimal }) { export default function LogoUnit({ minimal }) {
const data = useStaticQuery(query) const { title, tagline } = useMeta()
const { title, tagline } = data.metaYaml
const Animation = posed.div(moveInBottom) const Animation = posed.div(moveInBottom)
return ( return (

10
src/components/organisms/Footer.jsx
View File

@ -5,6 +5,7 @@ import Vcard from '../atoms/Vcard'
import LogoUnit from '../molecules/LogoUnit' import LogoUnit from '../molecules/LogoUnit'
import Networks from '../molecules/Networks' import Networks from '../molecules/Networks'
import styles from './Footer.module.scss' import styles from './Footer.module.scss'
import { useMeta } from '../../hooks/use-meta'
const query = graphql` const query = graphql`
query { query {
@ -12,12 +13,6 @@ const query = graphql`
portfolioJson { portfolioJson {
bugs bugs
} }
metaYaml {
title
url
gpg
}
} }
` `
@ -52,7 +47,8 @@ FooterMarkup.propTypes = {
} }
export default function Footer() { export default function Footer() {
const { metaYaml, portfolioJson } = useStaticQuery(query) const metaYaml = useMeta()
const { portfolioJson } = useStaticQuery(query)
const year = new Date().getFullYear() const year = new Date().getFullYear()
return <FooterMarkup year={year} pkg={portfolioJson} meta={metaYaml} /> return <FooterMarkup year={year} pkg={portfolioJson} meta={metaYaml} />

16
src/components/organisms/Header.jsx
View File

@ -1,35 +1,25 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { graphql, useStaticQuery } from 'gatsby'
import Networks from '../molecules/Networks' import Networks from '../molecules/Networks'
import Availability from '../molecules/Availability' import Availability from '../molecules/Availability'
import ThemeSwitch from '../molecules/ThemeSwitch' import ThemeSwitch from '../molecules/ThemeSwitch'
import LogoUnit from '../molecules/LogoUnit' import LogoUnit from '../molecules/LogoUnit'
import styles from './Header.module.scss' import styles from './Header.module.scss'
import { useMeta } from '../../hooks/use-meta'
const query = graphql`
query {
metaYaml {
availability {
status
}
}
}
`
Header.propTypes = { Header.propTypes = {
minimal: PropTypes.bool minimal: PropTypes.bool
} }
export default function Header({ minimal }) { export default function Header({ minimal }) {
const { metaYaml } = useStaticQuery(query) const { availability } = useMeta()
return ( return (
<header className={minimal ? styles.minimal : styles.header}> <header className={minimal ? styles.minimal : styles.header}>
<ThemeSwitch /> <ThemeSwitch />
<LogoUnit minimal={minimal} /> <LogoUnit minimal={minimal} />
<Networks hide={minimal} /> <Networks hide={minimal} />
<Availability hide={minimal && !metaYaml.availability.status} /> <Availability hide={minimal && !availability.status} />
</header> </header>
) )
} }

14
src/hooks/use-meta.js
View File

@ -8,6 +8,20 @@ const query = graphql`
description description
url url
email email
img {
childImageSharp {
resize(width: 980) {
src
}
}
}
avatar {
childImageSharp {
resize {
src
}
}
}
social { social {
Email Email
Blog Blog

5
src/pages/__tests__/index.test.jsx
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { render } from '@testing-library/react' import { render } from '@testing-library/react'
import { StaticQuery } from 'gatsby' import { StaticQuery, useStaticQuery } from 'gatsby'
import Home from '../index' import Home from '../index'
import meta from '../../../jest/__fixtures__/meta.json' import meta from '../../../jest/__fixtures__/meta.json'
import projects from '../../../jest/__fixtures__/projects.json' import projects from '../../../jest/__fixtures__/projects.json'
@ -8,6 +8,9 @@ import projectImageFiles from '../../../jest/__fixtures__/projectImageFiles.json
beforeEach(() => { beforeEach(() => {
StaticQuery.mockImplementation(({ render }) => render({ ...meta })) StaticQuery.mockImplementation(({ render }) => render({ ...meta }))
useStaticQuery.mockImplementation(() => {
return { ...meta }
})
}) })
describe('Home', () => { describe('Home', () => {