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

gatsby-image is fully operational

This commit is contained in:
Matthias Kretschmann 2018-05-04 14:00:21 +02:00
parent c0e333dd43
commit d4a0f74e8c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 103 additions and 65 deletions

View File

@ -30,10 +30,44 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
previous { previous {
title title
slug slug
img {
id
childImageSharp {
sizes(maxWidth: 500) {
base64
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
originalImg
originalName
}
}
}
} }
next { next {
title title
slug slug
img {
id
childImageSharp {
sizes(maxWidth: 500) {
base64
tracedSVG
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
originalImg
originalName
}
}
}
} }
} }
} }

View File

@ -19,4 +19,12 @@ ProjectImage.propTypes = {
alt: PropTypes.string, alt: PropTypes.string,
} }
export const projectImage = graphql`
fragment ProjectImageSizes on ImageSharp {
sizes(maxWidth: 1200) {
...GatsbyImageSharpSizes
}
}
`
export default ProjectImage export default ProjectImage

View File

@ -7,8 +7,10 @@
display: block; display: block;
box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2); box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
@media (min-width: 1440px) { @media (min-width: $projectImageMaxWidth) {
max-width: 1440px; max-width: $projectImageMaxWidth;
border-radius: .25rem;
overflow: hidden;
} }
} }

View File

@ -11,7 +11,7 @@ const ProjectNav = ({ previous, next }) => (
<nav className="project__nav full-width"> <nav className="project__nav full-width">
{previous && ( {previous && (
<div className="project__nav__item"> <div className="project__nav__item">
<Link className="project__nav__link prev" to={`/${previous.slug}`}> <Link className="project__nav__link prev" to={previous.slug}>
<Img <Img
className="project__nav__image" className="project__nav__image"
sizes={previous.img.childImageSharp.sizes} sizes={previous.img.childImageSharp.sizes}
@ -30,7 +30,7 @@ const ProjectNav = ({ previous, next }) => (
</Link> </Link>
{next && ( {next && (
<div className="project__nav__item"> <div className="project__nav__item">
<Link className="project__nav__link next" to={`/${next.slug}`}> <Link className="project__nav__link next" to={next.slug}>
<Img <Img
className="project__nav__image" className="project__nav__image"
sizes={next.img.childImageSharp.sizes} sizes={next.img.childImageSharp.sizes}

View File

@ -14,6 +14,7 @@
flex: 0 0 48%; flex: 0 0 48%;
position: relative; position: relative;
transition: .2s ease-out; transition: .2s ease-out;
max-width: 500px;
&:first-child { &:first-child {
text-align: left; text-align: left;

View File

@ -2,28 +2,27 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Link from 'gatsby-link' import Link from 'gatsby-link'
import ProjectImage from '../components/atoms/ProjectImage' import ProjectImage from '../components/atoms/ProjectImage'
import FullWidth from '../components/atoms/FullWidth'
import './index.scss' import './index.scss'
const Home = ({ data }) => { const Home = ({ data }) => {
const projects = data.allProjectsJson.edges const projects = data.allProjectsJson.edges
return ( return (
<div className="projects full-width" id="projects"> <FullWidth id="projects" className="projects">
{projects.map(({ node }) => { {projects.map(({ node }) => {
const { slug, title, img } = node const { slug, title, img } = node
return ( return (
<Link <article className="projects__project" key={slug}>
key={slug} <Link to={slug}>
to={slug} <h1 className="projects__project__title">{title}</h1>
className="projects__project" <ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
> </Link>
<h1 className="projects__project__title">{title}</h1> </article>
<ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
</Link>
) )
})} })}
</div> </FullWidth>
) )
} }
@ -42,9 +41,7 @@ export const IndexQuery = graphql`
slug slug
img { img {
childImageSharp { childImageSharp {
sizes(maxWidth: 1440) { ...ProjectImageSizes
...GatsbyImageSharpSizes
}
} }
} }
} }

View File

@ -1,38 +1,39 @@
@import 'variables'; @import 'variables';
.projects {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.projects__project { .projects__project {
width: 100%; text-align: center;
display: block; margin-bottom: $spacer * 4;
position: relative;
background-color: $brand-grey-light;
margin: 0 auto $spacer * 4 auto;
@media (min-width: 30rem) { @media (min-width: 30rem) {
margin-bottom: $spacer * 8; margin-bottom: $spacer * 8;
} }
&::after { a {
content: ''; display: block;
position: absolute; position: relative;
left: 0; margin: 0 auto;
right: 0;
top: 0; @media (min-width: $projectImageMaxWidth) {
bottom: 0; max-width: $projectImageMaxWidth;
z-index: 1; }
background: transparent;
transition: background .2s ease-out;
}
&:hover,
&:focus {
&::after { &::after {
background: rgba($brand-cyan, .05); content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
background: transparent;
transition: background .2s ease-out;
}
&:hover,
&:focus {
&::after {
background: rgba($brand-cyan, .05);
}
} }
} }
} }

View File

@ -1,4 +1,5 @@
$typekit: 'dtg3zui'; $typekit: 'dtg3zui';
$projectImageMaxWidth: 1200px;
// Colors // Colors
///////////////////////////////////// /////////////////////////////////////

View File

@ -7,7 +7,7 @@ import FullWidth from '../components/atoms/FullWidth'
import ProjectImage from '../components/atoms/ProjectImage' import ProjectImage from '../components/atoms/ProjectImage'
import ProjectTechstack from '../components/molecules/ProjectTechstack' import ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks' import ProjectLinks from '../components/molecules/ProjectLinks'
// import ProjectNav from '../components/molecules/ProjectNav' import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO' import SEO from '../components/atoms/SEO'
import './Project.scss' import './Project.scss'
@ -17,12 +17,12 @@ class Project extends Component {
} }
render() { render() {
const project = this.props.data.allProjectsJson.edges[0] const project = this.props.data.projectsJson
const projectImages = this.props.data.projectImages.edges const projectImages = this.props.data.projectImages.edges
// const pathContext = this.props.pathContext const pathContext = this.props.pathContext
const { title, description, links, techstack } = project.node const { title, description, links, techstack } = project
// const { next, previous } = pathContext const { next, previous } = pathContext
return ( return (
<Fragment> <Fragment>
@ -30,7 +30,7 @@ class Project extends Component {
<title>{title}</title> <title>{title}</title>
</Helmet> </Helmet>
<SEO postMeta={project.node} /> <SEO postMeta={project} />
<article className="project"> <article className="project">
<Content> <Content>
@ -58,7 +58,7 @@ class Project extends Component {
</Content> </Content>
</article> </article>
{/* <ProjectNav previous={previous} next={next} /> */} <ProjectNav previous={previous} next={next} />
</Fragment> </Fragment>
) )
} }
@ -66,34 +66,28 @@ class Project extends Component {
Project.propTypes = { Project.propTypes = {
data: PropTypes.object.isRequired, data: PropTypes.object.isRequired,
// pathContext: PropTypes.object.isRequired, pathContext: PropTypes.object.isRequired,
} }
export default Project export default Project
export const projectQuery = graphql` export const projectQuery = graphql`
query ProjectBySlug($slug: String!) { query ProjectBySlug($slug: String!) {
allProjectsJson(filter: { slug: { eq: $slug } }) { projectsJson(slug: { eq: $slug }) {
edges { title
node { slug
title description
slug links {
description title
links { url
title
url
}
techstack
}
} }
techstack
} }
projectImages: allImageSharp(filter: { id: { regex: $slug } }, sort: { fields: [id], order: ASC }) { projectImages: allImageSharp(filter: { id: { regex: $slug } }, sort: { fields: [id], order: ASC }) {
edges { edges {
node { node {
id id
sizes(maxWidth: 1440) { ...ProjectImageSizes
...GatsbyImageSharpSizes
}
} }
} }
} }