Copilot commented on code in PR #60:
URL:
https://github.com/apache/incubator-kie-website/pull/60#discussion_r3802708652
##########
src/theme/BlogSidebar/Content/index.tsx:
##########
@@ -0,0 +1,79 @@
+/**
+ * Swizzled from @docusaurus/theme-classic to make the year groups collapsible.
+ *
+ * Upstream renders each year as a plain `<div role="group">`, which is fine
for
+ * a handful of posts and unusable once the historical Drools/jBPM/OptaPlanner
+ * archives are in — the sidebar becomes a single scroll of hundreds of titles.
+ * Same grouping, wrapped in `<details>` so a reader can collapse a year.
+ *
+ * Open by default: the most recent year, plus whichever year contains the post
+ * currently being read, so you never land on a page whose own entry is hidden.
+ */
+import React, { memo, useState, type ReactNode } from "react";
+import { useLocation } from "@docusaurus/router";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import { groupBlogSidebarItemsByYear } from
"@docusaurus/plugin-content-blog/client";
+import type { Props } from "@theme/BlogSidebar/Content";
+import type { BlogSidebarItem } from "@docusaurus/plugin-content-blog";
+
+import styles from "./styles.module.css";
+
+function BlogSidebarYearGroup({
+ year,
+ yearGroupHeadingClassName,
+ defaultOpen,
+ children,
+}: {
+ year: string;
+ yearGroupHeadingClassName?: string;
+ defaultOpen: boolean;
+ children: ReactNode;
+}) {
+ const [open, setOpen] = useState(defaultOpen);
+ return (
+ <details
+ className={styles.yearGroup}
+ open={open}
+ onToggle={(e) => setOpen((e.currentTarget as HTMLDetailsElement).open)}
+ >
+ <summary className={styles.yearGroupSummary}>
+ <span className={yearGroupHeadingClassName}>{year}</span>
+ </summary>
+ {children}
+ </details>
+ );
+}
+
+function BlogSidebarContent({
+ items,
+ yearGroupHeadingClassName,
+ ListComponent,
+}: Props): ReactNode {
+ const themeConfig = useThemeConfig();
+ const { pathname } = useLocation();
+
+ if (!themeConfig.blog.sidebar.groupByYear) {
+ return <ListComponent items={items} />;
+ }
+
+ const itemsByYear = groupBlogSidebarItemsByYear(items);
+ const containsCurrentPost = (yearItems: BlogSidebarItem[]) =>
+ yearItems.some((item) => item.permalink === pathname);
+
+ return (
+ <>
+ {itemsByYear.map(([year, yearItems], index) => (
+ <BlogSidebarYearGroup
+ key={year}
+ year={year}
+ yearGroupHeadingClassName={yearGroupHeadingClassName}
+ defaultOpen={index === 0 || containsCurrentPost(yearItems)}
+ >
+ <ListComponent items={yearItems} />
+ </BlogSidebarYearGroup>
+ ))}
Review Comment:
The `defaultOpen` behavior is only applied on the initial mount
(`useState(defaultOpen)`), so after client-side navigation to a post in a
different year, that year group may remain closed and hide the active
post—contradicting the stated behavior. Suggestion: sync the `open` state when
`defaultOpen` becomes `true` (e.g., via an effect that opens the group when the
current post moves into it), or make the current-post year group controlled by
location while preserving user toggles for other groups.
##########
src/theme/BlogLayout/index.tsx:
##########
@@ -0,0 +1,74 @@
+/**
+ * Swizzled from @docusaurus/theme-classic to give the blog a persistent
+ * right-hand rail.
+ *
+ * Upstream only renders the right column when a `toc` is passed, which the
+ * post pages do and the list page doesn't — so `/blog` had a two-column gap on
+ * the right and nowhere to put the link to the tag index. This renders the
+ * column unconditionally: the tags link on top, the table of contents under it
+ * where there is one.
+ *
+ * The column widths are unchanged from upstream; the rail fills space the grid
+ * was already reserving.
+ */
+import React, { type ReactNode } from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import { useLocation } from "@docusaurus/router";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { translate } from "@docusaurus/Translate";
+import Layout from "@theme/Layout";
+import BlogSidebar from "@theme/BlogSidebar";
+import type { Props } from "@theme/BlogLayout";
+
+import styles from "./styles.module.css";
+
+function BlogTagsLink() {
+ const tagsPath = useBaseUrl("/blog/tags");
+ const { pathname } = useLocation();
+
+ // Don't offer the link on the tag index itself, or on an individual tag
+ // page, where it would just point back at where you already are.
+ if (pathname.replace(/\/$/, "") === tagsPath.replace(/\/$/, "")) {
+ return null;
+ }
+
+ return (
+ <Link to="/blog/tags" className={styles.tagsLink}>
+ {translate({
+ id: "theme.blog.sidebar.browseTagsLabel",
+ message: "Browse by tag",
+ description: "The blog sidebar link to the tags index page",
+ })}
+ </Link>
+ );
Review Comment:
Two issues in `BlogTagsLink`: (1) the comment says the link should be hidden
on individual tag pages, but the condition only matches the tag index
(`/blog/tags`) and will still show on `/blog/tags/<tag>`. (2) `Link
to=\"/blog/tags\"` ignores the site `baseUrl`, while you already computed
`tagsPath` via `useBaseUrl`. Suggestion: hide the link for both the tag index
and tag subroutes (prefix match after normalization), and use the computed
`tagsPath` as the link target.
##########
blog/2026-06-09-new-generation-editors-kie-10-2.md:
##########
@@ -1,15 +1,15 @@
---
slug: new-generation-editors-kie-10-2
-title: "The Dawn of a New Era: Next-Generation Editors in Apache KIE 10.2"
+title: "The dawn of a new era: Next-generation Editors in Apache KIE 10.2"
Review Comment:
The title is now sentence case, but 'Editors' is still capitalized
mid-sentence. Suggestion: change to 'Next-generation editors' for consistent
sentence case.
##########
src/theme/BlogSidebar/Content/index.tsx:
##########
@@ -0,0 +1,79 @@
+/**
+ * Swizzled from @docusaurus/theme-classic to make the year groups collapsible.
+ *
+ * Upstream renders each year as a plain `<div role="group">`, which is fine
for
+ * a handful of posts and unusable once the historical Drools/jBPM/OptaPlanner
+ * archives are in — the sidebar becomes a single scroll of hundreds of titles.
+ * Same grouping, wrapped in `<details>` so a reader can collapse a year.
+ *
+ * Open by default: the most recent year, plus whichever year contains the post
+ * currently being read, so you never land on a page whose own entry is hidden.
+ */
+import React, { memo, useState, type ReactNode } from "react";
+import { useLocation } from "@docusaurus/router";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import { groupBlogSidebarItemsByYear } from
"@docusaurus/plugin-content-blog/client";
+import type { Props } from "@theme/BlogSidebar/Content";
+import type { BlogSidebarItem } from "@docusaurus/plugin-content-blog";
+
+import styles from "./styles.module.css";
+
+function BlogSidebarYearGroup({
+ year,
+ yearGroupHeadingClassName,
+ defaultOpen,
+ children,
+}: {
+ year: string;
+ yearGroupHeadingClassName?: string;
+ defaultOpen: boolean;
+ children: ReactNode;
+}) {
+ const [open, setOpen] = useState(defaultOpen);
+ return (
+ <details
+ className={styles.yearGroup}
+ open={open}
+ onToggle={(e) => setOpen((e.currentTarget as HTMLDetailsElement).open)}
+ >
+ <summary className={styles.yearGroupSummary}>
+ <span className={yearGroupHeadingClassName}>{year}</span>
+ </summary>
+ {children}
+ </details>
Review Comment:
The `defaultOpen` behavior is only applied on the initial mount
(`useState(defaultOpen)`), so after client-side navigation to a post in a
different year, that year group may remain closed and hide the active
post—contradicting the stated behavior. Suggestion: sync the `open` state when
`defaultOpen` becomes `true` (e.g., via an effect that opens the group when the
current post moves into it), or make the current-post year group controlled by
location while preserving user toggles for other groups.
##########
src/css/custom.css:
##########
@@ -199,3 +199,18 @@ html {
height: 3rem;
margin-right: 0.5rem;
}
+
+/* Author names read as body text, not as links.
+ The blog page already carries a lot of the primary colour - tag chips, "Read
+ more", post titles - and the author byline repeating it, once per author per
+ post, tips the list over. `.avatar__name` is Infima's own class, so this
+ holds without swizzling the Author component. The link is still a link:
+ underline on hover, and the primary colour returns on hover so the
+ affordance isn't lost. */
+.avatar__name a {
+ color: var(--ifm-font-color-base);
+}
+
+.avatar__name a:hover {
+ color: var(--ifm-color-primary);
Review Comment:
The comment states the link will be underlined on hover, but the CSS rules
here only change color (no `text-decoration`), so the hover affordance
described may not actually happen depending on the global theme defaults.
Suggestion: either add an explicit hover underline style here, or adjust the
comment to match the actual behavior.
--
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]
