feat(475): Redesign blog page

docusaurus.config.ts

@@ -220,7 +220,7 @@ export default {
         routeBasePath: "blog",
         include: ["**/*.{md,mdx}"],
         exclude: ["**/_*.{js,jsx,ts,tsx,md,mdx}", "**/_*/**", "**/*.test.{js,jsx,ts,tsx}", "**/__tests__/**"],
-        postsPerPage: 10,
+        postsPerPage: "ALL",
         blogListComponent: "@theme/BlogListPage",
         blogPostComponent: "@theme/BlogPostPage",
         blogTagsListComponent: "@theme/BlogTagsListPage",

package.json

@@ -45,6 +45,7 @@
     "react-hot-toast": "^2.4.1",
     "react-on-screen": "^2.1.1",
     "react-platform-js": "^0.0.1",
+    "react-tabs-scrollable": "^2.0.7",
     "tailwindcss": "^3.4.4"
   },
   "devDependencies": {

src/css/custom.css

@@ -681,3 +681,28 @@ span.token.tag.script.language-javascript {
 .pagination-nav a:nth-child(2) {
   @apply justify-end;
 }
+
+.rts___tab {
+  border: none !important;
+  border-radius: 0px !important;
+}
+
+.rts___btn {
+  background: transparent !important;
+  border: none !important;
+}
+
+.rts___tab___selected {
+  border-bottom: 2px solid black !important;
+  background: transparent !important;
+  color: black !important;
+  box-shadow: none !important;
+}
+
+.rts___svg___icon:hover {
+  stroke: black !important;
+}
+
+button[disabled] {
+  display: none !important;
+}

src/theme/BlogLayout/categories.tsx

@@ -0,0 +1,33 @@
+import {useState} from "react"
+import {Tab, Tabs} from "react-tabs-scrollable"
+import "react-tabs-scrollable/dist/rts.css"
+
+export default function Categories(props: any): JSX.Element {
+  const {tags, activeTag, setActiveTag} = props
+
+  // define state with initial value to let the tabs start with that value
+  const [activeTab, setActiveTab] = useState(0)
+
+  // define a onClick function to bind the value on tab click
+  const onTabClick = (e, index) => {
+    setActiveTab(index)
+    setActiveTag(tags[index])
+  }
+
+  return (
+    <>
+      <Tabs
+        hideNavBtnsOnMobile={false}
+        tabsContainerStyle={{border: "none", background: "transparent"}}
+        className="bg-transparent border-none "
+        activeTab={activeTab}
+        onTabClick={onTabClick}
+      >
+        {/* generating an array to loop through it  */}
+        {tags.map((name) => (
+          <Tab key={name}>{name}</Tab>
+        ))}
+      </Tabs>
+    </>
+  )
+}

src/theme/BlogLayout/customblogitem.tsx

@@ -0,0 +1,44 @@
+import {dateformatter, limitApplier} from "@site/src/utils"
+
+export default function BlogItemCustom(props) {
+  const {title, authors, ismobile, main, link, image, date} = props
+
+  return (
+    title && (
+      <div
+        className="p-2"
+        style={{borderRadius: 20, border: ismobile && !main ? "1px solid var(--ifm-hr-background-color)" : "none"}}
+      >
+        {(!ismobile || main) && (
+          <a href={link}>
+            <img loading={main ? "eager" : "lazy"} src={image} />
+          </a>
+        )}
+        <p className="opacity-60">{dateformatter(date)}</p>
+        <BlogIntro {...props} />
+        <div className="flex flex-row gap-6">{authors?.map((info) => <AuthorInfo {...info} />)}</div>
+      </div>
+    )
+  )
+}
+
+export const AuthorInfo = ({url, image_url, name}) => (
+  <a href={url}>
+    <div className="flex flex-row  gap-2">
+      <img src={image_url} className="w-[30px] h-[30px] rounded-full" />
+      <p className="font-extrabold">{name}</p>
+    </div>
+  </a>
+)
+
+export const BlogIntro = ({title, description, main, link}) => {
+  const [ttlLimit, descLimit] = main ? [50, 150] : [48, 70]
+  return (
+    <>
+      <a href={link}>
+        <h3>{limitApplier(title, ttlLimit)}</h3>
+      </a>
+      <p>{limitApplier(description, descLimit)}</p>
+    </>
+  )
+}

src/theme/BlogLayout/featured.tsx

@@ -0,0 +1,22 @@
+import {AuthorInfo, BlogIntro} from "./customblogitem"
+
+export default function Featured({items}) {
+  return (
+    <div
+      className="w-full flex flex-col flex-nowrap gap-4 p-2 px-5"
+      style={{borderLeft: "1px solid var(--ifm-hr-background-color)"}}
+    >
+      <h2>Featured Posts</h2>
+      {items?.slice(0, 6).map((item) => <FeaturedItem {...item} />)}
+    </div>
+  )
+}
+
+const FeaturedItem = (props) => {
+  return (
+    <div>
+      <AuthorInfo {...props.authors[0]} />
+      <BlogIntro {...props} />
+    </div>
+  )
+}

src/theme/BlogLayout/index.tsx

@@ -1,29 +1,166 @@
-import React from "react"
+import React, {useEffect, useState} from "react"
 import clsx from "clsx"
 import Layout from "@theme/Layout"
 import BlogRecentPosts from "../BlogRecentPosts"
 import type {Props} from "@theme/BlogLayout"
+import Categories from "./categories"
+import LinkButton from "@site/src/components/shared/LinkButton"
+import {Theme} from "@site/src/constants"
+import Featured from "./featured"
+import BlogItemCustom from "./customblogitem"
+import BrowserOnly from "@docusaurus/BrowserOnly"
 
 export default function BlogLayout(props: Props): JSX.Element {
   const {sidebar, toc, children, ...layoutProps} = props
   const hasSidebar = sidebar && sidebar.items.length > 0
+  const [tags, setTags] = useState([])
+  const [activeTag, setActiveTag] = useState("All")
+  const [mainPage, setMainPage] = useState(false)
+  const [loadmore, setloadmore] = useState(false)
+  const [ismobile, setismobile] = useState(false)
+  const [allBlogs, setAllBlogs] = useState({})
+  const [featuredBlogsState, setFeaturedBlogs] = useState([])
+
+  useEffect(() => {
+    if (!children[0].props?.items) {
+      //return if its not the home page
+      return
+    } else {
+      setMainPage(true)
+    }
+
+    //initialize the setup
+    tagsSetup(children[0].props.items)
+  }, [children])
+
+  // code to maintain responsiveness
+
+  const updateMobileState = (setismobile) => {
+    setismobile(window.innerWidth <= 650)
+  }
+
+  // end mobile control
+
+  //this one is often called in parallel for each blog
+  const blogProcessor = async (blog, tagOccurrences) => {
+    return new Promise((resolve) => {
+      //now the logic
+      let tagsOfThis = blog.frontMatter.tags || []
+      let isFeatured = false
+      let polishedBlog = blogInfoGather(blog)
+
+      tagsOfThis.forEach((tag) => {
+        if (tag === "Featured") {
+          //save as featured
+          isFeatured = true
+        } else {
+          // good luck figuring this out :)
+          tagOccurrences[tag] = {
+            occurrences: tagOccurrences[tag]?.occurrences + 1 || 1,
+            blogs: [polishedBlog, ...(tagOccurrences[tag]?.blogs || [])],
+          }
+        }
+      })
+
+      //now, add it to the 'All' tag
+      tagOccurrences["All"] = {
+        occurrences: tagOccurrences["All"]?.occurrences + 1 || 1,
+        blogs: [polishedBlog, ...(tagOccurrences["All"]?.blogs || [])],
+      }
+
+      resolve(isFeatured ? polishedBlog : undefined)
+    })
+  }
+
+  //this is the parent function
+  const tagsSetup = async (allblogs) => {
+    //get all the tags first
+    // let tagOccurrences = {tag: {occurrences: 5, blogs: []}, }
+    let tagOccurrences: any = {}
+
+    //process each blog in parallel, it also reaturns the featured posts
+    let featuredBlogs = await Promise.all(allblogs.map(({content}) => blogProcessor(content, tagOccurrences)))
+    //unfortunately, it also sends undefineds
+    featuredBlogs = featuredBlogs.filter((b) => b !== undefined)
+
+    //now update the states
+
+    setTags(["All", ...Object.keys(tagOccurrences)])
+    setAllBlogs(tagOccurrences)
+    setFeaturedBlogs(featuredBlogs)
+  }
+
+  //this one extracts useful data from the frontmatter jargon
+  const blogInfoGather = (rawInfo) => {
+    return {...rawInfo.frontMatter, date: rawInfo.metadata.date, link: rawInfo.metadata.permalink}
+  }
+
+  const MobileStateUpdater = ({ismobile, setismobile}) => (
+    <BrowserOnly fallback={<div></div>}>
+      {() => {
+        useEffect(() => {
+          if (!window) {
+            return
+          }
+
+          window.addEventListener("resize", () => updateMobileState(setismobile))
+          updateMobileState(setismobile)
+        }, [window])
+        return <div></div>
+      }}
+    </BrowserOnly>
+  )
+  //
 
   return (
     <Layout {...layoutProps}>
-      <div className="container my-8">
-        <div className="row justify-center">
-          <main
-            className={clsx("col", {
-              "col--7": hasSidebar,
-              "col--9 col--offset-1": !hasSidebar,
-            })}
+      {mainPage ? (
+        <>
+          <div
+            className="container my-6 grid-cols grid gap-3"
+            style={{gridTemplateColumns: ismobile ? "100%" : "70% 30%"}}
           >
-            {children}
-          </main>
-          {toc && <div className="col col--2">{toc}</div>}
-        </div>
-      </div>
-      <BlogRecentPosts sidebar={sidebar} />
+            <div className="row grid grid-cols-1 overflow-clip justify-center p-3">
+              <Categories setActiveTag={setActiveTag} tags={tags} />
+              <MobileStateUpdater ismobile={ismobile} setismobile={setismobile} />
+              <main className="w-[100%] grid justify-items-center p-4">
+                <BlogItemCustom {...{...allBlogs[activeTag]?.blogs[0], ismobile, main: true}} />
+                <hr className="w-full" />
+                <div
+                  className="grid my-3 justify-center gap-4 "
+                  style={{gridTemplateColumns: `repeat(${ismobile ? 1 : 3}, 1fr)`}}
+                >
+                  {allBlogs[activeTag]?.blogs.slice(1, 7).map((blog) => <BlogItemCustom {...{...blog, ismobile}} />)}
+                  {loadmore &&
+                    allBlogs[activeTag]?.blogs.slice(7).map((blog) => <BlogItemCustom {...{...blog, ismobile}} />)}
+                </div>
+                {!loadmore && allBlogs[activeTag]?.blogs.length > 6 && (
+                  <LinkButton title="Load More" theme={Theme.Light} width="small" onClick={() => setloadmore(true)} />
+                )}
+              </main>
+              {toc && <div className="col col--2">{toc}</div>}
+            </div>
+            {!ismobile && <Featured items={featuredBlogsState} />}
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="container my-8">
+            <div className="row justify-center">
+              <main
+                className={clsx("col", {
+                  "col--7": hasSidebar,
+                  "col--9 col--offset-1": !hasSidebar,
+                })}
+              >
+                {children}
+              </main>
+              {toc && <div className="col col--2">{toc}</div>}
+            </div>
+          </div>
+          <BlogRecentPosts sidebar={sidebar} />
+        </>
+      )}
     </Layout>
   )
 }

src/utils/index.ts

@@ -33,3 +33,20 @@ export const isValidURL = (url: string) => {
     return false
   }
 }
+
+export const limitApplier = (string: string, limit: number) => {
+  if (string?.length > limit) {
+    return string.substr(0, limit) + "..."
+  } else {
+    return string
+  }
+}
+
+export const dateformatter = (date: string) => {
+  let dateobj = new Date(date)
+  return dateobj.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  })
+}