Step 1: requesting all image resources from Cloudinary

colbyfayock · Dec 14, 2021 · 84c78f7 · 84c78f7
1 parent 8af1724
commit 84c78f7
Showing 1 changed file with 28 additions and 3 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -6,11 +6,9 @@ import Layout from '@components/Layout';
 import Container from '@components/Container';
 import Button from '@components/Button';
 
-import images from '@data/images';
-
 import styles from '@styles/Home.module.scss'
 
-export default function Home() {
+export default function Home({ images }) {
   return (
     <Layout>
       <Head>
@@ -42,4 +40,31 @@ export default function Home() {
       </Container>
     </Layout>
   )
+}
+
+export async function getStaticProps() {
+  const results = await fetch(`https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_CLOUD_NAME}/resources/image`, {
+    headers: {
+      Authorization: `Basic ${Buffer.from(process.env.CLOUDINARY_API_KEY + ':' + process.env.CLOUDINARY_API_SECRET).toString('base64')}`
+    }
+  }).then(r => r.json());
+
+  const { resources } = results;
+
+  const images = resources.map(resource => {
+    const { width, height } = resource;
+    return {
+      id: resource.asset_id,
+      title: resource.public_id,
+      image: resource.secure_url,
+      width,
+      height
+    }
+  });
+
+  return {
+    props: {
+      images
+    }
+  }
 }