Function PostLayout

apps/site/layouts/Post.tsx:17–57

({ children })

import styles from './layouts.module.css';

const PostLayout: FC<PropsWithChildren> = ({ children }) => {
  const { frontmatter } = getClientContext();

  const authors = mapAuthorToCardAuthors(frontmatter.author!);

  const type = mapBlogCategoryToPreviewType(frontmatter.category!);

  return (
    <>
      <WithNavBar />

      <div className={styles.contentLayout}>
        <div></div>

        <div className={styles.postLayout}>
          <main id="main" tabIndex={-1}>
            {type === 'vulnerability' && <EOLAlert />}

            <h1>{frontmatter.title}</h1>

            <section>
              <WithAvatarGroup names={authors} size="medium" />

              <p>{authors.join(', ')}</p>
            </section>

            <Preview title={frontmatter.title!} type={type} />

            {children}

            <WithBlogCrossLinks />
          </main>
        </div>

        <WithMetaBar />
      </div>

      <WithFooter />
    </>
  );
};

export default PostLayout;