@docusaurus/theme-classic 0.0.0-5985 → 0.0.0-5987

package/lib/options.js

@@ -28,6 +28,16 @@ const DocsSchema = utils_validation_1.Joi.object({
         autoCollapseCategories: utils_validation_1.Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.autoCollapseCategories),
     }).default(DEFAULT_DOCS_CONFIG.sidebar),
 }).default(DEFAULT_DOCS_CONFIG);
+const DEFAULT_BLOG_CONFIG = {
+    sidebar: {
+        groupByYear: true,
+    },
+};
+const BlogSchema = utils_validation_1.Joi.object({
+    sidebar: utils_validation_1.Joi.object({
+        groupByYear: utils_validation_1.Joi.bool().default(DEFAULT_BLOG_CONFIG.sidebar.groupByYear),
+    }).default(DEFAULT_BLOG_CONFIG.sidebar),
+}).default(DEFAULT_BLOG_CONFIG);
 const DEFAULT_COLOR_MODE_CONFIG = {
     defaultMode: 'light',
     disableSwitch: false,
@@ -36,6 +46,7 @@ const DEFAULT_COLOR_MODE_CONFIG = {
 exports.DEFAULT_CONFIG = {
     colorMode: DEFAULT_COLOR_MODE_CONFIG,
     docs: DEFAULT_DOCS_CONFIG,
+    blog: DEFAULT_BLOG_CONFIG,
     metadata: [],
     prism: {
         additionalLanguages: [],
@@ -295,6 +306,7 @@ exports.ThemeConfigSchema = utils_validation_1.Joi.object({
     colorMode: ColorModeSchema,
     image: utils_validation_1.Joi.string(),
     docs: DocsSchema,
+    blog: BlogSchema,
     metadata: utils_validation_1.Joi.array()
         .items(HtmlMetadataSchema)
         .default(exports.DEFAULT_CONFIG.metadata),

package/lib/theme/BlogSidebar/Content/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { type ReactNode } from 'react';
+import type { Props } from '@theme/BlogSidebar/Content';
+declare function BlogSidebarContent({ items, yearGroupHeadingClassName, ListComponent, }: Props): ReactNode;
+declare const _default: React.MemoExoticComponent<typeof BlogSidebarContent>;
+export default _default;

package/lib/theme/BlogSidebar/Content/index.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {memo} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {groupBlogSidebarItemsByYear} from '@docusaurus/theme-common/internal';
+import Heading from '@theme/Heading';
+function BlogSidebarYearGroup({year, yearGroupHeadingClassName, children}) {
+  return (
+    <div role="group">
+      <Heading as="h3" className={yearGroupHeadingClassName}>
+        {year}
+      </Heading>
+      {children}
+    </div>
+  );
+}
+function BlogSidebarContent({items, yearGroupHeadingClassName, ListComponent}) {
+  const themeConfig = useThemeConfig();
+  if (themeConfig.blog.sidebar.groupByYear) {
+    const itemsByYear = groupBlogSidebarItemsByYear(items);
+    return (
+      <>
+        {itemsByYear.map(([year, yearItems]) => (
+          <BlogSidebarYearGroup
+            key={year}
+            year={year}
+            yearGroupHeadingClassName={yearGroupHeadingClassName}>
+            <ListComponent items={yearItems} />
+          </BlogSidebarYearGroup>
+        ))}
+      </>
+    );
+  } else {
+    return <ListComponent items={items} />;
+  }
+}
+export default memo(BlogSidebarContent);

package/lib/theme/BlogSidebar/Desktop/index.d.ts

@@ -4,5 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import type { Props } from '@theme/BlogSidebar/Desktop';
-export default function BlogSidebarDesktop({ sidebar }: Props): JSX.Element;
+declare function BlogSidebarDesktop({ sidebar }: Props): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BlogSidebarDesktop>;
+export default _default;

package/lib/theme/BlogSidebar/Desktop/index.js

@@ -4,13 +4,27 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, {memo} from 'react';
 import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
-import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/theme-common/internal';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
 import styles from './styles.module.css';
-export default function BlogSidebarDesktop({sidebar}) {
+const ListComponent = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName={clsx(styles.sidebarItemList, 'clean-list')}
+      liClassName={styles.sidebarItem}
+      linkClassName={styles.sidebarItemLink}
+      linkActiveClassName={styles.sidebarItemLinkActive}
+    />
+  );
+};
+function BlogSidebarDesktop({sidebar}) {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
     <aside className="col col--3">
@@ -24,20 +38,13 @@ export default function BlogSidebarDesktop({sidebar}) {
         <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
           {sidebar.title}
         </div>
-        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
-          {items.map((item) => (
-            <li key={item.permalink} className={styles.sidebarItem}>
-              <Link
-                isNavLink
-                to={item.permalink}
-                className={styles.sidebarItemLink}
-                activeClassName={styles.sidebarItemLinkActive}>
-                {item.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <BlogSidebarContent
+          items={items}
+          ListComponent={ListComponent}
+          yearGroupHeadingClassName={styles.yearGroupHeading}
+        />
       </nav>
     </aside>
   );
 }
+export default memo(BlogSidebarDesktop);

package/lib/theme/BlogSidebar/Desktop/styles.module.css

@@ -43,3 +43,8 @@
     display: none;
   }
 }
+
+.yearGroupHeading {
+  margin-top: 1.6rem;
+  margin-bottom: 0.4rem;
+}

package/lib/theme/BlogSidebar/Mobile/index.d.ts

@@ -4,5 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import React from 'react';
 import type { Props } from '@theme/BlogSidebar/Mobile';
-export default function BlogSidebarMobile(props: Props): JSX.Element;
+declare function BlogSidebarMobile(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BlogSidebarMobile>;
+export default _default;

package/lib/theme/BlogSidebar/Mobile/index.js

@@ -4,29 +4,36 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import Link from '@docusaurus/Link';
-import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import React, {memo} from 'react';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/theme-common/internal';
 import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
+import styles from './styles.module.css';
+const ListComponent = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName="menu__list"
+      liClassName="menu__list-item"
+      linkClassName="menu__link"
+      linkActiveClassName="menu__link--active"
+    />
+  );
+};
 function BlogSidebarMobileSecondaryMenu({sidebar}) {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
-    <ul className="menu__list">
-      {items.map((item) => (
-        <li key={item.permalink} className="menu__list-item">
-          <Link
-            isNavLink
-            to={item.permalink}
-            className="menu__link"
-            activeClassName="menu__link--active">
-            {item.title}
-          </Link>
-        </li>
-      ))}
-    </ul>
+    <BlogSidebarContent
+      items={items}
+      ListComponent={ListComponent}
+      yearGroupHeadingClassName={styles.yearGroupHeading}
+    />
   );
 }
-export default function BlogSidebarMobile(props) {
+function BlogSidebarMobile(props) {
   return (
     <NavbarSecondaryMenuFiller
       component={BlogSidebarMobileSecondaryMenu}
@@ -34,3 +41,4 @@ export default function BlogSidebarMobile(props) {
     />
   );
 }
+export default memo(BlogSidebarMobile);

package/lib/theme/BlogSidebar/Mobile/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.yearGroupHeading {
+  margin: 1rem 0.75rem 0.5rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5985",
+  "version": "0.0.0-5987",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5985",
-    "@docusaurus/mdx-loader": "0.0.0-5985",
-    "@docusaurus/module-type-aliases": "0.0.0-5985",
-    "@docusaurus/plugin-content-blog": "0.0.0-5985",
-    "@docusaurus/plugin-content-docs": "0.0.0-5985",
-    "@docusaurus/plugin-content-pages": "0.0.0-5985",
-    "@docusaurus/theme-common": "0.0.0-5985",
-    "@docusaurus/theme-translations": "0.0.0-5985",
-    "@docusaurus/types": "0.0.0-5985",
-    "@docusaurus/utils": "0.0.0-5985",
-    "@docusaurus/utils-common": "0.0.0-5985",
-    "@docusaurus/utils-validation": "0.0.0-5985",
+    "@docusaurus/core": "0.0.0-5987",
+    "@docusaurus/mdx-loader": "0.0.0-5987",
+    "@docusaurus/module-type-aliases": "0.0.0-5987",
+    "@docusaurus/plugin-content-blog": "0.0.0-5987",
+    "@docusaurus/plugin-content-docs": "0.0.0-5987",
+    "@docusaurus/plugin-content-pages": "0.0.0-5987",
+    "@docusaurus/theme-common": "0.0.0-5987",
+    "@docusaurus/theme-translations": "0.0.0-5987",
+    "@docusaurus/types": "0.0.0-5987",
+    "@docusaurus/utils": "0.0.0-5987",
+    "@docusaurus/utils-common": "0.0.0-5987",
+    "@docusaurus/utils-validation": "0.0.0-5987",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "copy-text-to-clipboard": "^3.2.0",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "01e2896b49cfb78bed86b3c8854728377792a90a"
+  "gitHead": "89b1afe104ab4f3fb765d2ba875d34753f77efe8"
 }

package/src/options.ts

@@ -15,6 +15,7 @@ import type {
 } from '@docusaurus/types';
 
 const defaultPrismTheme = themes.palenight;
+
 const DEFAULT_DOCS_CONFIG: ThemeConfig['docs'] = {
   versionPersistence: 'localStorage',
   sidebar: {
@@ -22,11 +23,12 @@ const DEFAULT_DOCS_CONFIG: ThemeConfig['docs'] = {
     autoCollapseCategories: false,
   },
 };
-const DocsSchema = Joi.object({
+
+const DocsSchema = Joi.object<ThemeConfig['docs']>({
   versionPersistence: Joi.string()
     .equal('localStorage', 'none')
     .default(DEFAULT_DOCS_CONFIG.versionPersistence),
-  sidebar: Joi.object({
+  sidebar: Joi.object<ThemeConfig['docs']['sidebar']>({
     hideable: Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.hideable),
     autoCollapseCategories: Joi.bool().default(
       DEFAULT_DOCS_CONFIG.sidebar.autoCollapseCategories,
@@ -34,6 +36,18 @@ const DocsSchema = Joi.object({
   }).default(DEFAULT_DOCS_CONFIG.sidebar),
 }).default(DEFAULT_DOCS_CONFIG);
 
+const DEFAULT_BLOG_CONFIG: ThemeConfig['blog'] = {
+  sidebar: {
+    groupByYear: true,
+  },
+};
+
+const BlogSchema = Joi.object<ThemeConfig['blog']>({
+  sidebar: Joi.object<ThemeConfig['blog']['sidebar']>({
+    groupByYear: Joi.bool().default(DEFAULT_BLOG_CONFIG.sidebar.groupByYear),
+  }).default(DEFAULT_BLOG_CONFIG.sidebar),
+}).default(DEFAULT_BLOG_CONFIG);
+
 const DEFAULT_COLOR_MODE_CONFIG: ThemeConfig['colorMode'] = {
   defaultMode: 'light',
   disableSwitch: false,
@@ -43,6 +57,7 @@ const DEFAULT_COLOR_MODE_CONFIG: ThemeConfig['colorMode'] = {
 export const DEFAULT_CONFIG: ThemeConfig = {
   colorMode: DEFAULT_COLOR_MODE_CONFIG,
   docs: DEFAULT_DOCS_CONFIG,
+  blog: DEFAULT_BLOG_CONFIG,
   metadata: [],
   prism: {
     additionalLanguages: [],
@@ -333,6 +348,7 @@ export const ThemeConfigSchema = Joi.object<ThemeConfig>({
   colorMode: ColorModeSchema,
   image: Joi.string(),
   docs: DocsSchema,
+  blog: BlogSchema,
   metadata: Joi.array()
     .items(HtmlMetadataSchema)
     .default(DEFAULT_CONFIG.metadata),

package/src/theme/BlogSidebar/Content/index.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, {memo, type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {groupBlogSidebarItemsByYear} from '@docusaurus/theme-common/internal';
+import Heading from '@theme/Heading';
+import type {Props} from '@theme/BlogSidebar/Content';
+
+function BlogSidebarYearGroup({
+  year,
+  yearGroupHeadingClassName,
+  children,
+}: {
+  year: string;
+  yearGroupHeadingClassName?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div role="group">
+      <Heading as="h3" className={yearGroupHeadingClassName}>
+        {year}
+      </Heading>
+      {children}
+    </div>
+  );
+}
+
+function BlogSidebarContent({
+  items,
+  yearGroupHeadingClassName,
+  ListComponent,
+}: Props): ReactNode {
+  const themeConfig = useThemeConfig();
+  if (themeConfig.blog.sidebar.groupByYear) {
+    const itemsByYear = groupBlogSidebarItemsByYear(items);
+    return (
+      <>
+        {itemsByYear.map(([year, yearItems]) => (
+          <BlogSidebarYearGroup
+            key={year}
+            year={year}
+            yearGroupHeadingClassName={yearGroupHeadingClassName}>
+            <ListComponent items={yearItems} />
+          </BlogSidebarYearGroup>
+        ))}
+      </>
+    );
+  } else {
+    return <ListComponent items={items} />;
+  }
+}
+
+export default memo(BlogSidebarContent);

package/src/theme/BlogSidebar/Desktop/index.tsx

@@ -5,16 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {memo} from 'react';
 import clsx from 'clsx';
-import Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
-import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/theme-common/internal';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
+import type {Props as BlogSidebarContentProps} from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Desktop';
 
 import styles from './styles.module.css';
 
-export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
+const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName={clsx(styles.sidebarItemList, 'clean-list')}
+      liClassName={styles.sidebarItem}
+      linkClassName={styles.sidebarItemLink}
+      linkActiveClassName={styles.sidebarItemLinkActive}
+    />
+  );
+};
+
+function BlogSidebarDesktop({sidebar}: Props) {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
     <aside className="col col--3">
@@ -28,20 +44,14 @@ export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
         <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
           {sidebar.title}
         </div>
-        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
-          {items.map((item) => (
-            <li key={item.permalink} className={styles.sidebarItem}>
-              <Link
-                isNavLink
-                to={item.permalink}
-                className={styles.sidebarItemLink}
-                activeClassName={styles.sidebarItemLinkActive}>
-                {item.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
+        <BlogSidebarContent
+          items={items}
+          ListComponent={ListComponent}
+          yearGroupHeadingClassName={styles.yearGroupHeading}
+        />
       </nav>
     </aside>
   );
 }
+
+export default memo(BlogSidebarDesktop);

package/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -43,3 +43,8 @@
     display: none;
   }
 }
+
+.yearGroupHeading {
+  margin-top: 1.6rem;
+  margin-bottom: 0.4rem;
+}

package/src/theme/BlogSidebar/Mobile/index.tsx

@@ -5,32 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import Link from '@docusaurus/Link';
-import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import React, {memo} from 'react';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/theme-common/internal';
 import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
 import type {Props} from '@theme/BlogSidebar/Mobile';
+import type {Props as BlogSidebarContentProps} from '@theme/BlogSidebar/Content';
+
+import styles from './styles.module.css';
+
+const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName="menu__list"
+      liClassName="menu__list-item"
+      linkClassName="menu__link"
+      linkActiveClassName="menu__link--active"
+    />
+  );
+};
 
 function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
-    <ul className="menu__list">
-      {items.map((item) => (
-        <li key={item.permalink} className="menu__list-item">
-          <Link
-            isNavLink
-            to={item.permalink}
-            className="menu__link"
-            activeClassName="menu__link--active">
-            {item.title}
-          </Link>
-        </li>
-      ))}
-    </ul>
+    <BlogSidebarContent
+      items={items}
+      ListComponent={ListComponent}
+      yearGroupHeadingClassName={styles.yearGroupHeading}
+    />
   );
 }
 
-export default function BlogSidebarMobile(props: Props): JSX.Element {
+function BlogSidebarMobile(props: Props): JSX.Element {
   return (
     <NavbarSecondaryMenuFiller
       component={BlogSidebarMobileSecondaryMenu}
@@ -38,3 +48,5 @@ export default function BlogSidebarMobile(props: Props): JSX.Element {
     />
   );
 }
+
+export default memo(BlogSidebarMobile);

package/src/theme/BlogSidebar/Mobile/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.yearGroupHeading {
+  margin: 1rem 0.75rem 0.5rem;
+}

package/src/theme-classic.d.ts

@@ -194,6 +194,19 @@ declare module '@theme/BlogListPaginator' {
   export default function BlogListPaginator(props: Props): JSX.Element;
 }
 
+declare module '@theme/BlogSidebar/Content' {
+  import type {ReactNode, ComponentType} from 'react';
+  import type {BlogSidebarItem} from '@docusaurus/plugin-content-blog';
+
+  export interface Props {
+    readonly items: BlogSidebarItem[];
+    readonly ListComponent: ComponentType<{items: BlogSidebarItem[]}>;
+    readonly yearGroupHeadingClassName?: string;
+  }
+
+  export default function BlogSidebarContent(props: Props): ReactNode;
+}
+
 declare module '@theme/BlogSidebar/Desktop' {
   import type {BlogSidebar} from '@docusaurus/plugin-content-blog';