in src/theme/BlogPostItem/Footer/index.tsx [10:85]
export default function BlogPostItemFooter(): JSX.Element | null {
const {metadata, isBlogPostPage} = useBlogPost();
const {
tags,
title,
editUrl,
hasTruncateMarker,
lastUpdatedBy,
lastUpdatedAt,
} = metadata;
// A post is truncated if it's in the "list view" and it has a truncate marker
const truncatedPost = !isBlogPostPage && hasTruncateMarker;
const tagsExists = tags.length > 0;
const renderFooter = tagsExists || truncatedPost || editUrl;
if (!renderFooter) {
return null;
}
// BlogPost footer - details view
if (isBlogPostPage) {
const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
return (
<footer className="docusaurus-mt-lg">
{tagsExists && (
<div
className={clsx(
'row',
'margin-top--sm',
ThemeClassNames.blog.blogFooterEditMetaRow,
)}>
<div className="col">
<TagsListInline tags={tags} />
</div>
</div>
)}
{canDisplayEditMetaRow && (
<EditMetaRow
className={clsx(
'margin-top--sm',
ThemeClassNames.blog.blogFooterEditMetaRow,
)}
editUrl={editUrl}
lastUpdatedAt={lastUpdatedAt}
lastUpdatedBy={lastUpdatedBy}
/>
)}
</footer>
);
}
// BlogPost footer - list view
else {
return (
<footer className="row docusaurus-mt-lg">
{tagsExists && (
<div className={clsx('col', {'col--9': truncatedPost})}>
<TagsListInline tags={tags} />
</div>
)}
{truncatedPost && (
<div
className={clsx('', {
'col--3': tagsExists,
})}>
<ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
</div>
)}
</footer>
);
}
}