more work on gallery - contain images in page and load tailwind on all pages

This commit is contained in:
Chuck Dries 2021-06-13 21:31:57 -07:00
parent 0848430609
commit 909657d0ee
10 changed files with 42 additions and 18 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -2,5 +2,12 @@ module.exports = {
globals: { globals: {
__PATH_PREFIX__: true, __PATH_PREFIX__: true,
}, },
extends: `react-app`, plugins: [
"react"
],
extends: [
`react-app`,
"eslint:recommended",
"plugin:react/recommended"
]
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 MiB

After

Width:  |  Height:  |  Size: 6.3 MiB

1
gatsby/gatsby-browser.js Normal file
View File

@ -0,0 +1 @@
import './src/styles/global.css';

1
gatsby/gatsby-ssr.js Normal file
View File

@ -0,0 +1 @@
import './src/styles/global.css';

View File

@ -2,7 +2,7 @@ import * as React from "react"
import { graphql, Link } from 'gatsby' import { graphql, Link } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image" import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { getMeta } from "../utils" import { getMeta } from "../utils"
import { Helmet } from "react-helmet"
const GalleryPage = ({ data }) => { const GalleryPage = ({ data }) => {
const images = React.useMemo(() => const images = React.useMemo(() =>
@ -20,9 +20,13 @@ const GalleryPage = ({ data }) => {
} }
return 0; return 0;
}) // TODO HERE }) // TODO HERE
, data) , [data])
return (<div className="bg-black">
return (<>
<Helmet>
<title>Gallery | Chuck Dries</title>
</Helmet>
<div className="bg-black">
<h1 className="text-2xl">Gallery</h1> <h1 className="text-2xl">Gallery</h1>
{images.map(image => { {images.map(image => {
console.log('ar', image.childImageSharp) console.log('ar', image.childImageSharp)
@ -37,7 +41,7 @@ const GalleryPage = ({ data }) => {
return ( return (
// <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300"> // <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300">
// . // .
<> <React.Fragment key={name}>
<Link to={`/gallery/${image.base}`}> <Link to={`/gallery/${image.base}`}>
{/* <span>{name}</span> */} {/* <span>{name}</span> */}
<GatsbyImage <GatsbyImage
@ -51,10 +55,11 @@ const GalleryPage = ({ data }) => {
image={getImage(image)} image={getImage(image)}
alt={name} /> alt={name} />
</Link> </Link>
</> </React.Fragment>
); );
})} })}
</div>) </div>
</>)
} }
export const query = graphql` export const query = graphql`

View File

@ -2,10 +2,6 @@ import * as React from "react"
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image" import { GatsbyImage, getImage } from "gatsby-plugin-image"
import '../styles/global.css';
// import "../styles/gallery.scss"
// import "../styles/index.scss"
// markup // markup
const IndexPage = ({ data }) => { const IndexPage = ({ data }) => {
const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node, [data])) const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node, [data]))

View File

@ -2,29 +2,41 @@ import React from "react"
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import { getMeta, getName } from "../utils"; import { getMeta, getName } from "../utils";
import { GatsbyImage, getImage } from "gatsby-plugin-image" import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { Helmet } from "react-helmet";
const GalleryImage = ({ pageContext, data }) => { const GalleryImage = ({ pageContext, data }) => {
const image = data.allFile.edges[0].node const image = data.allFile.edges[0].node
console.log(getMeta(image)); console.log(getMeta(image));
const name = getName(image); const name = getName(image);
return ( return (<>
<div className="bg-black min-h-screen"> <Helmet>
<title>{name} - Gallery | Chuck Dries</title>
</Helmet>
<div className="bg-black h-screen w-screen">
<h1>{name}</h1> <h1>{name}</h1>
<GatsbyImage <GatsbyImage
className="" className=""
loading='eager'
objectFit='contain'
style={{ style={{
width: '100vw', // width: '100%',
maxHeight: '100%' // height: '100%',
// objectFit: 'contain',
// objectPosition: 'center',
// maxWidth: 'min(100vw, 1500px)',
// maxWidth: '100%',
// maxHeight: '100vh'
// maxHeight: "800px" // maxHeight: "800px"
// width: '400px', // width: '400px',
// height: '100%' width: '100%',
height: '100%'
}} }}
key={image.base} key={image.base}
image={getImage(image)} image={getImage(image)}
alt={name} /> alt={name} />
<p>{getMeta(image).iptc.caption}</p> <p>{getMeta(image).iptc.caption}</p>
</div> </div>
); </>);
} }
export const query = graphql` export const query = graphql`
@ -41,7 +53,9 @@ export const query = graphql`
gatsbyImageData( gatsbyImageData(
layout: CONSTRAINED layout: CONSTRAINED
placeholder: BLURRED placeholder: BLURRED
width: 1920 # placeholder: DOMINANT_COLOR
# placeholder: TRACED_SVG
height: 2048
) )
fields { fields {
imageMeta { imageMeta {