A comments system for vitepress

[BenRoe]

Hello,
which comment system do you use, besides giscus?
I am looking for system which supports social login, because not everyone has a GitHub account.

[northword]

waline https://waline.js.org/

[BenRoe]

Thank you. Looks interesting.
Can you share how you integrated it into vitepress?

[northword]

I don't have any examples to give. This is a modified version of an example given in the Waline documentation, and has not been tested.

Waline's documentation provides detailed deployment and integration solutions. You only need to modify the path in the integration example to the one provided by the VitePress API.

• https://waline.js.org/en/cookbook/import/project.html#import-in-vue-project
• https://vitepress.dev/reference/runtime-api#useroute

<template>
  <Waline :serverURL="serverURL" :path="path" />
</template>
<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
import { useRoute } from 'vitepress';

import '@waline/client/style';

const serverURL = 'https://waline.vercel.app';
const path = computed(() => useRoute().path);
</script>

Then, insert this component to theme: https://vitepress.dev/guide/extending-default-theme#layout-slots

[brc-dd]

useRoute inside computed won't work, this should work fine:

const route = useRoute() // don't destructure, route is reactive

...

<Waline ... :path="route.path" />

Here are some examples - https://github.com/search?q=waline+vitepress&type=code

[MikeCZ23]

You can also write something simple yourself. You don't need a database, just normal free hosting where the data will be written.

[BenRoe]

Before i used Remark42. It worked before, so i will give it a try.
Problem is i have to add the following code to vitepress.

<script>
	var remark_config = {
		host: "REMARK_URL",
		site_id: "YOUR_SITE_ID",
	}
</script>

and this

<script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);</script>

I have the following code, but get this error in the browser TypeError: undefined is not an object (evaluating 'window.remark_config.host') The error comes from the embed.js which is loaded from the remark42 instance.
Can ad variable to window in vue3/vitepress?

.vitepress/theme/index.mjs

import Layout from "./Layout.vue";

export default {
  Layout,
};

.vitepress/theme/Layout.vue

<!-- .vitepress/theme/Layout.vue -->
<script setup>
import DefaultTheme from "vitepress/theme";

import Comments from "./components/Remark42Comments.vue";

const { Layout } = DefaultTheme;
</script>

<template>
  <Layout>
    <template #doc-after>
      <Comments />
    </template>
  </Layout>
</template>

.vitepress/theme/components/Remark42Comments.vue

<script setup>
import { useData } from "vitepress";

const remark_config = {
  host: "https://comments.myDomain.com",
  site_id: "remark",
};

const { title } = useData();

!(function (e, n) {
  for (var o = 0; o < e.length; o++) {
    var r = n.createElement("script"),
      c = ".js",
      d = n.head || n.body;
    "noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
      (r.defer = !0),
      (r.src = remark_config.host + "/web/" + e[o] + c),
      d.appendChild(r);
  }
})(remark_config.components || ["embed"], document);
</script>

<template>
  <div id="remark42" ref="remark42" :key="title"></div>
</template>

[BenRoe]

I decided on Commentario.
It's easy to set up using Docker and supports multiple sites. There is no social login, but you can log in via email or comment without logging in.

The following example shows how to implement Commentario using VitePress. The code was created with the help of AI and has been tested.

.vitepress/composables/useComentario.ts

import { useRoute } from "vitepress";

const COMENTARIO_URL = "https://comments.yousite.com";

export function useComentario() {
  const route = useRoute();

  const getTheme = () =>
    document.documentElement.classList.contains("dark") ? "dark" : "light";

  const initialize = () => {
    if (typeof window === "undefined") return;

    // Set initial theme BEFORE loading script
    const commentsEl = document.querySelector("comentario-comments");
    if (commentsEl) {
      commentsEl.setAttribute("theme", getTheme());
    }

    // Load Comentario script
    const script = document.createElement("script");
    script.src = `${COMENTARIO_URL}/comentario.js`;
    script.setAttribute("data-url", window.location.origin + route.path);
    script.setAttribute("data-page-id", route.path);
    script.setAttribute("data-css-override", "true");
    script.async = true;
    document.head.appendChild(script);

    // Watch for VitePress theme changes
    const observer = new MutationObserver(() => {
      const comments = document.querySelector("comentario-comments");
      if (comments) comments.setAttribute("theme", getTheme());
    });

    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });
  };

  return { initialize };
}

.vitepress/theme/index.ts

import { h } from "vue";
import DefaultTheme from "vitepress/theme";
import Comentario from "../components/Comentario.vue";
import type { Theme } from "vitepress";

import "./custom.css";

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      "doc-after": () => h(Comentario),
      "page-bottom": () => h(Comentario),
    });
  },
} satisfies Theme;

.vitepress/components/Comentario.vue

<template>
  <div class="comentario-section vp-doc">
    <h2 id="comments">Comments</h2>
    <comentario-comments></comentario-comments>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { useComentario } from "../composables/useComentario";

onMounted(() => {
  useComentario().initialize();
});
</script>