feat: add new blog page (#380)

* feat: add new blog page

* feat: rewrite scss file to remove unused module

* feat: remove unnecessary image function

* feat: refactor post.description and replace small tag to use span instead

* feat: update import to use @use instead

* feat: use css variables for colors instead hex values

* feat: test pre-commit hook

* feat: revert import lines change

* feat: remove modules from ArticlePreview and ArticleAuthor styles

* feat: remove unnecessary div element

* feat: enhance CSS for the desktop version

* feat: Update image size to be full width

* feat: add SubscriptionBanner component

* feat: add CSS transition

* feat: add graphql playground for development

* feat: update to use function instead import

* fix: default typography font parameter

* feat: update block class to match the component name

* feat: move SubscriptionBanner to the components folder

* feat: refactor props

* feat: rename handleClick to it load more posts purpose

* fix: SubscriptionBanner import in LandingPage component

* feat: add Blog page link to the main menu

* fix: update blog title size for different screen sizes

* feat: move article auhtor icon to a svg file

* feat: add slug to blog posts

* fix: page size typo

* feat: refactor articlepreview css

gatsby-node.js

@@ -20,10 +20,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       {
         allContentfulBlogPost {
           nodes {
-            id
-            title {
-              title
-            }
+            slug
           }
         }
       }
@@ -44,14 +41,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 
   if (posts.length > 0) {
     posts.forEach((post, index) => {
-      const previousPostSlug = index === 0 ? null : posts[index - 1].id;
-      const nextPostSlug = index === posts.length - 1 ? null : posts[index + 1].id;
+      const previousPostSlug = index === 0 ? null : posts[index - 1].slug;
+      const nextPostSlug = index === posts.length - 1 ? null : posts[index + 1].slug;
 
       createPage({
-        path: `/blog/${post.id}/`,
+        path: `/blog/${post.slug}/`,
         component: blogPost,
         context: {
-          id: post.id,
+          slug: post.slug,
           previousPostSlug,
           nextPostSlug,
         },

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "predev": "node ./bin/gen-antd-css.js && gatsby develop -p 8080",
     "dev": "gatsby develop -p 8080",
+    "graphql:win": "cross-env GATSBY_GRAPHQL_IDE=playground gatsby develop",
     "prebuild": "cross-env NODE_ENV=production node ./bin/gen-antd-css.js",
     "build": "gatsby build",
     "serve": "gatsby serve",

src/components/ArticleAuthor/ArticleAuthor.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { createBemBlockBuilder } from '../../utils';
+import AuthorIcon from './icons/author.inline.svg';
+
+import './ArticleAuthor.scss';
+
+const getBlocksWith = createBemBlockBuilder(['article-author']);
+
+export const ArticleAuthor = ({ authorName }) => {
+  return (
+    <p className={getBlocksWith()}>
+      <span className={getBlocksWith('__icon')}>
+        <AuthorIcon />
+      </span>
+      {authorName}
+    </p>
+  );
+};

src/components/ArticleAuthor/ArticleAuthor.scss

@@ -0,0 +1,14 @@
+@use 'src/styles/mixins' as m;
+@use 'src/styles/variables' as v;
+
+.article-author {
+  @include m.font-poppins(v.$fw-medium);
+
+  color: var(--text-service);
+  display: flex;
+  margin-bottom: 0;
+
+  &__icon {
+    margin-right: 8px;
+  }
+}

src/components/ArticlePreview/ArticlePreview.jsx

@@ -2,25 +2,39 @@ import React from 'react';
 import { Link } from 'gatsby';
 import { renderRichText } from 'gatsby-source-contentful/rich-text';
 
-import * as styles from './ArticlePreview.module.scss';
+import { ArticleAuthor } from '../ArticleAuthor/ArticleAuthor';
+import { createBemBlockBuilder } from '../../utils';
+
+import './ArticlePreview.scss';
+
+const getBlocksWith = createBemBlockBuilder(['article-preview-list']);
 
 export const ArticlePreview = ({ posts }) => {
   if (!posts) return null;
   if (!Array.isArray(posts)) return null;
 
   return (
     <div className="container">
-      <ul className={styles.articleList}>
+      <ul className={getBlocksWith()}>
         {posts.map(post => {
           return (
-            <li key={post.id}>
-              <Link to={`/blog/${post.id}`} className={styles.link}>
-                <h2 className={styles.title}>{post.title.title}</h2>
+            <li className={getBlocksWith('__item')} key={post.id}>
+              <Link to={`/blog/${post.slug}`} className={getBlocksWith('__link')}>
+                <div className={getBlocksWith('__featured-image')}>
+                  <img alt={post.title.title} src={post.featuredImage.file.url} />
+                </div>
+                <div className={getBlocksWith('__content')}>
+                  <p className={getBlocksWith('__category')}>{post.category}</p>
+
+                  <h2 className={getBlocksWith('__title')}>{post.title.title}</h2>
+                  {post.description?.raw && <div>{renderRichText(post.description)}</div>}
+                  <div className={getBlocksWith('__meta')}>
+                    <span className="meta">{post.publishDate}</span>
+                  </div>
+                  <p className={getBlocksWith('__excerpt')}>{post.leadParagraph.leadParagraph}</p>
+                  <ArticleAuthor authorName={post.author} />
+                </div>
               </Link>
-              <div>{post.description?.raw && renderRichText(post.description)}</div>
-              <div className={styles.meta}>
-                <small className="meta">{post.publishDate}</small>
-              </div>
             </li>
           );
         })}

src/components/ArticlePreview/ArticlePreview.scss

@@ -0,0 +1,90 @@
+@use 'src/styles/mixins' as m;
+@use 'src/styles/variables' as v;
+
+.article-preview-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-gap: calc(4 * var(--base-spacing)) calc(3 * var(--base-spacing));
+
+  &__item {
+    background-color: var(--white);
+    border-radius: 16px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 45, 55, 0.12);
+    color: var(--text-primary);
+    display: flex;
+    flex-direction: column;
+    transition: var(--basic-transition);
+
+    &:hover,
+    &:active {
+      box-shadow: 0px 8px 32px 0px rgba(0, 45, 55, 0.12);
+    }
+
+    &:hover {
+      .article-preview-list {
+        &__title {
+          color: var(--color-primary-500);
+        }
+      }
+    }
+
+    &:active {
+      .article-preview-list {
+        &__title {
+          color: var(--color-primary-700);
+        }
+      }
+    }
+  }
+
+  &__featured-image {
+    border-top-left-radius: calc(2 * var(--base-spacing));
+    border-top-right-radius: calc(2 * var(--base-spacing));
+    overflow: hidden;
+  }
+
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: calc(3 * var(--base-spacing));
+  }
+
+  &__category {
+    @include m.font-poppins(v.$fw-semi-bold);
+    @include m.font-scale(small);
+
+    color: var(--text-service);
+    letter-spacing: 1px;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  &__link {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    text-decoration: none;
+  }
+
+  &__title {
+    @include m.font-poppins(v.$fw-semi-bold);
+    @include m.font-scale(medium);
+
+    display: inline-block;
+    margin: calc(2 * var(--base-spacing)) 0;
+    border-bottom: 1.5px solid transparent;
+    transition: var(--basic-transition);
+  }
+
+  &__meta {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__excerpt {
+    flex-grow: 1;
+    line-height: calc(3 * var(--base-spacing));
+    margin: 0;
+  }
+}