feat: support disqus comments (#31)

deno.json

@@ -12,7 +12,7 @@
     "ok": "deno fmt --check && deno lint && deno task check:types && deno task test"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "tailwindcss": "npm:[email protected]",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",

src/components/DiscussionEmbed.tsx

@@ -0,0 +1,119 @@
+// deno-lint-ignore-file
+import { useEffect } from "preact/hooks";
+
+const DISQUS_INSTANCE: any = "DISQUS";
+const DISQUS_CONFIG: any = "disqus_config";
+const DISQUS_SHORTNAME: any = "disqus_shortname";
+const DISQUS_THREAD: any = "disqus_thread";
+const DISQUS_COMMENT_ELEMENT_ID: any = "dsq-embed-scr";
+const DISQUS_PRELOAD_IFRAME_SELECTOR: any = "iframe[id^=dsq-app]";
+
+const DEFER_LOADING_MS = 4000;
+
+export interface DisqusCommentProps {
+  title: string;
+  identifier: string;
+  url: string;
+  shortname: string;
+
+  defer?: number; // defer loading (ms)
+}
+
+const EMPTY_DISQUS_CONFIG: any = {
+  identifier: "",
+  url: "",
+  shortname: "",
+  defer: DEFER_LOADING_MS,
+};
+
+export function Comment(props: any) {
+  const disqusConfig = Object.assign({}, EMPTY_DISQUS_CONFIG, props);
+
+  const insertScript = (src: any, id: any, parentElement: any) => {
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = src;
+    script.id = id;
+    parentElement.appendChild(script);
+    return script;
+  };
+
+  const removeScript = (id: any, parentElement: any) => {
+    const script = document.getElementById(id);
+    if (script) {
+      parentElement.removeChild(script);
+    }
+  };
+
+  const removeDisqusThreadElement = () => {
+    const disqusThread = document.getElementById(DISQUS_THREAD);
+    if (disqusThread) {
+      while (disqusThread.hasChildNodes()) {
+        disqusThread.firstChild &&
+          disqusThread.removeChild(disqusThread.firstChild);
+      }
+    }
+  };
+
+  const removeDisqusPreloadFrameElement = () => {
+    const disqusPreloadFrame = document.querySelectorAll(
+      DISQUS_PRELOAD_IFRAME_SELECTOR,
+    );
+
+    if (disqusPreloadFrame) {
+      disqusPreloadFrame.forEach((value, key, parent) => {
+        value.parentElement?.removeChild(value);
+      });
+    }
+  };
+
+  const getDisqusConfig = () => {
+    return function (this: any) {
+      this.page.identifier = disqusConfig.identifier;
+      this.page.url = disqusConfig.url;
+      this.page.title = props.title;
+    };
+  };
+
+  const loadInstance = () => {
+    setTimeout(() => {
+      if (
+        window[DISQUS_INSTANCE] &&
+        document.getElementById(DISQUS_COMMENT_ELEMENT_ID)
+      ) {
+        (window[DISQUS_INSTANCE] as any).reset({
+          reload: true,
+          config: getDisqusConfig(),
+        });
+      } else {
+        removeDisqusThreadElement();
+        if (props.shortname) {
+          (window[DISQUS_CONFIG] as any) = getDisqusConfig();
+          window[DISQUS_SHORTNAME] = disqusConfig.shortname;
+          insertScript(
+            `https://${disqusConfig.shortname}.disqus.com/embed.js`,
+            DISQUS_COMMENT_ELEMENT_ID,
+            document.body,
+          );
+        }
+      }
+    }, disqusConfig.defer);
+  };
+
+  const cleanInstance = () => {
+    removeScript(DISQUS_COMMENT_ELEMENT_ID, document.body);
+    if (window[DISQUS_INSTANCE]) {
+      (window[DISQUS_INSTANCE] as any).reset();
+      (window[DISQUS_INSTANCE] as any) = undefined;
+      removeDisqusThreadElement();
+      removeDisqusPreloadFrameElement();
+    }
+  };
+
+  useEffect(() => {
+    loadInstance();
+    return cleanInstance;
+  }, [props.identifier]);
+
+  return <div id={DISQUS_THREAD} />;
+}

src/init.ts

@@ -45,7 +45,7 @@ const blogOptions: BlogOptions = {
   }
 
   configContent =
-    `import { BlogOptions, blogPlugin } from "https://deno.land/x/[email protected].4/mod.ts";
+    `import { BlogOptions, blogPlugin } from "https://deno.land/x/[email protected].6/mod.ts";
 ${blogOptions}
 ${configContent}`;
 
@@ -89,7 +89,8 @@ async function modifyDenoJson() {
     return;
   }
 
-  denoJson.imports["$fresh/"] = "https://deno.land/x/[email protected]/";
+  denoJson.imports["$fresh/"] =
+    "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/";
 
   const denoJsonContent = JSON.stringify(denoJson, null, 2) + "\n";
   await Deno.writeTextFile(DENO_JSON_PATH, denoJsonContent);

src/islands/Disqus.tsx

@@ -0,0 +1,22 @@
+// credit to https://github.com/haikelfazzani/portfolio for this code
+
+import { Comment } from "../components/DiscussionEmbed.tsx";
+
+type DisqusProp = {
+  title: string;
+  identifier: string;
+  shortname: string;
+};
+
+export default function Disqus({ title, identifier, shortname }: DisqusProp) {
+  return (
+    <div class="w-100 mt-2">
+      <Comment
+        title={title}
+        identifier={identifier.toLowerCase().replace(/\s+/g, "-")}
+        url={`http://localhost:8000/blog/${identifier}`}
+        shortname={shortname}
+      />
+    </div>
+  );
+}

src/plugin/blog.ts

@@ -21,8 +21,19 @@ interface BlogOptions {
   sources?: Source[];
   useSeparateIndex?: boolean;
   strings?: Localization | Partial<Localization>;
+  comments?: DisqusOptions;
 }
 
+interface CommentOptions {
+  source: CommentSource;
+}
+
+export interface DisqusOptions extends CommentOptions {
+  shortname: string;
+}
+
+export type CommentSource = "disqus";
+
 export type Source = "local" | "notion";
 
 export const DEFAULT_POSTS_PER_PAGE = 10;
@@ -44,6 +55,8 @@ export function blogPlugin(
   const localization: Localization = { ...languages[lang], ...options.strings };
   return {
     name: "blog_plugin",
+    location: import.meta.url,
+    projectLocation: new URL("../../", import.meta.url).href,
     middlewares: [{
       middleware: {
         handler: contextMiddleware(
@@ -58,6 +71,7 @@ export function blogPlugin(
       component: createPostPage(
         options.title,
         localization,
+        options.comments,
       ),
       handler: blogSlugHandler,
     }, {
@@ -96,7 +110,7 @@ export function blogPlugin(
     }],
     islands: {
       baseLocation: import.meta.url,
-      paths: ["../islands/NavigationBar.tsx"],
+      paths: ["../islands/NavigationBar.tsx", "../islands/Disqus.tsx"],
     },
   };
 }

src/routes/blog/[slug].tsx

@@ -7,10 +7,10 @@ import {
   render,
   Renderer,
 } from "../../../deps.ts";
-import { Localization } from "../../plugin/blog.ts";
+import { DisqusOptions, Localization } from "../../plugin/blog.ts";
 import { Post } from "../../utils/posts.ts";
 import { BlogState } from "../_middleware.ts";
-// import Disqus from "../../islands/Disqus.tsx";
+import Disqus from "../../islands/Disqus.tsx";
 
 export const handler: Handlers<Post, BlogState> = {
   async GET(_req, ctx) {
@@ -38,7 +38,11 @@ export const handler: Handlers<Post, BlogState> = {
   },
 };
 
-export function createPostPage(title: string, localization: Localization) {
+export function createPostPage(
+  title: string,
+  localization: Localization,
+  comments?: DisqusOptions,
+) {
   return function PostPage(props: PageProps<Post>) {
     const post = props.data;
     class CustomRenderer extends Renderer {
@@ -75,7 +79,13 @@ export function createPostPage(title: string, localization: Localization) {
           class="mt-8 markdown-body"
           dangerouslySetInnerHTML={{ __html: html }}
         />
-        {/* <Disqus title={post.title} identifier={post.slug} /> */}
+        {comments && comments.source === "disqus" && (
+          <Disqus
+            title={post.title}
+            identifier={post.slug}
+            shortname={(comments as DisqusOptions).shortname}
+          />
+        )}
         <nav class="flex mt-8">
           {post.prev
             ? <a href={`/blog/${post.prev}`}>{localization.previousPost}</a>

tests/empty_posts_dir_fixture/deno.json

@@ -7,7 +7,7 @@
     "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",

tests/fixture/deno.json

@@ -7,7 +7,7 @@
     "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",

tests/localization_fixture/deno.json

@@ -7,7 +7,7 @@
     "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",

tests/no_posts_dir_fixture/deno.json

@@ -7,7 +7,7 @@
     "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",

tests/notion_no_posts_dir_fixture/deno.json

@@ -7,7 +7,7 @@
     "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",

tests/responsive_navbar_fixture/deno.json

@@ -7,7 +7,7 @@
     "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",

tests/separate_index_fixture/deno.json

@@ -7,7 +7,7 @@
     "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.3/",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/844370cadd1ed28fd76f796c2afc1e2411bfc425/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",