feat: add styling

components/BlogList.js

@@ -1,34 +1,131 @@
 import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+function reformatDate(fullDate) {
+  const date = new Date(fullDate);
+  return date.toDateString().slice(4);
+}
+
+function truncateSummary(content) {
+  return content.slice(0, 200).trimEnd();
+}
 
 const BlogList = ({ posts }) => {
-  const blogElements = posts
-    .sort((a, b) => a.frontmatter.date < b.frontmatter.date)
-    .map((post) => (
-      <div>
-        <Link href={"/posts/" + post.slug}>
-          <a>{post.frontmatter.title}</a>
-        </Link>
-        <style jsx>
-          {`
-            a {
-              margin-top: 1em;
-            }
-          `}
-        </style>
-      </div>
-    ));
   return (
-    <div>
-      {blogElements}
+    <>
+      <ul className="list">
+        {posts.length > 1 &&
+          posts
+            .sort((a, b) => a.frontmatter.date < b.frontmatter.date)
+            .map((post) => (
+              <Link key={post.slug} href={{ pathname: `/posts/${post.slug}` }}>
+                <a>
+                  <li>
+                    <div className="blog__info">
+                      <h2>{post.frontmatter.title}</h2>
+                      <h3> {reformatDate(post.frontmatter.date)}</h3>
+                      <p>
+                        <ReactMarkdown
+                          source={truncateSummary(post.markdownBody)}
+                        />
+                      </p>
+                    </div>
+                  </li>
+                </a>
+              </Link>
+            ))}
+      </ul>
       <style jsx>
         {`
-          div {
+          margin-bottom: 0;
+          a:hover {
+            opacity: 1;
+          }
+          a:hover li div.hero_image img {
+            opacity: 0.8;
+            transition: opacity 0.3s ease;
+          }
+          a:hover li .blog__info h2,
+          a:hover li .blog__info h3,
+          a:hover li .blog__info p {
+            transform: translateX(10px);
+            transition: transform 0.5s ease-out;
+          }
+          .hero_image {
             width: 100%;
-            height: 100vh;
+            height: 33vh;
+            overflow: hidden;
+            background-color: #000;
+          }
+          .hero_image img {
+            object-fit: cover;
+            object-position: 50% 50%;
+            opacity: 1;
+            transition: opacity 0.3s ease;
+            min-height: 100%;
+          }
+          .blog__info {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 1.5rem 1.25rem;
+            transform: translateX(0px);
+            transition: transform 0.3s ease-in;
+            border-bottom: 1px solid #ebebeb;
+          }
+          .blog__info h2,
+          .blog__info h3,
+          .blog__info p {
+            transform: translateX(0px);
+            transition: transform 0.5s ease-out;
+          }
+          li {
+            opacity: inherit;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            min-height: 38vh;
+            margin-bottom: 0;
+          }
+          h2 {
+            margin-bottom: 0.5rem;
+          }
+          h3 {
+            margin-bottom: 1rem;
+          }
+          p {
+            max-width: 900px;
+          }
+          @media (min-width: 768px) {
+            li {
+              min-height: 250px;
+              height: 33.333vh;
+              flex-direction: row;
+            }
+            .hero_image {
+              height: 100%;
+            }
+            .hero_image img {
+              min-width: 100%;
+              height: 100%;
+              width: auto;
+              min-height: 0;
+            }
+            .blog__info {
+              min-width: 70%;
+            }
+          }
+          @media (min-width: 1280px) {
+            .blog__info {
+              padding: 3rem;
+            }
+            h3 {
+              margin-bottom: 1.2rem;
+            }
           }
         `}
       </style>
-    </div>
+    </>
   );
 };
 

components/Layout.js

@@ -1,10 +1,15 @@
 import Header from "./Header";
 import Meta from "./Meta";
 
-export default function Layout({ siteTitle, siteDescription, children }) {
+export default function Layout({
+  siteTitle,
+  siteDescription,
+  children,
+  pathname,
+}) {
   return (
-    <section className="layout">
-      <Meta siteTitle={siteTitle} description={siteDescription} />
+    <section className={`layout ${pathname == "info" && "info_page"}`}>
+      <Meta siteTitle={siteTitle} siteDescription={siteDescription} />
       <Header siteTitle={siteTitle} />
       <div className="content">{children}</div>
       <style jsx>
@@ -15,6 +20,9 @@ export default function Layout({ siteTitle, siteDescription, children }) {
             flex-direction: column;
             min-height: 100vh;
           }
+          .layout .info_page {
+            color: #ebebeb;
+          }
           .content {
             flex-grow: 1;
           }

pages/_app.js

@@ -1,5 +1,3 @@
-import "../styles/globals.css";
-
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }

pages/posts/[post].js

@@ -5,17 +5,158 @@ import glob from "glob";
 import { useRouter } from "next/router";
 
 export default function BlogTemplate(props) {
-  const router = useRouter();
-  const { post } = router.query;
-  // Render data from `getStaticProps`
+  function reformatDate(fullDate) {
+    const date = new Date(fullDate);
+    return date.toDateString().slice(4);
+  }
+
+  /*
+   ** Odd fix to get build to run
+   ** It seems like on first go the props
+   ** are undefined — could be a Next bug?
+   */
+
+  if (!props.frontmatter) return <></>;
+
   return (
     <Layout siteTitle={props.siteTitle}>
-      <article>
-        <h1>{props.frontmatter.title}</h1>
-        <div>
+      <article className="blog">
+        <div className="blog__info">
+          <h1>{props.frontmatter.title}</h1>
+          <h3>{reformatDate(props.frontmatter.date)}</h3>
+        </div>
+        <div className="blog__body">
           <ReactMarkdown source={props.markdownBody} />
         </div>
+        <div className="blog__footer">
+          <h2>Written By: Garrit Franke</h2>
+        </div>
       </article>
+      <style jsx>
+        {`
+          .blog h1 {
+            margin-bottom: 0.7rem;
+          }
+          .blog__hero {
+            min-height: 300px;
+            height: 60vh;
+            width: 100%;
+            margin: 0;
+            overflow: hidden;
+          }
+          .blog__hero img {
+            margin-bottom: 0;
+            object-fit: cover;
+            min-height: 100%;
+            min-width: 100%;
+            object-position: center;
+          }
+          .blog__info {
+            padding: 1.5rem 1.25rem;
+            width: 100%;
+            max-width: 768px;
+            margin: 0 auto;
+          }
+          .blog__info h1 {
+            margin-bottom: 0.66rem;
+          }
+          .blog__info h3 {
+            margin-bottom: 0;
+          }
+          .blog__body {
+            width: 100%;
+            padding: 0 1.25rem;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
+          .blog__body a {
+            padding-bottom: 1.5rem;
+          }
+          .blog__body:last-child {
+            margin-bottom: 0;
+          }
+          .blog__body h1 h2 h3 h4 h5 h6 p {
+            font-weight: normal;
+          }
+          .blog__body p {
+            color: inherit;
+          }
+          .blog__body ul {
+            list-style: initial;
+          }
+          .blog__body ul ol {
+            margin-left: 1.25rem;
+            margin-bottom: 1.25rem;
+            padding-left: 1.45rem;
+          }
+          .blog__footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem 1.25rem;
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+          }
+          .blog__footer h2 {
+            margin-bottom: 0;
+          }
+          .blog__footer a {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+          .blog__footer a svg {
+            width: 20px;
+          }
+          @media (min-width: 768px) {
+            .blog {
+              display: flex;
+              flex-direction: column;
+            }
+            .blog__body {
+              max-width: 800px;
+              padding: 0 2rem;
+            }
+            .blog__body span {
+              width: 100%;
+              margin: 1.5rem auto;
+            }
+            .blog__body ul ol {
+              margin-left: 1.5rem;
+              margin-bottom: 1.5rem;
+            }
+            .blog__hero {
+              min-height: 600px;
+              height: 75vh;
+            }
+            .blog__info {
+              text-align: center;
+              padding: 2rem 0;
+            }
+            .blog__info h1 {
+              max-width: 500px;
+              margin: 0 auto 0.66rem auto;
+            }
+            .blog__footer {
+              padding: 2.25rem;
+            }
+          }
+          @media (min-width: 1440px) {
+            .blog__hero {
+              height: 70vh;
+            }
+            .blog__info {
+              padding: 3rem 0;
+            }
+            .blog__footer {
+              padding: 2rem 2rem 3rem 2rem;
+            }
+          }
+        `}
+      </style>
     </Layout>
   );
 }

pages/posts/index.js

@@ -1,14 +0,0 @@
-import Layout from "../../components/Layout";
-import BlogList from "../../components/BlogList";
-
-const Index = (props) => {
-  return (
-    <Layout pathname="/" siteTitle="/dev.space" siteDescription="">
-      <section>
-        <BlogList />
-      </section>
-    </Layout>
-  );
-};
-
-export default Index;

styles/Home.module.css

@@ -1,123 +0,0 @@
-.container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.main {
-  padding: 5rem 0;
-  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 {
-  margin-left: 0.5rem;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  max-width: 800px;
-  margin-top: 3rem;
-}
-
-.card {
-  margin: 1rem;
-  flex-basis: 45%;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}

styles/globals.css

@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}