giscus / giscus-component Goto Github PK

View Code? Open in Web Editor NEW

310.0 310.0 25.0 4.79 MB

Component library for giscus, a comment system powered by GitHub Discussions.

Home Page: https://giscus-component.vercel.app

License: MIT License

HTML 9.99% TypeScript 74.93% Vue 5.30% Svelte 5.57% JavaScript 4.20%

comment-system giscus github-discussions hacktoberfest lit react solid svelte vue web-components

giscus-component's Introduction

giscus

A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by utterances.

Open source. 🌏
No tracking, no ads, always free. 📡 🚫
No database needed. All data is stored in GitHub Discussions.
Supports custom themes! 🌗
Supports multiple languages. 🌐
Extensively configurable. 🔧
Automatically fetches new comments and edits from GitHub. 🔃
Can be self-hosted! 🤳

Note giscus is still under active development. GitHub is also still actively developing Discussions and its API. Thus, some features of giscus may break or change over time.

How it works

When giscus loads, the GitHub Discussions search API is used to find the Discussion associated with the page based on a chosen mapping (URL, pathname, <title>, etc.). If a matching discussion cannot be found, the giscus bot will automatically create a discussion the first time someone leaves a comment or reaction.

To comment, visitors must authorize the giscus app to post on their behalf using the GitHub OAuth flow. Alternatively, visitors can comment on the GitHub Discussion directly. You can moderate the comments on GitHub.

If you're using giscus, consider starring 🌟 giscus on GitHub and adding the giscus topic to your repository! 🎉

Advanced usage

You can add additional configurations (e.g. allowing specific origins) by following the advanced usage guide.

To use giscus with React, Vue, or Svelte, check out the giscus component library.

Migrating

If you've previously used other systems that utilize GitHub Issues (e.g. utterances, gitalk), you can convert the existing issues into discussions. After the conversion, just make sure that the mapping between the discussion titles and the pages are correct, then giscus will automatically use the discussions.

Sites using giscus

Contributing

See CONTRIBUTING.md

This README is available in:

giscus-component's People

Contributors

Stargazers

Watchers

giscus-component's Issues

Cannot find module when importing

Hey, my project is using Svelte/SvelteKit and when I import Giscus;

import Giscus from '@giscus/svelte';

I am getting the warning that Cannot find module '@giscus/svelte' or its corresponding type declarations.js(2307)
however, I can import it like this import Giscus from 'C:/Users/o0/source/projects/mine/NazCodeLandSvelteKit/node_modules/@giscus/svelte/package/Giscus.svelte'; but I believe this is causing an issue for me when I try to deploy my project using Vercel

Error: [vite]: Rollup failed to resolve import "C:/Users/o0/source/projects/mine/NazCodeLandSvelteKit/node_modules/@giscus/svelte/package/Giscus.svelte" from "/vercel/path0/src/routes/(app)/blog/[slug]/+page.svelte".
--
02:01:39.154 | This is most likely unintended because it can break your application at runtime.
02:01:39.154 | If you do want to externalize this module explicitly add it to
02:01:39.154 | `build.rollupOptions.external`

How can I use Giscus on a site published on gh-pages branch?

Describe the bug A clear and concise description of what the bug is.

Hi,

After adding the Giscus component to my site, I was able to login and add comment when I experimented it locally.

My React-based site is deployed to the gh-pages branch rather than the master/main branch. It turns out that the interface of giscus shows up as expected, but I couldn't login to my github account to add comment. (screenshot below)

I'm pretty new to github pages and am guessing this may due to some configuration issue, where it couldn't find the site that resides on the gh-pages branch.

Could you help provide some guidance?

Thanks!

Doesn't work for Vue 3

[Vue warn]: Unhandled error during execution of mounted hook 
  at <ObMobileMenu> 
  at <App>
warn @ runtime-core.esm-bundler.js:38
logError @ runtime-core.esm-bundler.js:212
handleError @ runtime-core.esm-bundler.js:204
(anonymous) @ runtime-core.esm-bundler.js:167
Promise.catch (async)
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2697
flushPostFlushCbs @ runtime-core.esm-bundler.js:341
render @ runtime-core.esm-bundler.js:6247
mount @ runtime-core.esm-bundler.js:4440
app.mount @ runtime-dom.esm-bundler.js:1574
./src/main.ts @ main.ts:24
__webpack_require__ @ bootstrap:19
(anonymous) @ startup:4
__webpack_require__.O @ chunk loaded:25
(anonymous) @ startup:5
(anonymous) @ startup:5
Promise.catch (async)
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2697
flushPostFlushCbs @ runtime-core.esm-bundler.js:341
render @ runtime-core.esm-bundler.js:6247
mount @ runtime-core.esm-bundler.js:4440
app.mount @ runtime-dom.esm-bundler.js:1574
./src/main.ts @ main.ts:24
__webpack_require__ @ bootstrap:19
(anonymous) @ startup:4
__webpack_require__.O @ chunk loaded:25
(anonymous) @ startup:5
(anonymous) @ startup:5
runtime-core.esm-bundler.js:38 [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
warn @ runtime-core.esm-bundler.js:38
injectHook @ runtime-core.esm-bundler.js:2712
(anonymous) @ runtime-core.esm-bundler.js:2723
setup @ index.es.js:23
callWithErrorHandling @ runtime-core.esm-bundler.js:155
setupStatefulComponent @ runtime-core.esm-bundler.js:7204
setupComponent @ runtime-core.esm-bundler.js:7159
mountComponent @ runtime-core.esm-bundler.js:5508
processComponent @ runtime-core.esm-bundler.js:5483
patch @ runtime-core.esm-bundler.js:5085
mountChildren @ runtime-core.esm-bundler.js:5269
mountElement @ runtime-core.esm-bundler.js:5179
processElement @ runtime-core.esm-bundler.js:5162
patch @ runtime-core.esm-bundler.js:5082
componentUpdateFn @ runtime-core.esm-bundler.js:5622
run @ reactivity.esm-bundler.js:187
instance.update @ runtime-core.esm-bundler.js:5729
setupRenderEffect @ runtime-core.esm-bundler.js:5743
mountComponent @ runtime-core.esm-bundler.js:5525
processComponent @ runtime-core.esm-bundler.js:5483
patch @ runtime-core.esm-bundler.js:5085
mountChildren @ runtime-core.esm-bundler.js:5269
mountElement @ runtime-core.esm-bundler.js:5179
processElement @ runtime-core.esm-bundler.js:5162
patch @ runtime-core.esm-bundler.js:5082
patchBlockChildren @ runtime-core.esm-bundler.js:5390
patchElement @ runtime-core.esm-bundler.js:5298
processElement @ runtime-core.esm-bundler.js:5165
patch @ runtime-core.esm-bundler.js:5082
componentUpdateFn @ runtime-core.esm-bundler.js:5695
run @ reactivity.esm-bundler.js:187
instance.update @ runtime-core.esm-bundler.js:5729
callWithErrorHandling @ runtime-core.esm-bundler.js:155
flushJobs @ runtime-core.esm-bundler.js:388
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:280
queueJob @ runtime-core.esm-bundler.js:274
(anonymous) @ runtime-core.esm-bundler.js:5727
triggerEffect @ reactivity.esm-bundler.js:396
triggerEffects @ reactivity.esm-bundler.js:386
triggerRefValue @ reactivity.esm-bundler.js:1002
set value @ reactivity.esm-bundler.js:1047
(anonymous) @ Post.vue?1bfa:44
Promise.then (async)
fetchData @ Post.vue?1bfa:43
(anonymous) @ runtime-core.esm-bundler.js:2723
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2697
flushPostFlushCbs @ runtime-core.esm-bundler.js:341
flushJobs @ runtime-core.esm-bundler.js:395
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:280
queuePostFlushCb @ runtime-core.esm-bundler.js:302
queueEffectWithSuspense @ runtime-core.esm-bundler.js:1589
scheduler @ runtime-core.esm-bundler.js:1811
triggerEffect @ reactivity.esm-bundler.js:396
triggerEffects @ reactivity.esm-bundler.js:386
triggerRefValue @ reactivity.esm-bundler.js:1002
(anonymous) @ reactivity.esm-bundler.js:1136
triggerEffect @ reactivity.esm-bundler.js:396
triggerEffects @ reactivity.esm-bundler.js:381
triggerRefValue @ reactivity.esm-bundler.js:1002
(anonymous) @ reactivity.esm-bundler.js:1136
triggerEffect @ reactivity.esm-bundler.js:396
triggerEffects @ reactivity.esm-bundler.js:381
triggerRefValue @ reactivity.esm-bundler.js:1002
set value @ reactivity.esm-bundler.js:1047
finalizeNavigation @ vue-router.mjs:3334
(anonymous) @ vue-router.mjs:3207
Promise.then (async)
pushWithRedirect @ vue-router.mjs:3174
push @ vue-router.mjs:3099
install @ vue-router.mjs:3530
use @ runtime-core.esm-bundler.js:4365
./src/main.ts @ main.ts:17
__webpack_require__ @ bootstrap:19
(anonymous) @ startup:4
__webpack_require__.O @ chunk loaded:25
(anonymous) @ startup:5
(anonymous) @ startup:5
runtime-core.esm-bundler.js:38 [Vue warn]: Invalid VNode type: Symbol(Comment) (symbol) 
  at <Giscus id="comments" repo="" repoId=""  ... > 
  at <ObComment title="some title" body="some text" uid="someid" > 
  at <ObPost slug= ['some-slug'] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {_pStores: {…}, …} > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade-slide-y" mode="out-in" > 
  at <RouterView> 
  at <App>

Svelte component doesn't work

https://jestlearn.com/how_to_code/#discuss/structs

On chrome I get:

Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.

and on firefox i get:

Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.

Here is my source code: https://github.com/jestarray/jestlearn/blob/main/src/Discussions.svelte

I tried both using the Giscus svelte component which doesn't work at all, and the <script> tag which only works on localhost and not in deployment... seems like it doesn't even load the <script> in deployment strangely according to the network tab..
My repo https://github.com/jestarray/howtocode/discussions is public and has discussions enabled so I'm unsure what the problem is.

Giscus session ID may be leaked when discussion is created

When commenting/reacting on a page that doesn't have a discussion yet, the user's session ID is leaked in the page URL attached to the discussion.

This allows anyone to impersonate the user in the comments just by clicking the page URL provided in the discussion.

Reproducing

With Giscus installed on a website using a giscus component:

Clear your giscus session id from the browser if it is set (log out)
Access a page that does not have a matching discussion yet
Go to the comment section and log in
Immediately after, post a reaction or a comment

Giscus will create a new discussion and attach a link to the related page. The link will have the format: https://<host>/<page>?giscus=<user-session-id>

Anyone that clicks this link, will be redirected to the page and logged into giscus using the leaked session id, therefore being able to comment and react as the user who created the discussion.

Possible cause

I haven't gone too deep into the code, but it seems to be caused by the use of location.href in the body of the discussion.

location.href also contains search parameters, so after the user returns from the oauth login flow with the session id in the URL, it is used as the page origin and included in the discussion.

Notes

I faced this leak when using @giscus/react and possibly traced the issue back to this line.

The script client does not seem to be vulnerable to this issue since it removes the parameter from the url.

数据不及时

随便在一个页面评论了，然后点击去别的页面，发现还是上一个页面的数据。但是刷新就好了

[react] refresh page in dark mode, giscus element with theme=dark property but the iframe element load light.css

If refresh page when giscus-component in viewport, the theme will render correct.
but if refresh page when giscus-component out of viewport, the problem will occur.

current condition:

expext:

I notice previous Issue #1152 ,but after my try, this problem both occur when lazing and eager.

my code

'use client'

import { useEffect, useState } from 'react'
import Giscus from '@giscus/react'
import { shallow } from 'zustand/shallow'
import { useThemeStore } from 'stores/theme-store'

export default function SiteComments(props: { slug: string }) {
  const isDark = useThemeStore(state => state.isDark, shallow)

  const [mounted, setMounted] = useState(false)
  useEffect(() => setMounted(true), [])

  if (!mounted) return null

  return (
    <Giscus
      id={props.slug}
      repo="zhangwh754/blog-comments"
      repoId="R_kgDOLBAVFw"
      category="Announcements"
      categoryId="DIC_kwDOLBAVF84CcNVV"
      mapping="title"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="1"
      inputPosition="top"
      theme={isDark ? 'dark' : 'light'}
      lang="zh-CN"
      loading="lazy"
    />
  )
}

How to disable resizing of iframe height ??

I am rendering multiple discussions in form of giscus widgets in my react app. Each giscus widget is a child of an Accordion component created using react-bootstrap. When I open one accordion component to view giscus widget, the height of the iframe of already opened one re-adjusts and gets cropped, which is a weird behaviour. Is there a way to stop this resizing of the iframe height??

Support class-strategy dark mode theme

Many websites, including mine, use dark mode when the html element has the class dark.

I modified the theme CSS to support this dark mode strategy: giscus-theme.

I confirmed it works when I manually add/remove the dark class on the html element in the iframe.

It would be super useful if the Giscus component exposed an API for adding/removing the dark class on the html element.

useEffect(() => {
  const cancelWatch = themeModeManager.watchTheme((theme) => {
    iframeRef.contentWindow.postMessage(/* ... something goes here? */);
  });
  return cancelWatch;
}, [themeModeManager, iframeRef]);

Support self-hosted giscus instances

Add support for self-hosted giscus instances

onload

How to change the iframe background to transparent

Current: https://town.korandoru.io/communities/code-review

Expected: https://www.tisonkun.org/2022/12/12/maven-properties-enforce/

IIRC previously it works well.

NotSupportedError: CustomElementRegistry.define: 'giscus-widget' has already been defined as a custom element

I have used react component in next.js application.

I am getting this error randomly sometimes when I visit/route to any of my blog pages where giscus component is used.

Not sure how to exactly reproduce, it goes away if I refresh the page.

I see these logs when the error occurs.

Unhandled Runtime Error

NotSupportedError: CustomElementRegistry.define: 'giscus-widget' has already been defined as a custom element
Call Stack
Ot/</<
node_modules/@giscus/react/dist/giscus-36df6801.js (5:8301)
Ot/<
node_modules/@giscus/react/dist/giscus-36df6801.js (5:8301)
p
node_modules/@giscus/react/dist/giscus-36df6801.js (5:11591)

node_modules/@giscus/react/dist/giscus-36df6801.js (28:928)
./node_modules/@giscus/react/dist/giscus-36df6801.js
file:/home/rajan/0.Projects/Next.js/nextjs-portfolio/.next/static/chunks/pages/articles/%5Bid%5D.js (18:1)
options.factory
/_next/static/chunks/webpack.js (606:31)
webpack_require
file:/home/rajan/0.Projects/Next.js/nextjs-portfolio/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (275:21)
b/</<
node_modules/@giscus/react/dist/index.js (1:325)
promise callback*b/<
node_modules/@giscus/react/dist/index.js (1:286)
invokePassiveEffectCreate
node_modules/react-dom/cjs/react-dom.development.js (23487:0)
callCallback
node_modules/react-dom/cjs/react-dom.development.js (3945:0)
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4056:0)
flushPassiveEffectsImpl
node_modules/react-dom/cjs/react-dom.development.js (23574:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (468:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11276:0)
flushPassiveEffects
node_modules/react-dom/cjs/react-dom.development.js (23447:0)
commitBeforeMutationEffects/<
node_modules/react-dom/cjs/react-dom.development.js (23324:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (417:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (390:0)
performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (157:0)

Renovate Update dependency @giscus/react to v2.2.3 failing with Docusaurus

Hello,

Just wanted to mention that i seem to be having some sort of dependency issue building my docusarus blog that maybe seems like might be giscus related? (not sure how the depenency management here really works tbh but though better to mention it).

Just wanted to mention in case is anything that might break for others using docusarus and giscus etc.

Error i see is (netlify link below should work)

5:33:32 PM: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/opt/build/repo/node_modules/@giscus/react/dist'
Did you mean 'jsx-runtime.js'?
5:33:32 PM: BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
5:33:32 PM: (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
5:33:32 PM: The extension in the request is mandatory for it to be fully specified.
5:33:32 PM: Add the extension to the request.
5:33:32 PM: [ERROR] Client bundle compiled with errors therefore further build is impossible.
5:33:32 PM: 
5:33:32 PM: ────────────────────────────────────────────────────────────────
5:33:32 PM:   "build.command" failed                                        
5:33:32 PM: ────────────────────────────────────────────────────────────────
5:33:32 PM: 
5:33:32 PM:   Error message
5:33:33 PM: Creating deploy upload records
5:33:32 PM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
5:33:32 PM: 
5:33:32 PM:   Error location
5:33:32 PM:   In Build command from Netlify app:
5:33:33 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
5:33:32 PM:   npm run build
5:33:32 PM: 
5:33:32 PM:   Resolved config
5:33:32 PM:   build:
5:33:32 PM:     command: npm run build
5:33:32 PM:     commandOrigin: ui
5:33:32 PM:     environment:
5:33:32 PM:       - REVIEW_ID
5:33:32 PM:     publish: /opt/build/repo/build
5:33:32 PM:     publishOrigin: ui

netdata/blog#141

https://app.netlify.com/sites/netdata-blog/deploys/63767045535f680008be2fff

p.s. thanks for giscus its so cool!!!

How to set defaultCommentOrder using react component?

Is there a way to set "defaultCommentOrder": "newest" when using the component?

React component only allows getting specific discussion number

Describe the bug A clear and concise description of what the bug is.

Trying to use the React component. All attempted mappings fail with "discussion not found" even though I know it exists.

Posting a new comment creates a new discussion but even that does not show up on refresh.

To Reproduce Steps to reproduce the behavior:

Add react component
Use any mapping aside from number

Expected behavior Should work

Desktop (please complete the following information):

OS: MacOS Big Sur
Browser: Chrome
Version: Version 92.0.4515.131 (Official Build) (x86_64)

delete this please

Support Switching Theme without Rerenderer

Is your feature request related to a problem?
Currently, changing the theme option of the giscus component will lead to a reload of widget frame which downgrade the user experience.

Describe the solution you'd like
Creating the widget only once and send configuration change messages to the frame when possible.

Support of Blazor Component

Is your feature request related to a problem? Please describe.
It is hard to apply giscus in Blazor WebAssembly since in Blazor components, dynamic loading of JavaScript is limited.

Describe the solution you'd like
A Blazor component that can be embedded in other Blazor components.

Describe alternatives you've considered
There is a related discussion on StackOverflow with IJSRuntime: https://stackoverflow.com/questions/67560407/include-javascript-component-into-blazor-component. It seems the second solution suggested works.

Additional context
I am trying to integrate it into my blog, so I will keep trying❤

Wrong theme with loading=lazy

Hi,
I'm using the react component as follows:

function Comments({ className = '' }) {
  const theme = useGiscusTheme()
  return <Giscus
      ...
      theme={theme}
      loading='lazy'
  />
}

If I scroll down and load the comments, then changing the theme works correctly. But if the theme changes before giscus has a chance to load, it won't pick it up and the following error is logged:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://giscus.app') does not match the recipient window's origin ('http://localhost:3002').

Am I doing something wrong?

[bug] React component failed to build

What happened?

When I update giscus-react from 2.2.2 to 2.2.3, my react project building crashed:

I'm not sure if my case is the same with #782.

Debug

I'm using Giscus in such way:

const Giscus = require('@giscus/react')

Then I print 'Giscus' in project with console.log:

giscus-react in 2.2.2 it prints a function as follow:

giscus-react in 2.2.3 it prints a path as follow:

Environment

Software	Version(s)
React	18.0.0
Node	16.13.0

Others

【advice】If the build product changes commit, is it better to upgrade with BREAK CHANGE?

Height issue

Hi. I am using the React component version of Giscus on my website. Have a question regarding adding style (min-height 190px? remove overflow?) to the reaction part for not having the popover dissapear in overflow. It is looking like this:

Any form for help would be greatly appreciated. Cannot find any id, class or argument to the React Component that would indicate a place for style changes.

New `host` property is sometimes blank in Vue SPA

I am using Giscus with Nuxt 3. After updating the @giscus/vue package, the host property (which I do not pass to the component) sometimes resolves to an empty string instead of https://giscus.app. From what I can tell, this only happens when jumping between pages using client-side navigation. When a page is loaded directly (reloading a page that has the Giscus component on it already), it loads fine. Manually specifying https://giscus.app as the host fixes the problem for now, but I think this is an unexpected regression.

[bug] React component failed to build with Next.js 12

@giscus

What happened?

When I update giscus-react from 2.2.2 to 2.2.3, Next.js 12 building crashed with an error:

info  - Collecting page data .Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\Work\Community\KaiYuanShe\OWS\node_modules\.pnpm\@[email protected]_sfoxds7t5ydpegc3knd667wn6m\node_modules\react\jsx-runtime' imported from D:\Work\Community\KaiYuanShe\OWS\node_modules\.pnpm\@[email protected]_sfoxds7t5ydpegc3knd667wn6m\node_modules\@giscus\react\dist\index.mjs    
Did you mean to import [email protected]/node_modules/react/jsx-runtime.js?
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:330:11)
    at moduleResolve (node:internal/modules/esm/resolve:907:10)
    at defaultResolve (node:internal/modules/esm/resolve:1115:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:837:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

> Build error occurred
Error: Failed to collect page data for /article/[id]
    at D:\Work\Community\KaiYuanShe\OWS\node_modules\.pnpm\[email protected]_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\build\utils.js:916:15 {
  type: 'Error'
}

Environment

Software	Version(s)
React	17.0.2
Next.js	12.3.3
Node	16.18.0
PNPM	7.15.0
Operating System	Windows 10 Pro 21H2

Errors in SvelteKit

I use mdsvex in my SvelteKit project.
I tried to Giscus in a markdown file, but it returns an error.

My doc.svlete file:

<script>
  import Prism from "prismjs";
  import "prismjs/themes/prism.css";
  import "prism-themes/themes/prism-holi-theme.css";
  import { Giscus } from "@giscus/svelte";
</script>

<div class="max-w-3xl mx-auto pb-32">
  <div class="container mt-4 flex flex-wrap mx-auto pt-16">
    <slot />
    <Giscus
      repo="shinokada/svelte-flow"
      repoId="my-repoid"
      category="General"
      categoryId="my-id-here"
      mapping="pathname"
      reactions-enabled="1"
      emit-metadata="0"
      inputPosition="bottom"
      theme="light"
      lang="en"
      crossorigin="anonymous"
    />
  </div>
</div>

In one of markdown file:

---
layout: doc
---

<script>
  import { Card } from "svelte-flow";
</script>
bla bla

One of errors is:

<Layout_MDSVEX_DEFAULT> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
Error: <Layout_MDSVEX_DEFAULT> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
    at Proxy.validate_component (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1722:15)
    at card.md:9:27
    at Object.$$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at Object.default (root.svelte:43:47)
    at eval (/src/routes/__layout.svelte:127:64)
    at Object.$$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at root.svelte:37:45
    at $$render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1745:22)
    at Object.render (/Users/shinichiokada/Svelte/svelte-flow/node_modules/svelte/internal/index.js:1753:26)
    at render_response (file:///Users/shinichiokada/Svelte/svelte-flow/.svelte-kit/runtime/server/index.js:1147:28)

On my terminal error says:


[svelte-preprocess] PostCSS configuration was not passed or is invalid. If you expect to load it from a file make sure to install "postcss-load-config" and try again.

Error: Cannot find module '/Users/shinichiokada/Svelte/svelte-flow/postcss.config.cjs' imported from '/Users/shinichiokada/Svelte/svelte-flow/node_modules/lilconfig/dist/index.js'
12:16:26 PM [vite] Error when evaluating SSR module /src/routes/layouts/doc.svelte:
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/dist/index.cjs.js:1:36
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60169:21)
    at async eval (/src/routes/layouts/doc.svelte:13:31)
    at async instantiateModule (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60105:9)
12:16:26 PM [vite] Error when evaluating SSR module /src/routes/accordions/default.md:
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/dist/index.cjs.js:1:36
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60169:21)
    at async eval (/src/routes/layouts/doc.svelte:13:31)
    at async instantiateModule (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60105:9)
exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/shinichiokada/Svelte/svelte-flow/node_modules/@giscus/svelte/dist/index.cjs.js:1:36
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async nodeImport (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60169:21)
    at async eval (/src/routes/layouts/doc.svelte:13:31)
    at async instantiateModule (/Users/shinichiokada/Svelte/svelte-flow/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60105:9)

I have already postcss-load-config installed.

Any idea?

Support Vue 2

Is your feature request related to a problem? Please describe.

The lib only supports Vue 3

Describe the solution you'd like

Support Vue 2

Describe alternatives you've considered

Writing it myself

passing active theme name with next-themes doesn't change giscus theme upon refresh

On the latest @giscus/react: 2.0.3 passing the active theme name from next-themes 0.1.1 doesn't change the giscus theme upon refresh. For example when dark mode is toggled the giscus theme becomes dark as expected, but when you refresh the browser or reload the giscus iframe then the giscus theme turns back to light on a dark themed page.

import Giscus, { Theme } from '@giscus/react';
import { useTheme } from 'next-themes';

type GiscusCommentProps = {
  category: string;
  categoryId: string;
};

export default function GiscusComment({ category, categoryId }: GiscusCommentProps) {
  const { theme } = useTheme();

  return (
    <Giscus
      repo='<repoName>'
      repoId='<repoId>'
      category={category}
      categoryId={categoryId}
      mapping='pathname'
      reactionsEnabled='0'
      emitMetadata='0'
      theme={theme as Theme}
    />
  );
}

In version 1.1.2 of @giscus/react it worked correctly, as an example:

import { Giscus, Theme } from '@giscus/react';
import { useTheme } from 'next-themes';

type GiscusCommentProps = {
  category: string;
  categoryId: string;
};

export default function GiscusComment({ category, categoryId }: GiscusCommentProps) {
  const { theme } = useTheme();

  return (
    <Giscus
      repo='<repoName>'
      repoId='<repoId>'
      category={category}
      categoryId={categoryId}
      mapping='pathname'
      reactionsEnabled='0'
      emitMetadata='0'
      theme={theme as Theme}
    />
  );
}

iframe height issue in mobile view

after I add 100px to iframe height manually:

// origin
style="height: 307.906px;"

// added
style="height: 407.906px;"

it's correct:

It can be reproduced on other react site, like: https://tkdodo.eu/blog/working-with-zustand

It's just a gap of 100px.

</p> attempted to close an element that was not open

Hello, I am using the svelte Giscus component in my project. I am also using the MDsveX package in my project and I thought originally my issue was related to that package so I opened a ticket there: pngwn/MDsveX#505.

I've come to learn the issue is due to the HTML custom element <gitcus-widget>, not closing itself with an explicit closing tag. It's using the 'shorthand' form, <giscus-widget ... /> to close itself instead of the longhand form, <giscus-widget ... ></giscus-widget>

// Giscus.svelte
<script>
 ...
 ...
</script>

{#if mounted}
 <giscus-widget
   {id}
   {host}
   {repo}
   repoid={repoId}
   {category}
   categoryid={categoryId}
   {mapping}
   {term}
   {strict}
   reactionsenabled={reactionsEnabled}
   emitmetadata={emitMetadata}
   inputposition={inputPosition}
   {theme}
   {lang}
   {loading}
 />
{/if}

I would like to do a pull request and fix this minor issue. I've read CONTRIBUTING.md and I am wondering, since, I am only changing the custom HTML elements to explicitly close, if I also need to follow the instructions in SELF-HOSTING.md, or can I contribute without doing the self-hosting? Thanks in advance.

ES import error when building vue component

I'm using VitePress to build pages that contain @giscus/vue component. It works fine on dev server, but when building the following error occurs. The error goes away if the filename index.es.js is changed to index.mjs. (Similar error is reported here: vuejs/vitepress#1399)

(node:9201) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
build error:
 /home/xxx/repo/node_modules/.pnpm/@[email protected][email protected]/node_modules/@giscus/vue/dist/index.es.js:1
import { defineComponent as n, ref as l, onMounted as a, openBlock as i, createElementBlock as o, createCommentVNode as u } from "vue";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
 ELIFECYCLE  Command failed with exit code 1.

Inconsistent styling resulting from most recent changes

It looks like the most recent updates resulted in improper styling being applied. For example, the currently live giscus-component.vercel.app page renders the comments section as follows (correct):

But if I try to use the component library for, say, React (giscus-component.vercel.app/react), then I am seeing the following (incorrect):

What can be done to revert the styling back to what it was previously for the different component libraries?

Two discussion queries with different terms when the term contains a colon

Reproduction repo: https://github.com/ouuan/giscus-colon-bug-reproduction

The term is FOO: bar 🤔.

It sometimes sends two discussion queries with different terms:

https://giscus.app/api/discussions?repo=ouuan%2Fgiscus-colon-bug-reproduction&term=foo%3A+bar+%25F0%259F%25A4%2594&category=giscus&number=0&strict=false&first=15
https://giscus.app/api/discussions?repo=ouuan%2Fgiscus-colon-bug-reproduction&term=FOO%3A+bar+%F0%9F%A4%94&category=giscus&number=0&strict=false&first=15

The first request changes letters before the colon to lowercase and double-URI-encodes the part after the colon.

I also observed the following:

The first request is always sent. The second request is only sometimes sent. The second request is more likely to be sent if the network cache is disabled (or using a forced refresh), or the user is not logged in. It's also more likely in Chrome than in Firefox on my machine.
It does not happen if the script is used instead of the component. (Given that it does not always happen, I'm not sure.)
Whenever the second request is sent, there is also a request for https://giscus.app/_next/data/juf5uGDEc0gFUN83cwLIn/en/widget.json

It may result in different discussions seen by different users, which actually happens in my blog: ouuan/iles-blog#15 & ouuan/iles-blog#136

[React] Relative path to theme doesn't work

Describe the bug
I want to create a custom css for Giscus component. I created a new stylesheet in: /styles/giscus.css and I referenced it in React:

<Giscus
      [...]
      theme="/styles/giscus.css"
 />

However, the component is not styled.
Console output:

Refused to apply style from 'https://giscus.app/styles/giscus.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

This means, that it's trying to get a theme from https://giscus.app, not from relative url that I passed in.

Expected behavior
Component should be styled with my custom css.

Additional Context
If I pass:

theme="../../styles/giscus.css"

it also doesn't work and console output is the same.

Packaging sites failing to package

Both unpkg and skypack are unable to successfully package giscus because of an unsupported feature being used in the lit-element lib:

https://unpkg.com/[email protected]/lit-element.js?module

Cannot generate module for [email protected]/lit-element.js
SyntaxError: unknown: Support for the experimental syntax 'logicalAssignment' isn't currently enabled (6:194):

I had to pin my giscus component version to 1.4.0 to get a working deployment. When I first installed the component, unpkg wasn't working, so I used skyjack. Niether work with the latest release now.

[Vue] On SPAs, iframe will not resize

Screen.Recording.2023-01-24.at.00.43.12.mov

Step to reproduce:

Visit https://blog.k1yoshi.com/posts/sample, scroll to the bottom and iframe will render correctly
Go to other pages using SPA's routes
Come back to the page and scroll to the bottom

Handle layout shift

Is it possible to prevent layout shift of loading the frame by setting width and height initially? Right now the component doesn't accept width or height.

add title to iframe

for best SEO and accessibility practice title attribute is recommended for iframe

giscus-component/web/src/giscus.ts

Lines 307 to 313 in 853d920

    
                 <iframe 
        
                   scrolling="no" 
        
                   ${ref(this._iframeRef)} 
        
                   src=${this.getIframeSrc()} 
        
                   loading=${this.loading} 
        
                   part="iframe" 
        
                 ></iframe>

Ref: https://web.dev/frame-title/

Without the class giscus, it shows globally.

Describe the bug A clear and concise description of what the bug is.

I just added script tag in the __layout.svelte.

I didn't add any giscus class or div. But it shows everywhere on my site.

https://svelte-flow.vercel.app/

Doesn't work for Next 14.1.0

Now I'm using the Next version 14.0.4, and it works now.

lang props support

Is your feature request related to a problem? Please describe. A clear and
concise description of what the problem is. Ex. I'm always frustrated when [...]

The main giscus support the lang props for multi-language support but it is no available for giscus component version, do we have plan to support them

Describe the solution you'd like A clear and concise description of what you
want to happen.

Implement them, I can help on react but I am not familiar with the vue and svelte.

Describe alternatives you've considered A clear and concise description of
any alternative solutions or features you've considered.

N/A

Additional context Add any other context or screenshots about the feature
request here.

N/A

Not able to style with Tailwind CSS

Describe the bug A clear and concise description of what the bug is.

Thanks for your work.

I'd like to add a dark mode using Tailwind CSS.
My demo site using Giscus.

I added:

<div class="giscus dark:bg-gray-800 dark:text-white"></div>

But when I change the mode it doesn't work.

How can I use Tailwind CSS?

Cannot use giscus on this repository. Make sure all of the above criteria has been met.

Hi, I get this error every time I try to check if giscuscan be used in my repos.
I have installed giscus in almost all my webpages. See under my username lovkyndig.

Then I was creating a new user lutheran, where I tried to get the ID etc. from giscus.app like I have done before many times. But now I only get this error:

Then I tried to do the same in all my repos where giscus already are installed, and got the same error:

Please help me!

I love this commenting app, I wish I could continue to use it in my new websites.

React build issue

Works fine in the dev state, but after running the build command, the minified version has this error: giscus-1126a0a1.js:15 Uncaught (in promise) ReferenceError: T is not defined quite possibly its this T object that not being recognized: Line 629 of giscus-1126a0a1.js
if (o === void 0) { const c = (n = e == null ? void 0 : e.renderBefore) !== null && n !== void 0 ? n : null; r._$litPart$ = o = new T(t.insertBefore(N(), c), c, void 0, e ?? {}); }

[VUE] When jumping from a page without comments to a page with comments, giscus does not fully display.

How to reproduce:

Go to this website and click on "Guide" in the upper right corner
https://strapi-community.github.io/strapi-plugin-rest-cache/

Display

What does "host" do

giscus-component/vue/src/lib/Giscus.vue

Line 43 in 2f941e1

:host="host"

What does "host" do, I've found that without it the iframe height doesn't adapt?

[VUE] When jumping from one comment area to another, the comments on the previous page are still displayed

How to reproduce:

Enter the following webpage, after the comments are loaded, click "Next Page" in the lower right corner to observe the comments.
https://strapi-community.github.io/strapi-plugin-rest-cache/guide/#frontmatter-title

Display

mode prop

Feature Request

Thanks for Giscus and making this super clean component API! 💪
I would love to have access to a "mode" prop (or similar)

I was just trying to create a custom theme so I could seamlessly incorporate giscus—as it is AWESOME! 🙏
I have implemented dark and light modes for the site in which I use Giscus.

Can we add a "mode" prop?
But first, do you already recommend a happy path for adding dark and light modes with custom themes? 🤔

Current Solution

Currently I pass in isDarkMode context and toggle the Giscuss theme based on that:

export default function SomeComp() {
  const { isDarkMode } = useContext(GlobalState);
  const theme = isDarkMode ? 'dark' : 'light';
  return (
        <div className='post__giscus'>
          <Giscus
            {...propsNotRelevantToQuestion }
            theme={theme}
          />
        </div>
  )
}

Desired Solution

Mode context is added to the iframe so I can style like so:

/* mytheme.css */
.some-css-class {
  color: #000;
}
[mode=dark] .some-css-class {
  color: #fff;
}

export default function SomeComp() {
  const { isDarkMode } = useContext(GlobalState);
  const mode = isDarkMode ? 'dark' : 'light';
  return (
        <div className='post__giscus'>
          <Giscus
           {...propsNotRelevantToQuestion }
            mode={mode}
            theme='mytheme.css'
          />
        </div>
  )
}

Happy to learn rather than add an uneeded feature if I'm missing something in my understanding! 🙏

	<iframe
	scrolling="no"
	${ref(this._iframeRef)}
	src=${this.getIframeSrc()}
	loading=${this.loading}
	part="iframe"
	></iframe>

giscus / giscus-component Goto Github PK

giscus-component's Introduction

How it works

Advanced usage

Migrating

Sites using giscus

Contributing

giscus-component's People

Contributors

Stargazers

Watchers

Forkers

giscus-component's Issues

Reproducing

Possible cause

Notes

What happened?

Debug

Environment

Others

What happened?

Environment

Please help me!

How to reproduce:

Display

How to reproduce:

Display

Feature Request

Current Solution

Desired Solution

Recommend Projects

Recommend Topics

Recommend Org