feat(app): designed cards

abedzantout · Sep 16, 2019 · 3196516 · 3196516
1 parent a143c1c
commit 3196516
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 78 deletions.
diff --git a/core/contentful.ts b/core/contentful.ts
@@ -7,46 +7,47 @@ const Space = process.env.CONTENTFUL_SPACE;
 const Token = process.env.CONTENTFUL_TOKEN;
 
 const client = createClient({
-    space: Space,
-    accessToken: Token,
+  space: Space,
+  accessToken: Token
 });
 
 async function fetchAuthorBySlug(slug) {
-    return await client.getEntries({
-        content_type: CONTENT_TYPE_PERSON,
-        'fields.slug': slug,
-    });
+  return await client.getEntries({
+    content_type: CONTENT_TYPE_PERSON,
+    'fields.slug': slug
+  });
 }
 
 async function fetchPostBySlug(slug) {
-    return await client.getEntries({
-        content_type: CONTENT_TYPE_BLOGPOST,
-        'fields.slug': slug,
-    });
+  return await client.getEntries({
+    content_type: CONTENT_TYPE_BLOGPOST,
+    'fields.slug': slug
+  });
 }
 
 export async function getBlogPostEntries() {
-    try {
-        const contents = await client.getEntries({
-            // include: 1,
-            content_type: CONTENT_TYPE_BLOGPOST,
-        });
-        return contents.items
-            .map(({sys, fields}: { sys: any; fields: any }) => ({
-                id: sys.id,
-                title: fields.title,
-                heroImage: fields.heroImage.fields.file.url,
-                slug: fields.slug,
-                publishedAt: fields.publishedAt
-                    ? new Date(`${fields.publishedAt}Z`)
-                    : new Date(`${sys.createdAt}Z`),
-            }))
-            .sort(
-                (a, b) =>
-                    new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(),
-            );
-    } catch (error) {
-        // TODO: add error handling
-        console.log(error)
-    }
+  try {
+    const contents = await client.getEntries({
+      // include: 1,
+      content_type: CONTENT_TYPE_BLOGPOST
+    });
+    return contents.items
+      .map(({ sys, fields }: { sys: any; fields: any }) => ({
+        id: sys.id,
+        title: fields.title,
+        description: fields.description,
+        heroImage: fields.heroImage.fields.file.url,
+        slug: fields.slug,
+        publishedAt: fields.publishedAt
+          ? new Date(`${fields.publishedAt}Z`)
+          : new Date(`${sys.createdAt}Z`)
+      }))
+      .sort(
+        (a, b) =>
+          new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
+      );
+  } catch (error) {
+    // TODO: add error handling
+    console.log(error);
+  }
 }
diff --git a/next.config.js b/next.config.js
@@ -7,45 +7,41 @@ const Dotenv = require('dotenv-webpack');
 //     generateAllAuthors,
 // } = require('./scripts/fetchAllEntities');
 
-
 module.exports = {
-    webpack: config => {
-
-        config.plugins = config.plugins || [];
-
-        config.plugins = [
-            ...config.plugins,
-            // Read the .env file
-            new Dotenv({
-                path: path.join(__dirname, '.env'),
-                systemvars: true,
-            }),
-
-        ];
-
-        return config;
-    },
-    exportPathMap: async () => {
-        // const articles = await generateAllArticles();
-        // const authors = await generateAllAuthors();
-        //
-        // const insights = articles.reduce(
-        //     (pages, entry) =>
-        //         Object.assign({}, pages, {
-        //             [`/${entry.slug}`]: {
-        //                 page: '/post',
-        //                 query: {post: entry.slug},
-        //             },
-        //         }),
-        //     {},
-        // );
-        //
-
-        const pages = {
-            '/': {page: '/'},
-        };
-
-        return Object.assign({}, pages);
-    },
+  webpack: config => {
+    config.plugins = config.plugins || [];
+
+    config.plugins = [
+      ...config.plugins,
+      // Read the .env file
+      new Dotenv({
+        path: path.join(__dirname, '.env'),
+        systemvars: true
+      })
+    ];
+
+    return config;
+  },
+  exportPathMap: async () => {
+    // const articles = await generateAllArticles();
+    // const authors = await generateAllAuthors();
+    //
+    // const insights = articles.reduce(
+    //     (pages, entry) =>
+    //         Object.assign({}, pages, {
+    //             [`/${entry.slug}`]: {
+    //                 page: '/post',
+    //                 query: {post: entry.slug},
+    //             },
+    //         }),
+    //     {},
+    // );
+    //
+
+    const pages = {
+      '/': { page: '/' }
+    };
+
+    return Object.assign({}, pages);
+  }
 };
-
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,17 +5,35 @@ import { defaultMetaTags } from '../core/constants';
 import Layout from '../shared/components/layout';
 import { getBlogPostEntries } from '../core/contentful';
 import { BlogPost } from '../interfaces/post';
+import Card from '../shared/components/card';
 
 type Props = {
     entries: BlogPost[];
     url: any;
 }
+
+const cards = (entries) => entries.map((entry, index) => (<Card info={entry} key={index}/>));
+
 const IndexPage: NextPage = (props: Props) => {
+    const entries = props.entries;
 
+    console.log(entries);
     return (
 
         <Layout meta={defaultMetaTags}>
-            <div>Latest posts</div>
+            <div>
+                <h1>Latest posts</h1>
+
+                <div className="cards-deck">
+                    {cards(entries)}
+                </div>
+            </div>
+
+            <style jsx>
+                {`
+                .cards-deck { display: grid; grid-column-gap: 1rem; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto;}`
+                }
+            </style>
         </Layout>
     )
 };

diff --git a/shared/components/card/index.tsx b/shared/components/card/index.tsx
@@ -1,9 +1,36 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, Fragment } from 'react';
 
-type Props = {}
-const Card: FunctionComponent<Props> = ({}) => {
+type Props = {
+    info: { id: string, title: string; description: string; heroImage: string; publishedAt: Date; slug: string }
+}
+const Card: FunctionComponent<Props> = ({info}) => {
     return (
-        <div>hello</div>
+        <Fragment>
+            <div className="card">
+                <div className="card-header">
+
+                </div>
+
+                <div className="card-body">
+                    <h3>{info.title}</h3>
+                    <p>{info.description}</p>
+                </div>
+
+                <div className="card-actions">
+                </div>
+            </div>
+            <style jsx>{`
+                .card { height: 400px; width: 340px; background: #FFFFFF; box-shadow: 0 20px 20px 0 rgba(0,0,0,0.07); border-radius: 4px; overflow: hidden; };
+                .card-header {
+                    height: 40%;
+                    background-image: url(${info.heroImage}); 
+                    background: linear-gradient(248deg, rgba(27,21,140,0.56) 0%, rgba(50,176,201,0.56) 100%), url(${info.heroImage}) no-repeat;
+                    background-size: 100%;
+                };
+                .card-body {padding: 1rem;};
+            `}
+            </style>
+        </Fragment>
     );
 };