Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

userquin
Copy link
Collaborator

@userquin userquin commented Nov 12, 2024

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.

@userquin userquin requested a review from brc-dd November 12, 2024 14:45
@@ -28,7 +57,7 @@ onMounted(() => {
<template>
<p class="VPLastUpdated">
{{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
<time :datetime="isoDatetime">{{ datetime }}</time>
<time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
Copy link
Collaborator 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

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