/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h2: "h2", a: "a", span: "span", p: "p", strong: "strong", blockquote: "blockquote", ol: "ol", li: "li", ul: "ul", img: "img", div: "div", pre: "pre", code: "code" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "giscus", children: [_jsx(_components.a, { className: "wrap", href: "#giscus", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.a, { href: "https://giscus.app/", children: "Giscus" })] }), "\n", _jsx(_components.p, { children: _jsxs(_components.strong, { children: ["First of all what is Giscus, according to their documentation Giscus ", _jsx(_components.span, { role: "img", "aria-label": "gem stone", children: "💎" }), " is :"] }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["A comments system powered by ", _jsx(_components.a, { href: "https://docs.github.com/en/discussions", children: "GitHub Discussions" }), " Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by ", _jsx(_components.a, { href: "https://github.com/utterance/utterances", children: "utterances" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "In summary giscus use the GitHub discussion feature that let’s you discuss about your repo directly inside of GitHub ." }), "\n", _jsx(_components.p, { children: "So as you can guess by this definition, all the comment that users will write on your article will be stocked in the discussion of your repo." }), "\n", _jsx(_components.p, { children: "For it to work you must link here are some requierements:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Your repository must be public otherwise visitors will not be able to view the discussion." }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.strong, { children: "Discussions feature must be turned on" }), " by ", _jsx(_components.a, { href: "https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository", children: "enabling it for your repository" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: ["The ", _jsx(_components.a, { href: "https://github.com/apps/giscus", children: "giscus App" }), ","] }), " must be install on your project github visitors will not be able to comment and react."] }), "\n"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "First" }), " let create a repository and then meeting all the requirements, for this we will create a repo the we will name ", _jsx(_components.a, { href: "https://github.com/alexandre-dev29/giscuss_integration.git", children: "giscus_integration" }), " on github and be sure to set it public."] }), "\n", _jsx(_components.li, { children: "Second we must enable discussion , follow this image" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://cdn.sanity.io/images/8ly544xw/production/45f5cda2536bbfcc0478462d899f9d3c8a362d92-1879x530.jpg", alt: "image" }) }), "\n", _jsx(_components.p, { children: "Go to setting on your repo" }), "\n", _jsx(_components.p, { children: "Scroll down and enable discussions and hit setup discussion" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.img, { src: "https://cdn.sanity.io/images/8ly544xw/production/96b49eab945c2f1bca30bef7d85ed7b27f0d89cd-971x224.jpg", alt: "image" }), "And then on the other page click start discussion that’s it !! ", _jsx(_components.span, { role: "img", "aria-label": "party popper", children: "🎉" }), _jsx(_components.span, { role: "img", "aria-label": "party popper", children: "🎉" }), _jsx(_components.span, { role: "img", "aria-label": "party popper", children: "🎉" }), " ", _jsx(_components.strong, { children: "you have successfully enabled discussion on your repo" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Last" }), " let’s install the giscus app on github just follow ", _jsx(_components.a, { href: "https://github.com/apps/giscus", children: _jsx(_components.strong, { children: "this link here" }) }), " ", _jsx(_components.strong, { children: ", click install and follow the steps." }), " mwenze nkwembe axel"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "coding-time", children: [_jsx(_components.a, { className: "wrap", href: "#coding-time", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Coding time"] }), "\n", _jsxs(_components.p, { children: ["Let’s clone our repo and initialize a ", _jsx(_components.a, { href: "https://nextjs.org/", children: _jsx(_components.strong, { children: "NextJs" }) }), " project using typescript"] }), "\n", _jsx(_components.p, { children: "open you terminal and clone your repository and cd into the project and open it in vscode or your preferred Code editor or IDE" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "bash", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFC777" }, children: "git" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "clone" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "https://github.com/alexandre-dev29/giscuss_integration.git" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#65BCFF" }, children: "cd" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "giscuss_integration" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFC777" }, children: "code" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "." })] }) })] }) }) }), "\n", _jsxs(_components.h2, { id: "lets-initialize-nextjs-and-install-dependencies", children: [_jsx(_components.a, { className: "wrap", href: "#lets-initialize-nextjs-and-install-dependencies", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Let’s initialize NextJs and install dependencies"] }), "\n", _jsxs(_components.p, { children: ["Here i will be using ", _jsx(_components.strong, { children: "Yarn" }), " and ", _jsx(_components.strong, { children: "Typescript" }), " for the project but it will be the same for ", _jsx(_components.strong, { children: "JavaScript" })] }), "\n", _jsx(_components.p, { children: "in your terminal and in your project path run" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "bash", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFC777" }, children: "npx" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "create-next-app@latest" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "." }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "--ts" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7A88CF" }, children: "# or" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFC777" }, children: "yarn" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "create" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "next-app" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "." }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "--typescript" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7A88CF" }, children: "# or" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFC777" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "create" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "next-app" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "." }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "--ts" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: " " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#7A88CF" }, children: "# and then to make sure that all are working well run" }) }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFC777" }, children: "yarn" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "run" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "dev" })] }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["go to ", _jsx(_components.a, { href: "http://localhost:3000", children: "localhost:3000" }), " to see the page"] }), "\n", _jsx(_components.p, { children: "okay let’s now install Giscus dependancy on our project. In your terminal write :" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "bash", "data-theme": "default", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFC777" }, children: "npm" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "install" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "@giscus/react" })] }) }) }) }) }), "\n", _jsxs(_components.p, { children: ["Okay we are close ", _jsx(_components.span, { role: "img", "aria-label": "face savouring delicious food", children: "😋" })] }), "\n", _jsx(_components.p, { children: "now let’s acquire some information." }), "\n", _jsxs(_components.h2, { id: "giscus-configuration", children: [_jsx(_components.a, { className: "wrap", href: "#giscus-configuration", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Giscus Configuration"] }), "\n", _jsx(_components.p, { children: "For configuring giscuss we needs some information as" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "The repository id" }), "\n", _jsx(_components.li, { children: "The repository name" }), "\n", _jsx(_components.li, { children: "the discussion category Id" }), "\n", _jsx(_components.li, { children: "the discussion category Name" }), "\n"] }), "\n", _jsx(_components.p, { children: "to name only the most inportant but here is the complete setup :" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "jsx", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "script" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "src" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "https://giscus.app/client.js" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-repo" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "[ENTER REPO HERE]" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-repo-id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "[ENTER REPO ID HERE]" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-category" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "[ENTER CATEGORY NAME HERE]" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-category-id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "[ENTER CATEGORY ID HERE]" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-mapping" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "pathname" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-strict" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "0" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-reactions-enabled" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "1" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-emit-metadata" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "0" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-input-position" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "bottom" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-theme" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "preferred_color_scheme" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "data-lang" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "en" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "crossorigin" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "anonymous" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "async" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: ">" })] }) })] }) }) }), "\n", _jsx(_components.p, { children: "Let’s understand these parameters :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "id" }), ": An unique identifier. Any alphanumeric string."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "repo" }), ": The repository's name you have installed the Giscus app and want to connect to it."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "repoId" }), ": The unique identifier of your repository."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "category" }), ": The discussion category name under which Giscus must create the comments."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "categoryId" }), ": The id of the discussion category."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "mapping" }), ": It is a mapping between your application page and the discussion. The values can be path, URL, title, og:title, a specific term, or a number."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "reactionsEnabled" }), ": If set to ", _jsx(_components.code, { children: "1" }), ", you will be able to add reactions with emojis. Setting the value ", _jsx(_components.code, { children: "0" }), " will not show the reaction option."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "emitMetadata" }), ": If set to ", _jsx(_components.code, { children: "1" }), ", Giscus will send the discussion metadata periodically to your application page."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "inputPosition" }), ": Based on the value set to it, you can position the comment input field at the top or bottom of the existing comment list."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "theme" }), ": The theme can be light, dark, high contrast, or any custom theme."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "lang" }), ": It supports 15+ languages. Specify the language giscus will be displayed in."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "loading" }), ": If you set the value ", _jsx(_components.code, { children: "lazy" }), ", comments loading will be delayed until the user scrolls near the comments container."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["so how do we get these information? We will use ", _jsx(_components.a, { href: "https://docs.github.com/en/graphql/overview/explorer", children: "Github Graphql Explorer" })] }), "\n", _jsxs(_components.h2, { id: "getting-giscus-information-using-github-graphql-explorer", children: [_jsx(_components.a, { className: "wrap", href: "#getting-giscus-information-using-github-graphql-explorer", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Getting Giscus Information using ", _jsx(_components.a, { href: "https://docs.github.com/en/graphql/overview/explorer", children: "Github graphql Explorer" })] }), "\n", _jsxs(_components.p, { children: ["GitHub provides GraphQL APIs to query these details. You can use the ", _jsx(_components.a, { href: "https://docs.github.com/en/graphql/overview/explorer", children: _jsx(_components.strong, { children: "GitHub GraphQL Explorer" }) }), _jsx(_components.strong, { children: "." }), " to find these details. You must authenticate yourself with your GitHub credentials to use this explorer."] }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "css", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "data" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: " " }), _jsx(_components.span, { style: { color: "#82AAFF" }, children: "padding" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ": " }), _jsx(_components.span, { style: { color: "#FF966C" }, children: "10" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" }) }) })] }) }) }), "\n", _jsx(_components.p, { children: "Once authenticated type this graphql code" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "graphql", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "graphql", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C099FF" }, children: "query" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " repository" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "(" }), _jsx(_components.span, { style: { color: "#FCA7EA" }, children: "name" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "," }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#FCA7EA" }, children: "owner" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: ")" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " id" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " discussionCategories" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "(" }), _jsx(_components.span, { style: { color: "#FCA7EA" }, children: "first" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#FF966C" }, children: "10" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: ")" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " edges " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " node " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " id" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " name" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" }) }) })] }) }) }), "\n", _jsx(_components.p, { children: "In My Case this is the query" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "graphql", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "graphql", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C099FF" }, children: "query" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " repository" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "(" }), _jsx(_components.span, { style: { color: "#FCA7EA" }, children: "name" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "giscuss_integration" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "," }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#FCA7EA" }, children: "owner" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "alexandre-dev29" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: ")" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " id" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " discussionCategories" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "(" }), _jsx(_components.span, { style: { color: "#FCA7EA" }, children: "first" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#FF966C" }, children: "10" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: ")" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " edges " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " node " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " id" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " name" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" }) }) })] }) }) }), "\n", _jsx(_components.p, { children: "here is an example of my response :" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "json", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "json", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#82AAFF" }, children: "data" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#65BCFF" }, children: "repository" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "R_kgDOIDXYFg" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "," })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "discussionCategories" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FCA7EA" }, children: "edges" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "[" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "node" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#4FD6BE" }, children: "id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "DIC_kwDOIDXYFs4CRl0O" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "," })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#4FD6BE" }, children: "name" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "Announcements" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}," })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "node" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#4FD6BE" }, children: "id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "DIC_kwDOIDXYFs4CRl0P" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "," })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#4FD6BE" }, children: "name" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "General" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}," })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "node" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#4FD6BE" }, children: "id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "DIC_kwDOIDXYFs4CRl0R" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "," })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#4FD6BE" }, children: "name" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "Ideas" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "]" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" }) }) })] }) }) }), "\n", _jsx(_components.p, { children: "Here we’ve got the repository Id : R_kgDOIDXYFg and the discuss category id : DIC_kwDOIDXYFs4CRl0P and the name is General" }), "\n", _jsx(_components.p, { children: "okay let’s create an .env file to stock these information" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "text", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "text", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#c8d3f5" }, children: "NEXT_PUBLIC_GISCUS_PROJECT_REPO=giscuss_integration" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#c8d3f5" }, children: "NEXT_PUBLIC_GISCUS_PROJECT_NAME=alexandre-dev29" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#c8d3f5" }, children: "NEXT_PUBLIC_GISCUS_PROJECT_REPO_ID=R_kgDOIDXYFg" }) }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#c8d3f5" }, children: "NEXT_PUBLIC_GISCUS_DISCUSSION_CATEGORY_ID=DIC_kwDOIDXYFs4CRl0P" }) }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#c8d3f5" }, children: "NEXT_PUBLIC_GISCUS_DISCUSSION_CATEGORY_NAME=General" }) }) })] }) }) }), "\n", _jsxs(_components.h2, { id: "final-code", children: [_jsx(_components.a, { className: "wrap", href: "#final-code", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Final code"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Create a folder" }), " called ", _jsx(_components.strong, { children: "Components" }), " and then inside create a tsx/jsx file named ", _jsx(_components.strong, { children: "giscussComponent.tsx and index.ts" })] }), "\n", _jsx(_components.p, { children: "In giscusComponent.tsx" }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "tsx", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "import" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " Giscus " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "from" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "@giscus/react" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: " " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C099FF" }, children: "const" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#82AAFF" }, children: "GiscusComment" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "()" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "=>" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "const" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "projectRepo" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "process" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#A9B8E8" }, children: "env" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "NEXT_PUBLIC_GISCUS_PROJECT_REPO" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "const" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "ownerName" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "process" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#A9B8E8" }, children: "env" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "NEXT_PUBLIC_GISCUS_PROJECT_NAME" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "const" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "projectRepoId" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "process" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#A9B8E8" }, children: "env" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "NEXT_PUBLIC_GISCUS_PROJECT_REPO_ID" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "const" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "discussionCategoryId" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "process" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#A9B8E8" }, children: "env" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "NEXT_PUBLIC_GISCUS_DISCUSSION_CATEGORY_ID" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "const" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "discussionCategoryName" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "process" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#A9B8E8" }, children: "env" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "NEXT_PUBLIC_GISCUS_DISCUSSION_CATEGORY_NAME" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: " " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "return" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " (" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "Giscus" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "comment-id" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "repo" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "={" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "`${" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: "ownerName" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "/" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "${" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: "projectRepo" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}`" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "repoId" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "={" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "`${" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: "projectRepoId" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}`" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "category" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "={" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: "discussionCategoryName" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "categoryId" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "={" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: "discussionCategoryId" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "mapping" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "pathname" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "reactionsEnabled" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "0" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "emitMetadata" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "0" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "inputPosition" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "top" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "theme" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "dark" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "lang" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "en" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "loading" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "lazy" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " )" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: "}" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["In The Index.ts we will just export this component to follow best practices ", _jsx(_components.span, { role: "img", "aria-label": "smirking face", children: "😏" }), _jsx(_components.span, { role: "img", "aria-label": "smirking face", children: "😏" })] }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "tsx", "data-theme": "default", children: _jsx(_components.code, { "data-language": "tsx", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "export" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#FF98A4" }, children: "*" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "from" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "./giscusComponent" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }) }) }) }) }), "\n", _jsxs(_components.p, { children: ["and then in our ", _jsx(_components.strong, { children: "Index.tsx" }), " let’s import and use our component"] }), "\n", _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { style: { backgroundColor: "#222436" }, tabIndex: "0", "data-language": "tsx", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "default", style: { display: "grid" }, className: "code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "import" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "type" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "{ " }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: "NextPage" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " }" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "from" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "next" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "import" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " Head " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "from" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "next/head" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "import" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " GiscusComment " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "from" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "../Components/giscusComponent" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "import" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " styles " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "from" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "../styles/Home.module.css" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: " " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#C099FF" }, children: "const" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#82AAFF" }, children: "Home" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ":" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "NextPage" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "()" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "=>" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "{" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "return" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: " (" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "div " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "className" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "={" }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "styles" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "." }), _jsx(_components.span, { style: { color: "#A9B8E8" }, children: "container" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "}>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "Head" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "title" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ">" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "Giscus Integration" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "meta " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "name" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "description" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "content" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "Giscuss integration " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "link " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "rel" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "icon" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#C099FF" }, children: "href" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "=" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C3E88D" }, children: "/favicon.ico" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: " " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "main" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: "h1" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ">" }), _jsx(_components.span, { style: { color: "#B4C2F0" }, children: "Giscus Integration test" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "<" }), _jsx(_components.span, { style: { color: "#FFC777" }, children: "GiscusComment" }), _jsx(_components.span, { style: { color: "#FF757F" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: " )" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B4C2F0" }, children: "}" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { "data-line": "", children: " " }), "\n"] }), _jsx(_components.span, { className: "code-line", children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#86E1FC" }, children: "export" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " " }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: "default" }), _jsx(_components.span, { style: { color: "#C8D3F5" }, children: " Home" }), _jsx(_components.span, { style: { color: "#86E1FC" }, children: ";" })] }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.img, { src: "https://cdn.sanity.io/images/8ly544xw/production/4ba7350ee1b744ea611904bddc3329f8e5a56dba-1899x743.jpg", alt: "image" }), _jsx(_components.span, { role: "img", "aria-label": "party popper", children: "🎉" }), _jsx(_components.span, { role: "img", "aria-label": "party popper", children: "🎉" }), _jsx(_components.span, { role: "img", "aria-label": "bottle with popping cork", children: "🍾" }), _jsx(_components.span, { role: "img", "aria-label": "bottle with popping cork", children: "🍾" }), " Finaly"] }), "\n", _jsx(_components.p, { children: "We have successfully integrate comment in our app you can see all comments even on your github repo on discussion ." }), "\n", _jsx(_components.p, { children: _jsxs(_components.strong, { children: ["Please free to write comment if you have any issue ", _jsx(_components.span, { role: "img", "aria-label": "face savouring delicious food", children: "😋" }), _jsx(_components.span, { role: "img", "aria-label": "face savouring delicious food", children: "😋" })] }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };