Add authors and guides

components/featured-content/guides.js

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 import { FeaturedContentWrap } from './style';
+import guides from '../../data/guides';
+import GuideBlock from '../guide-block';
 
 const FeaturedGuides = () => (
   <FeaturedContentWrap className="featured-content-wrap">
@@ -11,42 +13,11 @@ const FeaturedGuides = () => (
           </span>
       </p>
       <div className="swim-lane row">
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+        { guides
-          <a className="featured-block" href='#'>
+          .filter(({ featured }) => featured)
-            <h4>Design Patterns for Humans</h4>
+          .map(guide => (
-            <p>A language agnostic, ultra-simplified explanation to design patterns</p>
+            <GuideBlock guide={ guide } key={ guide.slug } />
-          </a>
+          )) }
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>Learn Regex</h4>
-            <p>An easy to understand guide on regular expressions with real world examples</p>
-          </a>
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>Bash Guide</h4>
-            <p>Easy to understand guide for bash with real world usage examples.</p>
-          </a>
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>DNS in One Picture</h4>
-            <p>Quick illustrative guide on how a website is found on the internet.</p>
-          </a>
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>Using React Hooks</h4>
-            <p>Start using React hooks in your react applications today with this guide.</p>
-          </a>
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
-          <a className="featured-block" href='#'>
-            <h4>HTTP Caching</h4>
-            <p>Everything you need to know about web caching</p>
-          </a>
-        </div>
       </div>
     </div>
   </FeaturedContentWrap>

components/guide-block/index.js

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
+import { findByUsername } from '../../lib/author';
+
+const GuideBlock = ({ guide }) => {
+  const author = findByUsername(guide.author) || {};
+  return (
+    <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 grid-item-container">
+      <Link href={ guide.slug } passHref>
+        <BlockLink>
+          <BlockTitle>{ guide.title }</BlockTitle>
+          <BlockSubtitle>{ guide.featuredDescription || guide.description }</BlockSubtitle>
+          <BlockMeta>
+            <Author>
+              <AuthorImage src={ author.picture } />
+              <AuthorName>{ author.name }</AuthorName>
+            </Author>
+            <PublishDate>{ guide.updatedAt }</PublishDate>
+          </BlockMeta>
+        </BlockLink>
+      </Link>
+    </div>
+  )
+};
+
+export default GuideBlock;

components/guide-block/style.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+export const BlockLink = styled.a`
+  border: 1px solid #f7f7f7;
+  display: block;
+  text-decoration: none;
+  color: #000000;
+  background: #ffffff;
+  padding: 25px 25px 22px;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
+  transition: box-shadow 0.2s ease 0s;
+  cursor: pointer;
+  margin-bottom: 32px;
+  
+  &:hover {
+    text-decoration: none;
+    color: #000000;
+    box-shadow: rgba(0, 0, 0, 0.12) 0 30px 60px;
+  }
+`;
+
+export const BlockTitle = styled.h4`
+  line-height: 27px;
+  font-weight: 600;
+  font-size: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 0 0 auto;
+  overflow: hidden;
+`;
+
+export const BlockSubtitle = styled.p`
+  font-size: 15px;
+  line-height: 25px;
+  color: #999999;
+  margin-bottom: 0;
+`;
+
+export const BlockMeta = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 19px;
+`;
+
+export const PublishDate = styled.time`
+  font-size: 13px;
+  color: #999;
+`;
+
+export const Author = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  color: #999;
+`;
+
+export const AuthorImage = styled.img`
+  height: 22px;
+  width: 22px;
+  border-radius: 100%;
+  margin-right: 10px;
+`;
+export const AuthorName = styled.div``;

components/roadmap-block/style.js

@@ -6,7 +6,7 @@ export const BlockLink = styled.a`
   text-decoration: none;
   color: #000000;
   background: #ffffff;
-  padding: 28px 25px 25px;
+  padding: 26px 25px 25px;
   border-radius: 10px;
   box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
   transition: box-shadow 0.2s ease 0s;

data/authors.json

@@ -0,0 +1,17 @@
+[
+  {
+    "username": "kamranahmedse",
+    "name": "Kamran Ahmed",
+    "picture": "/static/authors/kamranahmedse.jpeg"
+  },
+  {
+    "username": "ziishaned",
+    "name": "Zeeshan Ahmed",
+    "picture": "/static/authors/ziishaned.png"
+  },
+  {
+    "username": "idnan",
+    "name": "Adnan Ahmed",
+    "picture": "/static/authors/idnan.jpeg"
+  }
+]

data/guides.json

@@ -0,0 +1,56 @@
+[
+  {
+    "title": "Design Patterns for Humans",
+    "description": "A language agnostic, ultra-simplified explanation to design patterns",
+    "slug": "/guides/design-patterns-for-humans",
+    "featured": true,
+    "author": "kamranahmedse",
+    "createdAt": "June 12, 2019",
+    "updatedAt": "June 12, 2019"
+  },
+  {
+    "title": "Learn Regex",
+    "description": "An easy to understand guide on regular expressions with real world examples",
+    "slug": "/guides/learn-regex",
+    "featured": true,
+    "author": "ziishaned",
+    "createdDate": "June 19, 2019",
+    "updatedAt": "June 19, 2019"
+  },
+  {
+    "title": "Bash Guide",
+    "description": "Easy to understand guide for bash with real world usage examples.",
+    "slug": "/guides/bash-guide",
+    "featured": true,
+    "author": "idnan",
+    "createdAt": "May 18, 2018",
+    "updatedAt": "May 18, 2018"
+  },
+  {
+    "title": "DNS in One Picture",
+    "description": "Quick illustrative guide on how a website is found on the internet.",
+    "slug": "/guides/dns-in-one-picture",
+    "featured": true,
+    "author": "kamranahmedse",
+    "createdAt": "May 11, 2018",
+    "updatedAt": "May 11, 2018"
+  },
+  {
+    "title": "Using React Hooks",
+    "description": "Start using React hooks in your react applications today with this guide.",
+    "slug": "/guides/using-react-hooks",
+    "featured": true,
+    "author": "kamranahmedse",
+    "createdAt": "October 22, 2019",
+    "updatedAt": "October 22, 2019"
+  },
+  {
+    "title": "HTTP Caching",
+    "description": "Everything you need to know about web caching",
+    "slug": "/guides/http-caching",
+    "featured": true,
+    "author": "kamranahmedse",
+    "updatedAt": "November 01, 2019",
+    "createdAt": "November 01, 2019"
+  }
+]

lib/author.js

@@ -0,0 +1,3 @@
+import authors from "../data/authors";
+
+export const findByUsername = (username) => authors.find(author => author.username === username) || {};