Skip to content

⬅️ Back to Table of Contents

📄 BlogSidebar/Content

📊 Analysis Summary

Metric Count
🔧 Functions 2
📦 Imports 9
💠 JSX Elements 8

📚 Table of Contents

🛠️ File Location:

📂 packages/website/src/theme/BlogSidebar/Content/index.tsx

📦 Imports

Name Source
Props @theme/BlogSidebar/Content
ReactNode react
groupBlogSidebarItemsByYear @docusaurus/plugin-content-blog/client
useThemeConfig @docusaurus/theme-common
Heading @theme/Heading
memo react
React react
Markdown react-markdown
styles ./styles.module.css

JSX Elements

Component Type Props Children
div element className={styles.blogSidebarContent}, role="group" ,
Heading component as="h3", className={yearGroupHeadingClassName} {year}
Markdown component none {item.title}
Fragment fragment none none
BlogSidebarYearGroup component key={year}, year={year}, yearGroupHeadingClassName={yearGroupHeadingClassName}
ListComponent component items={yearItems} none
div element className={styles.blogSidebarContent}
ListComponent component items={items} none

Functions

BlogSidebarYearGroup({ children, year, yearGroupHead…: { children: ReactNode; year: string; ye…): React.JSX.Element

Parameters:

  • { children, year, yearGroupHeadingClassName, } { children: ReactNode; year: string; yearGroupHeadingClassName?: string; }

Returns: React.JSX.Element

Code 
function BlogSidebarYearGroup({
  children,
  year,
  yearGroupHeadingClassName,
}: {
  children: ReactNode;
  year: string;
  yearGroupHeadingClassName?: string;
}): React.JSX.Element {
  return (
    <div className={styles.blogSidebarContent} role="group">
      <Heading as="h3" className={yearGroupHeadingClassName}>
        {year}
      </Heading>
      {children}
    </div>
  );
}

BlogSidebarContent({ items: itemsRaw, ListComponen…: Props): ReactNode

Parameters:

  • { items: itemsRaw, ListComponent, yearGroupHeadingClassName, } Props

Returns: ReactNode

Calls:

  • itemsRaw.map
  • useThemeConfig (from @docusaurus/theme-common)
  • groupBlogSidebarItemsByYear (from @docusaurus/plugin-content-blog/client)
  • itemsByYear.map
Code 
function BlogSidebarContent({
  items: itemsRaw,
  ListComponent,
  yearGroupHeadingClassName,
}: Props): ReactNode {
  const items = itemsRaw.map(item => ({
    ...item,
    title: (<Markdown>{item.title}</Markdown>) as unknown as string,
  }));

  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>
        ))}
      </>
    );
  }

  return (
    <div className={styles.blogSidebarContent}>
      <ListComponent items={items} />
    </div>
  );
}

Generated by Syntax Scribe