github.com/kubri/kubri@v0.5.1-0.20240317001612-bda2aaef967e/website/src/plugins/changelog/theme/ChangelogPage/index.tsx (about)

     1  /**
     2   * Copyright (c) Facebook, Inc. and its affiliates.
     3   *
     4   * This source code is licensed under the MIT license found in the
     5   * LICENSE file in the root directory of this source tree.
     6   */
     7  
     8  import type { ReactNode, JSX } from 'react'
     9  import clsx from 'clsx'
    10  import Translate from '@docusaurus/Translate'
    11  import Link from '@docusaurus/Link'
    12  import { HtmlClassNameProvider, ThemeClassNames } from '@docusaurus/theme-common'
    13  import { BlogPostProvider, useBlogPost } from '@docusaurus/theme-common/internal'
    14  import BlogPostPageMetadata from '@theme/BlogPostPage/Metadata'
    15  import BlogLayout from '@theme/BlogLayout'
    16  import ChangelogItem from '@theme/ChangelogItem'
    17  import ChangelogPaginator from '@theme/ChangelogPaginator'
    18  import TOC from '@theme/TOC'
    19  import type { Props } from '@theme/BlogPostPage'
    20  import type { BlogSidebar } from '@docusaurus/plugin-content-blog'
    21  
    22  function BackToIndexLink() {
    23    const { metadata } = useBlogPost()
    24    // @ts-expect-error: we injected this
    25    const { listPageLink } = metadata
    26    return (
    27      <Link to={listPageLink}>
    28        <Translate id="changelog.backLink">← Back to index page</Translate>
    29      </Link>
    30    )
    31  }
    32  
    33  interface ChangelogPageContentProps {
    34    sidebar: BlogSidebar
    35    children: ReactNode
    36  }
    37  
    38  function ChangelogPageContent({ sidebar, children }: ChangelogPageContentProps): JSX.Element {
    39    const { metadata, toc } = useBlogPost()
    40    const { nextItem, prevItem, frontMatter } = metadata
    41    const {
    42      hide_table_of_contents: hideTableOfContents,
    43      toc_min_heading_level: tocMinHeadingLevel,
    44      toc_max_heading_level: tocMaxHeadingLevel,
    45    } = frontMatter
    46    return (
    47      <BlogLayout
    48        sidebar={sidebar}
    49        toc={
    50          !hideTableOfContents && toc.length > 0 ? (
    51            <TOC
    52              toc={toc}
    53              minHeadingLevel={tocMinHeadingLevel}
    54              maxHeadingLevel={tocMaxHeadingLevel}
    55            />
    56          ) : undefined
    57        }
    58      >
    59        <BackToIndexLink />
    60  
    61        <ChangelogItem>{children}</ChangelogItem>
    62  
    63        {(nextItem || prevItem) && <ChangelogPaginator nextItem={nextItem} prevItem={prevItem} />}
    64      </BlogLayout>
    65    )
    66  }
    67  
    68  // This page doesn't change anything. It's just swapping BlogPostItem with our
    69  // own ChangelogItem. We don't want to apply the swizzled item to the actual
    70  // blog.
    71  export default function ChangelogPage({ content, sidebar }: Props): JSX.Element {
    72    const ChangelogContent = content
    73    return (
    74      <BlogPostProvider content={content} isBlogPostPage>
    75        <HtmlClassNameProvider
    76          className={clsx(ThemeClassNames.wrapper.blogPages, ThemeClassNames.page.blogPostPage)}
    77        >
    78          <BlogPostPageMetadata />
    79          <ChangelogPageContent sidebar={sidebar}>
    80            <ChangelogContent />
    81          </ChangelogPageContent>
    82        </HtmlClassNameProvider>
    83      </BlogPostProvider>
    84    )
    85  }