[docs] feature: refactor blog layout ui to card grid

home/package.json

@@ -19,14 +19,14 @@
     "github-avatar": "node github-avatar.js"
   },
   "dependencies": {
-    "@docusaurus/core": "3.9.2",
-    "@docusaurus/plugin-client-redirects": "3.9.2",
-    "@docusaurus/plugin-pwa": "3.9.2",
-    "@docusaurus/plugin-sitemap": "^3.9.2",
-    "@docusaurus/preset-classic": "3.9.2",
-    "@docusaurus/remark-plugin-npm2yarn": "3.9.2",
-    "@docusaurus/theme-live-codeblock": "3.9.2",
-    "@docusaurus/theme-search-algolia": "3.9.2",
+    "@docusaurus/core": "^3.10.1",
+    "@docusaurus/plugin-client-redirects": "^3.10.1",
+    "@docusaurus/plugin-pwa": "^3.10.1",
+    "@docusaurus/plugin-sitemap": "^3.10.1",
+    "@docusaurus/preset-classic": "^3.10.1",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.10.1",
+    "@docusaurus/theme-live-codeblock": "^3.10.1",
+    "@docusaurus/theme-search-algolia": "^3.10.1",
     "@douyinfe/semi-ui": "2.24.1",
     "@mdx-js/react": "^3.1.0",
     "@svgr/webpack": "^8.1.0",

home/src/pages/index.js

@@ -1,3 +1,9 @@
+// _____________________________________________________________________
+// Serafin O. Gargantiel III - Contribution
+// Refactored UI Design
+// _____________________________________________________________________
+
+// Imports for React and Docusaurus Resources
 import React, { useEffect } from 'react'
 import clsx from 'clsx'
 import Layout from '@theme/Layout'
@@ -6,40 +12,61 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import Translate from '@docusaurus/Translate'
 
+// Import of swiper, the carousel/slider library
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Autoplay } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 
+// Custom components and data
 import Feature from './components/Feature'
 import StructuredData from '../components/StructuredData'
-
 import styles from './styles.module.css'
 import { features } from '../constants'
 
+// _____________________________________________________________________
+
+
+//Home() - A refactored UI blog design for the site's home page
 function Home() {
-  const context = useDocusaurusContext()
-  useEffect(() => autoRedirect(), [])
-  const { siteConfig = {} } = context
+
+  const context = useDocusaurusContext() //Access site's global configuration (docusarus.config.js)
+  useEffect(() => autoRedirect(), [])    //Calls autoRedirect function when page loads
+  const { siteConfig = {} } = context   //Pulls the site's configuration from the context
+
+  // Return UI/UX Design
+  // ________________________________________________________________________________________________
   return (
       <>
+        {/* Injects SEO metadata into the page head */}
+        {/* Search Engine Optization */}
         <StructuredData />
         <Layout
             title={`${siteConfig.title} · ${siteConfig.tagline}`}
             description={`${siteConfig.tagline}`}
         >
+
           {/* Hero Section */}
+          {/* --------------------------------------------------------- */}
+
+          {/* Banners with Site Title */}
           <header className={clsx('hero--primary', styles.heroBanner)}>
             <div className="container">
               <h1 className="hero__title">
+
+                {/* Image Logo */}
                 <img
                     src={'/img/hertzbeat-brand.svg'}
                     alt={'HertzBeat Logo'}
                 />
               </h1>
+
+              {/* Slogan Sub-Title */}
               <p className="hero__subtitle">
                 <Translate>slogan</Translate>
               </p>
+
+              {/* QuickStart Button */}
               <div className={styles.buttons}>
                 <Link
                     to="/docs/"
@@ -52,24 +79,30 @@ function Home() {
               </div>
             </div>
           </header>
+          {/* --------------------------------------------------------- */}
 
           <main>
             {/* Features Section */}
             {features && features.length > 0 && (
                 <section className={styles.featuresSection}>
+
+                  {/* Feature Cards */}
                   <div className="container">
                     <div className={styles.featuresRow}>
                       {features.map((props, idx) => (
                           <Feature key={idx} {...props} index={idx} />
                       ))}
                     </div>
                   </div>
+
                 </section>
             )}
 
-            {/* Swiper Carousel Section */}
+            {/* Swiper Carousel Section - Helps Create Image Slideshows for HertzBeat*/}
             <div className={styles.swiperContainer}>
               <div className={styles.swiperInner}>
+
+                {/* Swiper - Autoplays Image Slideshow */}
                 <Swiper
                     modules={[Autoplay]}
                     grabCursor
@@ -80,6 +113,8 @@ function Home() {
                       disableOnInteraction: false,
                     }}
                 >
+
+                  {/* Each Image Presented in the Swiper */}
                   <SwiperSlide>
                     <img
                         src={useBaseUrl('/img/docs/hertzbeat-arch.png')}
@@ -110,24 +145,33 @@ function Home() {
                         alt="Advanced Features"
                     />
                   </SwiperSlide>
+
                 </Swiper>
               </div>
             </div>
+
           </main>
         </Layout>
       </>
   )
+  // ________________________________________________________________________________________________
 }
 
 export default Home
 
+// AutoRedirect() - Detects the user's browser language on page load
 function autoRedirect() {
+
+  // User Language
   let lang = global.navigator?.language || navigator?.userLanguage
+
+  // If language is chinese, redirect to "/zh-cn" version of the site
   if (lang != null && (lang.toLowerCase() === 'zh-cn' || lang.toLowerCase().indexOf('zh') > 0)) {
     console.log(window.location.pathname);
     if (sessionStorage.getItem('auto_detect_redirect') !== 'true' && !window.location.pathname.startsWith('/zh-cn', false)) {
       sessionStorage.setItem('auto_detect_redirect', 'true')
       window.location.href = '/zh-cn'
     }
   }
+
 }

home/src/pages/styles.module.css

@@ -1,5 +1,4 @@
 /* stylelint-disable docusaurus/copyright-header */
-
 /**
  * CSS files with the .module.css suffix will be treated as CSS modules
  * and scoped locally.

home/src/theme/BlogPostItems/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import {BlogPostProvider, useBlogPost} from '@docusaurus/plugin-content-blog/client';
+import Link from '@docusaurus/Link';
+import './styles.css'
+
+// import BlogPostItem from '@theme/BlogPostItem';
+// This is the default component that renders blog posts one by 
+// one in a vertical list
+//_________________________________________________________________
+// export default function BlogPostItems({
+//   items,
+//   component: BlogPostItemComponent = BlogPostItem,
+// }) {
+//   return (
+//     <>
+//       {items.map(({content: BlogPostContent}) => (
+//         <BlogPostProvider
+//           key={BlogPostContent.metadata.permalink}
+//           content={BlogPostContent}>
+//           <BlogPostItemComponent>
+//             <BlogPostContent />
+//           </BlogPostItemComponent>
+//         </BlogPostProvider>
+//       ))}
+//     </>
+//   );
+// }
+//_________________________________________________________________
+
+
+// _________________________________________________________________
+// REFACTORED BLOG SITE - Serafin O. Gargantiel III.
+// _________________________________________________________________
+
+// Renders a blog card out of data from a blog post
+function BlogCard() {
+
+  // Docusaurus Hook giving you access to the current post's metadata
+  // formats it for BlogCard rendering
+  const {metadata} = useBlogPost();
+  const {permalink, title, date, authors, description, tags} = metadata;
+  const formattedDate = new Date(date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  // Rending a BlogCard
+  return (
+    <div className="blog-card">
+      <div className="blog-card__content">
+        <div className="blog-card__tags">
+          {tags.slice(0, 2).map((tag) => (
+            <span key={tag.label} className="blog-card__tag">
+              {tag.label}
+            </span>
+          ))}
+        </div>
+        <Link to={permalink} className="blog-card__title">
+          {title}
+        </Link>
+        <p className="blog-card__description">{description}</p>
+        <div className="blog-card__footer">
+          <span className="blog-card__date">{formattedDate}</span>
+          {authors.length > 0 && (
+            <span className="blog-card__author">· {authors[0].name}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Main Component - Access each blog posts in items and renders each one
+// a BlogCard() as defined in the top. The className, "blog-grid", is a
+// column card grid.
+export default function BlogPostItems({items}) {
+  return (
+    <div className="blog-grid">
+      {items.map(({content: BlogPostContent}) => (
+        <BlogPostProvider
+          // Rendering BlogCard()
+          key={BlogPostContent.metadata.permalink}
+          content={BlogPostContent}>
+          <BlogCard />
+        </BlogPostProvider>
+      ))}
+    </div>
+  );
+}
+

home/src/theme/BlogPostItems/styles.css

@@ -0,0 +1,82 @@
+/* Blog Grid Styling */
+/* _______________________________________________________ */
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  padding: 2rem 0;
+}
+/* _______________________________________________________ */
+
+
+/* Blog Card Styling */
+/* _______________________________________________________ */
+.blog-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  overflow: hidden;
+  transition: box-shadow 0.2s ease;
+  background: #fff;
+}
+.blog-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+.blog-card__content {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.blog-card__tags {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.blog-card__tag {
+  background: #eff6ff;
+  color: #3b82f6;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-weight: 500;
+}
+.blog-card__title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #111827;
+  text-decoration: none;
+  line-height: 1.4;
+}
+.blog-card__title:hover {
+  color: #3b82f6;
+}
+.blog-card__description {
+  font-size: 0.9rem;
+  color: #6b7280;
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.blog-card__footer {
+  font-size: 0.8rem;
+  color: #9ca3af;
+  margin-top: auto;
+}
+/* _______________________________________________________ */
+
+
+/* Mobile Friendly Styling */
+/* _______________________________________________________ */
+@media (max-width: 996px) {
+  .blog-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .blog-grid {
+    grid-template-columns: 1fr;
+  }
+}
+/* _______________________________________________________ */