mirror of
https://codeberg.org/pluja/kycnot.me
synced 2024-10-01 01:05:59 -04:00
Migrate comment section to Comento
This commit is contained in:
pluja
parent
d89711d91d
commit
6531b9fd7c
@ -514,28 +514,18 @@
|
||||
</div>
|
||||
|
||||
<div class="m-2 rounded-xl bg-gray-500/10">
|
||||
<h2 id="comments">(matrix) comments</h2>
|
||||
<h2 id="comments">comments</h2>
|
||||
|
||||
<p>
|
||||
Each service has a dedicated comments section. The comments are suppored
|
||||
by <a rel="no-referrer" target="_blank" href="https://matrix.org">Matrix</a>, an open network for secure,
|
||||
decentralised communication, thanks to <a rel="no-referrer" target="_blank"
|
||||
href="https://cactus.chat/">Cactus</a>.
|
||||
by a self-hosted instance of <a rel="no-referrer" target="_blank" href="https://comentario.app">Comentario</a>. An open-source and lightweight (20kb) commenting engine.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To comment on a service's page, you just need a <a rel="no-referrer" target="_blank"
|
||||
href="https://matrix.org/try-matrix/">Matrix account</a>. This method gives users full control over who hosts
|
||||
their data. Users can log in using any Matrix server they choose.
|
||||
To comment on a service's page, you can log in with Twitter, Github or Gitlab. Anonymous comments are also possible, but these need to be approved before being public to avoid abuse.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can read and post comments in your browser, or continue the conversation using any other Matrix client.
|
||||
Comment sections are accesible from any homeserver on the Matrix network.
|
||||
</p>
|
||||
|
||||
<p>The <a rel="no-referrer" target="_blank" href="https://gitlab.com/cactus-comments">source code</a> for the web
|
||||
client is LGPLv3 licensed, and the backend service is AGPLv3 licensed.</p>
|
||||
<p>The <a rel="no-referrer" target="_blank" href="https://gitlab.com/commento/commento">source code</a> for Comentario is licensed under MIT license.</p>
|
||||
</div>
|
||||
|
||||
<div class="m-2 rounded-xl bg-gray-500/10">
|
||||
@ -554,8 +544,7 @@
|
||||
provided.
|
||||
</span>
|
||||
<span>
|
||||
* Comment section on each page, available on a dedicated chat room on
|
||||
<a target="_blank" href="https://https://matrix.org/">Matrix</a>.
|
||||
* Comment section on each page, available on a self-hosted <a href="https://comentario.app">Comentario</a> instance.
|
||||
</span>
|
||||
<span>* All changes are recorded on the <a href="/changelog">changelog</a></span>
|
||||
<span>* See any service's score breakdown: <a href="/api/v1/service/bisq/summary">bisq example</a></span>
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
<link rel="stylesheet" href="/static/css/cactus.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<section class="flex flex-col items-center justify-center p-2 my-4 mt-8 mb-2 space-y-4 font-bold text-md md:text-md">
|
||||
<section class="flex flex-col justify-center items-center p-2 my-4 mt-8 mb-2 space-y-4 font-bold text-md md:text-md">
|
||||
<!-- Pending Approval Notice -->
|
||||
{{if .Service.Pending}}
|
||||
<div class="flex items-center justify-center">
|
||||
<a href="#" target="_blank" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-yellow-500 transition duration-300 border border-yellow-600 rounded bg-zinc-900 hover:border-yellow-600 hover:text-yellow-600">
|
||||
<div class="flex justify-center items-center">
|
||||
<a href="#" target="_blank" class="flex justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-yellow-500 rounded border border-yellow-600 transition duration-300 bg-zinc-900 hover:border-yellow-600 hover:text-yellow-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-yellow-600 tabler-alert" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<circle cx="12" cy="12" r="9"></circle>
|
||||
@ -21,9 +21,9 @@
|
||||
|
||||
<!-- Not Listed Notice -->
|
||||
{{if and (not .Service.Pending) (not .Service.Listed)}}
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="flex justify-center items-center">
|
||||
<a href="#" target="_blank"
|
||||
class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-yellow-500 transition duration-300 border border-yellow-600 rounded bg-zinc-900 hover:border-yellow-600 hover:text-yellow-600">
|
||||
class="flex justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-yellow-500 rounded border border-yellow-600 transition duration-300 bg-zinc-900 hover:border-yellow-600 hover:text-yellow-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-yellow-600 tabler-alert" width="24" height="24"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
@ -41,7 +41,7 @@
|
||||
{{if not (eq (len .Service.Notes) 0)}}
|
||||
{{range .Service.Notes}}
|
||||
{{if ne . ""}}
|
||||
<p class="max-w-lg p-4 text-sm border rounded-lg md:text-base border-yellow-400/20 bg-yellow-500/10">
|
||||
<p class="p-4 max-w-lg text-sm rounded-lg border md:text-base border-yellow-400/20 bg-yellow-500/10">
|
||||
{{.}}
|
||||
</p>
|
||||
{{end}}
|
||||
@ -50,9 +50,9 @@
|
||||
|
||||
|
||||
<!-- Service Header -->
|
||||
<div class="flex items-center justify-center space-x-4">
|
||||
<div class="flex justify-center items-center space-x-4">
|
||||
<img class="rounded-full size-10 md:size-14 bg-white/25" src="/api/g/picture/{{.Service.ID}}" alt="" />
|
||||
<span class="flex items-center justify-center capitalize">
|
||||
<span class="flex justify-center items-center capitalize">
|
||||
<span class="text-xl font-bold md:text-2xl">{{.Service.Name}}</span>
|
||||
{{if .Service.Verified}}
|
||||
<a aria-label="Verified" data-balloon-pos="up" href="/about#verification">
|
||||
@ -70,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="flex flex-wrap items-center justify-center space-x-2">
|
||||
<div class="flex flex-wrap justify-center items-center space-x-2">
|
||||
{{if ne (len .Service.Urls) 0}}
|
||||
<div class="inline-flex">
|
||||
<a href="{{randomElem .Service.Urls}}{{.Service.Referral}}" target="_blank"
|
||||
@ -93,7 +93,7 @@
|
||||
</a>
|
||||
|
||||
{{if ne .Service.Referral ""}}
|
||||
<a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.Urls}}" class="flex items-center justify-center px-1 py-1 text-center text-gray-300 transition duration-300 border border-gray-600 rounded-r md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.Urls}}" class="flex justify-center items-center px-1 py-1 text-center text-gray-300 rounded-r border border-gray-600 transition duration-300 md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 15l3 -3m2 -2l1 -1" />
|
||||
@ -126,7 +126,7 @@
|
||||
{{end}}
|
||||
|
||||
{{if ne .Service.Referral ""}}
|
||||
<a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.OnionUrls}}" class="flex items-center justify-center px-1 py-1 text-center text-purple-600 transition duration-300 border border-purple-900 rounded-r md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<a aria-label="No Referral" data-balloon-pos="up" href="{{randomElem .Service.OnionUrls}}" class="flex justify-center items-center px-1 py-1 text-center text-purple-600 rounded-r border border-purple-900 transition duration-300 md:px-2 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="size-4 link-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M9 15l3 -3m2 -2l1 -1" />
|
||||
@ -141,7 +141,7 @@
|
||||
{{end}}
|
||||
|
||||
{{if ne (len .Service.TosUrls) 0}}
|
||||
<a href="{{index .Service.TosUrls 0}}" target="_blank" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-gray-300 transition duration-300 border border-gray-600 rounded bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<a href="{{index .Service.TosUrls 0}}" target="_blank" class="flex justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-gray-300 rounded border border-gray-600 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-report-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697"></path>
|
||||
@ -156,7 +156,7 @@
|
||||
</a>
|
||||
{{end}}
|
||||
|
||||
<a aria-label="Discuss service" data-balloon-pos="up" href="#discuss" class="items-center justify-center hidden px-2 py-1 m-1 space-x-2 text-center transition duration-300 border rounded text-sky-400 border-sky-700 md:flex bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<a aria-label="Discuss service" data-balloon-pos="up" href="#discuss" class="hidden justify-center items-center px-2 py-1 m-1 space-x-2 text-center text-sky-400 rounded border border-sky-700 transition duration-300 md:flex bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 messages" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
|
||||
@ -167,8 +167,8 @@
|
||||
|
||||
|
||||
<!-- Usage Guide Button -->
|
||||
<!--<div class="flex flex-col items-center justify-center my-1 text-sm">
|
||||
<a href="https://example.com" target="_blank" class="flex items-center justify-center max-w-xs px-2 py-1 m-1 space-x-2 text-center transition duration-300 border rounded text-lime-400 border-lime-700 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<!--<div class="flex flex-col justify-center items-center my-1 text-sm">
|
||||
<a href="https://example.com" target="_blank" class="flex justify-center items-center px-2 py-1 m-1 space-x-2 max-w-xs text-center text-lime-400 rounded border border-lime-700 transition duration-300 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 compass" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path>
|
||||
@ -183,16 +183,16 @@
|
||||
</div>-->
|
||||
|
||||
<!-- Icons -->
|
||||
<a href="/about#icons" class="flex items-center justify-center max-w-md mt-4 text-xs"> {{partial "partials/service_icons" .Service}} </a>
|
||||
<a href="/about#icons" class="flex justify-center items-center mt-4 max-w-md text-xs"> {{partial "partials/service_icons" .Service}} </a>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="max-w-lg p-4 text-sm border rounded-lg md:text-base border-white/20 bg-gray-500/10">{{if ne .Service.Description ""}} {{.Service.Description | safe}} {{else}} This {{.Service.Type}} does not have a description. {{end}}</p>
|
||||
<p class="p-4 max-w-lg text-sm rounded-lg border md:text-base border-white/20 bg-gray-500/10">{{if ne .Service.Description ""}} {{.Service.Description | safe}} {{else}} This {{.Service.Type}} does not have a description. {{end}}</p>
|
||||
</section>
|
||||
|
||||
<!-- KYC Level -->
|
||||
<section class="flex items-center justify-center px-2">{{partial "partials/kyc_level" .Service.KycLevel}}</section>
|
||||
<section class="flex justify-center items-center px-2">{{partial "partials/kyc_level" .Service.KycLevel}}</section>
|
||||
|
||||
<section class="flex flex-col items-center justify-center p-4">
|
||||
<section class="flex flex-col justify-center items-center p-4">
|
||||
<!-- Notes / Comments -->
|
||||
{{if .Service.Comments}}
|
||||
<div class="mb-5 space-y-1.5 max-w-lg">
|
||||
@ -206,15 +206,15 @@
|
||||
|
||||
<!-- Attributes -->
|
||||
{{if .Attributes}}
|
||||
<div class="grid grid-cols-1 gap-2 mt-2 auto-cols-max md:grid-cols-2">{{range .Attributes}} {{partial "partials/attribute_line" .}} {{end}}</div>
|
||||
<div class="grid grid-cols-1 auto-cols-max gap-2 mt-2 md:grid-cols-2">{{range .Attributes}} {{partial "partials/attribute_line" .}} {{end}}</div>
|
||||
{{end}}
|
||||
<span class="mt-6 text-xs text-white/20"> (updated {{humanizePbTimeString .Service.Updated}}) </span>
|
||||
</section>
|
||||
|
||||
<div class="w-full my-2 border-t-2 border-opacity-50 border-dashed border-t-lime-400/10"></div>
|
||||
<div class="my-2 w-full border-t-2 border-opacity-50 border-dashed border-t-lime-400/10"></div>
|
||||
|
||||
<!-- ToS Checker -->
|
||||
<section class="flex flex-col items-center justify-center p-4" id="tos">
|
||||
<section class="flex flex-col justify-center items-center p-4" id="tos">
|
||||
<a href="/about#tos-checker" class="text-xl font-bold">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 calendar-cog" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
@ -234,62 +234,51 @@
|
||||
<span class="text-xs text-white/30">?</span>
|
||||
</a>
|
||||
<p class="max-w-sm text-xs text-center text-gray-500 text-opacity-75">Automated, ai-driven monthly ToS reviews.</p>
|
||||
<p class="max-w-sm mt-1 text-xs text-center text-gray-600 text-opacity-75">Last Check: {{ dateString .Service.LastTosReview }}</p>
|
||||
<p class="mt-1 max-w-sm text-xs text-center text-gray-600 text-opacity-75">Last Check: {{ dateString .Service.LastTosReview }}</p>
|
||||
|
||||
{{if .Service.TosReviews}}
|
||||
<div class="max-w-lg">
|
||||
{{if eq 0 (len .Service.TosReviews)}}
|
||||
<p class="max-w-md mt-2 font-bold text-center text-opacity-75 text-amber-400 text-md">Not ToS reviews for this service (yet).</p>
|
||||
<p class="mt-2 max-w-md font-bold text-center text-amber-400 text-opacity-75 text-md">Not ToS reviews for this service (yet).</p>
|
||||
{{else if eq (len .Service.TosUrls) 0}}
|
||||
<p class="max-w-md mt-2 font-bold text-center text-opacity-75 text-amber-400 text-md">This service has no ToS.</p>
|
||||
<p class="mt-2 max-w-md font-bold text-center text-amber-400 text-opacity-75 text-md">This service has no ToS.</p>
|
||||
{{else}} {{range .Service.TosReviews}} {{if .Warning}} {{partial "partials/tos_check" .}} {{end}} {{end}}
|
||||
<details class="py-2">
|
||||
<summary class="max-w-md mt-2 text-lg font-bold text-center text-blue-400 text-opacity-75 cursor-pointer">Show non-conflictive ToS reviews</summary>
|
||||
<summary class="mt-2 max-w-md text-lg font-bold text-center text-blue-400 text-opacity-75 cursor-pointer">Show non-conflictive ToS reviews</summary>
|
||||
{{range .Service.TosReviews}} {{if ne .Warning true}} {{partial "partials/tos_check" .}} {{end}} {{end}}
|
||||
</details>
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<p class="max-w-md mt-2 font-bold text-center text-opacity-75 text-amber-400 text-md">Not ToS reviews for this service (yet).</p>
|
||||
<p class="mt-2 max-w-md font-bold text-center text-amber-400 text-opacity-75 text-md">Not ToS reviews for this service (yet).</p>
|
||||
{{end}}
|
||||
</section>
|
||||
|
||||
<div class="w-full my-2 border-t-2 border-opacity-50 border-dashed border-t-lime-400/10"></div>
|
||||
<div class="my-2 w-full border-t-2 border-opacity-50 border-dashed border-t-lime-400/10"></div>
|
||||
|
||||
<!-- Comments -->
|
||||
<section class="flex flex-col items-center justify-center p-4 mb-16" id="discuss">
|
||||
<section class="flex flex-col justify-center items-center p-4 mb-16" id="discuss">
|
||||
<a href="/about#comments" target="_blank" class="text-xl font-bold">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 messages" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
|
||||
<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
|
||||
</svg>
|
||||
<span>Matrix Comments</span>
|
||||
<span>Comments</span>
|
||||
<span class="text-xs text-white/30">?</span>
|
||||
</a>
|
||||
<h2 class="text-xl font-bold"></h2>
|
||||
<p class="max-w-sm pb-4 mt-1 text-xs text-center text-gray-500 text-opacity-75">Beware of fake reviews and accounts. Verify user profiles and conduct your own research.</p>
|
||||
<p class="pb-4 mt-1 max-w-sm text-xs text-center text-gray-500 text-opacity-75">Alghough comments are moderated, beware of fake reviews. Always do your own research.</p>
|
||||
<!-- Div where cactus will set the client-->
|
||||
<div id="comment-section" class="w-full max-w-xl mx-2 overflow-hidden break-all sm:mx-6">
|
||||
<div id="comment-section" class="mx-2 w-full max-w-xl break-all sm:mx-6">
|
||||
<comentario-comments></comentario-comments>
|
||||
<noscript>
|
||||
<p class="mb-2 font-bold text-center text-yellow-300">
|
||||
You can enable JavaScript to see and use comments here. It just will load a 150kb open-source script to interact with Matrix.
|
||||
The source code is available <a target="_blank" class="underline" href="https://gitlab.com/cactus-comments/cactus-client/-/tree/main/src?ref_type=heads">here</a>.
|
||||
You can enable JavaScript to see and use comments here. It just will load a 20kb open-source script to interact with our instance of Comentario.
|
||||
The source code is available on <a target="_blank" class="underline" href="https://gitlab.com/commento/commento">Gitlab</a>.
|
||||
</p>
|
||||
|
||||
<p class="font-bold text-center text-yellow-500/50">> If you still want to avoid using Javascript in the browser, you can use a Matrix Client to read comments: <a class="underline" href="https://matrix.to/#/%23comments_testing-knm-local_{{toId .Service.Name}}%3Acactus.chat">matrix.to</a></p>
|
||||
</noscript>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script>
|
||||
initComments({
|
||||
node: document.getElementById("comment-section"),
|
||||
defaultHomeserverUrl: "https://matrix.cactus.chat:8448",
|
||||
serverName: "cactus.chat",
|
||||
siteName: "kycnot.me",
|
||||
commentSectionId: "{{toId .Service.Name}}",
|
||||
guestPostingEnabled: false
|
||||
})
|
||||
</script>
|
||||
<script defer src="https://comments.kycnot.me/comentario.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user