From 4b091ec4535163fdc06a5705208e801f6b0eaaad Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Mon, 6 May 2024 15:21:09 +0200
Subject: [PATCH] Add last updated date and reading time (#540)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* last updated at time and reading time

* Style last updated date and reading time

---------

Co-authored-by: Benoît Rouleau <benoit.rouleau@icloud.com>
---
 packages/nextra-theme/src/index.tsx | 38 ++++++++++++++++++++++++++++-
 website/next.config.js              |  1 +
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/nextra-theme/src/index.tsx b/packages/nextra-theme/src/index.tsx
index d017240b575b..4bb7e5824233 100644
--- a/packages/nextra-theme/src/index.tsx
+++ b/packages/nextra-theme/src/index.tsx
@@ -90,7 +90,7 @@ export {
 }
 
 export default function NextraLayout({ children, pageOpts, pageProps }: NextraThemeLayoutProps): ReactElement {
-  const { frontMatter, filePath, pageMap, headings, title } = pageOpts
+  const { frontMatter, filePath, pageMap, headings, title, timestamp, readingTime } = pageOpts
   const { locale, defaultLocale } = useI18n<any>()
   const fsPath = useFSRoute()
 
@@ -156,6 +156,8 @@ export default function NextraLayout({ children, pageOpts, pageProps }: NextraTh
     seo = merge(seo, frontMatter.seo)
   }
 
+  const lastUpdated = timestamp ? new Date(timestamp) : null
+
   return (
     <NavContext.Provider value={{ filePath: pageProps.remoteFilePath || filePath, ...args }}>
       <DocumentContext.Provider value={{ frontMatter, headings, markOutlineItem, highlightedOutlineItemId }}>
@@ -190,6 +192,40 @@ export default function NextraLayout({ children, pageOpts, pageProps }: NextraTh
                 </div>
               ) : null}
               {frontMatter.title ? <Heading.H1>{frontMatter.title}</Heading.H1> : null}
+              {lastUpdated || readingTime ? (
+                <Paragraph size="14px">
+                  {lastUpdated ? (
+                    <span>
+                      <span sx={{ color: 'White64' }}>Last updated:</span>{' '}
+                      <time dateTime={lastUpdated.toISOString()}>
+                        {lastUpdated.toLocaleDateString(locale, {
+                          month: 'long',
+                          day: 'numeric',
+                          year: 'numeric',
+                        })}
+                      </time>
+                    </span>
+                  ) : null}
+                  <span
+                    sx={{
+                      mx: Spacing['16px'],
+                      display: 'inline-block',
+                      verticalAlign: 'top',
+                      width: '1px',
+                      height: '20px',
+                      bg: 'White16',
+                      '&:not(span + span), &:not(:has(+ span))': {
+                        display: 'none',
+                      },
+                    }}
+                  />
+                  {(readingTime?.minutes ?? 0) > 0 ? (
+                    <span>
+                      <span sx={{ color: 'White64' }}>Reading time:</span> {Math.ceil(readingTime!.minutes)} min
+                    </span>
+                  ) : null}
+                </Paragraph>
+              ) : null}
               <MDXProvider components={mdxComponents}>{children}</MDXProvider>
             </article>
 
diff --git a/website/next.config.js b/website/next.config.js
index 9d1581bdfa4b..defe8be0b158 100644
--- a/website/next.config.js
+++ b/website/next.config.js
@@ -20,6 +20,7 @@ const withNextra = nextra({
   flexsearch: false,
   codeHighlight: false,
   defaultShowCopyCode: false,
+  readingTime: true,
   transform(result, { route }) {
     if (route && !result.includes('getStaticProps')) {
       const banner = `