feat: redesign blog list

components/BlogList.js

@@ -11,7 +11,7 @@ function truncateSummary(content) {
 
 const BlogList = ({ posts }) => {
     return (
-        <>
+        <div className="blog__list">
             {posts.length > 1 &&
                 posts
                     // Filter drafts
@@ -23,120 +23,20 @@ const BlogList = ({ posts }) => {
                     )
                     .map((post) => (
                         <a href={`/posts/${post.slug}`}>
-                            <li>
+                            <div className="blog__list__post">
-                                <div className="blog__info">
+                                <h2>{post.frontmatter.title}</h2>
-                                    <h2>{post.frontmatter.title}</h2>
+                                <h4 className="blog__list__post__date">{reformatDate(post.frontmatter.date)}</h4>
-                                    <h3>
+                                <p>
-                                        {" "}
+                                    <ReactMarkdown
-                                        {reformatDate(post.frontmatter.date)}
+                                        source={truncateSummary(
-                                    </h3>
+                                            post.markdownBody
-                                    <p>
+                                        )}
-                                        <ReactMarkdown
+                                    />
-                                            source={truncateSummary(
+                                </p>
-                                                post.markdownBody
+                            </div>
-                                            )}
-                                        />
-                                    </p>
-                                </div>
-                            </li>
                         </a>
                     ))}
-            <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;
-                    }
-                    @media (prefers-reduced-motion) {
-                        a:hover li .blog__info h2,
-                        a:hover li .blog__info h3,
-                        a:hover li .blog__info p {
-                            transform: translateX(0px);
-                        }
-                    }
-                    .hero_image {
-                        width: 100%;
-                        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;
-                    }
-                    .blog__info h2,
-                    .blog__info h3,
-                    .blog__info p {
-                        transform: translateX(0px);
-                        transition: transform 0.5s ease-out;
-                    }
-                    li {
-                        opacity: inherit;
-                        display: flex;
-                        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>
-        </>
     );
 };
 

pages/posts/index.js

@@ -1,48 +1,47 @@
 import Layout from "../../components/Layout";
 import BlogList from "../../components/BlogList";
+import Page from "../../components/Page";
 import matter from "gray-matter";
 
 const Index = (props) => {
-  return (
+    return (
-    <Layout pathname="/" siteTitle="Garrit's Notes" siteDescription="">
+        <Page siteTitle="Garrit's Notes">
-      <section>
+            <BlogList posts={props.posts} />
-        <BlogList posts={props.posts} />
+        </Page>
-      </section>
+    );
-    </Layout>
-  );
 };
 
 export async function getStaticProps() {
-  //get posts & context from folder
+    //get posts & context from folder
-  const posts = ((context) => {
+    const posts = ((context) => {
-    const keys = context.keys();
+        const keys = context.keys();
-    const values = keys.map(context);
+        const values = keys.map(context);
 
-    const data = keys.map((key, index) => {
+        const data = keys.map((key, index) => {
-      // Create slug from filename
+            // Create slug from filename
-      const slug = key
+            const slug = key
-        .replace(/^.*[\\\/]/, "")
+                .replace(/^.*[\\\/]/, "")
-        .split(".")
+                .split(".")
-        .slice(0, -1)
+                .slice(0, -1)
-        .join(".");
+                .join(".");
-      const value = values[index];
+            const value = values[index];
-      // Parse yaml metadata & markdownbody in document
+            // Parse yaml metadata & markdownbody in document
-      const document = matter(value.default);
+            const document = matter(value.default);
-      return {
+            return {
-        frontmatter: document.data,
+                frontmatter: document.data,
-        markdownBody: document.content,
+                markdownBody: document.content,
-        slug,
+                slug,
-      };
+            };
-    });
+        });
-    return data;
+        return data;
-  })(require.context("../../content/posts", true, /\.md$/));
+    })(require.context("../../content/posts", true, /\.md$/));
 
-  return {
+    return {
-    props: {
+        props: {
-      posts,
+            posts,
-      description: "",
+            description: "",
-    },
+        },
-  };
+    };
 }
 
 export default Index;

styles/components/blog-list.scss

@@ -1,90 +1,16 @@
-a:hover {
+.blog__list {
-    opacity: 1;
+    &__post {
-}
+        margin-bottom: 3em;
-a:hover li div.hero_image img {
+        &__date {
-    opacity: 0.8;
+            color: $color-text-dark;
-    transition: opacity 0.3s ease;
+            font-weight: 300;
-}
+
-a:hover li .blog__info h2,
+            @media (prefers-color-scheme: light) {
-a:hover li .blog__info h3,
+                color: $color-text-light;
-a:hover li .blog__info p {
+            }
-    transform: translateX(10px);
+        }
-    transition: transform 0.5s ease-out;
-}
-@media (prefers-reduced-motion) {
-    a:hover li .blog__info h2,
-    a:hover li .blog__info h3,
-    a:hover li .blog__info p {
-        transform: translateX(0px);
-    }
-}
-.hero_image {
-    width: 100%;
-    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;
-}
-.blog__info h2,
-.blog__info h3,
-.blog__info p {
-    transform: translateX(0px);
-    transition: transform 0.5s ease-out;
-}
-li {
-    opacity: inherit;
-    display: flex;
-    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 {
+    a {
-        margin-bottom: 1.2rem;
+        text-decoration: none;
     }
 }

styles/components/index.scss

@@ -1,3 +1,4 @@
 @import "header";
 @import "page";
 @import "footer";
+@import "blog-list";

styles/foundation/typography.scss

@@ -28,7 +28,6 @@
 h1 {
     @include header;
     font-size: 47px;
-    font-weight: bold;
 }
 
 h2 {