Add basic styled components and layout

ashishkamat2791 · Oct 19, 2019 · 24a54cf · 24a54cf
1 parent fb197ae
commit 24a54cf
Show file tree

Hide file tree

Showing 26 changed files with 531 additions and 268 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true
+      }
+    ]
+  ]
+}
diff --git a/components/about-header/index.js b/components/about-header/index.js
@@ -1,7 +1,7 @@
-import './style.scss';
+import { AboutHeaderWrap } from './style';
 
 const AboutHeader = () => (
-  <div className='about-header'>
+  <AboutHeaderWrap>
     <div className="container container-small">
       <div className="author-info">
         <img className='author-img d-none d-sm-none d-md-block d-lg-block d-xl-block' src="/static/kamran.jpeg" />
@@ -15,7 +15,7 @@ const AboutHeader = () => (
         </div>
       </div>
     </div>
-  </div>
+  </AboutHeaderWrap>
 );
 
 export default AboutHeader;
diff --git a/components/about-header/style.scss → components/about-header/style.js b/components/about-header/style.scss → components/about-header/style.js
@@ -1,38 +1,40 @@
-.about-header {
+import styled from 'styled-components';
+
+export const AboutHeaderWrap = styled.div`
   text-align: left;
   padding: 70px 20px;
   margin: 0 auto;
-
+  
   .author-info {
     display: flex;
     align-items: center;
     flex-direction: row;
   }
-
+  
   h2 {
     font-weight: 700;
   }
-
+  
   p {
     font-size: 20px;
     color: #333;
     font-weight: 400;
     margin-bottom: 0;
     line-height: 35px;
   }
-
+  
   a {
     font-weight: 700;
     color: #000;
   }
-
+  
   .author-img {
     height: 160px;
     margin-right: 25px;
     margin-top: 8px;
     border-radius: 9px;
   }
-
+  
   .author-links a {
     display: inline-block;
     margin-right: 5px;
@@ -44,4 +46,4 @@
     border-radius: 5px;
     text-decoration: none;
   }
-}
+`;
diff --git a/components/featured-content/index.js b/components/featured-content/index.js
@@ -1,8 +1,8 @@
-import './style.scss';
+import { FeaturedContentWrap } from './style';
 
 const FeaturedContent = (props) => (
   <>
-    <div className="featured-content-wrap">
+    <FeaturedContentWrap className="featured-content-wrap">
       <div className="container">
         <div className="featured-head">
           <h3>Featured Content</h3>
@@ -34,8 +34,8 @@ const FeaturedContent = (props) => (
           </div>
         </div>
       </div>
-    </div>
-    <div className="featured-content-wrap">
+    </FeaturedContentWrap>
+    <FeaturedContentWrap className="featured-content-wrap">
       <div className="container">
         <p className='border-through featured-separator'>
           <span>
@@ -82,8 +82,8 @@ const FeaturedContent = (props) => (
           </div>
         </div>
       </div>
-    </div>
-    <div className="featured-content-wrap">
+    </FeaturedContentWrap>
+    <FeaturedContentWrap className="featured-content-wrap">
       <div className="container">
         <p className='border-through featured-separator'>
           <span>
@@ -130,7 +130,7 @@ const FeaturedContent = (props) => (
           </div>
         </div>
       </div>
-    </div>
+    </FeaturedContentWrap>
   </>
 );
 

diff --git a/components/featured-content/style.scss → components/featured-content/style.js b/components/featured-content/style.scss → components/featured-content/style.js
@@ -1,4 +1,6 @@
-.featured-content-wrap {
+import styled from 'styled-components';
+
+export const FeaturedContentWrap = styled.div`
   .featured-head {
     text-align: center;
     display: block;
@@ -133,4 +135,4 @@
       border-radius: 10px 10px 0 0;
     }
   }
-}
+`;
diff --git a/components/hero-section/index.js b/components/hero-section/index.js
@@ -1,12 +1,12 @@
-import './style.scss';
+import { HeroSectionWrap } from './style';
 
 const HeroSection = () => (
-  <div className='hero-section'>
+  <HeroSectionWrap>
     <div className="container">
       <h1>Developer Roadmaps</h1>
       <p>Community driven roadmaps, articles and resources for developers. <a href="#">Sign up</a> to share your journey, write guides, track your skillset and get your work reviewed</p>
     </div>
-  </div>
+  </HeroSectionWrap>
 );
 
 export default HeroSection;
diff --git a/components/hero-section/style.scss → components/hero-section/style.js b/components/hero-section/style.scss → components/hero-section/style.js
@@ -1,4 +1,6 @@
-.hero-section {
+import styled from 'styled-components';
+
+export const HeroSectionWrap = styled.div`
   text-align: center;
   padding: 70px 20px;
   margin: 0 auto;
@@ -25,4 +27,4 @@
     font-weight: 700;
     color: #000;
   }
-}
+`;
diff --git a/components/page-footer/index.js b/components/page-footer/index.js
@@ -1,7 +1,7 @@
-import './style.scss';
+import { FooterWrap } from './style.js'
 
 const PageFooter = () => (
-  <div className="page-footer">
+  <FooterWrap>
     <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">
@@ -51,7 +51,7 @@ const PageFooter = () => (
         </div>
       </div>
     </div>
-  </div>
+  </FooterWrap>
 );
 
 export default PageFooter;
diff --git a/components/page-footer/style.scss → components/page-footer/style.js b/components/page-footer/style.scss → components/page-footer/style.js
@@ -1,4 +1,6 @@
-.page-footer {
+import styled from 'styled-components';
+
+export const FooterWrap = styled.div`
   padding: 65px 10px;
 
   .site-meta {
@@ -89,4 +91,4 @@
       }
     }
   }
-}
+`;
diff --git a/components/page-header/index.js b/components/page-header/index.js
@@ -1,7 +1,7 @@
-import './style.scss';
+import { HeaderWrap } from './style';
 
 const PageHeader = () => (
-  <div className='page-header'>
+  <HeaderWrap>
     <div className="top-row container">
       <div className="flex-grow-1 brand">
         <a href="/">
@@ -16,7 +16,7 @@ const PageHeader = () => (
         <a href="#" className='signup'>Sign Up</a>
       </div>
     </div>
-  </div>
+  </HeaderWrap>
 );
 
 export default PageHeader;
diff --git a/components/page-header/style.scss → components/page-header/style.js b/components/page-header/style.scss → components/page-header/style.js
@@ -1,4 +1,6 @@
-.page-header {
+import styled from 'styled-components';
+
+export const HeaderWrap = styled.div`
   padding: 15px 0;
   font-size: 18px;
 
@@ -34,4 +36,4 @@
       }
     }
   }
-}
+`;
diff --git a/layouts/default/index.js b/layouts/default/index.js
@@ -0,0 +1,17 @@
+import { faGithub, fab } from '@fortawesome/free-brands-svg-icons';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import Head from '../../components/head';
+import '../../pages/global.scss';
+
+library.add(fab, faGithub, faArrowRight);
+
+const DefaultLayout = (props) => (
+  <div>
+    <Head />
+    { props.children }
+  </div>
+);
+
+export default DefaultLayout;
diff --git a/package.json b/package.json
@@ -23,6 +23,10 @@
     "node-sass": "^4.12.0",
     "postcss-css-variables": "^0.13.0",
     "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react-dom": "^16.9.0",
+    "styled-components": "^4.4.0"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.10.6"
   }
 }
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,29 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App { ...props } />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            { initialProps.styles }
+            { sheet.getStyleElement() }
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}
diff --git a/pages/about/index.js b/pages/about/index.js
@@ -1,13 +1,14 @@
 import AboutHeader from '../../components/about-header';
 import PageFooter from '../../components/page-footer';
 import PageHeader from '../../components/page-header';
-import './style.scss';
+import { FaqContainer } from './style';
+import DefaultLayout from '../../layouts/default';
 
 const About = () => (
-  <div className='home-container'>
+  <DefaultLayout>
     <PageHeader />
     <AboutHeader />
-    <div className="faqs-container border-top border-bottom bg-light">
+    <FaqContainer className='border-top border-bottom bg-light'>
       <div className="faq-item">
         <div className="container container-small">
           <h4 className='font-weight-bolder'>What is roadmap.sh?</h4>
@@ -33,9 +34,9 @@ const About = () => (
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur, harum impedit numquam porro quod unde! Aperiam dolorum ducimus expedita fugiat, impedit nesciunt, quaerat qui recusandae repellendus tenetur ut voluptatibus!</p>
         </div>
       </div>
-    </div>
+    </FaqContainer>
     <PageFooter />
-  </div>
+  </DefaultLayout>
 );
 
 export default About;
diff --git a/pages/about/style.scss → pages/about/style.js b/pages/about/style.scss → pages/about/style.js
@@ -1,16 +1,16 @@
-.faqs-container {
-  padding: 40px 0;
+import styled from 'styled-components';
 
+export const FaqContainer = styled.div`
+  padding: 40px 0;
+  
   .faq-item {
     padding: 20px 20px;
-
+  
     p {
       color: #333;
     }
     p:last-child {
       margin-bottom: 0;
     }
   }
-}
-
-
+`;
diff --git a/pages/global.scss b/pages/global.scss
@@ -1,3 +1,5 @@
+@import '~bootstrap/dist/css/bootstrap.min.css';
+
 .container-small {
   max-width: 800px;
 }