From 3704b89bead24c0b7ba646f20918537273a2772d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 8 Nov 2019 18:57:57 +0400
Subject: [PATCH] Guide listing page

---
 components/featured-guide/index.js |  2 +-
 components/row-block/style.js      |  2 +-
 data/guides.json                   | 10 ++++++++++
 lib/guide.js                       |  4 ++++
 pages/guides/index.js              | 15 ++++++++++-----
 pages/roadmaps.js                  |  2 +-
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/components/featured-guide/index.js b/components/featured-guide/index.js
index 7884e5b78..d8cebe4d4 100644
--- a/components/featured-guide/index.js
+++ b/components/featured-guide/index.js
@@ -7,7 +7,7 @@ import { findByUsername } from 'lib/author';
 const FeaturedGuide = ({ 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">
+    <div className="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 grid-item-container">
       <Link href={ guide.url } passHref>
         <BlockLink>
           <BlockTitle>{ guide.title }</BlockTitle>
diff --git a/components/row-block/style.js b/components/row-block/style.js
index df37940d2..fb48199e7 100644
--- a/components/row-block/style.js
+++ b/components/row-block/style.js
@@ -5,7 +5,7 @@ export const ItemWrap = styled.div`
 `;
 
 export const BlockItem = styled.a`
-  height: 114px;
+  min-height: 114px;
   box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px;
   transition: box-shadow 0.2s ease 0s;
   align-items: stretch;
diff --git a/data/guides.json b/data/guides.json
index 05340f52b..8f2db932c 100644
--- a/data/guides.json
+++ b/data/guides.json
@@ -58,5 +58,15 @@
     "author": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
+  },
+  {
+    "title": "Journey to HTTP/2",
+    "description": "The evolution of HTTP. How it all started and where we stand today",
+    "url": "/guides/journey-to-http2",
+    "fileName": "http-caching",
+    "featured": false,
+    "author": "kamranahmedse",
+    "updatedAt": "2019-10-09T12:00:00.860Z",
+    "createdAt": "2019-01-23T17:00:00.860Z"
   }
 ]
diff --git a/lib/guide.js b/lib/guide.js
index 8a24c3107..1eaa3f830 100644
--- a/lib/guide.js
+++ b/lib/guide.js
@@ -2,6 +2,10 @@ import guides from "data/guides";
 import authors from "data/authors";
 import siteConfig from "data/site";
 
+export const getAllGuides = () => {
+  return guides;
+};
+
 export const getRequestedGuide = req => {
   const guide = guides.find(guide => guide.url === req.url);
   if (!guide) {
diff --git a/pages/guides/index.js b/pages/guides/index.js
index 98cca5cec..319db8b40 100644
--- a/pages/guides/index.js
+++ b/pages/guides/index.js
@@ -2,18 +2,23 @@ import DefaultLayout from 'layouts/default/index';
 import SiteNav from 'components/site-nav';
 import PageHeader from 'components/page-header';
 import PageFooter from 'components/page-footer';
+import { getAllGuides } from 'lib/guide';
+import FeaturedGuide from '../../components/featured-guide';
 
 const Roadmap = () => (
   <DefaultLayout>
     <SiteNav />
     <PageHeader
-      title="Guides"
-      subtitle="Community written guides, <a href='/signup'>subscribe to get new guides</a>"
+      title="Programming Guides"
+      subtitle="Easy to follow guides on complex topics written and maintained by the community"
     />
-    <div className="border-top bg-light">
+    <div className="pt-5 pb-5 bg-light border-top">
       <div className="container">
-        <p>Show all guides here</p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eaque mollitia nobis perferendis perspiciatis, quas sed vitae. Ad commodi culpa dolorum id iusto natus nesciunt quam ratione repudiandae sed? Ab!
+        <div className="row">
+          { getAllGuides().map(guide => (
+            <FeaturedGuide guide={guide} key={ guide.url } />
+          )) }
+        </div>
       </div>
     </div>
     <PageFooter />
diff --git a/pages/roadmaps.js b/pages/roadmaps.js
index dbde1b415..74616e25a 100644
--- a/pages/roadmaps.js
+++ b/pages/roadmaps.js
@@ -14,7 +14,7 @@ const RoadmapsList = () => (
     <SiteNav />
     <div className="container">
       <PageHeader
-        title="Roadmaps"
+        title="Developer Roadmaps"
         subtitle="Step by step guides and paths to learn different tools or technologies"
       />
     </div>