m
/
portfolio
mirror of https://github.com/kremalicious/portfolio.git
1
0
Fork 0
Code Releases Activity

graphql query cleanup

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 PropTypes from 'prop-types'
import posed, { PoseGroup } from 'react-pose'
import { graphql, useStaticQuery } from 'gatsby'
import { fadeIn } from './atoms/Transitions'
import Typekit from './atoms/Typekit'
import HostnameCheck from './atoms/HostnameCheck'
import Header from './organisms/Header'
import Footer from './organisms/Footer'
import styles from './Layout.module.scss'
import { useMeta } from '../hooks/use-meta'
// if (process.env.NODE_ENV !== 'production') {
// const { whyDidYouUpdate } = require('why-did-you-update')
// whyDidYouUpdate(React)
// }
const query = graphql`
query {
metaYaml {
allowedHosts
}
}
`
Layout.propTypes = {
children: PropTypes.any.isRequired,
location: PropTypes.shape({
@ -30,7 +22,7 @@ Layout.propTypes = {
}
export default function Layout({ children, location }) {
const { metaYaml } = useStaticQuery(query)
const { allowedHosts } = useMeta()
const timeout = 200
const RoutesContainer = posed.div(fadeIn)
const isHomepage =
@ -40,7 +32,7 @@ export default function Layout({ children, location }) {
return (
<>
<Typekit />
<HostnameCheck allowedHosts={metaYaml.allowedHosts} />
<HostnameCheck allowedHosts={allowedHosts} />
<PoseGroup animateOnMount={true}>
<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 PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
import { useMeta } from '../../hooks/use-meta'
const query = graphql`
query {
metaYaml {
title
tagline
description
url
img {
childImageSharp {
resize(width: 980) {
src
}
}
}
social {
Twitter
}
gpg
addressbook
}
}
`
const MetaTags = ({ title, description, url, image, meta }) => (
<Helmet
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
title={title}
>
<html lang="en" />
const MetaTags = ({ title, description, url, image, meta }) => {
return (
<Helmet
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
title={title}
>
<html lang="en" />
{/* General tags */}
<meta name="description" content={description} />
<meta name="image" content={`${meta.url}${image}`} />
<link rel="canonical" href={url} />
{/* General tags */}
<meta name="description" content={description} />
<meta name="image" content={`${meta.url}${image}`} />
<link rel="canonical" href={url} />
{/* OpenGraph tags */}
<meta property="og:url" content={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={`${meta.url}${image}`} />
{/* OpenGraph tags */}
<meta property="og:url" content={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={`${meta.url}${image}`} />
{/* Twitter Card tags */}
<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>
)
}
{/* Twitter Card tags */}
<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 = {
title: PropTypes.string,
@ -64,37 +39,26 @@ MetaTags.propTypes = {
meta: PropTypes.object
}
export default class SEO extends PureComponent {
static propTypes = {
project: PropTypes.object
}
render() {
return (
<StaticQuery
query={query}
render={data => {
const { project } = this.props
const meta = data.metaYaml
const title = (project && project.title) || null
const description =
(project && project.fields.excerpt) || meta.description
const image =
(project && project.img.childImageSharp.twitterImage.src) ||
meta.img.childImageSharp.resize.src
const url = (project && `${meta.url}${project.slug}`) || meta.url
return (
<MetaTags
title={title}
description={description}
url={url}
image={image}
meta={meta}
/>
)
}}
/>
)
}
SEO.propTypes = {
project: PropTypes.object
}
export default function SEO({ project }) {
const meta = useMeta()
const title = (project && project.title) || null
const description = (project && project.fields.excerpt) || meta.description
const image =
(project && project.img.childImageSharp.twitterImage.src) ||
meta.img.childImageSharp.resize.src
const url = (project && `${meta.url}${project.slug}`) || meta.url
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 { StaticQuery, graphql } from 'gatsby'
import Helmet from 'react-helmet'
import { useMeta } from '../../hooks/use-meta'
const TypekitScript = typekitID => (
<script>
@ -17,33 +17,18 @@ const TypekitScript = typekitID => (
</script>
)
const query = graphql`
query {
metaYaml {
typekitID
}
}
`
const Typekit = () => {
const { typekitID } = useMeta()
const Typekit = () => (
<StaticQuery
query={query}
render={data => {
const { typekitID } = data.metaYaml
return typekitID ? (
<Helmet>
<link rel="preconnect" href="https://typekit.com" />
<link rel="preconnect" href="https://use.typekit.net" />
<link rel="preconnect" href="https://p.typekit.net" />
return (
typekitID && (
<Helmet>
<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>
)
)
}}
/>
)
{TypekitScript(typekitID)}
</Helmet>
) : null
}
export default Typekit

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

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

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

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

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

@ -5,6 +5,7 @@ import Vcard from '../atoms/Vcard'
import LogoUnit from '../molecules/LogoUnit'
import Networks from '../molecules/Networks'
import styles from './Footer.module.scss'
import { useMeta } from '../../hooks/use-meta'
const query = graphql`
query {
@ -12,12 +13,6 @@ const query = graphql`
portfolioJson {
bugs
}
metaYaml {
title
url
gpg
}
}
`
@ -52,7 +47,8 @@ FooterMarkup.propTypes = {
}
export default function Footer() {
const { metaYaml, portfolioJson } = useStaticQuery(query)
const metaYaml = useMeta()
const { portfolioJson } = useStaticQuery(query)
const year = new Date().getFullYear()
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 PropTypes from 'prop-types'
import { graphql, useStaticQuery } from 'gatsby'
import Networks from '../molecules/Networks'
import Availability from '../molecules/Availability'
import ThemeSwitch from '../molecules/ThemeSwitch'
import LogoUnit from '../molecules/LogoUnit'
import styles from './Header.module.scss'
const query = graphql`
query {
metaYaml {
availability {
status
}
}
}
`
import { useMeta } from '../../hooks/use-meta'
Header.propTypes = {
minimal: PropTypes.bool
}
export default function Header({ minimal }) {
const { metaYaml } = useStaticQuery(query)
const { availability } = useMeta()
return (
<header className={minimal ? styles.minimal : styles.header}>
<ThemeSwitch />
<LogoUnit minimal={minimal} />
<Networks hide={minimal} />
<Availability hide={minimal && !metaYaml.availability.status} />
<Availability hide={minimal && !availability.status} />
</header>
)
}

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

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

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

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