Update links

components/featured-content/guides.js

@@ -9,7 +9,7 @@ const FeaturedGuides = () => (
       <p className='border-through featured-separator'>
           <span>
             Guides mostly visited by the community&nbsp;
-            <Link href="/guides"><a className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a></Link>
+            <a href="/guides" className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Guides &rarr;</a>
           </span>
       </p>
       <div className="swim-lane row">

components/featured-content/roadmaps.js

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { FeaturedContentWrap } from './style';
 import roadmaps from 'storage/roadmaps';
 import FeaturedRoadmap from 'components/featured-roadmap';
@@ -10,9 +9,7 @@ const FeaturedRoadmaps = () => (
         <p className="border-through featured-separator">
             <span>
               Roadmaps mostly visited by the community&nbsp;
-              <Link href='/roadmaps'>
+              <a href='/roadmaps' className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
-                <a className="dark-link d-none d-sm-none d-md-inline d-xl-inline">View all Roadmaps &rarr;</a>
-              </Link>
             </span>
         </p>
       </div>

components/featured-guide/index.js

@@ -1,5 +1,4 @@
-import Link from 'next/link';
+import formatDate from 'date-fns/format';
-import formatDate from 'date-fns/format'
 
 import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
 import { findByUsername } from 'lib/author';
@@ -7,22 +6,20 @@ import { findByUsername } from 'lib/author';
 const FeaturedGuide = ({ guide }) => {
   const author = findByUsername(guide.author) || {};
   return (
-    <div className="col-xl-4 col-lg-6 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 href={guide.url}>
-        <BlockLink>
+        <BlockTitle>{guide.title}</BlockTitle>
-          <BlockTitle>{ guide.title }</BlockTitle>
+        <BlockSubtitle>{guide.featuredDescription || guide.description}</BlockSubtitle>
-          <BlockSubtitle>{ guide.featuredDescription || guide.description }</BlockSubtitle>
+        <BlockMeta>
-          <BlockMeta>
+          <Author>
-            <Author>
+            <AuthorImage src={author.picture} />
-              <AuthorImage src={ author.picture } />
+            <AuthorName>{author.name}</AuthorName>
-              <AuthorName>{ author.name }</AuthorName>
+          </Author>
-            </Author>
+          <PublishDate>{formatDate(new Date(guide.createdAt), 'MMMM d, yyyy')}</PublishDate>
-            <PublishDate>{ formatDate(new Date(guide.createdAt), 'MMMM d, yyyy') }</PublishDate>
+        </BlockMeta>
-          </BlockMeta>
+      </BlockLink>
-        </BlockLink>
-      </Link>
     </div>
-  )
+  );
 };
 
 export default FeaturedGuide;

components/featured-roadmap/index.js

@@ -1,14 +1,11 @@
-import Link from 'next/link';
 import { BlockLink, BlockSubtitle, BlockTitle } from './style';
 
 const FeaturedRoadmap = ({ roadmap }) => (
-  <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-4 col-md-6 col-sm-12 col-12 grid-item-container'>
-    <Link href={ roadmap.url } passHref>
+    <BlockLink href={roadmap.url}>
-      <BlockLink>
+      <BlockTitle>{roadmap.title}</BlockTitle>
-        <BlockTitle>{ roadmap.title }</BlockTitle>
+      <BlockSubtitle>{roadmap.featuredDescription || roadmap.description}</BlockSubtitle>
-        <BlockSubtitle>{ roadmap.featuredDescription || roadmap.description }</BlockSubtitle>
+    </BlockLink>
-      </BlockLink>
-    </Link>
   </div>
 );
 

components/page-footer/index.js

@@ -9,7 +9,7 @@ const PageFooter = () => (
         <div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12">
           <div className="site-meta">
             <div className="brand-detail">
-              <Link href="/"><a className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a></Link>
+              <a href="/" className='brand'><img src="/static/brand.png" alt="" /> roadmap.sh</a>
               <span className="preposition">by</span>
               <a href="https://twitter.com/kamranahmedse" target="_blank" className='follow-author'>@kamranahmedse</a>
             </div>

components/roadmap-summary/style.js

@@ -14,6 +14,7 @@ export const UpcomingContainer = styled.div`
 export const Summary = styled.div`
   margin-top: 35px;
   min-height: 400px;
+  max-width: 1000px;
   display: block;
   position: relative;
   text-align: left;

components/site-nav/index.js

@@ -1,19 +1,18 @@
-import Link from 'next/link';
 import { HeaderWrap } from './style';
 
 const SiteNav = () => (
   <HeaderWrap>
-    <div className="top-row container">
+    <div className='top-row container'>
-      <div className="flex-grow-1 brand">
+      <div className='flex-grow-1 brand'>
-        <a href="/">
+        <a href='/'>
-          <img src="/static/brand.png" alt="" />
+          <img src='/static/brand.png' alt='' />
         </a>
       </div>
-      <div className="nav-links">
+      <div className='nav-links'>
-        <Link href="/roadmaps"><a>Roadmaps</a></Link>
+        <a href='/roadmaps'>Roadmaps</a>
-        <Link href="/guides"><a>Guides</a></Link>
+        <a href='/guides'>Guides</a>
-        <Link href="/about"><a className="d-none d-md-inline-block">FAQ</a></Link>
+        <a href='/about' className='d-none d-md-inline-block'>FAQ</a>
-        <Link href="/signup"><a className="signup">Subscribe</a></Link>
+        <a href='/signup' className='signup'>Subscribe</a>
       </div>
     </div>
   </HeaderWrap>