Skip to content

feat(theme): find best locale match to format last update - #4360

Open
userquin wants to merge 3 commits into
mainfrom
userquin/feat-use-best-lang-match-for-last-update
Open

feat(theme): find best locale match to format last update#4360
userquin wants to merge 3 commits into
mainfrom
userquin/feat-use-best-lang-match-for-last-update

Conversation

@userquin

@userquin userquin commented Nov 12, 2024

Copy link
Copy Markdown
Member

Description

This PR includes the logic to find the best locale match from navigator.languages including:

  • iso-639 support for Latin America: es-419
  • Edge browser case for ca-valencia lang (Spanish co-official: Valencià)
  • the new logic will be applied only when not enabling forceLocale (per locale) and will return undefined (current logic) if not found
  • add time lang attribute logic
  • use browser/OS language via Intl.DateTimeFormat().resolvedOptions().locale when best match not found

When testing this PR with Spanish, you should change replace lang: 'es-CO', with lang: 'es', (using medium for time style, that's why we have the seconds in the screenshots below) in the es.ts module.

You can add the languages to your browser sorting them (at least on Chrome).

NOTE about using browser/OS default language:

  • using english page the text in english => no time lang attr (en, en-GB, en-US should be present in languages)
  • accessing spanish page with es-ES=> time lang with es-ES with proper format HH24 (es-ES should be be present inlanguages)
  • moving es-ES after es-AR => time lang with es-AR with proper format AM/PM (es-ES should be present in languages)
  • other VP lang (pt, jp...) => using default browser/OS language, in my case es-ES => time lang with es-ES with proper format HH24 (doesn't matter if I put es-AR before es-ES)

Linked Issues

Additional Context

Testing Intl.DateTimeFormat script
[new Date()].forEach((d) => {
  const acc = {}

  Array.from(['es', 'es-419', 'es-ES', 'es-AR', 'es-CO', 'es-VE', 'es-MX', 'pt-PT', 'pt-BR']).forEach((l) => {
    const format = new Intl.DateTimeFormat(l, {
    dateStyle: 'short', timeStyle: 'short'
  }).format
    acc[l] = {
      date: d,
      format: format(d),
    }
  })
  console.table(acc)
})
Spanish translation with es-AR

imagen

imagen

Spanish translation with es-ES

imagen

imagen

---

Tip

The author of this PR can publish a preview release by commenting /publish below.

Comment thread src/client/theme-default/components/VPDocFooterLastUpdated.vue Outdated
@userquin
userquin requested a review from brc-dd November 12, 2024 14:45
<p class="VPLastUpdated">
{{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
<time :datetime="isoDatetime">{{ datetime }}</time>
<time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

use lang attr via ref value here instead element ref

@github-actions github-actions Bot added the stale label Dec 27, 2024
@brc-dd
brc-dd force-pushed the main branch 2 times, most recently from c5a8428 to 8abbe29 Compare August 14, 2025 03:45
@brc-dd
brc-dd force-pushed the main branch 2 times, most recently from 084cf43 to d3a1567 Compare August 20, 2025 14:41
@brc-dd brc-dd removed the stale label Jan 31, 2026
@brc-dd
brc-dd force-pushed the main branch 3 times, most recently from 15a0278 to 09af6c7 Compare March 26, 2026 04:26
@github-actions github-actions Bot added the stale label Jun 27, 2026
@bluwy

bluwy commented Aug 20, 2026

Copy link
Copy Markdown
Collaborator

Is this still needed with #4935 merged?

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants