Add Comments to Your Eleventy (11ty) Site

Para ver todos os shortcodes e flows rodando localmente contra o tenant público demo, clone o repositório e execute:

cd example
npm install
npm start

Cada componente tem sua própria página em example/src/pages/ que você pode copiar diretamente para o seu próprio site Eleventy.

npm install fastcomments-11ty

Registre o plugin na sua configuração do Eleventy (.eleventy.js ou eleventy.config.js):

const { fastcommentsPlugin } = require('fastcomments-11ty');

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
};

Ou com ESM:

import { fastcommentsPlugin } from 'fastcomments-11ty';

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(fastcommentsPlugin);
}

Em seguida, use os shortcodes em seus templates. No Nunjucks (.njk):

{% fastcomments { tenantId: "demo" } %}

No Liquid (.liquid):

{% fastcomments tenantId: "demo" %}

Substitua "demo" pelo ID do seu tenant do FastComments.

Exemplos

{# Contagem de comentários embutida no texto #}
This page has {% fastcommentsCommentCount { tenantId: "demo" } %} comments.

{# Chat ao vivo #}
{% fastcommentsLiveChat { tenantId: "demo" } %}

{# Chat colaborativo — apontar para um elemento de conteúdo usando seletor CSS #}
<article id="post-body">
  <p>Highlight me to leave a comment.</p>
</article>
{% fastcommentsCollabChat { tenantId: "demo", target: "#post-body" } %}

{# Chat de imagem — apontar para um elemento de imagem usando seletor CSS #}
<img id="hero" src="/hero.jpg" alt="Hero image" />
{% fastcommentsImageChat { tenantId: "demo", target: "#hero" } %}

{# Resumo de avaliações #}
{% fastcommentsReviewsSummary { tenantId: "demo" } %}

{# Feed de atividade do usuário #}
{% fastcommentsUserActivityFeed { tenantId: "demo", userId: "demo:demo-user" } %}

eleventyConfig.addPlugin(fastcommentsPlugin, {
    // Registrar apenas um subconjunto dos shortcodes:
    shortcodes: ['fastcomments', 'fastcommentsCommentCount'],
    // Adicionar um prefixo a cada nome de shortcode registrado (por exemplo, "fc" -> "fcFastcomments"):
    prefix: 'fc'
});

Cada shortcode também é exportado como uma função autônoma que retorna a string HTML:

const { fastcomments, commentCount } = require('fastcomments-11ty');

eleventyConfig.addShortcode('comments', fastcomments);
eleventyConfig.addShortcode('commentCount', commentCount);

Uma demonstração funcional está incluída no diretório example/:

cd example && npm install && npm start

• Documentação do FastComments
• Personalização & Configuração
• Documentação do Eleventy

Estes componentes são wrappers em torno dos nossos componentes principais do VanillaJS. Podemos atualizar automaticamente esses componentes (corrigir bugs, adicionar recursos) sem publicar esta biblioteca, então, embora ela possa não ser publicada por um tempo, isso não significa que o FastComments não esteja em desenvolvimento ativo! Fique à vontade para conferir nosso blog para atualizações. Mudanças ou recursos que quebrem a API nunca serão entregues à biblioteca core subjacente sem um aumento de versão nesta biblioteca.