Sumário

• Sumário
• Introdução
• Giscus
• Referências

Introdução

Um dos elementos que faltava em meu blog era a falta de opções de interação dos leitores com os post por meio de comentários. Historicamente via bastante blogs e outros sites usarem comentários embarcados fornecidos pelo Facebook por exemplo ou um terceiro especializado, mas e se eu te disser que podemos fazer isso diretamente usando apenas o Github?

Giscus

O github possui um mecanismo de forum/discussões que permite com que pessoas discutam sobre um projeto em um repositório, utilizando Giscus podemos utilizar essa função para embarcar comentários diretamente em nossa páginas.

Giscus é um serviço que consiste em um app/bot para seu Github e repositório desejado, um serviço hosteado na Vercel, e um elemento iframe embarcado em sua página.

Para implementar é muito fácil:

1. Crie ou use um repositório público que ira abrigar as discussões
2. Nas configurações do repositório vá para General>Features e habilite Discussions
3. Adicione o Github app Giscus em sua conta e se quiser, apenas no repositório especifico
4. Navegue até a página do Giscus e utilize o guia de configuração para criar seu elemento embarcado, será algo como:

   <script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        crossorigin="anonymous"
        async>
   </script>
   

5. Recomendo escolher o Page Mapping para usar <title> como fonte de mapeamento, pois meu blog é feito em Jekyll e os mapas de pathName e Url são bagunçados e não quis testar para ver se dava problema, só utilizei a tag título mesmo.
6. Recomendo também criar uma categoria nas discussões do seu repositório especialmente para o Giscus.
7. Insira o elemento em seu html para os posts, no meu caso usei um Jekyll include no meu template de post:

includes/giscus.html:

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>

templates/post.html:

    ...
    <div class="content" id="postContent">
      {{content}}
    </div>
    
    {% include giscus.html %}
</div>

É isso pessoal, até a próxima!

Referências

• Giscus