diff --git a/content/photographs/blue-door/blue-door.jpg b/content/photographs/blue-door/blue-door.jpg new file mode 100755 index 0000000..d2590db Binary files /dev/null and b/content/photographs/blue-door/blue-door.jpg differ diff --git a/content/photographs/blue-door/index.md b/content/photographs/blue-door/index.md new file mode 100644 index 0000000..1f08aac --- /dev/null +++ b/content/photographs/blue-door/index.md @@ -0,0 +1,12 @@ +--- +title: Blue door +date: "2020-01-21T11:00:00Z" +description: "A door" +publication_status: published +photo: ./blue-door.jpg +--- +### Details +- **Location:** London, United Kingdom +- **Film:** Kodak Portra 160 +- **Camera:** Zenza Bronica SQ-A + diff --git a/content/photographs/door/door.jpg b/content/photographs/door/door.jpg new file mode 100755 index 0000000..c11c653 Binary files /dev/null and b/content/photographs/door/door.jpg differ diff --git a/content/photographs/door/index.md b/content/photographs/door/index.md new file mode 100644 index 0000000..671624d --- /dev/null +++ b/content/photographs/door/index.md @@ -0,0 +1,10 @@ +--- +title: Raw +date: "2020-01-21T11:00:00Z" +publication_status: published +photo: ./door.jpg +--- +### Details +- **Location:** Tuscany, Italy +- **Film:** Kodak 400 TX +- **Camera:** Zenza Bronica SQ-A diff --git a/content/photographs/homat-hayam /homat-hayam.jpg b/content/photographs/homat-hayam /homat-hayam.jpg new file mode 100755 index 0000000..c12a24e Binary files /dev/null and b/content/photographs/homat-hayam /homat-hayam.jpg differ diff --git a/content/photographs/homat-hayam /index.md b/content/photographs/homat-hayam /index.md new file mode 100644 index 0000000..87b2ecb --- /dev/null +++ b/content/photographs/homat-hayam /index.md @@ -0,0 +1,10 @@ +--- +title: Homat HaYam +date: "2020-01-21T11:00:00Z" +publication_status: published +photo: ./homat-hayam.jpg +--- +### Details +- **Location:** Tel Aviv, Israel +- **Film:** Kodak Portra 160 +- **Camera:** Zenza Bronica SQ-A \ No newline at end of file diff --git a/content/photographs/israel/index.md b/content/photographs/israel/index.md new file mode 100644 index 0000000..cf2384a --- /dev/null +++ b/content/photographs/israel/index.md @@ -0,0 +1,10 @@ +--- +title: Israel +date: "2020-01-21T11:00:00Z" +publication_status: published +photo: ./israel.jpg +--- +### Details +- **Location:** Tel Aviv, Israel +- **Film:** Kodak Portra 160 +- **Camera:** Zenza Bronica SQ-A \ No newline at end of file diff --git a/content/photographs/israel/israel.jpg b/content/photographs/israel/israel.jpg new file mode 100755 index 0000000..0a68504 Binary files /dev/null and b/content/photographs/israel/israel.jpg differ diff --git a/content/photographs/sicily/index.md b/content/photographs/sicily/index.md new file mode 100644 index 0000000..614fbbe --- /dev/null +++ b/content/photographs/sicily/index.md @@ -0,0 +1,11 @@ +--- +title: Sicily +date: "2020-01-21T11:00:00Z" +publication_status: published +photo: ./sicily.jpg +--- + +### Details +- **Location:** Sicily, Italy +- **Film:** Kodak Portra 400 +- **Camera:** Nikon FM2n \ No newline at end of file diff --git a/content/photographs/sicily/sicily.jpg b/content/photographs/sicily/sicily.jpg new file mode 100755 index 0000000..21cc120 Binary files /dev/null and b/content/photographs/sicily/sicily.jpg differ diff --git a/content/photographs/up-the-mountain/index.md b/content/photographs/up-the-mountain/index.md new file mode 100644 index 0000000..213919a --- /dev/null +++ b/content/photographs/up-the-mountain/index.md @@ -0,0 +1,10 @@ +--- +title: Up the mountain +date: "2020-01-21T11:00:00Z" +publication_status: published +photo: ./up-the-mountain.jpg +--- +### Details +- **Location:** Madeira, Portugal +- **Film:** Kodak Portra 160 +- **Camera:** Zenza Bronica SQ-A \ No newline at end of file diff --git a/content/photographs/up-the-mountain/up-the-mountain.jpg b/content/photographs/up-the-mountain/up-the-mountain.jpg new file mode 100755 index 0000000..2aeb6cc Binary files /dev/null and b/content/photographs/up-the-mountain/up-the-mountain.jpg differ diff --git a/gatsby-config.ts b/gatsby-config.ts index 245eb47..367d820 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -52,6 +52,18 @@ const config: GatsbyConfig = { } } } + photographsPages: allMarkdownRemark( + filter: {fields: {slug: {glob: "**/photographs/*"}}} + ) { + nodes { + frontmatter { + date + } + fields { + slug + } + } + } } `, resolveSiteUrl: () => siteUrl, @@ -59,17 +71,22 @@ const config: GatsbyConfig = { allSitePage: { nodes: allPages }, blogPages: { nodes: blogPages }, aboutMePages: { nodes: aboutMePages }, + photographsPages: { nodes: photographsPages }, }) => { - const pages = [...blogPages, ...aboutMePages].reduce((acc, node) => { + const pages = [...blogPages, ...aboutMePages, ...photographsPages].reduce((acc, node) => { const { fields } = node; acc[fields.slug] = node; return acc; }, {}); - const res = allPages.map((page) => { - return { ...page, ...pages[page.path] }; - }); + const res = allPages + // .filter((page) => { + // return Object.keys(pages).includes(page.path) + // }) + .map((page) => { + return { ...page, ...pages[page.path] }; + }); // console.log(JSON.stringify(res), 'ressss') diff --git a/gatsby-node.ts b/gatsby-node.ts index 25d01c9..9548cc2 100644 --- a/gatsby-node.ts +++ b/gatsby-node.ts @@ -5,7 +5,7 @@ const createBlogPages = async ({ graphql, actions, reporter }) => { const { createPage } = actions; // Define a template for blog post - const blogPost = path.resolve(`./src/templates/BlogPost.tsx`); + const blogPost = path.resolve(`./src/templates/BlogPost/BlogPost.tsx`); // Get all markdown blog posts sorted by date const result = await graphql( @@ -63,8 +63,65 @@ const createBlogPages = async ({ graphql, actions, reporter }) => { } }; +const createPhotoPages = async ({ graphql, actions, reporter }) => { + const { createPage } = actions; + + // Define a template for blog post + const photoPost = path.resolve(`./src/templates/PhotoPost/PhotoPost.tsx`); + + // Get all markdown blog posts sorted by date + const result = await graphql( + ` + { + allMarkdownRemark( + filter: { + fields: { slug: { glob: "**/photographs/*" } } + frontmatter: { publication_status: { eq: "published" } } + } + sort: { fields: [frontmatter___date], order: ASC } + limit: 1000 + ) { + nodes { + id + fields { + slug + } + } + } + } + ` + ); + + if (result.errors) { + reporter.panicOnBuild( + `There was an error loading your photo posts`, + result.errors + ); + return; + } + + const posts = result.data.allMarkdownRemark.nodes; + + // Create blog posts pages + // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js) + // `context` is available in the template as a prop and as a variable in GraphQL + + if (posts.length > 0) { + posts.forEach((post, index) => { + createPage({ + path: post.fields.slug, + component: photoPost, + context: { + id: post.id + }, + }); + }); + } +} + exports.createPages = async ({ graphql, actions, reporter }) => { await createBlogPages({ graphql, actions, reporter }); + await createPhotoPages({ graphql, actions, reporter }); }; exports.onCreateNode = ({ node, actions, getNode }) => { diff --git a/graphql-types.ts b/graphql-types.ts index 56d8d34..381132e 100644 --- a/graphql-types.ts +++ b/graphql-types.ts @@ -247,6 +247,8 @@ export type DirectoryCtimeArgs = { export type Site = Node & { buildTime?: Maybe; siteMetadata?: Maybe; + port?: Maybe; + host?: Maybe; polyfill?: Maybe; pathPrefix?: Maybe; jsxRuntime?: Maybe; @@ -685,6 +687,7 @@ export type Frontmatter = { description?: Maybe; date?: Maybe; publication_status?: Maybe; + photo?: Maybe; company?: Maybe; role?: Maybe; from_date?: Maybe; @@ -850,6 +853,8 @@ export type QueryAllDirectoryArgs = { export type QuerySiteArgs = { buildTime?: InputMaybe; siteMetadata?: InputMaybe; + port?: InputMaybe; + host?: InputMaybe; polyfill?: InputMaybe; pathPrefix?: InputMaybe; jsxRuntime?: InputMaybe; @@ -1075,6 +1080,7 @@ export type FrontmatterFilterInput = { description?: InputMaybe; date?: InputMaybe; publication_status?: InputMaybe; + photo?: InputMaybe; company?: InputMaybe; role?: InputMaybe; from_date?: InputMaybe; @@ -1344,6 +1350,44 @@ export type FileFieldsEnum = | 'childrenMarkdownRemark___frontmatter___description' | 'childrenMarkdownRemark___frontmatter___date' | 'childrenMarkdownRemark___frontmatter___publication_status' + | 'childrenMarkdownRemark___frontmatter___photo___sourceInstanceName' + | 'childrenMarkdownRemark___frontmatter___photo___absolutePath' + | 'childrenMarkdownRemark___frontmatter___photo___relativePath' + | 'childrenMarkdownRemark___frontmatter___photo___extension' + | 'childrenMarkdownRemark___frontmatter___photo___size' + | 'childrenMarkdownRemark___frontmatter___photo___prettySize' + | 'childrenMarkdownRemark___frontmatter___photo___modifiedTime' + | 'childrenMarkdownRemark___frontmatter___photo___accessTime' + | 'childrenMarkdownRemark___frontmatter___photo___changeTime' + | 'childrenMarkdownRemark___frontmatter___photo___birthTime' + | 'childrenMarkdownRemark___frontmatter___photo___root' + | 'childrenMarkdownRemark___frontmatter___photo___dir' + | 'childrenMarkdownRemark___frontmatter___photo___base' + | 'childrenMarkdownRemark___frontmatter___photo___ext' + | 'childrenMarkdownRemark___frontmatter___photo___name' + | 'childrenMarkdownRemark___frontmatter___photo___relativeDirectory' + | 'childrenMarkdownRemark___frontmatter___photo___dev' + | 'childrenMarkdownRemark___frontmatter___photo___mode' + | 'childrenMarkdownRemark___frontmatter___photo___nlink' + | 'childrenMarkdownRemark___frontmatter___photo___uid' + | 'childrenMarkdownRemark___frontmatter___photo___gid' + | 'childrenMarkdownRemark___frontmatter___photo___rdev' + | 'childrenMarkdownRemark___frontmatter___photo___ino' + | 'childrenMarkdownRemark___frontmatter___photo___atimeMs' + | 'childrenMarkdownRemark___frontmatter___photo___mtimeMs' + | 'childrenMarkdownRemark___frontmatter___photo___ctimeMs' + | 'childrenMarkdownRemark___frontmatter___photo___atime' + | 'childrenMarkdownRemark___frontmatter___photo___mtime' + | 'childrenMarkdownRemark___frontmatter___photo___ctime' + | 'childrenMarkdownRemark___frontmatter___photo___birthtime' + | 'childrenMarkdownRemark___frontmatter___photo___birthtimeMs' + | 'childrenMarkdownRemark___frontmatter___photo___blksize' + | 'childrenMarkdownRemark___frontmatter___photo___blocks' + | 'childrenMarkdownRemark___frontmatter___photo___publicURL' + | 'childrenMarkdownRemark___frontmatter___photo___childrenMarkdownRemark' + | 'childrenMarkdownRemark___frontmatter___photo___childrenImageSharp' + | 'childrenMarkdownRemark___frontmatter___photo___id' + | 'childrenMarkdownRemark___frontmatter___photo___children' | 'childrenMarkdownRemark___frontmatter___company' | 'childrenMarkdownRemark___frontmatter___role' | 'childrenMarkdownRemark___frontmatter___from_date' @@ -1448,6 +1492,44 @@ export type FileFieldsEnum = | 'childMarkdownRemark___frontmatter___description' | 'childMarkdownRemark___frontmatter___date' | 'childMarkdownRemark___frontmatter___publication_status' + | 'childMarkdownRemark___frontmatter___photo___sourceInstanceName' + | 'childMarkdownRemark___frontmatter___photo___absolutePath' + | 'childMarkdownRemark___frontmatter___photo___relativePath' + | 'childMarkdownRemark___frontmatter___photo___extension' + | 'childMarkdownRemark___frontmatter___photo___size' + | 'childMarkdownRemark___frontmatter___photo___prettySize' + | 'childMarkdownRemark___frontmatter___photo___modifiedTime' + | 'childMarkdownRemark___frontmatter___photo___accessTime' + | 'childMarkdownRemark___frontmatter___photo___changeTime' + | 'childMarkdownRemark___frontmatter___photo___birthTime' + | 'childMarkdownRemark___frontmatter___photo___root' + | 'childMarkdownRemark___frontmatter___photo___dir' + | 'childMarkdownRemark___frontmatter___photo___base' + | 'childMarkdownRemark___frontmatter___photo___ext' + | 'childMarkdownRemark___frontmatter___photo___name' + | 'childMarkdownRemark___frontmatter___photo___relativeDirectory' + | 'childMarkdownRemark___frontmatter___photo___dev' + | 'childMarkdownRemark___frontmatter___photo___mode' + | 'childMarkdownRemark___frontmatter___photo___nlink' + | 'childMarkdownRemark___frontmatter___photo___uid' + | 'childMarkdownRemark___frontmatter___photo___gid' + | 'childMarkdownRemark___frontmatter___photo___rdev' + | 'childMarkdownRemark___frontmatter___photo___ino' + | 'childMarkdownRemark___frontmatter___photo___atimeMs' + | 'childMarkdownRemark___frontmatter___photo___mtimeMs' + | 'childMarkdownRemark___frontmatter___photo___ctimeMs' + | 'childMarkdownRemark___frontmatter___photo___atime' + | 'childMarkdownRemark___frontmatter___photo___mtime' + | 'childMarkdownRemark___frontmatter___photo___ctime' + | 'childMarkdownRemark___frontmatter___photo___birthtime' + | 'childMarkdownRemark___frontmatter___photo___birthtimeMs' + | 'childMarkdownRemark___frontmatter___photo___blksize' + | 'childMarkdownRemark___frontmatter___photo___blocks' + | 'childMarkdownRemark___frontmatter___photo___publicURL' + | 'childMarkdownRemark___frontmatter___photo___childrenMarkdownRemark' + | 'childMarkdownRemark___frontmatter___photo___childrenImageSharp' + | 'childMarkdownRemark___frontmatter___photo___id' + | 'childMarkdownRemark___frontmatter___photo___children' | 'childMarkdownRemark___frontmatter___company' | 'childMarkdownRemark___frontmatter___role' | 'childMarkdownRemark___frontmatter___from_date' @@ -2143,6 +2225,8 @@ export type SiteFieldsEnum = | 'siteMetadata___author___summary' | 'siteMetadata___siteUrl' | 'siteMetadata___social___twitter' + | 'port' + | 'host' | 'polyfill' | 'pathPrefix' | 'jsxRuntime' @@ -2278,6 +2362,8 @@ export type SiteGroupConnectionGroupArgs = { export type SiteFilterInput = { buildTime?: InputMaybe; siteMetadata?: InputMaybe; + port?: InputMaybe; + host?: InputMaybe; polyfill?: InputMaybe; pathPrefix?: InputMaybe; jsxRuntime?: InputMaybe; @@ -3182,6 +3268,84 @@ export type MarkdownRemarkFieldsEnum = | 'frontmatter___description' | 'frontmatter___date' | 'frontmatter___publication_status' + | 'frontmatter___photo___sourceInstanceName' + | 'frontmatter___photo___absolutePath' + | 'frontmatter___photo___relativePath' + | 'frontmatter___photo___extension' + | 'frontmatter___photo___size' + | 'frontmatter___photo___prettySize' + | 'frontmatter___photo___modifiedTime' + | 'frontmatter___photo___accessTime' + | 'frontmatter___photo___changeTime' + | 'frontmatter___photo___birthTime' + | 'frontmatter___photo___root' + | 'frontmatter___photo___dir' + | 'frontmatter___photo___base' + | 'frontmatter___photo___ext' + | 'frontmatter___photo___name' + | 'frontmatter___photo___relativeDirectory' + | 'frontmatter___photo___dev' + | 'frontmatter___photo___mode' + | 'frontmatter___photo___nlink' + | 'frontmatter___photo___uid' + | 'frontmatter___photo___gid' + | 'frontmatter___photo___rdev' + | 'frontmatter___photo___ino' + | 'frontmatter___photo___atimeMs' + | 'frontmatter___photo___mtimeMs' + | 'frontmatter___photo___ctimeMs' + | 'frontmatter___photo___atime' + | 'frontmatter___photo___mtime' + | 'frontmatter___photo___ctime' + | 'frontmatter___photo___birthtime' + | 'frontmatter___photo___birthtimeMs' + | 'frontmatter___photo___blksize' + | 'frontmatter___photo___blocks' + | 'frontmatter___photo___publicURL' + | 'frontmatter___photo___childrenMarkdownRemark' + | 'frontmatter___photo___childrenMarkdownRemark___id' + | 'frontmatter___photo___childrenMarkdownRemark___excerpt' + | 'frontmatter___photo___childrenMarkdownRemark___rawMarkdownBody' + | 'frontmatter___photo___childrenMarkdownRemark___fileAbsolutePath' + | 'frontmatter___photo___childrenMarkdownRemark___html' + | 'frontmatter___photo___childrenMarkdownRemark___htmlAst' + | 'frontmatter___photo___childrenMarkdownRemark___excerptAst' + | 'frontmatter___photo___childrenMarkdownRemark___headings' + | 'frontmatter___photo___childrenMarkdownRemark___timeToRead' + | 'frontmatter___photo___childrenMarkdownRemark___tableOfContents' + | 'frontmatter___photo___childrenMarkdownRemark___children' + | 'frontmatter___photo___childMarkdownRemark___id' + | 'frontmatter___photo___childMarkdownRemark___excerpt' + | 'frontmatter___photo___childMarkdownRemark___rawMarkdownBody' + | 'frontmatter___photo___childMarkdownRemark___fileAbsolutePath' + | 'frontmatter___photo___childMarkdownRemark___html' + | 'frontmatter___photo___childMarkdownRemark___htmlAst' + | 'frontmatter___photo___childMarkdownRemark___excerptAst' + | 'frontmatter___photo___childMarkdownRemark___headings' + | 'frontmatter___photo___childMarkdownRemark___timeToRead' + | 'frontmatter___photo___childMarkdownRemark___tableOfContents' + | 'frontmatter___photo___childMarkdownRemark___children' + | 'frontmatter___photo___childrenImageSharp' + | 'frontmatter___photo___childrenImageSharp___gatsbyImageData' + | 'frontmatter___photo___childrenImageSharp___id' + | 'frontmatter___photo___childrenImageSharp___children' + | 'frontmatter___photo___childImageSharp___gatsbyImageData' + | 'frontmatter___photo___childImageSharp___id' + | 'frontmatter___photo___childImageSharp___children' + | 'frontmatter___photo___id' + | 'frontmatter___photo___parent___id' + | 'frontmatter___photo___parent___children' + | 'frontmatter___photo___children' + | 'frontmatter___photo___children___id' + | 'frontmatter___photo___children___children' + | 'frontmatter___photo___internal___content' + | 'frontmatter___photo___internal___contentDigest' + | 'frontmatter___photo___internal___description' + | 'frontmatter___photo___internal___fieldOwners' + | 'frontmatter___photo___internal___ignoreType' + | 'frontmatter___photo___internal___mediaType' + | 'frontmatter___photo___internal___owner' + | 'frontmatter___photo___internal___type' | 'frontmatter___company' | 'frontmatter___role' | 'frontmatter___from_date' @@ -3647,6 +3811,11 @@ export type BlogIndexQueryVariables = Exact<{ [key: string]: never; }>; export type BlogIndexQuery = { site?: { siteMetadata?: { title?: string | null, description?: string | null } | null } | null, allMarkdownRemark: { nodes: Array<{ excerpt?: string | null, fields?: { slug?: string | null } | null, frontmatter?: { date?: any | null, title?: string | null, description?: string | null } | null }> } }; +export type PhotographyIndexQueryVariables = Exact<{ [key: string]: never; }>; + + +export type PhotographyIndexQuery = { site?: { siteMetadata?: { title?: string | null } | null } | null, photos: { nodes: Array<{ frontmatter?: { title?: string | null, date?: any | null, description?: string | null, publication_status?: string | null, photo?: { childImageSharp?: { gatsbyImageData: any } | null } | null } | null, fields?: { slug?: string | null } | null }> } }; + export type BlogPostBySlugQueryVariables = Exact<{ id: Scalars['String']; previousPostId?: InputMaybe; @@ -3656,6 +3825,13 @@ export type BlogPostBySlugQueryVariables = Exact<{ export type BlogPostBySlugQuery = { site?: { siteMetadata?: { title?: string | null, author?: { name?: string | null } | null } | null } | null, markdownRemark?: { id: string, excerpt?: string | null, html?: string | null, frontmatter?: { title?: string | null, date?: any | null, description?: string | null } | null } | null, previous?: { fields?: { slug?: string | null } | null, frontmatter?: { title?: string | null } | null } | null, next?: { fields?: { slug?: string | null } | null, frontmatter?: { title?: string | null } | null } | null }; +export type PhotoPostBySlugQueryVariables = Exact<{ + id: Scalars['String']; +}>; + + +export type PhotoPostBySlugQuery = { site?: { siteMetadata?: { title?: string | null } | null } | null, markdownRemark?: { html?: string | null, frontmatter?: { title?: string | null, date?: any | null, description?: string | null, publication_status?: string | null, photo?: { childImageSharp?: { gatsbyImageData: any } | null } | null } | null, fields?: { slug?: string | null } | null } | null }; + export type GatsbyImageSharpFixedFragment = { base64?: string | null, width: number, height: number, src: string, srcSet: string }; export type GatsbyImageSharpFixed_TracedSvgFragment = { tracedSVG?: string | null, width: number, height: number, src: string, srcSet: string }; diff --git a/src/components/HeaderNavigation/HeaderNavigation.module.css b/src/components/HeaderNavigation/HeaderNavigation.module.css index b66eeab..7c5a666 100644 --- a/src/components/HeaderNavigation/HeaderNavigation.module.css +++ b/src/components/HeaderNavigation/HeaderNavigation.module.css @@ -6,7 +6,7 @@ } .textLinks { - font-size: 16px; + font-size: 14px; } @media only screen and (max-width: 767px) { diff --git a/src/components/HeaderNavigation/HeaderNavigation.tsx b/src/components/HeaderNavigation/HeaderNavigation.tsx index f1a8240..e249cfb 100644 --- a/src/components/HeaderNavigation/HeaderNavigation.tsx +++ b/src/components/HeaderNavigation/HeaderNavigation.tsx @@ -24,8 +24,11 @@ export const HeaderNavigation = () => { Blog
  • - About + Photographs
    • +
  • + About +
      • {links.map(([network, link]) => ( diff --git a/src/components/PhotoPreview/PhotoPreview.module.css b/src/components/PhotoPreview/PhotoPreview.module.css new file mode 100644 index 0000000..6484274 --- /dev/null +++ b/src/components/PhotoPreview/PhotoPreview.module.css @@ -0,0 +1,11 @@ +.container { + text-align: center; + font-size: 14px; + font-weight: 400; + font-family: var(--title-font-family); + color: var(--grey-2); +} + +.title { + display: block; +} diff --git a/src/components/PhotoPreview/PhotoPreview.tsx b/src/components/PhotoPreview/PhotoPreview.tsx new file mode 100644 index 0000000..82e6cc4 --- /dev/null +++ b/src/components/PhotoPreview/PhotoPreview.tsx @@ -0,0 +1,30 @@ +import { Link } from "gatsby"; +import { GatsbyImage, getImage, IGatsbyImageData } from "gatsby-plugin-image"; +import React from "react"; +import { container, title as titleStyles } from "./PhotoPreview.module.css"; +export interface PhotoPreviewProps { + slug: string; + title: string; + imagePreview: any; +} + +export const PhotoPreview: React.FC = ({ + slug, + title, + imagePreview, +}) => { + const image = getImage(imagePreview); + + return ( +
    • + + + + + + {title} + + +
      • + ); +}; diff --git a/src/pages/photographs.module.css b/src/pages/photographs.module.css new file mode 100644 index 0000000..461a264 --- /dev/null +++ b/src/pages/photographs.module.css @@ -0,0 +1,21 @@ +.list { + display: grid; + grid-template-columns: 1fr; + justify-items: center; + gap: 20px; + list-style: none; + margin-left: 0; + padding-left: 0; +} + +@media only screen and (min-width: 425px) { + .list { + grid-template-columns: 1fr 1fr; + } +} + +@media only screen and (min-width: 768px) { + .list { + grid-template-columns: 1fr 1fr 1fr; + } +} \ No newline at end of file diff --git a/src/pages/photographs.tsx b/src/pages/photographs.tsx new file mode 100644 index 0000000..c42685a --- /dev/null +++ b/src/pages/photographs.tsx @@ -0,0 +1,85 @@ +import * as React from "react"; +import { graphql, PageProps } from "gatsby"; +import { PhotographyIndexQuery } from "../../graphql-types"; +import { PhotoPreview } from '../components/PhotoPreview/PhotoPreview'; +import Bio from "../components/Bio"; +import { Layout } from "../components/Layout/Layout"; +import { Seo } from "../components/Seo/Seo"; +import { list } from './photographs.module.css' + +const PhotographyIndex: React.FC> = ({ + data, + location, +}) => { + const siteTitle = data?.site?.siteMetadata?.title || `Photographs`; + const photos = data.photos.nodes; + + if (photos.length === 0) { + return ( + + + +

      Oops, No photos found!

      +       + ); + } + + return ( + + +
        + {photos.map((photo) => { + return ; + })} +
      +       + ); +}; + +export default PhotographyIndex; + +export const pageQuery = graphql` + query PhotographyIndex { + site { + siteMetadata { + title + } + } + photos: allMarkdownRemark( + filter: { + fields: { slug: { glob: "**/photographs/*" } } + frontmatter: { publication_status: { eq: "published" } } + } + sort: { fields: [frontmatter___date], order: ASC } + limit: 1000 + ) { + nodes { + frontmatter { + title + date + description + publication_status + photo { + childImageSharp { + gatsbyImageData( + width: 300 + height: 300 + aspectRatio: 1 + transformOptions: { fit: COVER } + placeholder: BLURRED + ) + } + } + } + fields { + slug + } + } + } + } +`; diff --git a/src/templates/BlogPost.module.css b/src/templates/BlogPost/BlogPost.module.css similarity index 100% rename from src/templates/BlogPost.module.css rename to src/templates/BlogPost/BlogPost.module.css diff --git a/src/templates/BlogPost.tsx b/src/templates/BlogPost/BlogPost.tsx similarity index 94% rename from src/templates/BlogPost.tsx rename to src/templates/BlogPost/BlogPost.tsx index 2c2000a..0b1c8b8 100644 --- a/src/templates/BlogPost.tsx +++ b/src/templates/BlogPost/BlogPost.tsx @@ -37,9 +37,14 @@ const BlogPostTemplate: React.FC> = ({ }, ]} /> -
      +
      -

      {post.frontmatter.title}

      +

      + {post.frontmatter.title} +

      {post.frontmatter.date}

      > = ({ + data, + location, +}: any) => { + const photo = data.markdownRemark; + const siteTitle = data.site.siteMetadata?.title || `Title`; + const image = getImage(photo.frontmatter.photo); + + return ( + + +
      +
      +

      + {photo.frontmatter.title} +

      + {/*

      {photo.frontmatter.date}

      */} +
      +
      + + +
      +
      + {/*
      + */} +
      +       + ); +}; + +export default PhotoPostTemplate; + +export const pageQuery = graphql` + query PhotoPostBySlug( + $id: String! + ) { + site { + siteMetadata { + title + } + } + markdownRemark(id: { eq: $id }) { + html + frontmatter { + title + date(formatString: "MMMM DD, YYYY") + description + publication_status + photo { + childImageSharp { + gatsbyImageData( + width: 700 + placeholder: BLURRED + quality: 50 + ) + } + } + } + fields { + slug + } + } + } +`;