83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
|
|
import {ThemeClassNames} from '@docusaurus/theme-common';
|
|
import EditMetaRow from '@theme/EditMetaRow';
|
|
import TagsListInline from '@theme/TagsListInline';
|
|
import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
|
|
export default function BlogPostItemFooter() {
|
|
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 text--right', {
|
|
'col--3': tagsExists,
|
|
})}>
|
|
<ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
|
|
</div>
|
|
)}
|
|
</footer>
|
|
);
|
|
}
|
|
}
|