feat: index + gallery card

talmax1124 · Mar 2, 2021 · e2c3399 · e2c3399
1 parent 8d09455
commit e2c3399
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 50 deletions.
diff --git a/components/CardGallery.js b/components/CardGallery.js
@@ -0,0 +1,55 @@
+import NextLink from 'next/link'
+import Image from 'next/image'
+
+const CardGallery = (props) => {
+  return (
+    <div
+      key={props.id}
+      className="bg-gray-200 rounded-sm w-full max-w-xl p-2 md:p-4 transform odd:rotate-1 even:-rotate-1 hover:scale-105"
+    >
+      <NextLink href={`/${props.slug}/`}>
+        <div className="relative cursor-pointer">
+          <div className="bg-blue-500 w-full h-60 sm:h-72 object-cover">
+            <Image
+              src={props.image.url}
+              alt={props.image.fileName}
+              layout="fill"
+            />
+          </div>
+
+          <div className="absolute bottom-0 w-full h-full">
+            <div className="z-50 from-overlayg1 to-overlayg2 bg-gradient-to-t p-4 h-full grid grid-flow-row items-end gap-0">
+              <div>
+                <h2 className="uppercase text-xl font-extrabold">
+                  {props.title}
+                </h2>
+                <div>
+                  <p className="flex text-accent uppercase font-semibold">
+                    {props.year} -{' '}
+                    <ul className="inline-flex gap-1">
+                      {props.tags.map((tag) => (
+                        <li key={tag.slug} className="">
+                          {tag.title}
+                        </li>
+                      ))}
+                    </ul>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </NextLink>
+    </div>
+  )
+}
+
+export default CardGallery
+
+// key={gallery.id}
+// slug={gallery.slug}
+// image={gallery.heroImage}
+// title={gallery.title}
+// year={gallery.year}
+// tags={gallery.tagsCollection.items}
+// date={gallery.publishDate}
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ['images.ctfassets.net', 'images.ctfassets.net'],
+  },
+}
diff --git a/pages/_app.js b/pages/_app.js
@@ -18,9 +18,9 @@ function MyApp({ Component, pageProps }) {
         <meta content="width=device-width, initial-scale=1" name="viewport" />
       </Head>
       <DefaultSeo {...SEO} />
-      <div className="max-w-6xl mx-auto pb-6 px-6">
+      <div className="max-w-7xl mx-auto pb-6 px-6">
         <Header />
-        <div className="max-w-3xl mx-auto py-12">
+        <div className="max-w-7xl mx-auto py-12">
           <Component {...pageProps} />
         </div>
         <Footer />

diff --git a/pages/index.js b/pages/index.js
@@ -1,8 +1,10 @@
 import NextLink from 'next/link'
-import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
+import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
+
+import CardGallery from '../components/CardGallery'
 
 export default function Home({ galleries }) {
-  console.log(galleries);
+  console.log(galleries)
   return (
     <div className="mx-auto py-24 grid gap-20 md:gap-30">
       <div className="pb-8">
@@ -11,70 +13,96 @@ export default function Home({ galleries }) {
           <br />
           ordinary things
         </h1>
-        <div className="prose prose-xl prose-accent text-center text-gray-50 py-8">
+        <div className="text-2xl text-center text-gray-50 py-8">
           <p>I'm a self-taught photographer documenting spaces and people.</p>
           <p>
-            Learn more <NextLink href="/biography">about me</NextLink> or{' '}
-            <a href="https://contact.jpvalery.me">get in touch</a>.
+            Learn more{' '}
+            <NextLink href="/biography">
+              <span className="hover:text-accent underline cursor-pointer">
+                about me
+              </span>
+            </NextLink>{' '}
+            or{' '}
+            <a
+              href="https://contact.jpvalery.me"
+              className="hover:text-accent underline"
+            >
+              get in touch
+            </a>
+            .
           </p>
         </div>
       </div>
-      <div className="grid">
-        {galleries.map(gallery => {
+      <div className="grid grid-cols-1 lg:grid-cols-3 justify-items-center gap-12">
+        {galleries.map((gallery) => {
           return (
-            <p>{gallery.title}</p>
-          );
+            <CardGallery
+              key={gallery.id}
+              slug={gallery.slug}
+              image={gallery.heroImage}
+              title={gallery.title}
+              year={gallery.year}
+              tags={gallery.tagsCollection.items}
+              date={gallery.publishDate}
+            />
+          )
         })}
-        </div>
+      </div>
     </div>
   )
 }
 
+// We use getStaticProps to get the content at build time
 export async function getStaticProps() {
-
-  const space = process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID
-  const accessToken = process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN
-
+  // We use Apollo to query Contentful GraphQL API
   const client = new ApolloClient({
-  uri: `https://graphql.contentful.com/content/v1/spaces/${space}/?access_token=${accessToken}`,
-  cache: new InMemoryCache(),
-  credentials: 'same-origin',
-  });
-
+    uri: `https://graphql.contentful.com/content/v1/spaces/${process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID}/?access_token=${process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN}`,
+    cache: new InMemoryCache(),
+    credentials: 'same-origin',
+  })
 
+  // We define our query here
   const { data } = await client.query({
-  query: gql`
-  query Index {
-    extendedGalleryCollection(order: publishDate_DESC, where: {displayHome: true}) {
-      items {
-        title
-        slug
-        year
-        body
-        metaDescription
-        summary
-        publishDate
-        displayHome
-        heroImage {
-          title
-          description
-          contentType
-          fileName
-          size
-          url
-          width
-          height
+    query: gql`
+      query Index {
+        extendedGalleryCollection(
+          order: publishDate_DESC
+          where: { displayHome: true }
+        ) {
+          items {
+            title
+            slug
+            year
+            body
+            metaDescription
+            summary
+            tagsCollection {
+              items {
+                title
+                slug
+              }
+            }
+            publishDate
+            heroImage {
+              title
+              description
+              contentType
+              fileName
+              size
+              url
+              width
+              height
+            }
+          }
         }
       }
-    }
-  }
-  `
-});
-
+    `,
+  })
 
+  // We return the result of the query as props to pass them above
   return {
     props: {
-      galleries: data.extendedGalleryCollection.items
-    }
+      galleries: data.extendedGalleryCollection.items,
+    },
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,6 +10,8 @@ module.exports = {
         accent: '#D8D8C7',
         titleg1: '#A56D5E',
         titleg2: '#E88B6A',
+        overlayg1: '#00000088',
+        overlayg2: '#FFFFFF44',
         cta: colors.blue,
       },
       margin: {
@@ -18,7 +20,7 @@ module.exports = {
     },
   },
   variants: {
-    extend: {},
+    extend: { transform: ['hover', 'focus'], rotate: ['odd', 'even'] },
   },
   plugins: [require('@tailwindcss/typography')],
 }