Update UI for guide page

components/faq-list/index.js

@@ -1,7 +1,7 @@
 import { FaqContainer, FaqItem } from './style';
 
 const FaqList = () => (
-  <FaqContainer className='border-top border-bottom bg-light'>
+  <FaqContainer className='border-top bg-light'>
     <FaqItem>
       <div className="container container-small">
         <h4 className='font-weight-bolder'>What is roadmap.sh?</h4>

components/featured-content/index.js

@@ -4,7 +4,7 @@ import FeaturedGuides from './guides';
 import FeaturedRoadmaps from './roadmaps';
 
 const FeaturedContent = (props) => (
-  <FeaturedWrap className="border-top border-bottom bg-light">
+  <FeaturedWrap className="border-top bg-light">
     <FeaturedRoadmaps />
     <FeaturedGuides />
   </FeaturedWrap>

components/mdx-components/a.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Link = styled.a`
+  font-weight: 600;
+`;
+
+const EnrichedLink = props => {
+  return (
+    <Link href={ props.href } target={ /^http(s)?:\/\//.test(props.href) ? '_blank' : '_self' }>
+      { props.children }
+    </Link>
+  );
+};
+
+export default EnrichedLink;

components/mdx-components/blockquote.js

@@ -1,12 +1,14 @@
 import styled from 'styled-components';
 
-export const BlockQuote = styled.blockquote`
+const BlockQuote = styled.blockquote`
-  background: transparent;
   padding: 16px 20px;
-  border-left: 5px solid currentColor;
   position: relative;
+  background: #e8e8e8;
+  border-radius: 5px;
 
   p {
     margin: 0;
   }
 `;
+
+export default BlockQuote;

components/mdx-components/heading.js

@@ -6,7 +6,8 @@ const linkify = (Component) => {
     const text = props.children;
     const id = text.toLowerCase && text
       .toLowerCase()
-      .replace(/\s/g, '-')
+      .replace(/[^\x00-\x7F]/g, '')
+      .replace(/\s+/g, '-')
       .replace(/[?!]/g, '');
 
     return (

components/mdx-components/index.js

@@ -1,16 +1,18 @@
 import P from './p';
 import { Headings } from './heading';
 import { Pre } from './pre';
-import { BlockQuote } from './blockquote';
+import BlockQuote from './blockquote';
 import { Table } from './table';
 import { IFrame } from './iframe';
 import { Img } from './img';
+import EnrichedLink from './a';
 
 const MdxComponents = {
   p: P,
   ...Headings,
   pre: Pre,
   blockquote: BlockQuote,
+  a: EnrichedLink,
   table: Table,
   iframe: IFrame,
   img: Img,

components/mdx-components/p.js

@@ -4,11 +4,10 @@ const P = styled.p`
   color: inherit;
   font-size: 16px;
   font-weight: 400;
-  line-height: 1.6;
+  line-height: 27px;
   margin: 16px 0;
   
   img + em { 
-    display: block; 
     text-align: center;
     color: #666666;
     font-style: normal;

components/page-footer/index.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { FooterWrap } from './style.js'
 
 const PageFooter = () => (
-  <FooterWrap>
+  <FooterWrap className="border-top">
     <div className="container">
       <div className="foot-cols-wrap row">
         <div className="site-meta-wrap col-12 col-sm-12 col-lg col-xl col-md-12">

layouts/default/global.scss

@@ -5,6 +5,10 @@
   max-width: 800px;
 }
 
+ul li, ol li {
+  margin-bottom: 7px;
+}
+
 .border-top {
   border-top: 1px solid #eaeaea;
 }

pages/guides/[guide].js

@@ -18,7 +18,9 @@ const Guide = ({ guide }) => {
 
 Guide.getInitialProps = serverOnlyProps(({ req }) => {
   // Remove URL chunk to make it a slug e.g. /guides/some-guide-item to become `some-guide-item
-  const slug = req.url.replace(/^\/*?guides\/*?/, '/').replace(/\/*$/, '');
+  const slug = req.url
+    .replace(/^\/*?guides\/*?/, '/')
+    .replace(/\/*$/, '');
 
   return {
     slug,

pages/privacy.js

@@ -7,7 +7,7 @@ const Privacy = () => (
   <DefaultLayout>
     <TosPage>
       <PageHeader />
-      <div className="bg-light border-top border-bottom privacy-wrap">
+      <div className="bg-light border-top privacy-wrap">
         <div className="container pt-5 pb-5">
           <h2 className='font-weight-bold mb-3'>Privacy Policy</h2>
           <p>By using or accessing the Services in any manner, you acknowledge that you accept the practices and policies outlined in this Privacy Policy, and you hereby consent that we will collect, use, and share your information in the following ways. Remember that your use of roadmap.sh’s Services is at all times subject to the <a

pages/terms.js

@@ -7,7 +7,7 @@ const Terms = () => (
   <DefaultLayout>
     <TosPage>
       <PageHeader />
-      <div className="bg-light border-top border-bottom tos-wrap">
+      <div className="bg-light border-top tos-wrap">
         <div className="container pt-5 pb-5">
           <h2>Terms of Service</h2>