HTML to JSON: The easiest way

[elpbatista]

How to create and codify the html content to be stored in the translations JSON file.

1. Take advantage of LibreOffice Writer to create the content as a visual editor. Remember to use headers properly, respect the document hierarchy and avoid unnecessary formatting such as text colors and extraneous document layouts.
2. Save the resulting document as .html using File/Save to

3. Open the document in a text/code editor.
4. Clean up the code if necessary by removing style elements added by LibreOffice Writer.

5. Put all the code on a single line by removing unnecessary spaces and line breaks. Here is the first trick: Select the desired code and then press ctrl + j.

<h1>Quem Somos?</h1> <p>O Instituto de Tecnologias Geo&#8209;Sociais AddressForAll tem por objetivo a defesa dos dados abertos e da melhoria social, através do bom uso da tecnologia com ênfase nas tecnologias geo&#8209;espaciais.</p> <h2>Histórico</h2> <p>Como parte do seu trabalho no apoio ao projeto de mapa colaborativo OpenStreetMap, durante 3 anos, os fundadores do Instituto tentaram motivar o governo Brasileiro a criar uma base de dados de endereços aberta e colaborativa no Brasil. Vendo que o projeto não passava da ideação, devido à falta de vontade ou força política, Thierry Jean, Filipe Rocha e Peter Krauss decidiram lançar o projeto &quot;Endereço para todos&quot; em 2020 e criaram uma associação sem fins lucrativos chamada &quot;Instituto de Tecnologias Geo&#8209;Sociais AddressForAll&quot;.</p>

6. There is still one more step to go. The string needs to be formatted scaped to be part of a valid JSON. In this case I do recommend to use any online JSON Scaper or if you want to experience something wild, you can do it by hand just following this recommendations.

At the end of the process you should obtain this:

"<h1>Quem Somos?<\/h1> <p>O Instituto de Tecnologias Geo&#8209;Sociais AddressForAll tem por objetivo a defesa dos dados abertos e da melhoria social, através do bom uso da tecnologia com ênfase nas tecnologias geo&#8209;espaciais.<\/p> <h2>Histórico<\/h2> <p>Como parte do seu trabalho no apoio ao projeto de mapa colaborativo OpenStreetMap, durante 3 anos, os fundadores do Instituto tentaram motivar o governo Brasileiro a criar uma base de dados de endereços aberta e colaborativa no Brasil. Vendo que o projeto não passava da ideação, devido à falta de vontade ou força política, Thierry Jean, Filipe Rocha e Peter Krauss decidiram lançar o projeto &quot;Endereço para todos&quot; em 2020 e criaram uma associação sem fins lucrativos chamada &quot;Instituto de Tecnologias Geo&#8209;Sociais AddressForAll&quot;.<\/p>"

7. Now it can be use as a value of any JSON key in the translations document. Just cut and paste where you need to.

[crebollobr]

Com o uso intensivo de css no site, usar um editor que não entende esse css perderia o sentido de wysiwyg editor. Poderia ter uma área no site com um editor online com o mesmo css.

alguns exemplos de editores online https://www.opensourceagenda.com/projects/awesome-web-editor

Esse processamento de texto poderia ser feito por script no site. Faz escape e formata do jeito correto.

Browsers modernos tem corretor de texto embutido.

[ppKrauss]

The process is valid for first edition, when creating the website, but not good for content maintenance, not make sense in 2022, we need (and I suppose that we have) less artisanal, less time-consuming solutions. See https://github.com/AddressForAll/site-v2/issues/29