[fix] move document last-updated date to top

docusaurus.config.js

@@ -234,8 +234,8 @@ const config = {
                 path: 'community',
                 routeBasePath: '/community',
                 sidebarPath: require.resolve('./sidebarsCommunity.json'),
-                // Community docs are unversioned; the footer always shows their
-                // last-updated date (see src/theme/DocItem/Footer).
+                // Community docs are unversioned; the document header always shows their
+                // last-updated date (see src/theme/DocItem/Layout).
                 showLastUpdateTime: true,
             }),
         ],
@@ -348,7 +348,7 @@ const config = {
                     // },
                     showLastUpdateAuthor: false,
                     // Date comes from the injected `last_update` front matter
-                    // (markdown.parseFrontMatter). The DocItem footer limits
+                    // (markdown.parseFrontMatter). The DocItem layout limits
                     // which versions actually display it (Dev + latest stable).
                     showLastUpdateTime: true,
                     remarkPlugins: [markdownBoldPlugin, require('remark-math')],

src/theme/DocItem/Footer/index.tsx

@@ -1,28 +1,17 @@
 import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc, useDocsVersion} from '@docusaurus/plugin-content-docs/client';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
 import TagsListInline from '@theme/TagsListInline';
 
 import EditMetaRow from '@theme/EditMetaRow';
 
 export default function DocItemFooter(): JSX.Element | null {
   const {metadata} = useDoc();
-  const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
-  const {pluginId, version, isLast} = useDocsVersion();
-
-  // Only surface "last updated" on the Dev and latest-stable (4.x) docs, plus
-  // the community docs. Older versions (2.1, 3.x) would show stale dates, so we
-  // hide the row there — the timestamp data exists for them, we just don't show
-  // it. Kept in sync with which plugins enable showLastUpdateTime in the config.
-  const showLastUpdate =
-    pluginId === 'community' ||
-    (pluginId === 'default' && (version === 'current' || isLast));
-  const shownLastUpdatedAt = showLastUpdate ? lastUpdatedAt : undefined;
-  const shownLastUpdatedBy = showLastUpdate ? lastUpdatedBy : undefined;
+  const {editUrl, tags} = metadata;
 
   const canDisplayTagsRow = tags.length > 0;
-  const canDisplayEditMetaRow = !!(editUrl || shownLastUpdatedAt || shownLastUpdatedBy);
+  const canDisplayEditMetaRow = !!editUrl;
 
   const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
 
@@ -51,8 +40,6 @@ export default function DocItemFooter(): JSX.Element | null {
             ThemeClassNames.docs.docFooterEditMetaRow,
           )}
           editUrl={editUrl}
-          lastUpdatedAt={shownLastUpdatedAt}
-          lastUpdatedBy={shownLastUpdatedBy}
         />
       )}
     </footer>

src/theme/DocItem/Layout/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import clsx from 'clsx';
 import { useWindowSize } from '@docusaurus/theme-common';
-import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import { useDoc, useDocsVersion } from '@docusaurus/plugin-content-docs/client';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import Link from '@docusaurus/Link';
@@ -14,6 +14,7 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import ContentVisibility from '@theme/ContentVisibility';
+import LastUpdated from '@theme/LastUpdated';
 import type { Props } from '@theme/DocItem/Layout';
 import { DocsEdit } from '../../../components/Icons/docs-edit';
 import MobileSidebarDrawer from './MobileSidebarDrawer';
@@ -51,12 +52,21 @@ function useDocTOC() {
 export default function DocItemLayout({ children }: Props): JSX.Element {
     const docTOC = useDocTOC();
     const { metadata } = useDoc();
+    const { pluginId, version, isLast } = useDocsVersion();
     const {
         i18n: { currentLocale },
     } = useDocusaurusContext();
     const [isNew, setIsNew] = useState(true);
     const isZH = currentLocale === 'zh-CN';
 
+    // Older versioned docs keep their timestamp metadata for indexing, but only
+    // Dev, the latest stable version, and community docs display it.
+    const showLastUpdate =
+        pluginId === 'community' ||
+        (pluginId === 'default' && (version === 'current' || isLast));
+    const canDisplayLastUpdate =
+        showLastUpdate && (metadata.lastUpdatedAt || metadata.lastUpdatedBy);
+
     useEffect(() => {
         if (typeof window !== 'undefined') {
             setIsNew(location.pathname.includes('what-is-new'));
@@ -75,6 +85,14 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
                         </div>
                         {/* <DocVersionBadge /> */}
                         {docTOC.mobile}
+                        {canDisplayLastUpdate && (
+                            <div className={styles.lastUpdated}>
+                                <LastUpdated
+                                    lastUpdatedAt={metadata.lastUpdatedAt}
+                                    lastUpdatedBy={metadata.lastUpdatedBy}
+                                />
+                            </div>
+                        )}
                         <DocItemContent>{children}</DocItemContent>
                         <DocItemFooter />
                     </article>

src/theme/DocItem/Layout/styles.module.css

@@ -3,6 +3,12 @@
   margin-top: 0;
 }
 
+.lastUpdated {
+  margin-bottom: 1rem;
+  font-size: smaller;
+  font-style: italic;
+}
+
 @media (min-width: 997px) {
   .docItemCol {
     max-width: 75% !important;