Skip to content

Show the docs update time as relative, exact stamp on hover - #5474

Open
dimitrieh wants to merge 3 commits into
mainfrom
docs-relative-updated-time
Open

Show the docs update time as relative, exact stamp on hover#5474
dimitrieh wants to merge 3 commits into
mainfrom
docs-relative-updated-time

Conversation

@dimitrieh

@dimitrieh dimitrieh commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Description

The docs sidebar prints Updated: 2026-03-18 15:07:47 +0000. This shows Updated: 5 months ago, with the exact stamp on hover:

<time datetime="2026-03-18T15:07:47+00:00" title="2026-03-18 15:07:47 +0000">5 months ago</time>

The label is worked out in the browser, since a prerendered page would freeze it until the next build. The server still renders the exact stamp, so it survives without JS.

Formatting lives in nuxt/lib/relative-time.mjs with 7 unit tests. Pairs with #5473, which gives each page its own date, but does not depend on it.

Related Issue(s)

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

"Updated: 2026-03-18 15:07:47 +0000" asks the reader to work out how stale a
page is. "Updated: 5 months ago" answers it. The exact stamp stays available in
the title attribute and in datetime, so nothing is lost.

Docs pages are prerendered, so the relative label is set on mount rather than at
build time, where it would freeze until the next build. The server still renders
the exact stamp, which is what a reader without JS keeps and what makes
hydration quiet.
app.vue renders <NuxtPage /> with no key and the docs page sets no page key, so
every /docs page shares one component instance. Navigating between them patches
the value prop instead of remounting, and onMounted does not fire again, so an
assigned ref kept showing the previous page's label. A computed tracks the prop.
@netlify

netlify Bot commented Aug 3, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 6a2afe5
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a7073bd598fea00078bafd3
😎 Deploy Preview https://deploy-preview-5474--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 64 (🔴 down 4 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 3, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit b682978
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a7075557171430007ed87d1
😎 Deploy Preview https://deploy-preview-5474--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 64 (🔴 down 4 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@dimitrieh
dimitrieh requested a review from ZJvandeWeg August 3, 2026 12:49
@dimitrieh
dimitrieh marked this pull request as ready for review August 3, 2026 12:49
@dimitrieh
dimitrieh requested a review from Yndira-E August 3, 2026 17:19

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these executed? I vote to not test it actually

@@ -0,0 +1,54 @@
// Formats the docs `updated:` stamp. Kept free of Nuxt and Vue imports so it can be

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I bet there's a library to do all this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants