Add last updated date and reading time (#540)

* last updated at time and reading time * Style last updated date and reading time --------- Co-authored-by: Benoît Rouleau <[email protected]>
graphprotocol · May 6, 2024 · 4b091ec · 4b091ec
1 parent 2b89524
commit 4b091ec
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git 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
@@ -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 = `