Enable commenting on lume with utteranc.es

[officialrajdeepsingh]

Lume enables commenting on the site with https://utteranc.es/. The utteranc is an open-source comment system base on github.
I think it is a big feature for lume. example site https://minimalist-blog.deno.dev/understand-the-android-features-before-you-regret.html

[oscarotero]

Installing Utterances is just to copy de <script> code in the template and that's all. Not sure if a Lume plugin makes sense, because it wouldn't make it easier.

[officialrajdeepsingh]

Its features do not recommend by me. It was recommended by one of my students. I know it is a copy-paste for you and me. But for beginners, copy-paste is so tricky. One of my students takes two days to copy and paste. If lume target beginner to the pro-level developer. I can achieve the same thing with Hugo, but what does lume provide differently? First is the deno and deno ecosystem, and second is the plugin system.
I think lume focuses on the beginner-level developer; lume is built with significant impact as a static site generator.

[oscarotero]

Lume is not targeted to beginner developers, just tries to make development easier and more productive.
Creating a plugin only to insert a script opens the door to create more similar plugins to use these kind of services, and this is something hard to maintain and most users don't use.

But if you think your students need this plugin, I'd recommend to create it and share with them. You can create a collection of Lume plugins for these basic needs. Something like this (I've written it quickly, without testing):

export default function utterancesPlugin(options) {
  return (site) => {
    site.process([".html"], (page) => {
      const div = page.document?.querySelector("#comments");
      if (div) {
        div.innerHTML = `
        <script src="https://utteranc.es/client.js"
        repo="${options.repo}"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
        </script>
        `
      }
    });
  }
}

The idea is that you have to include the <div id="comments"></div> in the position where you want the comments, and use the plugin with:

site.use(comments({ repo: "org/repo" });

[officialrajdeepsingh]

Yes, Forget about creating the plugin for lume. It is an excellent project for my student to create a plugin and enhance theme functionality.
Thanks @oscarotero