export default function ChangelogItem()

in website/src/plugins/changelog/theme/ChangelogItem/index.tsx [20:76]
52 lines of code
8 McCabe index (conditional complexity)

export default function ChangelogItem(props: Props): JSX.Element {
  const {withBaseUrl} = useBaseUrlUtils();
  const {
    children,
    frontMatter,
    assets,
    metadata,
    isBlogPostPage = false,
  } = props;
  const {date, formattedDate, permalink, title, authors} = metadata;

  const image = assets.image ?? frontMatter.image;

  const TitleHeading = isBlogPostPage ? 'h1' : 'h2';

  return (
    <article
      className={!isBlogPostPage ? 'margin-bottom--md' : undefined}
      itemProp="blogPost"
      itemScope
      itemType="http://schema.org/BlogPosting">
      <header>
        <TitleHeading
          className={clsx(
            isBlogPostPage ? styles.blogPostPageTitle : styles.blogPostTitle,
          )}
          itemProp="headline">
          {isBlogPostPage ? (
            title
          ) : (
            <Link itemProp="url" to={permalink}>
              {title}
            </Link>
          )}
        </TitleHeading>
        <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
          <time dateTime={date} itemProp="datePublished">
            {formattedDate}
          </time>
        </div>
        <ChangelogAuthors authors={authors} assets={assets} />
      </header>

      {image && (
        <meta itemProp="image" content={withBaseUrl(image, {absolute: true})} />
      )}

      <div
        // This ID is used for the feed generation to locate the main content
        id={isBlogPostPage ? blogPostContainerID : undefined}
        className="markdown"
        itemProp="articleBody">
        <MDXProvider components={MDXComponents}>{children}</MDXProvider>
      </div>
    </article>
  );
}