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.

Sign up for GitHub

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

Jump to bottom

Study HTML content preprocessor usage #3

Open
ppKrauss opened this issue Jun 8, 2022 · 2 comments
Open

Study HTML content preprocessor usage #3

ppKrauss opened this issue Jun 8, 2022 · 2 comments
Assignees
@elpbatista
Labels
enhancement New feature or request

Comments

@ppKrauss
Copy link
Contributor

ppKrauss commented Jun 8, 2022

Arquivos Javascriot não são tão facilmente editáveis quanto páginas estáticas de HTML5-onlyContent. Equipe composta por designers, diagramadores e revisores de texto necessita HTML padrão. Isso reduz custos e garante maior confiabilidade nas revisões.

Por exemplo a pages/home.js poderia ser home.htm. O footer e header Javascript são constantes, de modo que o arquivo home.js pode ser facilmente reconstruído por template:

import React from "react";
import Content from "../components/layout";
import RegionalMap from "../assets/img/regioes_atendidas.svg";
const Home = () => (
  <>
    <Content>
      !!HTML_AQUI!!
    </Content>
  </>
);
export default Home;

O arquivo home.htm seria puro HTML:

<section id="advertisment">
  <p className="message">
    O site da base de dados de endereços aberta, colaborativa{" "}
    <span className="underlined">gratuita</span>
  </p>
 ...
</section>

...
<section id="statutes">
  <div className="col">
    <p className="message">
      Os nossos dados são disponiveis para download, com a informação do
      tipo de licensa aberta para cada dado (CC0, CC BY ou CC BY AS, ou
      equivalente)
    </p>
    <a href="!#" className="btn btn-blue">
      Downloads
    </a>
  </div>
</section>
@ppKrauss ppKrauss added the enhancement New feature or request label Jun 8, 2022
@elpbatista
Copy link
Collaborator

No comprendo. El sitio está hecho exactamente así como pones en el primer ejemplo. En components/layout.js se crea la estructura de todas las páginas que van a ser similares, como mencionas incluyendo header.js y footer.js que son constantes y en pages/home.js se incorpora el contenido HTML. No creo que React asimile la inclusión de HTML5 como propones porque al implementar un DOM virtual, la App requiere se adaptada. Las diferencias más notables son el uso de className en lugar de class y <div class="root">...</div> inmediatamente debajo de <body> que requiere React para "hidratar" el contenido. Estuve haciendo algunas pruebas pero no conseguí removerlo, porque aunque es técnicamente posible, el render saca un warning diciendo que no se recomienda

@ppKrauss
Copy link
Contributor Author

No comprendo. El sitio está hecho exactamente así como pones en el primer ejemplo.

Não é exatamente: uma coisa é o template, outra coisa é o output final com o conteúdo gerado pelo template... Me parece que você está confundindo as duas coisas.

O foco aqui é o template: precisa ser expresso em HTML legível, não em Javascript... Mas parece bem fácil a conversão de um em outro, então podemos usar um "template HTML" para editar, revisar e fazer manutenção, e depois rodar um parser simples para converter o "template HTML" em Javascript React.

@ppKrauss ppKrauss mentioned this issue Oct 28, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@elpbatista elpbatista

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ppKrauss @elpbatista