Blog Components

/**
 * Blog section layout component
 * @param props - Blog layout props
 * @returns Blog layout with sidebar and content
 */
function BlogLayout(props: BlogLayoutProps): ReactNode;

interface BlogLayoutProps {
  readonly children?: ReactNode;
  readonly sidebar?: BlogSidebar;
  readonly toc?: ReactNode;
  readonly title?: string;
  readonly description?: string;
  readonly noFooter?: boolean;
  readonly wrapperClassName?: string;
}

/**
 * Blog list page showing recent posts
 * @returns Blog post list with pagination
 */
function BlogListPage(): ReactNode;

/**
 * Blog archive page with chronological organization
 * @returns Organized blog archive
 */
function BlogArchivePage(): ReactNode;

/**
 * Blog tags list page
 * @returns List of all blog tags
 */
function BlogTagsListPage(): ReactNode;

/**
 * Blog posts filtered by tag
 * @returns Tag-filtered blog posts
 */
function BlogTagsPostsPage(): ReactNode;

/**
 * Blog authors list page
 * @returns List of blog authors
 */
function BlogAuthorsListPage(): ReactNode;

/**
 * Blog posts by specific author
 * @returns Author's blog posts
 */
function BlogAuthorsPostsPage(): ReactNode;

/**
 * Structured data for blog list pages
 * @returns JSON-LD structured data for SEO
 */
function BlogListPageStructuredData(): ReactNode;

/**
 * Individual blog post page wrapper
 * @returns Complete blog post page
 */
function BlogPostPage(): ReactNode;

/**
 * Blog post item component
 * @param props - Post item props
 * @returns Blog post item element
 */
function BlogPostItem(props: BlogPostItemProps): ReactNode;

interface BlogPostItemProps {
  children: ReactNode;
  className?: string;
}

/**
 * Collection of blog post items
 * @param props - Post items props
 * @returns List of blog post items
 */
function BlogPostItems(props: BlogPostItemsProps): ReactNode;

interface BlogPostItemsProps {
  items: readonly {content: PropBlogPostContent}[];
  component?: ComponentType<{children: ReactNode}>;
}

/**
 * Blog post item container
 * @param props - Container props
 * @returns Post item wrapper
 */
function BlogPostItemContainer(props: BlogPostItemContainerProps): ReactNode;

interface BlogPostItemContainerProps {
  children: ReactNode;
  className?: string;
}

/**
 * Blog post content wrapper
 * @param props - Content props
 * @returns Post content container
 */
function BlogPostItemContent(props: BlogPostItemContentProps): ReactNode;

interface BlogPostItemContentProps {
  children: ReactNode;
  className?: string;
}

/**
 * Blog post header section
 * @returns Post header with title and metadata
 */
function BlogPostItemHeader(): ReactNode;

/**
 * Blog post title component
 * @param props - Title props
 * @returns Post title element
 */
function BlogPostItemHeaderTitle(props: BlogPostItemHeaderTitleProps): ReactNode;

interface BlogPostItemHeaderTitleProps {
  className?: string;
}

/**
 * Blog post metadata info
 * @param props - Info props
 * @returns Post metadata (date, reading time, etc.)
 */
function BlogPostItemHeaderInfo(props: BlogPostItemHeaderInfoProps): ReactNode;

interface BlogPostItemHeaderInfoProps {
  className?: string;
}

/**
 * Blog post authors section
 * @param props - Authors props
 * @returns Post authors list
 */
function BlogPostItemHeaderAuthors(props: BlogPostItemHeaderAuthorsProps): ReactNode;

interface BlogPostItemHeaderAuthorsProps {
  readonly className?: string;
}

/**
 * Blog post footer section
 * @returns Post footer with additional info or null
 */
function BlogPostItemFooter(): ReactNode | null;

/**
 * Read more link for blog post excerpts
 * @param props - Read more link props
 * @returns Read more link or null
 */
function BlogPostItemFooterReadMoreLink(props: ReadMoreLinkProps): ReactNode | null;

interface ReadMoreLinkProps {
  blogPostTitle: string;
  to: string;
  className?: string;
  children?: ReactNode;
}

/**
 * Blog post page metadata for SEO
 * @returns Blog post metadata elements
 */
function BlogPostPageMetadata(): ReactNode;

/**
 * Blog post page structured data
 * @returns JSON-LD structured data for blog posts
 */
function BlogPostPageStructuredData(): ReactNode;

/**
 * Blog author component
 * @param props - Author props
 * @returns Author information display
 */
function BlogAuthor(props: BlogAuthorProps): ReactNode;

interface BlogAuthorProps {
  readonly as?: 'h1' | 'h2';
  readonly author: Author;
  readonly className?: string;
  readonly count?: number;
}

/**
 * Blog author social links
 * @param props - Author socials props
 * @returns Author social media links
 */
function BlogAuthorSocials(props: BlogAuthorSocialsProps): ReactNode;

interface BlogAuthorSocialsProps {
  readonly author: Author;
  readonly className?: string;
}

/**
 * Blog sidebar component
 * @param props - Blog sidebar props
 * @returns Blog navigation sidebar or null
 */
function BlogSidebar(props: BlogSidebarProps): ReactNode;

interface BlogSidebarProps {
  readonly sidebar?: BlogSidebar;
}

/**
 * Desktop blog sidebar
 * @param props - Desktop sidebar props
 * @returns Desktop blog sidebar
 */
function BlogSidebarDesktop(props: BlogSidebarDesktopProps): ReactNode;

interface BlogSidebarDesktopProps {
  readonly sidebar: BlogSidebar;
}

/**
 * Mobile blog sidebar
 * @param props - Mobile sidebar props
 * @returns Mobile blog sidebar
 */
function BlogSidebarMobile(props: BlogSidebarMobileProps): ReactNode;

interface BlogSidebarMobileProps {
  readonly sidebar: BlogSidebar;
}

/**
 * Blog sidebar content
 * @param props - Sidebar content props
 * @returns Sidebar content with navigation items
 */
function BlogSidebarContent(props: BlogSidebarContentProps): ReactNode;

interface BlogSidebarContentProps {
  readonly items: BlogSidebarItem[];
  readonly ListComponent: ComponentType<{items: BlogSidebarItem[]}>;
  readonly yearGroupHeadingClassName?: string;
}

/**
 * Blog list paginator for post lists
 * @param props - List paginator props
 * @returns Blog list pagination
 */
function BlogListPaginator(props: BlogListPaginatorProps): ReactNode;

interface BlogListPaginatorProps {
  readonly metadata: BlogPaginatedMetadata;
}

/**
 * Blog post paginator for prev/next navigation
 * @param props - Post paginator props
 * @returns Blog post navigation
 */
function BlogPostPaginator(props: BlogPostPaginatorProps): ReactNode;

interface BlogPostPaginatorProps {
  readonly nextItem?: BlogNavigationItem;
  readonly prevItem?: BlogNavigationItem;
}

// Blog author information
interface Author {
  name?: string;
  title?: string;
  url?: string;  
  imageURL?: string;
  email?: string;
  page?: string;
  socials?: {
    [platform: string]: string;
  };
}

// Blog sidebar structure
interface BlogSidebar {
  title: string;
  items: BlogSidebarItem[];
}

interface BlogSidebarItem {
  title: string;
  permalink: string;
  unlisted?: boolean;
  date: Date;
}

// Blog post content
interface PropBlogPostContent {
  metadata: BlogPostMetadata;
  contentTitle?: string;
}

interface BlogPostMetadata {
  permalink: string;
  title: string;
  description?: string;
  date: Date;
  formattedDate: string;
  readingTime?: number;
  hasTruncateMarker: boolean;
  authors: Author[];
  tags: Tag[];
  unlisted: boolean;
  frontMatter: BlogPostFrontMatter;
}

interface BlogPostFrontMatter {
  title?: string;
  description?: string;
  slug?: string;
  authors?: (string | Author)[];
  tags?: (string | Tag)[];
  hide_reading_time?: boolean;
  hide_table_of_contents?: boolean;
  toc_min_heading_level?: number;
  toc_max_heading_level?: number;
  keywords?: string[];
  image?: string;
  draft?: boolean;
  unlisted?: boolean;
  date?: Date | string;
}

// Blog pagination
interface BlogPaginatedMetadata {
  totalCount: number;
  currentPage: number;
  totalPages: number;
  blogTitle: string;
  blogDescription?: string;
  nextPage?: string;
  previousPage?: string;
}

// Blog navigation
interface BlogNavigationItem {
  readonly title: string;
  readonly permalink: string;
}

// Tags
interface Tag {
  label: string;
  permalink: string;
  count?: number;
}

import React from 'react';
import BlogPostItem from '@theme/BlogPostItem';
import BlogPostItemContainer from '@theme/BlogPostItem/Container';
import BlogPostItemHeader from '@theme/BlogPostItem/Header';
import BlogPostItemContent from '@theme/BlogPostItem/Content';

export default function CustomBlogPostItem({children, ...props}) {
  return (
    <BlogPostItem {...props}>
      <BlogPostItemContainer className="custom-blog-post">
        <BlogPostItemHeader />
        <BlogPostItemContent>
          {children}
        </BlogPostItemContent>
        <div className="custom-footer">
          Custom footer content
        </div>
      </BlogPostItemContainer>
    </BlogPostItem>
  );
}

// docusaurus.config.js
export default {
  themeConfig: {
    blog: {
      sidebar: {
        groupByYear: true,
      },
    },
  },
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          showReadingTime: true,
          blogTitle: 'My Blog',
          blogDescription: 'A technical blog',
          postsPerPage: 5,
          blogSidebarTitle: 'Recent Posts',
          blogSidebarCount: 10,
        },
      },
    ],
  ],
};

import React from 'react';
import Link from '@docusaurus/Link';
import {translate} from '@docusaurus/Translate';

export default function CustomBlogAuthor({author, count}) {
  const {name, title, url, imageURL, email} = author;
  
  return (
    <div className="custom-author">
      {imageURL && (
        <img src={imageURL} alt={name} className="author-avatar" />
      )}
      <div className="author-info">
        <h3>
          {url ? <Link to={url}>{name}</Link> : name}
        </h3>
        {title && <p className="author-title">{title}</p>}
        {count && (
          <p>
            {translate(
              {
                id: 'theme.blog.author.posts.count',
                message: '{count} posts',
                description: 'Number of posts by author',
              },
              {count}
            )}
          </p>
        )}
      </div>
    </div>
  );
}