feat: featured blog posts (apache#1255)

lijing-21 · Aug 2, 2022 · 7b92b09 · 7b92b09
1 parent 7f2e6d9
commit 7b92b09
Show file tree

Hide file tree

Showing 11 changed files with 1,043 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,8 @@ lib/core/MetadataBlog.js
 /blog/zh/i18n
 /blog/en/src
 /blog/en/static
+/blog/en/config/picked-posts-info.js
+/blog/zh/config/picked-posts-info.js
 
 
 # misc

diff --git a/blog/en/config/picked-posts.json b/blog/en/config/picked-posts.json
@@ -0,0 +1,5 @@
+[
+    "blog/en/blog/2022/07/29/release-apache-apisix-2.15.md",
+    "blog/en/blog/2022/07/22/how-is-google-cloud-tau-t2a-performing.md",
+    "blog/en/blog/2022/07/06/use-keycloak-with-api-gateway-to-secure-apis.md"
+]
diff --git a/blog/i18n/zh/code.json b/blog/i18n/zh/code.json
@@ -336,5 +336,9 @@
   },
   "theme.blog.post.readingTime.plurals": {
     "message": "阅读需约 {readingTime} 分钟"
+  },
+  "blog.picked.posts.component.title": {
+    "message": "精选",
+    "description": "Picked posts"
   }
 }
diff --git a/blog/package.json b/blog/package.json
@@ -40,6 +40,7 @@
     "fitty": "^2.3.6",
     "gsap": "^3.7.1",
     "lethargy": "^1.0.9",
+    "lodash.shuffle": "^4.2.0",
     "raw-loader": "^4.0.2",
     "rc-image": "^5.6.2",
     "react": "^17.0.2",

diff --git a/blog/src/theme/BlogPosts/index.tsx b/blog/src/theme/BlogPosts/index.tsx
@@ -10,6 +10,14 @@ import clsx from 'clsx';
 import type { FC, HTMLAttributes, DetailedHTMLProps } from 'react';
 import React from 'react';
 import useWindowType from '@theme/hooks/useWindowSize';
+import shuffle from 'lodash.shuffle';
+import { useLocation } from '@docusaurus/router';
+import { translate } from '@docusaurus/Translate';
+
+// pickedPosts will be auto generated
+// eslint-disable-next-line import/no-unresolved
+import pickedPosts from '../../../config/picked-posts-info';
+
 import 'react-lazy-load-image-component/src/effects/blur.css';
 import style from './style.module.scss';
 
@@ -45,6 +53,7 @@ const BlogPostItem: FC<BlogPostItemProps> = (props) => {
     delayMethod,
     delayTime,
     useIntersectionObserver,
+    className,
   } = props;
   const delayProps = {
     scrollPosition,
@@ -58,10 +67,10 @@ const BlogPostItem: FC<BlogPostItemProps> = (props) => {
   const windowType = useWindowType();
   const effect = windowType === 'mobile' ? 'opacity' : 'blur';
 
-  const image = assets.image ?? frontMatter.image ?? defaultImg;
+  const image = assets?.image ?? frontMatter.image ?? defaultImg;
 
   return (
-    <article itemProp="blogPost" itemScope itemType="http://schema.org/BlogPosting">
+    <article className={className} itemProp="blogPost" itemScope itemType="http://schema.org/BlogPosting">
       <Link itemProp="url" to={permalink} aria-label={`Read more about ${title}`}>
         <LazyLoadImage
           height={232}
@@ -159,28 +168,68 @@ const BlogPosts: FC<BlogPostsProps> = ({
   delayTime,
   useIntersectionObserver,
   ...props
-}) => (
-  <main
-    className={clsx({
-      [style.normalPage]: true,
-      [style.firstPage]: isFirstPage,
-    })}
-    itemScope
-    {...props}
-  >
-    {items.map(({ content: BlogPostContent }) => (
-      <BlogPostItem
-        key={BlogPostContent.metadata.permalink}
-        frontMatter={BlogPostContent.frontMatter}
-        assets={BlogPostContent.assets}
-        metadata={BlogPostContent.metadata}
-        truncated={BlogPostContent.metadata.truncated}
-        {...{ delayMethod, delayTime, useIntersectionObserver }}
-      >
-        <BlogPostContent />
-      </BlogPostItem>
-    ))}
-  </main>
-);
+}) => {
+  let posts = items.map(({ content: BlogPostContent }) => (
+    <BlogPostItem
+      key={BlogPostContent.metadata.permalink}
+      frontMatter={BlogPostContent.frontMatter}
+      assets={BlogPostContent.assets}
+      metadata={BlogPostContent.metadata}
+      truncated={BlogPostContent.metadata.truncated}
+      {...{ delayMethod, delayTime, useIntersectionObserver }}
+    >
+      <BlogPostContent />
+    </BlogPostItem>
+  ));
+
+  const max = (pickedPosts.length > 10 ? pickedPosts.length - 10 : pickedPosts.length);
+  const endIdx = isFirstPage
+    ? 2 * Math.floor(max / 2)
+    : 3 * Math.floor(max / 3);
+  const { pathname } = useLocation();
+
+  if (!pathname.includes('/tags/')) {
+    posts.splice(
+      1,
+      0,
+      (isFirstPage ? pickedPosts : shuffle(pickedPosts)).slice(0, endIdx).map((info) => (
+        <BlogPostItem
+          className={style.pickedPosts}
+          key={info.title}
+          frontMatter={info}
+          assets={undefined}
+          metadata={info}
+          truncated={info.summary}
+          {...{ delayMethod, delayTime, useIntersectionObserver }}
+        >
+          <div className={style.featuredPost}>
+            {translate({
+              id: 'blog.picked.posts.component.title',
+              message: 'Featured',
+            })}
+          </div>
+          <p>{info.summary}</p>
+        </BlogPostItem>
+      )),
+    );
+
+    if (!isFirstPage) {
+      posts = shuffle(posts);
+    }
+  }
+
+  return (
+    <main
+      className={clsx({
+        [style.normalPage]: true,
+        [style.firstPage]: isFirstPage,
+      })}
+      itemScope
+      {...props}
+    >
+      {posts}
+    </main>
+  );
+};
 
 export default trackWindowScroll(BlogPosts);
diff --git a/blog/src/theme/BlogPosts/style.module.scss b/blog/src/theme/BlogPosts/style.module.scss
@@ -1,7 +1,61 @@
-/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity, scss/at-extend-no-missing-placeholder */
 @import "../../css/util";
 
-main.normalPage {
+@mixin bigSize {
+  grid-column: 1 / 3;
+  display: flex;
+  filter: none;
+  margin-top: 0;
+
+  & > a {
+    border-radius: 1rem;
+    width: 601px;
+    height: auto;
+    flex-shrink: 0;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .content {
+    padding: 1rem 2rem;
+
+    header {
+      &::before {
+        content: "LATEST POST";
+        font-size: 0.7rem;
+        font-weight: 800;
+      }
+
+      & .tags > a {
+        font-size: 0.8rem;
+      }
+
+      h2 {
+        font-size: 2.55rem;
+      }
+
+      p {
+        font-size: 1.2rem;
+      }
+    }
+  }
+
+  &:hover {
+    border-color: transparent;
+    transform: none;
+
+    & > a {
+      img {
+        transform: scale3d(1.2, 1.2, 1) rotate3d(0, 0, 1, -2deg);
+      }
+    }
+  }
+}
+
+.normalPage {
   width: fit-content;
   display: grid;
   grid-template-columns: repeat(3, 430px);
@@ -144,7 +198,7 @@ main.normalPage {
   main.firstPage {
     grid-template-columns: repeat(2, 645px);
 
-    article {
+    > article {
       & > a {
         img {
           width: 100%;
@@ -156,68 +210,72 @@ main.normalPage {
       }
 
       &:first-of-type {
-        grid-column: 1 / 3;
-        display: flex;
-        filter: none;
-        margin-top: 0;
-        margin-bottom: 5rem;
-
-        & > a {
-          border-radius: 1rem;
-          width: 601px;
-          height: auto;
-          flex-shrink: 0;
-
-          img {
-            height: 100%;
-            width: 100%;
-          }
-        }
+        @include bigSize;
+      }
+    }
+  }
+}
 
-        .content {
-          padding: 1rem 2rem;
+article.pickedPosts {
+  $bg-color: #f5f5f7;
+
+  border-color: $bg-color;
+  grid-column: initial;
+  position: relative;
+
+  & .featuredPost {
+    background-color: $bg-color;
+    display: block;
+    width: fit-content;
+    padding: 2px 10px 4px;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 0.8rem;
+    font-size: 0.666rem;
+    color: #1d1d1f;
+    z-index: 1;
+    transition: all 0.3s ease-in-out;
+  }
 
-          header {
-            &::before {
-              content: "LATEST POST";
-              font-size: 0.7rem;
-              font-weight: 800;
-            }
+  &:hover {
+    border-color: var(--ifm-color-primary);
 
-            & .tags > a {
-              font-size: 0.8rem;
-            }
+    & .featuredPost {
+      background-color: var(--ifm-color-primary);
+      color: #fff;
+    }
+  }
 
-            h2 {
-              font-size: 2.55rem;
-            }
+  &:last-of-type:nth-of-type(2n + 1) {
+    @include bigSize;
 
-            p {
-              font-size: 1.2rem;
-            }
-          }
-        }
+    border-color: transparent;
+    margin: 2rem 0 5rem;
 
-        &:hover {
-          border-color: transparent;
-          transform: none;
-
-          & > a {
-            img {
-              transform: scale3d(1.2, 1.2, 1) rotate3d(0, 0, 1, -2deg);
-            }
-          }
+    .content {
+      header {
+        &::before {
+          content: "Featured Post";
         }
       }
     }
   }
 }
 
 @include respond-below(sm) {
-  main.normalPage {
+  %mobile-posts {
     display: flex;
     flex-direction: column;
     width: 100%;
     margin: 0;
   }
+
+  main.normalPage {
+    @extend %mobile-posts;
+
+    article {
+      margin: 0 0 2.5rem;
+    }
+  }
 }
diff --git a/blog/zh/config/picked-posts.json b/blog/zh/config/picked-posts.json
@@ -0,0 +1,5 @@
+[
+    "blog/zh/blog/2022/07/29/release-apache-apisix-2.15.md",
+    "blog/zh/blog/2022/07/22/how-is-google-cloud-tau-t2a-performing.md",
+    "blog/zh/blog/2022/07/22/exploration-of-apisix-in-api-and-microservices.md"
+]
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "scripts": {
     "sync-doc": "yarn workspace scripts sync",
     "generate-repos-info": "yarn workspace scripts generate-repos-info",
+    "generate-picked-posts": "yarn workspace scripts generate-picked-posts",
     "update-sitemap": "yarn workspace scripts update-sitemap",
     "start:doc": "yarn workspace doc start",
     "start:website": "yarn workspace website start",
@@ -34,7 +35,7 @@
     "serve:blog:zh": "yarn workspace blog docusaurus serve zh",
     "serve:blog:en": "yarn workspace blog docusaurus serve en",
     "prepare": "husky install",
-    "prepare-data": "yarn sync-doc && yarn generate-repos-info"
+    "prepare-data": "yarn sync-doc && yarn generate-repos-info && yarn generate-picked-posts"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.17.0",