feat: comments
This commit is contained in:
parent
49fc222775
commit
6d4f79f76c
|
|
@ -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: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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.")))))})})();
|
||||
|
|
@ -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 (
|
||||
<article suppressHydrationWarning className="relative">
|
||||
<GrainProvider
|
||||
|
|
@ -116,6 +124,17 @@ export default async function Story({
|
|||
<section className="connect-section">
|
||||
<Connect />
|
||||
</section>
|
||||
|
||||
<section className="comments-section">
|
||||
{repo && repoId && category && categoryId ? (
|
||||
<Comments
|
||||
repo={repo as `${string}/${string}`}
|
||||
repoId={repoId}
|
||||
category={category}
|
||||
categoryId={categoryId}
|
||||
/>
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Footer className="max-w-2xl" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
"use client";
|
||||
|
||||
import Giscus from "@giscus/react";
|
||||
|
||||
const Comments = ({
|
||||
repo,
|
||||
repoId,
|
||||
category,
|
||||
categoryId,
|
||||
}: {
|
||||
repo: `${string}/${string}`;
|
||||
repoId: string;
|
||||
category: string;
|
||||
categoryId: string;
|
||||
}) => {
|
||||
return (
|
||||
<Giscus
|
||||
repo={repo}
|
||||
repoId={repoId}
|
||||
category={category}
|
||||
categoryId={categoryId}
|
||||
mapping="url"
|
||||
reactionsEnabled="1"
|
||||
emitMetadata="0"
|
||||
inputPosition="top"
|
||||
theme="light_tritanopia"
|
||||
lang="en"
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Comments;
|
||||
Loading…
Reference in New Issue