Guide listing page

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>

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;

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"
   }
 ]

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) {

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 />

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>