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>