refactor(v2): readjust footer of blog item (#4918)

packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx

@@ -10,14 +10,14 @@ import clsx from 'clsx';
 import {MDXProvider} from '@mdx-js/react';
 import Translate, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
+import {usePluralForm} from '@docusaurus/theme-common';
 import MDXComponents from '@theme/MDXComponents';
 import Seo from '@theme/Seo';
+import EditThisPage from '@theme/EditThisPage';
 import type {Props} from '@theme/BlogPostItem';
 
 import styles from './styles.module.css';
 
-import {usePluralForm} from '@docusaurus/theme-common';
-
 // Very simple pluralization: probably good enough for now
 function useReadingTimePlural() {
   const {selectMessage} = usePluralForm();
@@ -47,7 +47,15 @@ function BlogPostItem(props: Props): JSX.Element {
     truncated,
     isBlogPostPage = false,
   } = props;
-  const {date, formattedDate, permalink, tags, readingTime, title} = metadata;
+  const {
+    date,
+    formattedDate,
+    permalink,
+    tags,
+    readingTime,
+    title,
+    editUrl,
+  } = metadata;
   const {author, image, keywords} = frontMatter;
 
   const authorURL = frontMatter.author_url || frontMatter.authorURL;
@@ -104,7 +112,10 @@ function BlogPostItem(props: Props): JSX.Element {
           <MDXProvider components={MDXComponents}>{children}</MDXProvider>
         </div>
         {(tags.length > 0 || truncated) && (
-          <footer className="row margin-vert--lg">
+          <footer
+            className={clsx('row docusaurus-mt-lg', {
+              [styles.blogPostDetailsFull]: isBlogPostPage,
+            })}>
             {tags.length > 0 && (
               <div className="col">
                 <b>
@@ -124,7 +135,14 @@ function BlogPostItem(props: Props): JSX.Element {
                 ))}
               </div>
             )}
-            {truncated && (
+
+            {isBlogPostPage && editUrl && (
+              <div className="col margin-top--sm">
+                <EditThisPage editUrl={editUrl} />
+              </div>
+            )}
+
+            {!isBlogPostPage && truncated && (
               <div className="col text--right">
                 <Link
                   to={metadata.permalink}

packages/docusaurus-theme-classic/src/theme/BlogPostItem/styles.module.css

@@ -12,3 +12,7 @@
 .blogPostData {
   font-size: 0.9rem;
 }
+
+.blogPostDetailsFull {
+  flex-direction: column;
+}

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -12,13 +12,12 @@ import BlogPostPaginator from '@theme/BlogPostPaginator';
 import type {Props} from '@theme/BlogPostPage';
 import BlogSidebar from '@theme/BlogSidebar';
 import TOC from '@theme/TOC';
-import EditThisPage from '@theme/EditThisPage';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 
 function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
   const {frontMatter, metadata} = BlogPostContents;
-  const {title, description, nextItem, prevItem, editUrl} = metadata;
+  const {title, description, nextItem, prevItem} = metadata;
   const {hide_table_of_contents: hideTableOfContents} = frontMatter;
 
   return (
@@ -40,11 +39,8 @@ function BlogPostPage(props: Props): JSX.Element {
                 isBlogPostPage>
                 <BlogPostContents />
               </BlogPostItem>
-              <div>{editUrl && <EditThisPage editUrl={editUrl} />}</div>
               {(nextItem || prevItem) && (
-                <div className="margin-vert--xl">
-                  <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
-                </div>
+                <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
               )}
             </main>
             {!hideTableOfContents && BlogPostContents.toc && (

packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx

@@ -15,7 +15,7 @@ function BlogPostPaginator(props: Props): JSX.Element {
 
   return (
     <nav
-      className="pagination-nav"
+      className="pagination-nav docusaurus-mt-lg"
       aria-label={translate({
         id: 'theme.blog.post.paginator.navAriaLabel',
         message: 'Blog post page navigation',

packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx

@@ -86,7 +86,7 @@ function DocItem(props: Props): JSX.Element {
               </div>
 
               {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
-                <footer className={clsx('row', styles.docUpdateDetails)}>
+                <footer className="row docusaurus-mt-lg">
                   <div className="col">
                     {editUrl && <EditThisPage editUrl={editUrl} />}
                   </div>
@@ -104,9 +104,7 @@ function DocItem(props: Props): JSX.Element {
               )}
             </article>
 
-            <div className={styles.docPaginator}>
-              <DocPaginator metadata={metadata} />
-            </div>
+            <DocPaginator metadata={metadata} />
           </div>
         </div>
         {!hideTableOfContents && DocContent.toc && (

packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css

@@ -9,11 +9,6 @@
   margin-top: 0;
 }
 
-.docUpdateDetails,
-.docPaginator {
-  margin-top: 3rem;
-}
-
 .lastUpdated {
   margin-top: 0.2rem;
   font-style: italic;

packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx

@@ -15,7 +15,7 @@ function DocPaginator(props: Props): JSX.Element {
 
   return (
     <nav
-      className="pagination-nav"
+      className="pagination-nav docusaurus-mt-lg"
       aria-label={translate({
         id: 'theme.docs.paginator.navAriaLabel',
         message: 'Docs pages navigation',

packages/docusaurus-theme-classic/src/theme/Layout/styles.css

@@ -19,3 +19,9 @@ body {
 .main-wrapper {
   flex: 1 0 auto;
 }
+
+/* Docusaurus-specific utility classes */
+
+.docusaurus-mt-lg {
+  margin-top: 3rem;
+}