From 6d4f79f76cd5209db9fe9f8d37265c72872c7224 Mon Sep 17 00:00:00 2001 From: Raj Sharma Date: Wed, 13 Mar 2024 08:34:51 +0530 Subject: [PATCH] feat: comments --- next.config.js | 7 +++- package-lock.json | 67 +++++++++++++++++++++++++++++++++++ package.json | 1 + public/giscus-client.js | 7 ++++ src/app/(home)/story/page.tsx | 19 ++++++++++ src/components/comments.tsx | 33 +++++++++++++++++ 6 files changed, 133 insertions(+), 1 deletion(-) create mode 100644 public/giscus-client.js create mode 100644 src/components/comments.tsx diff --git a/next.config.js b/next.config.js index 111dfb8..b05debb 100644 --- a/next.config.js +++ b/next.config.js @@ -5,7 +5,12 @@ const nextConfig = { // Configure `pageExtensions` to include MDX files pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"], // Optionally, add any other Next.js config below - + env: { + COMMENTS_REPO: "xrehpicx/raj.how", + COMMENTS_REPO_ID: "R_kgDOJt-ekg", + COMMENTS_CATEGORY: "General", + COMMENTS_CATEGORY_ID: "DIC_kwDOJt-eks4Cd7mb", + }, images: { remotePatterns: [ { diff --git a/package-lock.json b/package-lock.json index e78551e..1c6ee4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "raj", "version": "0.1.0", "dependencies": { + "@giscus/react": "^3.0.0", "@mdx-js/loader": "^3.0.0", "@mdx-js/react": "^3.0.0", "@n8n/chat": "^0.5.2", @@ -175,6 +176,18 @@ "resolved": "https://registry.npmjs.org/@fisch0920/medium-zoom/-/medium-zoom-1.0.7.tgz", "integrity": "sha512-hPUrgVM/QvsZdZzDTPyL1C1mOtEw03RqTLmK7ZlJ8S/64u4O4O5BvPvjB/9kyLtE6iVaS9UDRAMSwmM9uh2JIw==" }, + "node_modules/@giscus/react": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@giscus/react/-/react-3.0.0.tgz", + "integrity": "sha512-hgCjLpg3Wgh8VbTF5p8ZLcIHI74wvDk1VIFv12+eKhenNVUDjgwNg2B1aq/3puyHOad47u/ZSyqiMtohjy/OOA==", + "dependencies": { + "giscus": "^1.5.0" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -725,6 +738,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz", + "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==" + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, "node_modules/@matejmazur/react-katex": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/@matejmazur/react-katex/-/react-katex-3.1.3.tgz", @@ -1319,6 +1345,11 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@types/unist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", @@ -3777,6 +3808,14 @@ "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" } }, + "node_modules/giscus": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.5.0.tgz", + "integrity": "sha512-t3LL0qbSO3JXq3uyQeKpF5CegstGfKX/0gI6eDe1cmnI7D56R7j52yLdzw4pdKrg3VnufwCgCM3FDz7G1Qr6lg==", + "dependencies": { + "lit": "^3.1.2" + } + }, "node_modules/glob": { "version": "7.1.7", "dev": true, @@ -4888,6 +4927,34 @@ "uc.micro": "^1.0.1" } }, + "node_modules/lit": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.2.tgz", + "integrity": "sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/lit-element": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz", + "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.1.2" + } + }, + "node_modules/lit-html": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz", + "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/loader-runner": { "version": "4.3.0", "license": "MIT", diff --git a/package.json b/package.json index 97ddf4b..98f0432 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@giscus/react": "^3.0.0", "@mdx-js/loader": "^3.0.0", "@mdx-js/react": "^3.0.0", "@n8n/chat": "^0.5.2", diff --git a/public/giscus-client.js b/public/giscus-client.js new file mode 100644 index 0000000..732cff0 --- /dev/null +++ b/public/giscus-client.js @@ -0,0 +1,7 @@ +(function(){function h(a){return'[giscus] An error occurred. Error message: "'.concat(a,'".')}function l(a,g){void 0===g&&(g=!1);g=g?"meta[property='og:".concat(a,"'],"):"";return(a=document.querySelector(g+"meta[name='".concat(a,"']")))?a.content:""}function p(){delete c.session;var a="".concat(k,"/widget?").concat(new URLSearchParams(c));e.src=a}var m=document.currentScript,k=(new URL(m.src)).origin,b=new URL(location.href),d=b.searchParams.get("giscus")||"",n=localStorage.getItem("giscus-session"); +b.searchParams.delete("giscus");b.hash="";var f=b.toString();if(d)localStorage.setItem("giscus-session",JSON.stringify(d)),history.replaceState(void 0,document.title,f);else if(n)try{d=JSON.parse(n)}catch(a){localStorage.removeItem("giscus-session"),console.warn("".concat(h(null===a||void 0===a?void 0:a.message)," Session has been cleared."))}b=m.dataset;var c={};c.origin=f;c.session=d;c.theme=b.theme;c.reactionsEnabled=b.reactionsEnabled||"1";c.emitMetadata=b.emitMetadata||"0";c.inputPosition=b.inputPosition|| +"bottom";c.repo=b.repo;c.repoId=b.repoId;c.category=b.category||"";c.categoryId=b.categoryId;c.strict=b.strict||"0";c.description=l("description",!0);c.backLink=l("giscus:backlink")||f;switch(b.mapping){case "url":c.term=f;break;case "title":c.term=document.title;break;case "og:title":c.term=l("title",!0);break;case "specific":c.term=b.term;break;case "number":c.number=b.term;break;default:c.term=2>location.pathname.length?"index":location.pathname.substring(1).replace(/\.\w+$/,"")}var q=(d=document.querySelector(".giscus"))&& +d.id;q&&(c.origin="".concat(f,"#").concat(q));f=b.lang?"/".concat(b.lang):"";f="".concat(k).concat(f,"/widget?").concat(new URLSearchParams(c));b="lazy"===b.loading?"lazy":void 0;var e=document.createElement("iframe");Object.entries({class:"giscus-frame giscus-frame--loading",title:"Comments",scrolling:"no",allow:"clipboard-write",src:f,loading:b}).forEach(function(a){var g=a[0];return(a=a[1])&&e.setAttribute(g,a)});e.style.opacity="0";e.addEventListener("load",function(){e.style.removeProperty("opacity"); +e.classList.remove("giscus-frame--loading")});b=document.getElementById("giscus-css")||document.createElement("link");b.id="giscus-css";b.rel="stylesheet";b.href="".concat(k,"/default.css");document.head.prepend(b);if(d){for(;d.firstChild;)d.firstChild.remove();d.appendChild(e)}else d=document.createElement("div"),d.setAttribute("class","giscus"),d.appendChild(e),m.insertAdjacentElement("afterend",d);window.addEventListener("message",function(a){a.origin===k&&(a=a.data,"object"===typeof a&&a.giscus&& +(a.giscus.resizeHeight&&(e.style.height="".concat(a.giscus.resizeHeight,"px")),a.giscus.signOut?(localStorage.removeItem("giscus-session"),console.log("[giscus] User has logged out. Session has been cleared."),p()):a.giscus.error&&(a=a.giscus.error,a.includes("Bad credentials")||a.includes("Invalid state value")||a.includes("State has expired")?null!==localStorage.getItem("giscus-session")?(localStorage.removeItem("giscus-session"),console.warn("".concat(h(a)," Session has been cleared.")),p()):n|| +console.error("".concat(h(a)," No session is stored initially. ").concat("Please consider reporting this error at https://github.com/giscus/giscus/issues/new.")):a.includes("Discussion not found")?console.warn("[giscus] ".concat(a,". A new discussion will be created if a comment/reaction is submitted.")):a.includes("API rate limit exceeded")?console.warn(h(a)):console.error("".concat(h(a)," ").concat("Please consider reporting this error at https://github.com/giscus/giscus/issues/new.")))))})})(); diff --git a/src/app/(home)/story/page.tsx b/src/app/(home)/story/page.tsx index 1e456f0..2bd6b65 100644 --- a/src/app/(home)/story/page.tsx +++ b/src/app/(home)/story/page.tsx @@ -15,6 +15,7 @@ import Link from "next/link"; import { NRenderer } from "@/components/notion/renderer"; import { Metadata, ResolvingMetadata } from "next"; +import Comments from "@/components/comments"; export const revalidate = 100; @@ -81,6 +82,13 @@ export default async function Story({ const images = getPageImageUrls(recordMap, { mapImageUrl: (url) => url }); + const repo = process.env.COMMENTS_REPO; + const repoId = process.env.COMMENTS_REPO_ID; + const category = process.env.COMMENTS_CATEGORY; + const categoryId = process.env.COMMENTS_CATEGORY_ID; + + console.log(repo, repoId, category, categoryId); + return (
+ +
+ {repo && repoId && category && categoryId ? ( + + ) : null} +