Converter to change gregorian date to jalali on view layer of discourse

Dev
12

Olá,

Esse é, na verdade, um processo simples.

Passo a passo: habilitar datas Shamsi no frontend do Discourse

1) Criar um Componente de Tema

  1. Vá para Admin → Personalizar → Temas

  2. Clique em Componentes

  3. Clique em Adicionar → Criar novo

  4. Nomeie-o: Conversor de Data Shamsi (Ou o que você quiser)

2) Adicionar o script (Seção Head)

Dentro do componente:

  1. Abra Comum → Head

  2. Cole tudo abaixo

  3. Salvar

Código:

<script>
(function () {
  // Aplica apenas quando o idioma do site é Persa
  if (!document.documentElement.lang.startsWith("fa")) return;

  const formatter = new Intl.DateTimeFormat(
    "fa-IR-u-ca-persian",
    { dateStyle: "medium" }
  );

  function toDate(value) {
    if (!value) return null;

    // época (segundos ou ms)
    if (/^\\d{10,13}$/.test(value)) {
      const n = Number(value);
      return new Date(value.length === 10 ? n * 1000 : n);
    }

    const d = new Date(value);
    return isNaN(d) ? null : d;
  }

  function process(el) {
    if (el.dataset.shamsi === "1") return;

    const date =
      toDate(el.getAttribute("datetime")) ||
      toDate(el.dataset.time) ||
      toDate(el.getAttribute("title"));

    if (!date) return;

    el.textContent = formatter.format(date);
    el.dataset.shamsi = "1";
  }

  function run(root = document) {
    root.querySelectorAll("time, .relative-date").forEach(process);
  }

  // carregamento inicial
  run();

  // lida com rolagem infinita / atualizações ao vivo
  new MutationObserver(muts => {
    muts.forEach(m => m.addedNodes.forEach(n => {
      if (n.nodeType === 1) run(n);
    }));
  }).observe(document.documentElement, { childList: true, subtree: true });
})();
</script>
___

Alternativamente, você pode carregar o que eu exportei e atribuí-lo aos seus temas.

discourse-shamsi-date.zip (1.1 KB)

Como funciona

O Discourse já envia datas Gregorianas normais para o seu navegador; este script não altera os dados, ele apenas substitui a forma como o texto da data é exibido na página, convertendo-o para Shamsi (Jalali) usando o próprio navegador.

O que o script faz (visão geral)

  1. Encontra esses elementos <time>

  2. Lê a data Gregoriana real de datetime

  3. Converte para Shamsi

  4. Substitui apenas o texto visível

  5. Repete isso sempre que novas postagens são carregadas

É isso. Nada mais.

Isso lhe dará datas como esta:

image
image1920×1244 221 KB

Você pode ver isso online na nossa instância: https://forums.7ho.st

Boa sorte

1 curtida