Blog Update (#158)

* Updated blog design as per the new designs

* Updated bg colors and community reports layout

* Updated all posts section to show 9 posts for all pages & fixed featured posts

service/api/index.ts

@@ -126,7 +126,8 @@ const getCommunityBlogs = async (api: Api.CommunityBlogs): Promise<CommunityBlog
   const file = path.join(config.root, `${api}.json`)
   const contents = await io.readFile(file)
 
-  const result = JSON.parse(contents)
+  const result = JSON.parse(contents).slice(0, 4)
+
   return result
 }
 

src/components/ArticleCard.scss

@@ -8,6 +8,10 @@
 .article.card.container {
   display: block;
   text-align: left;
+  background-color: colors.$base-white;
+  border: 1px solid colors.$gray-200;
+  border-radius: 16px;
+  overflow: hidden;
 
   .image.container {
     height: 240px;
@@ -75,6 +79,8 @@
 
 
 .dark .article.card.container {
+  border-color: colors.$gray-800;
+  background-color: colors.$black-800;
 
   time {
     color: colors.$gray-300;

src/design-system/_colors.scss

@@ -6,6 +6,8 @@ $base-white: #ffffff;
 $black-800: #171717;
 $black-900: #121212;
 
+$black-700: #1c1c1c;
+
 $gray-25: #FCFCFD;
 $gray-50: #F9FAFB;
 $gray-100: #F2F4F7;

src/pages/blog/index.astro

@@ -26,7 +26,7 @@ const { totalPages, pages } = paginated;
   />
   <style slot="header" is:inline set:html={styles}></style>
   <Blog
-    articles={pages[1].slice(3)}
+    articles={pages[1]}
     currentPage={1}
     totalPages={totalPages}
     communityBlogs={communityBlogs}

src/pages/blog/page/[page].astro

@@ -18,10 +18,7 @@ export async function getStaticPaths() {
       params: { page: num },
       props: {
         currentPage: num,
-        data:
-          parseInt(num) === 1
-            ? paginated.pages[num].slice(3)
-            : paginated.pages[num],
+        data: paginated.pages[num],
         totalPages: paginated.totalPages,
       },
     };

src/views/Blog.astro

@@ -10,6 +10,7 @@ import * as api from "../../service/api";
 import Enumerable from "linq";
 import { getEnumerable } from "../../service/api";
 import { Api } from "../../types/enum";
+import WeeklyReports from "./blog/WeeklyReports.astro";
 
 interface Props {
   articles: Article[];
@@ -25,9 +26,11 @@ const t = (x: string): string => x;
 const { articles, currentPage, totalPages, tag, communityBlogs }: Props =
   Astro.props;
 
-const latest = Enumerable.from(posts)
+const featuredPosts = posts.filter((x) => x.featured);
+
+const latestFeatured = Enumerable.from(featuredPosts)
   .orderByDescending((x) => x.publishedAt)
-  .take(3)
+  .take(4)
   .toArray();
 
 const videos = await api.getEnumerable<Video>(Api.Video, 3, 0);
@@ -47,18 +50,19 @@ const videos = await api.getEnumerable<Video>(Api.Video, 3, 0);
   <EmailSubscription id="BlogHeroSubscriptionEmail" className="script only" />
 </HeaderSection>
 
-<Featured posts={latest} />
-
-<Videos videos={videos} />
+<Featured posts={latestFeatured} />
 
 <BlogPosts
   tag={tag}
   articles={articles}
   totalPages={totalPages}
   currentPage={currentPage}
-  weeklyReports={communityBlogs}
 />
 
+<Videos videos={videos} />
+
+<WeeklyReports data={communityBlogs} />
+
 <NewsletterSignupForm
   heading="Sign up for our newsletter"
   text="Be the first to know about releases and industry news and insights."

src/views/Blog.scss

@@ -5,6 +5,36 @@
 @use "../design-system/theme/light";
 @use "../design-system/theme/dark";
 
+header[data-style="colored"] {
+  background-color: colors.$gray-50;
+}
+
+main {
+  .ui.basic.hero.section {
+    background-color: colors.$gray-50;
+  }
+
+  background-color: colors.$gray-50;
+
+  .newsletter.signup {
+    background-color: colors.$base-white;
+  }
+}
+
+.dark {
+  main {
+    .ui.basic.hero.section {
+      background-color: colors.$black-900;
+    }
+
+    background-color: colors.$black-900;
+
+    .newsletter.signup {
+      background-color: colors.$black-700;
+    }
+  }
+
+}
 
 .blog {
   .tags.container {

src/views/blog/BlogPosts.astro

@@ -9,25 +9,28 @@ import { slugify } from "../../../util/slug";
 import InputWithIcon from "../../elements/InputWithIcon.astro";
 
 import SearchModal from "../../components/SearchModal.astro";
-import WeeklyReports from "./WeeklyReports.astro";
 
 interface Props {
   articles: Article[];
   totalPages?: number;
   currentPage?: number;
   tag?: Tag;
-  weeklyReports: CommunityBlogItem[];
 }
 
-const { articles, totalPages, currentPage, tag, weeklyReports }: Props =
-  Astro.props;
+const { articles, totalPages, currentPage, tag }: Props = Astro.props;
 
 const heading = tag?.name || "All Stories";
 const slug = tag?.slug ?? slugify(heading);
 ---
 
 <div class="blog post full width container">
   <div class="inner container">
+    <div class="text and cta">
+      <div class="text">
+        <h2 id={slug}>{heading}</h2>
+      </div>
+    </div>
+
     <div class="desktop only visible">
       <TagFilters />
       <InputWithIcon
@@ -45,11 +48,6 @@ const slug = tag?.slug ?? slugify(heading);
       <TagFilterDropdown />
     </div>
 
-    <div class="text and cta">
-      <div class="text">
-        <h2 id={slug}>{heading}</h2>
-      </div>
-    </div>
     <div class="blog posts">
       {
         articles.map((post) => (
@@ -65,8 +63,6 @@ const slug = tag?.slug ?? slugify(heading);
       currentPage={currentPage}
       totalPages={totalPages}
     />
-
-    <WeeklyReports data={weeklyReports} />
   </div>
 </div>
 

src/views/blog/BlogPosts.scss

@@ -14,13 +14,11 @@
   }
 
   .inner.container {
-    border-top: 0.5px solid colors.$gray-300;
-
     @media screen and (max-width: 767px) {
       padding-top: 32px;
     }
 
-    & > div:nth-child(1) {
+    & > div:nth-child(2) {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -30,15 +28,23 @@
         color: colors.$gray-500;
         padding: 10px 14px;
       }
+
+      margin-top: 32px;
 
       @media screen and (max-width: 767px) {
-        margin-bottom: 16px;
+        margin-top: 16px;
 
         .blog.search {
           width: 100%;
         }
       }
     }
+
+    .ui.pagination {
+      .container {
+        border: none;
+      }
+    }
   }
 
   .text.and.cta {
@@ -74,6 +80,19 @@
     &:hover img {
       transform :scale(1.15);
     }
+
+    .article.card {
+      height: 100%;
+
+      .contents {
+        padding: 24px;
+
+        time {
+          margin-top: 0;
+        }
+      }
+    }
+
   }
 
   .blog.posts {
@@ -95,8 +114,6 @@
 
 .dark .blog.post.container {
   .inner.container {
-    border-top: 0.5px solid colors.$gray-800;
-
     & > div:nth-child(1) {
       .blog.search {
         background-color: colors.$black-800;

src/views/blog/Featured.astro

@@ -12,7 +12,7 @@ const { posts } = Astro.props;
 ---
 
 <div class="featured posts full width container">
-  <h2>{t("Recent Posts")}</h2>
+  <h2>{t("Featured")}</h2>
 
   <div class="grid container">
     {posts.map((post: any) => <ArticleCard type={Api.Blog} post={post} />)}

src/views/blog/Featured.scss

@@ -26,7 +26,7 @@
   .grid.container {
     display: grid;
     margin-top: 32px;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 1fr 1fr;
     gap: 32px;
     row-gap: 32px;
@@ -39,8 +39,7 @@
     .article.card.container {
       --max-lines: 1;
       display: flex;
-      flex-direction: row;
-      gap: 24px;
+      flex-direction: column;
 
       align-items: flex-start;
 
@@ -71,29 +70,72 @@
 
 
       &:not(:nth-of-type(1)) {
-        @media (min-width: 1024px) {
-          height: 200px;
+        .contents {
+          padding: 24px;
+        }
 
+        @media (min-width: 1024px) {
           .image.container {
-            height: 200px;
-            width: 320px;
+
+            img {
+              height: 240px;
+              width: 384px;
+            }
           }
         }
       }
 
       &:nth-of-type(1) {
+        .contents {
+          padding: 24px;
+        }
+
+        .image.container {
+          width: 100%;
+
+          img {
+            height: 100%;
+          }
+        }
+
+        @media (min-width: 768px) {
+          .image.container {
+            width: auto;
+
+            img {
+              height: 240px;
+            }
+          }
+        }
+
         @media (min-width: 1024px) {
+          align-items: center;
+
+          grid-column-start: 1;
+          grid-column-end: 4;
+
           grid-row-start: 1;
           grid-row-end: 3;
 
-          flex-direction: column;
-          gap: 32px;
+          flex-direction: row;
+
+          height: 370px;
 
           --max-lines: 2;
-        }
 
-        img {
-          height: 240px;
+          .contents {
+            padding: 32px;
+          }
+
+          .image.container {
+            width: max-content;
+            height: 100%;
+
+            img {
+              max-width: 600px;
+              height: 100%;
+            }
+          }
         }
       }
 
@@ -112,6 +154,7 @@
       }
 
       @media (max-width: 1023px) {
+        flex-direction: row;
 
         // change font style of <Title> component of 2nd/3rd children
         &>div:nth-of-type(2) h3 {
@@ -122,7 +165,6 @@
       // if screen size is below 768px
       @media (max-width: 767px) {
         flex-direction: column;
-        gap: 20px;
 
         --max-lines: 2;
       }

src/views/blog/TagFilters.scss

@@ -6,7 +6,6 @@
 @use "../../design-system/theme/dark";
 
 .tag.filter.container {
-  margin: 32px 0;
   display: flex;
   gap: 8px;