AddressForAll / site-v2

New AddressForAll website, version 3 of attempts to make it better
Apache License 2.0
1 stars 0 forks source link

Edição amigável no JSON i18n #29

Open ppKrauss opened 2 years ago

ppKrauss commented 2 years ago

Retoando "Implement multi language" da #1...

Aparentemente não existe um plugin pronto para ajudar a editar o conteúdo das traduções, encriptado em i18next json-format. O questionamento na comunidade (e este sobre parsing) ainda não teve resposta, A solução dada pela issue 27 também não é satisfatória.

Os nossos conteúdos estão atualmente "encriptados" em JSON, precisamos que haja ou uma ferramenta pronta para editar e graver de volta. Existem duas soluções satisfatórias:

  1. Parser ida-e-volta para edição em HTML (que por sua vez pode ser levado a Google-docs ou MS-Word e editado por leigos), seria uma "automação da issue 27".

  2. Edição do JSON em formulário, minimamente formatado permite edição, por exemplo CKeditor inline https://ckeditor.com/ckeditor-5/demo/#inline

Buscar soluções inclusive pagas

Existem módulos React para isso? Ou quem sabe uma empresa ofereça a solução, conferir por exemplo https://docs.locize.com

Automatizar com PostgREST

... Se for o caso de nós mesmos reinventarmos a roda, que pelo menos tentemos simplificar essa reinvenção: vale ingerir os dados no PostgreSQL e publicar/editar através do PostgREST.

  1. Ingerir translation.*.json da pasta /i18n.
  2. Criar uma SQL-Views para navegar por grupos ou partes específicas do JSON
  3. Renderizar e abrir com CKeditor ... Usando PostgREST com UPDATABLE-VIEWS também podemos atualizar automaticamente.

...

Exemplos de interface antigos mas resolvem

Podemos fazer um parser para transformar e simplificar (remove componentes) os templates de página em https://github.com/AddressForAll/site-v2/tree/main/pages isso geraria um "simplified website draft" onde a edição ocorre livremente... Ou com CKEditor ou com algo mais primitivo, só para agrupar trechos de conteúdo. Bastam as antigas soluções de interface na gestão de conteúdo, como a Wikipedia, que incluia um botão de EDIT (de seção),

wiki

ou como RedDot CMS, que incluia o link de edição em pontos vermelhos.

redDot

ppKrauss commented 2 years ago

Ainda não resolvemos esse problema (!), precisamos urgente de uma solução pois editar em JSON é muito ruim e ficar convertando, achando, copiando/colando também é muito ruim.

Solução paliativa

Como afinal não tem como tornar amigpavel, será um programador a empreender as atualizações de conteúdo... Mas justamente como programadores sabemos que a instrução __html: converter.makeHtml(t("downloads.md")) diz que é viável trazer o conteúdo não de um JSON mas de um arquivo standalone de conteúdo!

No common.json podemos então expressar os conteúdos que virão de um arquivo e os conteúdos que virão de valores (key-value) diretamente:

    "downloads": {
        "file_md": "downloads.md",
    },

Nos demais key-values nada muda, por exemplo:

    "data":{
        "title":"Dados",
        "text":"Temos uma equipe que liga para os detentores ...",
        "phases": {
            "text":"Nossos dados estão disponíveis em 3 fases de tratamento:",
            "phase01":{
                "title":"Dados Preservados",
                "text":"<p>Os dados e licenças ...</p>"
            },"phase02": {
                "title": "Dados Filtrados",
                "text": "<p>Por terem origem diversa, os dados ... </p>"
            },
            "phase03": {
                "title": "Dados Consolidados",
                "text": "<p>A consolidação consiste em agregar estatisticamente ...</p>"
            }
        }
    },

Solução paleativa de apoio

Ao invés de JSON usar YAML! são equivalentes, porém YAML é muito mais humano e portanto próximo da equipe de conteúdo e tradução. Usando o exemplo acima:

data:
  title: Dados
  text: Temos uma equipe que liga para os detentores ...
  phases:
    text: 'Nossos dados estão disponíveis em 3 fases de tratamento:'
    phase01:
      title: Dados Preservados
      text: "<p>Os dados e licenças ...</p>"
    phase02:
      title: Dados Filtrados
      text: "<p>Por terem origem diversa, os dados ... </p>"
    phase03:
      title: Dados Consolidados
      text: "<p>A consolidação consiste em agregar estatisticamente ...</p>"
elpbatista commented 2 years ago

¡Listo!

Screen Shot 2022-09-09 at 1 20 30 PM
0e1 commented 2 years ago

Ainda não está funcionando:

git clone git@github.com:AddressForAll/site-v2.git
pushd site-v2
git rm public/locales/pt/common.json
npm install
npm run dev

> site-v2@2.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 7.4s (237 modules)
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 623 ms (242 modules)
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
wait  - compiling /[locale]...
wait  - compiling...
event - compiled client and server successfully in 1382 ms (249 modules)
wait  - compiling /_error (client and server)...
wait  - compiling...
event - compiled client and server successfully in 349 ms (250 modules)
error - Error: Default namespace not found at public/locales/pt/common.json
error - Error: Default namespace not found at public/locales/pt/common.json
elpbatista commented 2 years ago

Es muy raro, acabo de probar y funciona bien. He movido de lugar todos los .json para que no estén presentes así que solo tiene acceso a los .yaml.

Screen Shot 2022-09-12 at 10 47 44 AM
elpbatista commented 2 years ago

También he generado con éxito la versión estática

Screen Shot 2022-09-12 at 10 56 03 AM
0e1 commented 2 years ago

Ok, testei com clone do repositório anterior a alteração https://github.com/AddressForAll/site-v2/commit/f275333d2b41c1270233903f4a1286d06316046d. Com essa alteração, funciona!

ppKrauss commented 2 years ago

Pending tasks about files:

  1. Remove all JSON (the official is YAML)
  2. Move (and adapt Node source) the /contents/. to English : /public/locales/en
  3. Create new example-files or final files for /public/locales/pt and /public/locales/es
  4. Add here or at /docs a simple and didactic explanation "how to use files".

image

image