From d8f697349bab89898b74587180e0f24cdc42af90 Mon Sep 17 00:00:00 2001 From: "Serafin O. Gargantiel III" Date: Sun, 21 Jun 2026 18:13:54 -0500 Subject: [PATCH 1/6] [docs]feature: refactor blog layout ui --- home/package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/home/package.json b/home/package.json index 358ee16bcfa..f25eaaa8b93 100644 --- a/home/package.json +++ b/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", From fec9c489c2c5c97f3396454bf46ad5a46698ffa6 Mon Sep 17 00:00:00 2001 From: "Serafin O. Gargantiel III" Date: Mon, 22 Jun 2026 01:43:24 -0500 Subject: [PATCH 2/6] [docs]feature: refactor blog ui to card grid --- home/src/theme/BlogPostItems/index.js | 91 +++++++++++++++++++++++++ home/src/theme/BlogPostItems/styles.css | 80 ++++++++++++++++++++++ 2 files changed, 171 insertions(+) create mode 100644 home/src/theme/BlogPostItems/index.js create mode 100644 home/src/theme/BlogPostItems/styles.css diff --git a/home/src/theme/BlogPostItems/index.js b/home/src/theme/BlogPostItems/index.js new file mode 100644 index 00000000000..2387d61a933 --- /dev/null +++ b/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}) => ( +// +// +// +// +// +// ))} +// +// ); +// } +//_________________________________________________________________ + + +// _________________________________________________________________ +// REFACTORED BLOG SITE +// _________________________________________________________________ + +// 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 ( +
+
+
+ {tags.slice(0, 2).map((tag) => ( + + {tag.label} + + ))} +
+ + {title} + +

{description}

+
+ {formattedDate} + {authors.length > 0 && ( + · {authors[0].name} + )} +
+
+
+ ); +} + +// 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 ( +
+ {items.map(({content: BlogPostContent}) => ( + + + + ))} +
+ ); +} + diff --git a/home/src/theme/BlogPostItems/styles.css b/home/src/theme/BlogPostItems/styles.css new file mode 100644 index 00000000000..bbf9f0133ec --- /dev/null +++ b/home/src/theme/BlogPostItems/styles.css @@ -0,0 +1,80 @@ +.blog-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + padding: 2rem 0; +} + +.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; +} + +@media (max-width: 996px) { + .blog-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + .blog-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file From af533c8d9ae0f220fcea966801d57f1d6cb6e5be Mon Sep 17 00:00:00 2001 From: "Serafin O. Gargantiel III" Date: Mon, 22 Jun 2026 01:43:50 -0500 Subject: [PATCH 3/6] [docs]feature: refactor blog ui to card grid --- home/src/theme/BlogPostItems/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/home/src/theme/BlogPostItems/index.js b/home/src/theme/BlogPostItems/index.js index 2387d61a933..73ee74e1e6e 100644 --- a/home/src/theme/BlogPostItems/index.js +++ b/home/src/theme/BlogPostItems/index.js @@ -29,7 +29,7 @@ import './styles.css' // _________________________________________________________________ -// REFACTORED BLOG SITE +// REFACTORED BLOG SITE - Serafin O. Gargantiel III. // _________________________________________________________________ // Renders a blog card out of data from a blog post From 3abef7a9429656675ddd82ebe4773c5ae80954a0 Mon Sep 17 00:00:00 2001 From: "Serafin O. Gargantiel III" Date: Mon, 22 Jun 2026 01:45:18 -0500 Subject: [PATCH 4/6] [docs]feature: refactor blog ui to card grid --- home/src/theme/BlogPostItems/styles.css | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/home/src/theme/BlogPostItems/styles.css b/home/src/theme/BlogPostItems/styles.css index bbf9f0133ec..daeccd69974 100644 --- a/home/src/theme/BlogPostItems/styles.css +++ b/home/src/theme/BlogPostItems/styles.css @@ -1,10 +1,16 @@ +/* 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; @@ -12,24 +18,20 @@ 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; @@ -38,7 +40,6 @@ border-radius: 999px; font-weight: 500; } - .blog-card__title { font-size: 1.1rem; font-weight: 700; @@ -46,11 +47,9 @@ text-decoration: none; line-height: 1.4; } - .blog-card__title:hover { color: #3b82f6; } - .blog-card__description { font-size: 0.9rem; color: #6b7280; @@ -60,21 +59,24 @@ -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; } -} \ No newline at end of file +} +/* _______________________________________________________ */ \ No newline at end of file From 68b02fffd6fd7b649c19ab920cba2841a33a5301 Mon Sep 17 00:00:00 2001 From: "Serafin O. Gargantiel III" Date: Sun, 28 Jun 2026 17:04:52 -0500 Subject: [PATCH 5/6] Refactored site --- home/src/pages/index.js | 54 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/home/src/pages/index.js b/home/src/pages/index.js index bdc76665ee5..27bfa8a4516 100644 --- a/home/src/pages/index.js +++ b/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' +// _____________________________________________________________________ + + +// 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 */} + {/* Hero Section */} + {/* --------------------------------------------------------- */} + + {/* Banners with Site Title */}

+ + {/* Image Logo */} {'HertzBeat

+ + {/* Slogan Sub-Title */}

slogan

+ + {/* QuickStart Button */}
+ {/* --------------------------------------------------------- */}
{/* Features Section */} {features && features.length > 0 && (
+ + {/* Feature Cards */}
{features.map((props, idx) => ( @@ -64,12 +94,15 @@ function Home() { ))}
+
)} - {/* Swiper Carousel Section */} + {/* Swiper Carousel Section - Helps Create Image Slideshows for HertzBeat*/}
+ + {/* Swiper - Autoplays Image Slideshow */} + + {/* Each Image Presented in the Swiper */} Advanced Features +
+
) + // ________________________________________________________________________________________________ } 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)) { @@ -130,4 +173,5 @@ function autoRedirect() { window.location.href = '/zh-cn' } } + } From bbf69c6ba597946706636e88a4a1423df02005ae Mon Sep 17 00:00:00 2001 From: "Serafin O. Gargantiel III" Date: Sun, 28 Jun 2026 17:16:12 -0500 Subject: [PATCH 6/6] Refactored site --- home/src/pages/index.js | 4 ++-- home/src/pages/styles.module.css | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/home/src/pages/index.js b/home/src/pages/index.js index 27bfa8a4516..5cf00a2ebcf 100644 --- a/home/src/pages/index.js +++ b/home/src/pages/index.js @@ -27,7 +27,7 @@ import { features } from '../constants' // _____________________________________________________________________ -// +//Home() - A refactored UI blog design for the site's home page function Home() { const context = useDocusaurusContext() //Access site's global configuration (docusarus.config.js) @@ -173,5 +173,5 @@ function autoRedirect() { window.location.href = '/zh-cn' } } - + } diff --git a/home/src/pages/styles.module.css b/home/src/pages/styles.module.css index ec05956c26c..38405e19485 100644 --- a/home/src/pages/styles.module.css +++ b/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.