Copilot commented on code in PR #4182:
URL: https://github.com/apache/hertzbeat/pull/4182#discussion_r3544536718
##########
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>
+ )}
Review Comment:
The author rendering assumes `authors[0]` is always an object with a `name`
field. Depending on how author metadata is configured, it may be missing or
represented differently; this can cause a crash when rendering the blog list.
##########
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.
+// _________________________________________________________________
Review Comment:
Avoid personal attribution banners in source files; they add noise to diffs
and aren’t typically maintained. Prefer a short, neutral comment describing the
purpose of the theme override (or remove entirely).
##########
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
Review Comment:
Typo in comment: "Rending" → "Rendering".
##########
home/src/pages/index.js:
##########
@@ -1,3 +1,9 @@
+// _____________________________________________________________________
+// Serafin O. Gargantiel III - Contribution
+// Refactored UI Design
+// _____________________________________________________________________
+
+// Imports for React and Docusaurus Resources
Review Comment:
Please avoid adding personal attribution/banner comments at the top of
source files; they add noise and aren’t usually kept in this codebase. Keep the
file header focused on imports/module purpose.
##########
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;
+}
Review Comment:
These hard-coded light-theme colors (e.g., `#fff`, `#111827`, `#e5e7eb`)
won’t adapt to Docusaurus/Infima theming (notably dark mode). Prefer Infima CSS
variables for surfaces/borders/text so the cards stay readable across themes.
##########
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;
Review Comment:
`useBlogPost()` metadata may not always include `authors`/`tags` arrays
(many posts use single `author:` front matter), so destructuring without
defaults can lead to runtime errors later (e.g., `authors.length`,
`tags.slice`). Default these fields to empty arrays when destructuring.
##########
home/src/pages/index.js:
##########
@@ -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)
Review Comment:
Typo in comment filename: "docusarus.config.js" → "docusaurus.config.js".
##########
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>
+// ))}
+// </>
+// );
+// }
+//_________________________________________________________________
Review Comment:
Large blocks of commented-out code (the default implementation) make the
override harder to read/maintain. It’s better to delete the old code and keep
only a brief note about what’s being overridden.
##########
home/src/pages/index.js:
##########
@@ -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 */}
Review Comment:
Typo in comment: "Optization" → "Optimization".
##########
home/src/pages/index.js:
##########
@@ -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
Review Comment:
`global` is not a standard browser global; referencing it can throw a
`ReferenceError` in the client bundle if it isn’t polyfilled. Use `globalThis`
(or just `navigator`) for reliable access to the browser language.
##########
home/src/pages/index.js:
##########
@@ -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)) {
Review Comment:
`lang.toLowerCase().indexOf('zh') > 0` fails for locales like `zh-tw` (index
is 0), so users with Chinese locales may not be redirected as intended. Use
`startsWith('zh')` instead.
##########
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",
Review Comment:
Switching the Docusaurus packages from pinned versions to caret ranges can
introduce unexpected upgrades and version skew. Prefer pinning all
`@docusaurus/*` packages to the same exact version, and make sure the
corresponding `pnpm-lock.yaml` is updated in the PR so installs/builds are
reproducible.
##########
home/src/pages/index.js:
##########
@@ -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);
Review Comment:
This `console.log` will run for Chinese-locale users in production and adds
noisy client logs. It should be removed or guarded behind a non-production
check.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
