install base dependencies

ryan-parag · Jun 18, 2020 · 0c47f20 · 0c47f20
1 parent f451968
commit 0c47f20
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 105 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
+}
diff --git a/components/Header.js b/components/Header.js
@@ -1,42 +1,24 @@
 import Link from 'next/link'
+import styled from 'styled-components'
+
+const HeaderContainer = styled.header`
+  background: rgba(0,0,0, 0.08);
+  padding: 24px 16px;
+`
 
 export default function Header() {
   return (
     <>
-      <header className="header">
-        <nav className="nav" role="navigation" aria-label="main navigation">
+      <HeaderContainer>
+        <nav role="navigation" aria-label="main navigation">
           <Link href="/">
-            <a>Demo Blog</a>
+            <a>Notes</a>
           </Link>
           <Link href="/about">
             <a>About</a>
           </Link>
         </nav>
-      </header>
-      <style jsx>{`
-        header {
-          width: 100%;
-          height: 100px;
-          border-bottom: 1px solid #eaeaea;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-        nav {
-          width: calc(100% - 40px);
-          max-width: 1200px;
-          font-weight: bold;
-          font-size: 1.3rem;
-        }
-        nav a {
-          margin-right: 20px;
-          color: #00a395;
-          text-decoration: none;
-        }
-        nav a:hover {
-          text-decoration: underline;
-        }
-      `}</style>
+      </HeaderContainer>
     </>
   )
 }
diff --git a/components/Layout.js b/components/Layout.js
@@ -1,6 +1,14 @@
 import Head from 'next/head'
 
 import Header from './Header'
+import { Normalize } from 'styled-normalize'
+import styled from 'styled-components'
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  max-width: 640px;
+  margin: auto;
+`;
 
 export default function Layout({ children, pageTitle, description, ...props }) {
   return (
@@ -11,58 +19,12 @@ export default function Layout({ children, pageTitle, description, ...props }) {
         <meta name="Description" content={description}></meta>
         <title>{pageTitle}</title>
       </Head>
-      <style jsx global>{`
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;800;900&display=swap');
-
-        html,
-        body {
-          margin: 0;
-          padding: 0;
-          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-            Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-            sans-serif;
-          color: #445566;
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          font-weight: bold;
-        }
-
-        a {
-          color: #00a395;
-        }
-
-        .content {
-          padding: 2rem 20px;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        footer {
-          width: 100%;
-          height: 100px;
-          border-top: 1px solid #eaeaea;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        footer img {
-          padding: 0 5px;
-          height: 1rem;
-        }
-      `}</style>
-      <section className="layout">
+      <Normalize/>
+      <section>
         <Header />
-        <div className="content">{children}</div>
+        <main>
+          <LayoutContainer>{children}</LayoutContainer>
+        </main>
       </section>
       <footer>
         Built with <img src="/netliheart.svg" alt="Netlify Heart" /> for you

diff --git a/package.json b/package.json
@@ -9,11 +9,14 @@
     "export": "next export"
   },
   "dependencies": {
+    "babel-plugin-styled-components": "^1.10.7",
     "gray-matter": "^4.0.2",
     "next": "^9.4.4",
     "raw-loader": "^4.0.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-markdown": "^4.3.1"
+    "react-markdown": "^4.3.1",
+    "styled-components": "^5.1.1",
+    "styled-normalize": "^8.0.7"
   }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -7,7 +7,7 @@ const Index = ({ posts, title, description, ...props }) => {
   return (
     <>
       <Layout pageTitle={title} description={description}>
-        <h1 className="title">Welcome to this demo blog!</h1>
+        <h1 className="title">Notes</h1>
 
         <p className="description">
           This is a simple blog built with Next, easily deployable on{' '}
@@ -25,12 +25,6 @@ const Index = ({ posts, title, description, ...props }) => {
           <a href="https://url.netlify.com/ByVW0bCF8">here</a>.
         </p>
       </Layout>
-      <style jsx>{`
-        .title {
-          margin: 1rem auto;
-          font-size: 3rem;
-        }
-      `}</style>
     </>
   )
 }

diff --git a/pages/post/[postname].js b/pages/post/[postname].js
@@ -34,22 +34,10 @@ export default function BlogPost({ siteTitle, frontmatter, markdownBody }) {
       <style jsx>{`
         article {
           width: 100%;
-          max-width: 1200px;
-        }
-        h1 {
-          font-size: 3rem;
-        }
-        h3 {
-          font-size: 2rem;
         }
         .hero {
           width: 100%;
         }
-        .back {
-          width: 100%;
-          max-width: 1200px;
-          color: #00a395;
-        }
       `}</style>
     </>
   )