Criando sites dinâmico com Markdown e JSON usando JavaScript e markedjs

Introdução

Neste tutorial, vamos aprender a manipular arquivos JSON e a renderizar o conteúdo de arquivos Markdown utilizando JavaScript, HTML, CSS e a biblioteca marked.js. Abordaremos a definição das constantes, a requisição do arquivo JSON, a exibição dos dados no HTML e a captura de cliques nos links para renderizar o conteúdo Markdown. Em resumo, vamos criar um site dinâmico que exibe arquivos Markdown a partir de uma lista em JSON, permitindo a visualização do conteúdo Markdown ao clicar nos links. Utilizaremos a biblioteca marked.js para converter o conteúdo Markdown em HTML, detalhando cada parte do código e suas funcionalidades.

Estrutura do Projeto

Teremos dois componentes principais:

1. Um arquivo JSON contendo uma lista de arquivos markdown, com título, descrição resumida, data de publicação e endereço do arquivo.
2. Lista de Arquivos markdown que serão exibidos no site.

Explicação do Código

1. Definição da constante do camimho do arquivo

const arquivos = "../pasta/arquivos.json";

Aqui, a variável arquivo armazena o caminho relativo de um arquivo arquivos.json, que será usado para carregar as informações.

2. fetch do arquivo JSON

fetch(arquivo)
  .then((response) => response.text())
  .then((resultado) => listar(resultado))
  .catch((error) => console.error(error));

Fluxo de execução:

1. fetch(arquivo): Faz a requisição HTTP para obter o arquivo arquivos.json.
2. response.text(): Extrai o conteúdo do arquivo JSON como uma string de texto.
3. listar(resultado): Chama a função listar, passando o conteúdo do arquivo (o JSON em formato de string) como argumento.
4. Tratamento de erro (catch): Caso ocorra algum erro na requisição, ele será exibido no console do navegador.

3. Função listar(markdown)

function listar(markdown) {
  const content = document.querySelector("#conteudo");
  const lista = JSON.parse(markdown);
  lista.forEach((element) => {
    content.innerHTML += "<div>";
    content.innerHTML += "<h4>" + element.titulo + "</h4>";
    content.innerHTML += "<p>" + element.descricao + "</p>";
    content.innerHTML += "<p>Publicado em: " + element.data + "</p>";
    content.innerHTML += "<a href='" + obterCaminhoCompleto(element.link) + "'>" + obterCaminhoCompleto(element.link) + "</a>";
    content.innerHTML += "</div><hr>";
  });
}

Fluxo de execução:

1. Seleciona o elemento com id conteudo:const content = document.querySelector("#conteudo"); Este será o local onde o conteúdo do JSON será exibido.
2. Converte o JSON em objeto:const lista = JSON.parse(markdown); O conteúdo do JSON é convertido de texto para um array de objetos.
3. Itera sobre o array lista e exibe os dados:lista.forEach((element) => { content.innerHTML += "<div>"; content.innerHTML += "<h4>" + element.titulo + "</h4>"; content.innerHTML += "<p>" + element.descricao + "</p>"; content.innerHTML += "<p>Publicado em: " + element.data + "</p>"; content.innerHTML += "<a href='" + obterCaminhoCompleto(element.link) + "'>" + obterCaminhoCompleto(element.link) + "</a>"; content.innerHTML += "</div><hr>"; }); Para cada elemento do array:
   • Adiciona um título (<h4>) correspondente à propriedade titulo do objeto.
   • Adiciona uma descrição (<p>) correspondente à propriedade descricao.
   • Adiciona a data de publicação (<p>) correspondente à propriedade data.
   • Adiciona um link (<a>) que usa o caminho absoluto gerado por obterCaminhoCompleto.

4. Função obterCaminhoCompleto(caminhoRelativo)

const obterCaminhoCompleto = (caminhoRelativo) => {
  const caminhoPaginaAtual = window.location.href;
  return new URL(caminhoRelativo, caminhoPaginaAtual).href;
};

Explicação:

• Recebe um caminho relativo (caminhoRelativo) e converte para caminho absoluto.
• window.location.href: Captura a URL da página atual.
• new URL(caminhoRelativo, caminhoPaginaAtual): Cria um objeto URL combinando o caminho base com o caminho relativo.
• .href: Obtém a URL completa como string.

Exemplo de uso: Se a URL atual for https://meusite.com/pagina/ e o caminho relativo for ../conteudo/arquivo.md, a URL absoluta será:

https://meusite.com/conteudo/arquivo.md

5. Função mostrarMark(markdown)

function mostrarMark(markdown) {
  const visual = document.querySelector("#markdown");
  fetch(obterCaminhoCompleto(markdown))
    .then((response) => response.text())
    .then((resultado) => visual.innerHTML = marked.parse(resultado))
    .catch((error) => console.error(error));
}

Fluxo de execução:

1. Seleciona o elemento #markdown:const visual = document.querySelector("#markdown");
2. Faz um fetch para buscar o arquivo markdown:fetch(obterCaminhoCompleto(markdown))
3. Extrai o conteúdo do markdown e o converte em HTML:.then((response) => response.text())
4. Exibe o conteúdo renderizado:.then((resultado) => visual.innerHTML = marked.parse(resultado)) Nota: Estamos utilizando a biblioteca marked.js para converter o conteúdo markdown em HTML. Certifique-se de incluir a biblioteca marked.js no seu projeto para que o método marked.parse() funcione corretamente.

6. Captura de cliques nos links

document.addEventListener('click', function (event) {
  if (event.target.tagName === 'A' && event.target.closest('#conteudo')) {
    event.preventDefault();
    mostrarMark(event.target.getAttribute('href'));
  }
});

Fluxo de execução:

1. Captura qualquer clique no documento:document.addEventListener('click', function (event) {
2. Verifica se o clique foi em um link (A) e se está dentro do #conteudo:if (event.target.tagName === 'A' && event.target.closest('#conteudo')) {
3. Impede o comportamento padrão do link (navegação de página):event.preventDefault();
4. Chama a função mostrarMark() para renderizar o conteúdo markdown:mostrarMark(event.target.getAttribute('href'));

Exemplo de listararquivos.json

Para melhor entendimento, veja um possível conteúdo do arquivo listararquivos.json:

[
  {
    "titulo": "Primeiro arquivo",
    "descricao": "Uma breve descrição do primeiro arquivo.",
    "data": "2024-01-01",
    "link": "arquivos/primeiro.md"
  },
  {
    "titulo": "Segundo arquivo",
    "descricao": "Uma breve descrição do segundo arquivo.",
    "data": "2024-02-01",
    "link": "arquivos/segundo.md"
  }
]

Exemplo de saída no HTML

<div id="conteudo">
  <div>
    <h4>Primeiro arquivo</h4>
    <p>Uma breve descrição do primeiro arquivo.</p>
    <p>Publicado em: 2024-01-01</p>
    <a href="https://meusite.com/arquivos/primeiro.md">https://meusite.com/arquivos/primeiro.md</a>
  </div>
  <hr>
  <div>
    <h4>Segundo arquivo</h4>
    <p>Uma breve descrição do segundo arquivo.</p>
    <p>Publicado em: 2024-02-01</p>
    <a href="https://meusite.com/arquivos/segundo.md">https://meusite.com/arquivos/segundo.md</a>
  </div>
  <hr>
</div>

Conclusão

Neste tutorial, aprendemos como listar arquivos de um JSON e permitir a visualização de um conteúdo markdown correspondente ao clicar nos links. Analisamos a definição das constantes, a requisição do arquivo JSON, a exibição dos dados no