create layout and stylesheet for resume markdown

This commit is contained in:
Chuck Dries 2021-06-14 18:08:23 -07:00
parent ff885df726
commit e54d501f0f
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
10 changed files with 83 additions and 51 deletions

View File

@ -18,6 +18,7 @@ module.exports = {
], ],
'rules': { 'rules': {
'react/prop-types': 0, 'react/prop-types': 0,
'quotes': ['warn', 'single'] 'quotes': ['warn', 'single'],
'semi': 1
} }
} };

View File

@ -1 +1,17 @@
import './src/styles/global.css'; import './src/styles/global.css';
// import * as React from 'react';
// import { MDXProvider } from '@mdx-js/react';
// const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
// const MyParagraph = props => (
// <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
// );
// const components = {
// h1: MyH1,
// p: MyParagraph,
// };
// export const wrapRootElement = ({ element }) => (
// <MDXProvider components={components}>{element}</MDXProvider>
// );

View File

@ -4,7 +4,7 @@ const path = require('path');
const { read } = require('fast-exif'); const { read } = require('fast-exif');
const iptc = require('node-iptc'); const iptc = require('node-iptc');
const readFile = util.promisify(fs.readFile) const readFile = util.promisify(fs.readFile);
function convertDMSToDD(dms, positiveDirection) { function convertDMSToDD(dms, positiveDirection) {
@ -51,16 +51,16 @@ exports.onCreateNode = async function ({ node, getNode, actions }) {
if (node.internal.type === 'ImageSharp') { if (node.internal.type === 'ImageSharp') {
const parent = getNode(node.parent); const parent = getNode(node.parent);
const file = await readFile(parent.absolutePath) const file = await readFile(parent.absolutePath);
const iptcData = iptc(file) const iptcData = iptc(file);
const exifData = await read(parent.absolutePath) const exifData = await read(parent.absolutePath);
createNodeField({ createNodeField({
node, node,
name: 'imageMeta', name: 'imageMeta',
value: transformMetaToNodeData(exifData, iptcData) value: transformMetaToNodeData(exifData, iptcData)
}); });
} }
} };
// Implement the Gatsby API “createPages”. This is called once the // Implement the Gatsby API “createPages”. This is called once the
// data layer is bootstrapped to let plugins create pages from data. // data layer is bootstrapped to let plugins create pages from data.
@ -81,14 +81,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
} }
} }
` `
) );
// Handle errors // Handle errors
if (galleryImages.errors) { if (galleryImages.errors) {
reporter.panicOnBuild('Error while running GraphQL query.') reporter.panicOnBuild('Error while running GraphQL query.');
return return;
} }
// Create pages for each markdown file. // Create pages for each markdown file.
const galleryImageTemplate = path.resolve('src/components/gallery-image.js') const galleryImageTemplate = path.resolve('src/components/gallery-image.js');
galleryImages.data.allFile.edges.forEach(({ node }) => { galleryImages.data.allFile.edges.forEach(({ node }) => {
// const path = node.base // const path = node.base
createPage({ createPage({
@ -99,6 +99,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
context: { context: {
imageFilename: node.base, imageFilename: node.base,
}, },
}) });
}) });
} };

View File

@ -0,0 +1,13 @@
import * as React from 'react';
import classnames from 'classnames';
import '../styles/resume.css';
const ResumeLayout = ({ pageContext, children }) => {
console.log('pc', pageContext);
return (<div className={classnames('font-serif container mx-auto resume')}>{children}</div>);
};
// TODO: can I use custom components for just this layout/page?
export default ResumeLayout;

View File

@ -1,11 +1,11 @@
import * as React from 'react' 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';
// 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]);
console.log('images', images) console.log('images', images);
return ( return (
<main className="font-serif"> <main className="font-serif">
@ -27,20 +27,12 @@ const IndexPage = ({ data }) => {
</ul> </ul>
</div> </div>
</section> </section>
{/* <h1 >
Congratulations
<br />
<span > you just made a Gatsby site! </span>
<span role="img" aria-label="Party popper emojis">
🎉🎉🎉
</span>
</h1> */}
<section className="mt-0 m-2 max-w-full flex flex-col shadow-md bg-black text-gray-200 py-2 rounded-xl"> <section className="mt-0 m-2 max-w-full flex flex-col shadow-md bg-black text-gray-200 py-2 rounded-xl">
<h2 className="ml-6 text-2xl mb-2"><Link to='/photogallery'>Photography</Link></h2> <h2 className="ml-6 text-2xl mb-2"><Link to='/photogallery'>Photography</Link></h2>
<div className="gallery gallery flex-auto flex overflow-x-scroll w-full scroll-snap-x scroll-padding-6 "> <div className="gallery gallery flex-auto flex overflow-x-scroll w-full scroll-snap-x scroll-padding-6 ">
{images.map(image => { {images.map(image => {
const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base;
console.log('name', name) console.log('name', name);
// const file = data.allFile // const file = data.allFile
// console.log(fileName) // console.log(fileName)
// return <></> // return <></>
@ -63,8 +55,8 @@ const IndexPage = ({ data }) => {
</div> </div>
</section> </section>
</main> </main>
) );
} };
export const query = graphql` export const query = graphql`
query HomePageGallery { query HomePageGallery {
@ -103,4 +95,4 @@ query HomePageGallery {
} }
}`; }`;
export default IndexPage export default IndexPage;

View File

@ -1,19 +1,19 @@
import * as React from 'react' 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 { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet';
import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry' import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
import { getMeta } from '../utils' import { getMeta } from '../utils';
const GalleryPage = ({ data }) => { const GalleryPage = ({ data }) => {
const images = React.useMemo(() => const images = React.useMemo(() =>
data.allFile.edges data.allFile.edges
.map(edge => edge.node, [data]) .map(edge => edge.node, [data])
.sort((left, right) => { .sort((left, right) => {
const leftDate = new Date(getMeta(left).dateTaken) const leftDate = new Date(getMeta(left).dateTaken);
console.log(leftDate) console.log(leftDate);
const rightDate = new Date(getMeta(right).dateTaken) const rightDate = new Date(getMeta(right).dateTaken);
if (leftDate < rightDate) { if (leftDate < rightDate) {
return 1; return 1;
} }
@ -22,7 +22,7 @@ const GalleryPage = ({ data }) => {
} }
return 0; return 0;
}) // TODO HERE }) // TODO HERE
, [data]) , [data]);
return (<> return (<>
<Helmet> <Helmet>
@ -39,8 +39,8 @@ const GalleryPage = ({ data }) => {
> >
<Masonry gutter='5px'> <Masonry gutter='5px'>
{images.map(image => { {images.map(image => {
console.log('ar', image.childImageSharp) console.log('ar', image.childImageSharp);
const name = getMeta(image).iptc.object_name || image.base const name = getMeta(image).iptc.object_name || image.base;
return ( return (
<React.Fragment key={name}> <React.Fragment key={name}>
<Link state={{modal: true}} to={`/photogallery/${image.base}`}> <Link state={{modal: true}} to={`/photogallery/${image.base}`}>
@ -56,8 +56,8 @@ const GalleryPage = ({ data }) => {
</ResponsiveMasonry> </ResponsiveMasonry>
</div> </div>
</div> </div>
</>) </>);
} };
export const query = graphql` export const query = graphql`
query GalleryPageQuery { query GalleryPageQuery {
@ -96,4 +96,4 @@ query GalleryPageQuery {
} }
}`; }`;
export default GalleryPage export default GalleryPage;

View File

@ -2,6 +2,9 @@
title: Charles Dries Resume title: Charles Dries Resume
--- ---
import ResumeLayout from '../components/resume-layout'
export default ResumeLayout
# Hello, World! # Hello, World!
<h1>{props.pageContext.frontmatter.title}</h1> <h2>{props.pageContext.frontmatter.title}</h2>

View File

@ -28,7 +28,7 @@
body { body {
@apply bg-gray-100; @apply bg-gray-100;
/* @apply bg-black; */ /* @apply bg-black; */
@apply text-white; /* @apply text-white; */
} }
h1 { h1 {

View File

@ -0,0 +1,7 @@
.resume {
background: green;
}
.resume h1 {
@apply text-3xl font-bold;
}

View File

@ -2,7 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = { module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}'], purge: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: 'media', // or 'media' or 'class' // darkMode: 'media', // or 'media' or 'class'
theme: { theme: {
spacing: { spacing: {
'1': '8px', '1': '8px',