documentation

opauwlo · Apr 18, 2021 · f9dedb6 · f9dedb6
1 parent 64fb3a2
commit f9dedb6
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -162,4 +162,4 @@ yarn.lock
 
 generated/*
 db.sqlite
-public/js
+public/js
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  rewrites() {
+    return [
+      {
+        source: '/doc',
+        destination: '/doc/index.html'
+      }
+    ]
+  }
+}
diff --git a/public/doc/README.md b/public/doc/README.md
@@ -0,0 +1,4 @@
+# Cusdis
+
+Open-source, lightweight (4.7kb gzipped), privacy-friendly alternative to Disqus.
+
diff --git a/public/doc/_sidebar.md b/public/doc/_sidebar.md
@@ -0,0 +1,4 @@
+- **Introduction**
+  - [About](/)
+  - [Features](/features.md)
+- [Self-host Guide](/self-host.md)
diff --git a/public/doc/features.md b/public/doc/features.md
@@ -0,0 +1,11 @@
+# Features
+
+## Universal embed code
+
+## Light-weight sdk
+
+## Moderation
+
+### Reply as Moderator
+
+### Approve
diff --git a/public/doc/index.html b/public/doc/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta charset="UTF-8">
+  <title>Cusids Documentation</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <script>
+    window.$docsify = {
+      basePath: '/doc/',
+      loadSidebar: true,
+      subMaxLevel: 3,
+      cusdis: {
+        host: 'https://cusdis.com',
+        appId: '35b01c49-15f9-46b3-807f-9240f6cadc1a'
+      }
+    }
+  </script>
+  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+  <script src="/js/cusdis.docsify.js"></script>
+
+</body>
+
+</html>
diff --git a/public/doc/self-host.md b/public/doc/self-host.md
@@ -0,0 +1,5 @@
+# Self-host Guide
+
+## Docker
+
+## Vercel
diff --git a/public/js/cusdis.docsify.js b/public/js/cusdis.docsify.js
@@ -0,0 +1,50 @@
+function CusdisPlugin(hook, vm) {
+  window.cusdisTag = 'cusdis_thread'
+
+  const config = vm.config.cusdis
+
+  const { appId, host } = config;
+
+  const dom = Docsify.dom
+
+  hook.init(_ => {
+    const script = dom.create("script");
+    script.async = true;
+    script.src = `http://localhost:3000/js/cusdis.es.js`;
+    script.setAttribute("data-timestamp", Number(new Date()));
+    dom.appendTo(dom.body, script);
+  })
+
+  hook.afterEach((html, next) => {
+    // const cusdisFooter = `
+    // <div id="cusdis"
+    //   data-host="${host}"
+    //   data-app-id="${appId}"
+    //   data-page-id="${vm.route.path}"
+    //   data-page-title="${vm.route.path}"
+    // ></div>
+    // `;
+
+    // next(html + cusdisFooter);
+    next(html)
+  });
+
+  function createCusdis() {
+    const div = document.createElement('div')
+    div.style.marginTop = '4rem'
+    div.dataset.appId = appId
+    div.dataset.pageId = vm.route.path
+    div.dataset.pageTitle = vm.route.path
+    div.dataset.host = host
+    return div
+  }
+
+  hook.doneEach(() => {
+    const cusdis = createCusdis()
+    dom.find('#main').append(cusdis)
+    console.log(cusdis)
+    window.renderCusdis(cusdis);
+  })
+}
+
+window.$docsify.plugins = (window.$docsify.plugins || []).concat(CusdisPlugin);
diff --git a/widget/components/Comment.svelte b/widget/components/Comment.svelte
@@ -9,19 +9,19 @@
   const { showIndicator } = getContext('attrs')
 </script>
 
-<div class:padding={true} class:indicator={showIndicator} style="margin-top: 2rem; margin-bottom: 2rem;">
+<div class:cusdis-padding={true} class:cusdis-indicator={showIndicator} style="margin-top: 2rem; margin-bottom: 2rem;">
   <div style="margin-bottom: .5rem;">
-    <div class="nickname inline font-bold">{comment.by_nickname}</div>
+    <div class="cusdis-comment-nickname cusdis-inline cusdis-font-bold">{comment.by_nickname}</div>
     {#if comment.moderatorId}
       <span class="mod">MOD</span>
     {/if}
-    <div class="date inline">{comment.parsedCreatedAt}</div>
+    <div class="cusdis-comment-date cusdis-inline">{comment.parsedCreatedAt}</div>
   </div>
 
-  <div class="content" style="margin-bottom: .5rem;">{comment.content}</div>
+  <div class="cusdis-comment-content" style="margin-bottom: .5rem;">{comment.content}</div>
 
   <div style="font-size: .5rem; margin-top: .25rem; margin-bottom: .25rem;">
-    <button type="button" on:click={_ => { showReplyForm = true }} class="link-btn">Reply</button>
+    <button type="button" on:click={_ => { showReplyForm = true }} class="cusdis-link-btn">Reply</button>
   </div>
 
   {#if showReplyForm}
@@ -36,36 +36,36 @@
 </div>
 
 <style>
-  .padding {
+  .cusdis-padding {
     padding-left: 1rem;
   }
 
-  .indicator {
+  .cusdis-indicator {
     border-left: 2px solid #ddd;
   }
-  .font-bold {
+  .cusdis-font-bold {
     font-weight: bold;
   }
 
-  .inline {
+  .cusdis-inline {
     display: inline-block;
   }
 
-  .nickname {
+  .cudis-comment-nickname {
     font-size: 1rem;
   }
 
-  .content {
+  .cusdis-comment-content {
     color: rgba(0, 0, 0, 0.8);
     font-size: 1rem;
   }
 
-  .date {
+  .cusdis-comment-date {
     color: rgba(0, 0, 0, 0.8);
     font-size: 0.8rem;
   }
 
-  .link-btn {
+  .cusdis-link-btn {
     font-size: 0.8rem;
     text-decoration: underline;
     cursor: pointer;

diff --git a/widget/components/Reply.svelte b/widget/components/Reply.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <div style="margin-top: 1rem;">
-  <div class="reply-info field">
+  <div class="cusdis-reply-info cusdis-field">
     <div>
       <input type="text" placeholder="nickname" bind:value={nickname} />
     </div>
@@ -65,12 +65,12 @@
     </div>
   </div>
 
-  <div class="field">
+  <div class="cusdis-field">
     <textarea bind:value={content} placeholder="Reply..." />
   </div>
 
-  <div class="field">
-    <button disabled={loading} class="submit-btn" class:disabled={loading} on:click={addComment}>{ loading ? 'Sending...' : 'Post Comment' }</button>
+  <div class="cusdis-field">
+    <button cusdis-disabled={loading} class="submit-btn" class:cusdis-disabled={loading} on:click={addComment}>{ loading ? 'Sending...' : 'Post Comment' }</button>
   </div>
 </div>
 
@@ -90,12 +90,12 @@
   input {
   }
 
-  .disabled {
+  .cusdis-disabled {
     background-color: rgba(0, 0, 0, .5);
     cursor: not-allowed;
   }
 
-  .reply-info div {
+  .cusdis-reply-info div {
     display: inline-block;
   }
 
@@ -110,7 +110,7 @@
     font-weight: bold;
   }
 
-  .field {
+  .cusdis-field {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }

diff --git a/widget/index.js b/widget/index.js
@@ -1,12 +1,17 @@
-import Widget from './Widget.svelte'
+import Widget from "./Widget.svelte";
 
-const target = document.querySelector("#cusdis");
 
-if (target) {
-  new Widget({
-    target,
-    props: {
-      attrs: target.dataset
-    }
-  });
+function render(target) {
+  if (target) {
+    new Widget({
+      target,
+      props: {
+        attrs: target.dataset,
+      },
+    });
+  }
 }
+
+window.renderCusdis = render
+
+render(document.querySelector(window.cusdisTag || "#cusdis"));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# Cusdis

		Open-source, lightweight (4.7kb gzipped), privacy-friendly alternative to Disqus.