From 26949eb2e4835662e551502268ee061b7c6c83ab Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 03:00:44 +0700 Subject: [PATCH 01/22] Include reactionGroups in discussion query --- lib/adapter.ts | 3 +++ lib/types/adapter.ts | 1 + lib/types/github.ts | 1 + services/github/getDiscussion.ts | 7 +++++++ 4 files changed, 12 insertions(+) diff --git a/lib/adapter.ts b/lib/adapter.ts index be644f736..315ac2255 100644 --- a/lib/adapter.ts +++ b/lib/adapter.ts @@ -72,6 +72,7 @@ export function adaptDiscussion({ const { comments: { pageInfo, totalCount: totalCommentCount, ...commentsData }, + reactionGroups, ...rest } = discussion; @@ -80,6 +81,7 @@ export function adaptDiscussion({ 0, ); + const reactions = adaptReactionGroups(reactionGroups); const comments = commentsData.nodes.map(adaptComment); return { @@ -88,6 +90,7 @@ export function adaptDiscussion({ totalCommentCount, totalReplyCount, pageInfo, + reactions, comments, ...rest, }, diff --git a/lib/types/adapter.ts b/lib/types/adapter.ts index d56031311..559620e6f 100644 --- a/lib/types/adapter.ts +++ b/lib/types/adapter.ts @@ -56,6 +56,7 @@ export interface IGiscussion { repository: { nameWithOwner: string; }; + reactions: IReactionGroups; comments: IComment[]; }; } diff --git a/lib/types/github.ts b/lib/types/github.ts index 3324f7f50..0879af6c2 100644 --- a/lib/types/github.ts +++ b/lib/types/github.ts @@ -63,6 +63,7 @@ export interface GRepositoryDiscussion { repository: { nameWithOwner: string; }; + reactionGroups: GReactionGroup[]; comments: { totalCount: number; pageInfo: { diff --git a/services/github/getDiscussion.ts b/services/github/getDiscussion.ts index bdd8122b8..2252bc7d6 100644 --- a/services/github/getDiscussion.ts +++ b/services/github/getDiscussion.ts @@ -11,6 +11,13 @@ const DISCUSSION_QUERY = ` repository { nameWithOwner } + reactionGroups { + content + users { + totalCount + } + viewerHasReacted + } comments(first: $first last: $last after: $after before: $before) { totalCount pageInfo { From 9878da6ced72c008dafec0c920cb7d4f6d46ebb0 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 03:02:13 +0700 Subject: [PATCH 02/22] Create updateDiscussion mutator function --- services/giscus/discussions.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/services/giscus/discussions.ts b/services/giscus/discussions.ts index 859cceb56..7462a7217 100644 --- a/services/giscus/discussions.ts +++ b/services/giscus/discussions.ts @@ -83,6 +83,12 @@ export function useDiscussions( [data, mutate], ); + const updateDiscussion = useCallback( + (newDiscussions: IGiscussion[], promise?: Promise) => + mutate(newDiscussions, !promise) && promise?.then(() => mutate()), + [mutate], + ); + const updateComment = useCallback( (newComment: IComment, promise?: Promise) => mutate( @@ -132,6 +138,12 @@ export function useDiscussions( isValidating, isLoading: !error && !data, isError: !!error, - mutators: { addNewComment, addNewReply, updateComment, updateReply }, + mutators: { + addNewComment, + addNewReply, + updateDiscussion, + updateComment, + updateReply, + }, }; } From 158b3f5eeaa2f7119a6a8944d4abdd002fad6067 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 03:04:35 +0700 Subject: [PATCH 03/22] Create updateDiscussionReaction function --- lib/reactions.ts | 34 ++++++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/lib/reactions.ts b/lib/reactions.ts index 174413e7f..45d2370ec 100644 --- a/lib/reactions.ts +++ b/lib/reactions.ts @@ -1,4 +1,4 @@ -import { IComment, IReply } from './types/adapter'; +import { IComment, IGiscussion, IReactionGroups, IReply } from './types/adapter'; export const Reactions = { THUMBS_UP: { name: '+1', emoji: '👍' }, @@ -13,20 +13,34 @@ export const Reactions = { export type Reactions = keyof typeof Reactions; +function updateReactionGroups(reactionGroups: IReactionGroups, reaction: Reactions) { + return { + ...reactionGroups, + [reaction]: { + count: reactionGroups[reaction].viewerHasReacted + ? reactionGroups[reaction].count - 1 + : reactionGroups[reaction].count + 1, + viewerHasReacted: !reactionGroups[reaction].viewerHasReacted, + }, + }; +} + +export function updateDiscussionReaction(page: IGiscussion, reaction: Reactions) { + return { + ...page, + discussion: { + ...page.discussion, + reactions: updateReactionGroups(page.discussion.reactions, reaction), + }, + } as IGiscussion; +} + export function updateCommentReaction( comment: T, reaction: Reactions, ) { return { ...comment, - reactions: { - ...comment.reactions, - [reaction]: { - count: comment.reactions[reaction].viewerHasReacted - ? comment.reactions[reaction].count - 1 - : comment.reactions[reaction].count + 1, - viewerHasReacted: !comment.reactions[reaction].viewerHasReacted, - }, - }, + reactions: updateReactionGroups(comment.reactions, reaction), } as T; } From 48a4d0a5c20f30d1c683afaed14f457ca3ccee66 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 03:04:52 +0700 Subject: [PATCH 04/22] Add breakpoints using min-device-width --- tailwind.config.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index f401a8ca5..6e7f97028 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,15 @@ module.exports = { darkMode: 'class', theme: { extend: { + screens: { + // To use device width instead of min-width. + // Might be useful because min-width will take the iframe's width instead. + dsm: { raw: '(min-device-width: 640px)' }, + dmd: { raw: '(min-device-width: 768px)' }, + dlg: { raw: '(min-device-width: 1024px)' }, + dxl: { raw: '(min-device-width: 1280px)' }, + d2xl: { raw: '(min-device-width: 1536px)' }, + }, fontFamily: { sans: [ '-apple-system', From 3bb178d4c4bca7a2688c8e8c83786608adf82db1 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 03:05:29 +0700 Subject: [PATCH 05/22] Use dmd to apply mb in ReactButtons --- components/ReactButtons.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/ReactButtons.tsx b/components/ReactButtons.tsx index df4eda5c8..1b0ce39c4 100644 --- a/components/ReactButtons.tsx +++ b/components/ReactButtons.tsx @@ -44,7 +44,7 @@ export default function ReactButtons({ + ), + [react, token], + ); + + const directReactionButtons = + variant !== 'popoverOnly' + ? Object.entries(reactionGroups) + .filter(([, { count }]) => count > 0) + .map(createReactionButton) + : []; + return ( <> {variant !== 'groupsOnly' ? ( @@ -44,9 +78,9 @@ export default function ReactButtons({ - ) : null, - )} - +
{directReactionButtons}
) : null} ); From 6cb2b237651f08517f0726e40383c473f77d8879 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 07:31:07 +0700 Subject: [PATCH 12/22] Add reactionsEnabled prop to Giscus and Widget components --- components/Giscus.tsx | 11 +++++++++-- components/Widget.tsx | 3 +++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/components/Giscus.tsx b/components/Giscus.tsx index 572ceec28..9f04e0a77 100644 --- a/components/Giscus.tsx +++ b/components/Giscus.tsx @@ -10,10 +10,17 @@ interface IGiscusProps { repo: string; term?: string; number?: number; + reactionsEnabled: boolean; onDiscussionCreateRequest?: () => Promise; } -export default function Giscus({ repo, term, number, onDiscussionCreateRequest }: IGiscusProps) { +export default function Giscus({ + repo, + term, + number, + reactionsEnabled, + onDiscussionCreateRequest, +}: IGiscusProps) { const { token } = useContext(AuthContext); const query = { repo, term, number }; @@ -98,7 +105,7 @@ export default function Giscus({ repo, term, number, onDiscussionCreateRequest } return (
- {backData?.discussion?.id ? ( + {reactionsEnabled && backData?.discussion?.id ? (

From 4dae4642321ed9877ae61047ac52807882bdfa7c Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 07:32:18 +0700 Subject: [PATCH 13/22] Get reactionsEnabled from query param in widget page --- pages/widget.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pages/widget.tsx b/pages/widget.tsx index 926f5e6ec..d594ba52f 100644 --- a/pages/widget.tsx +++ b/pages/widget.tsx @@ -14,6 +14,7 @@ export default function Home() { const repoId = router.query.repoId as string; const categoryId = router.query.categoryId as string; const description = router.query.description as string; + const reactionsEnabled = Boolean(+router.query.reactionsEnabled); return ( <> @@ -29,6 +30,7 @@ export default function Home() { repoId={repoId} categoryId={categoryId} description={description} + reactionsEnabled={reactionsEnabled} /> From b696cdc380d2505c5de88802624b2a4bb0b36d19 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 07:35:59 +0700 Subject: [PATCH 14/22] Lift config values with direct effects from Configuration --- components/Configuration.tsx | 26 ++++++++++++++------------ pages/index.tsx | 22 +++++++++++++++++++--- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/components/Configuration.tsx b/components/Configuration.tsx index 7732b1a53..25ba51bbb 100644 --- a/components/Configuration.tsx +++ b/components/Configuration.tsx @@ -1,7 +1,6 @@ import { CheckIcon, ClippyIcon, SyncIcon, XIcon } from '@primer/octicons-react'; -import { useContext, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { handleClipboardCopy } from '../lib/adapter'; -import { ThemeContext } from '../lib/context'; import { useDebounce } from '../lib/hooks'; import { ICategory } from '../lib/types/adapter'; import { themeOptions } from '../lib/variables'; @@ -93,7 +92,16 @@ function ClipboardCopy() { ); } -export default function Configuration() { +interface DirectConfig { + theme: string; +} + +interface ConfigurationProps { + directConfig: DirectConfig; + onDirectConfigChange: (key: keyof DirectConfig, value: DirectConfig[keyof DirectConfig]) => void; +} + +export default function Configuration({ directConfig, onDirectConfigChange }: ConfigurationProps) { const [repository, setRepository] = useState(''); const [repositoryId, setRepositoryId] = useState(''); const [categoryId, setCategoryId] = useState(''); @@ -101,13 +109,7 @@ export default function Configuration() { const [categories, setCategories] = useState([]); const [mapping, setMapping] = useState('pathname'); const [term, setTerm] = useState(''); - const [theme, setTheme] = useState('light'); const dRepository = useDebounce(repository); - const { setTheme: setGlobalTheme } = useContext(ThemeContext); - - useEffect(() => { - setGlobalTheme(theme); - }, [setGlobalTheme, theme]); useEffect(() => { setError(false); @@ -273,8 +275,8 @@ export default function Configuration() { onDirectConfigChange('reactionsEnabled', event.target.checked)} + > + +

+ The reactions for the {`discussion's`} main post will be shown before the comments. +

+

+

Theme

Choose a theme that matches your website. {`Can't`} find one that does?{' '} @@ -317,6 +336,9 @@ export default function Configuration({ directConfig, onDirectConfigChange }: Co {'"\n '} ) : null} + data-reactions-enabled={'"'} + {Number(directConfig.reactionsEnabled)} + {'"\n '} data-theme={'"'} {directConfig.theme} {'"\n '} diff --git a/pages/index.tsx b/pages/index.tsx index 25f4f2d42..9a8a9f8a6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -45,6 +45,7 @@ export default function Home({ contentBefore, contentAfter }: HomeProps) { const { theme, setTheme } = useContext(ThemeContext); const [directConfig, setDirectConfig] = useState({ theme: 'light', + reactionsEnabled: true, }); const handleDirectConfigChange: DirectConfigHandler = (key, value) => @@ -116,6 +117,7 @@ export default function Home({ contentBefore, contentAfter }: HomeProps) { data-mapping="specific" data-term="Welcome to giscus!" data-theme={theme} + data-reactions-enabled={`${+directConfig.reactionsEnabled}`} > ) : null} diff --git a/styles/base.css b/styles/base.css index 5e8fd4577..a790ad58c 100644 --- a/styles/base.css +++ b/styles/base.css @@ -323,6 +323,14 @@ img.emoji { background-position: right 4px center; } +.form-checkbox { + @apply pl-5 my-[15px] align-middle; +} + +.form-checkbox input[type='checkbox'] { + @apply float-left mt-[3px] -ml-5 align-middle; +} + /* Giscus-specific styles */ .gsc-tl-line { From a947bf5b10dd6604ff401303519b90f39cfc2208 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 07:53:19 +0700 Subject: [PATCH 17/22] Use theme value from directConfig in homepage --- pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index 9a8a9f8a6..147fccf5a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -116,7 +116,7 @@ export default function Home({ contentBefore, contentAfter }: HomeProps) { data-category-id="MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyNzk2NTc1" data-mapping="specific" data-term="Welcome to giscus!" - data-theme={theme} + data-theme={directConfig.theme} data-reactions-enabled={`${+directConfig.reactionsEnabled}`} > From ef9362daa40d1f9627c6490e6e8173f588de8458 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 07:53:45 +0700 Subject: [PATCH 18/22] Unify Configuration styling --- components/Configuration.tsx | 116 +++++++++++++++++------------------ styles/base.css | 5 +- 2 files changed, 59 insertions(+), 62 deletions(-) diff --git a/components/Configuration.tsx b/components/Configuration.tsx index b169bb11c..e0a6dceaa 100644 --- a/components/Configuration.tsx +++ b/components/Configuration.tsx @@ -157,47 +157,45 @@ export default function Configuration({ directConfig, onDirectConfigChange }: Co settings tab of the repository. -

-
- - setRepository(event.target.value)} - type="text" - className="my-2 px-[12px] py-[5px] min-w-[75%] sm:min-w-[50%] form-control border rounded-md placeholder-gray-500" - placeholder="owner/repo" - /> +
+ + setRepository(event.target.value)} + type="text" + className="my-2 px-[12px] py-[5px] min-w-[75%] sm:min-w-[50%] form-control border rounded-md placeholder-gray-500" + placeholder="owner/repo" + /> - {error || (repositoryId && !categories.length) ? ( - <> - -

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

- - ) : repositoryId && categories.length ? ( - <> - -

- Success! This repository meets all of the above criteria. -

- - ) : ( - <> - {!error && !repositoryId && dRepository ? ( - - ) : null} -

- A public GitHub repository. This is where the discussions will be - linked to. -

- - )} -
+ {error || (repositoryId && !categories.length) ? ( + <> + +

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

+ + ) : repositoryId && categories.length ? ( + <> + +

+ Success! This repository meets all of the above criteria. +

+ + ) : ( + <> + {!error && !repositoryId && dRepository ? ( + + ) : null} +

+ A public GitHub repository. This is where the discussions will be + linked to. +

+ + )}

Discussion Category

@@ -224,9 +222,9 @@ export default function Configuration({ directConfig, onDirectConfigChange }: Co

Page ↔️ Discussions Mapping

Choose the mapping between the embedding page and the embedded discussion.

-
+
{mappingOptions.map(({ value, label, description }) => ( -
+
-
- - {['specific', 'number'].includes(mapping) && mapping === value ? ( - setTerm(event.target.value)} - type={mapping === 'number' ? 'number' : 'text'} - className="px-[12px] py-[5px] mt-4 form-control border rounded-md placeholder-gray-500 min-w-[75%] sm:min-w-[50%]" - placeholder={ - mapping === 'number' ? 'Enter discussion number here' : 'Enter term here' - } - /> - ) : null} -
+ +

{description}

+ {['specific', 'number'].includes(mapping) && mapping === value ? ( + setTerm(event.target.value)} + type={mapping === 'number' ? 'number' : 'text'} + className="px-[12px] py-[5px] mt-4 form-control border rounded-md placeholder-gray-500 min-w-[75%] sm:min-w-[50%]" + placeholder={ + mapping === 'number' ? 'Enter discussion number here' : 'Enter term here' + } + /> + ) : null}
))}
diff --git a/styles/base.css b/styles/base.css index a790ad58c..e058dbd9c 100644 --- a/styles/base.css +++ b/styles/base.css @@ -327,8 +327,9 @@ img.emoji { @apply pl-5 my-[15px] align-middle; } -.form-checkbox input[type='checkbox'] { - @apply float-left mt-[3px] -ml-5 align-middle; +.form-checkbox input[type='checkbox'], +.form-checkbox input[type='radio'] { + @apply float-left mt-1 -ml-5 align-middle; } /* Giscus-specific styles */ From b3de3dd40596d5a3e031c3e4c96d4298d4c34dfe Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 09:07:19 +0700 Subject: [PATCH 19/22] Expose SWR's mutate function --- services/giscus/discussions.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/services/giscus/discussions.ts b/services/giscus/discussions.ts index 7462a7217..506b66dab 100644 --- a/services/giscus/discussions.ts +++ b/services/giscus/discussions.ts @@ -144,6 +144,7 @@ export function useDiscussions( updateDiscussion, updateComment, updateReply, + mutate, }, }; } From a12645a28cae27be1f7d7dd149cdddec5f61a00c Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 09:11:51 +0700 Subject: [PATCH 20/22] Allow discussion creation through reaction buttons --- components/Giscus.tsx | 39 +++++++++++++-------- components/ReactButtons.tsx | 69 +++++++++++++++++++++++++++---------- 2 files changed, 74 insertions(+), 34 deletions(-) diff --git a/components/Giscus.tsx b/components/Giscus.tsx index 9f04e0a77..026f6d803 100644 --- a/components/Giscus.tsx +++ b/components/Giscus.tsx @@ -76,7 +76,9 @@ export default function Giscus({ const updateReactions = useCallback( (reaction: Reactions, promise: Promise) => - backMutators.updateDiscussion([updateDiscussionReaction(backData, reaction)], promise), + backData + ? backMutators.updateDiscussion([updateDiscussionReaction(backData, reaction)], promise) + : promise.then(() => backMutators.mutate()), [backData, backMutators], ); @@ -85,6 +87,7 @@ export default function Giscus({ backData?.discussion?.comments?.length - frontData?.reduce((prev, g) => prev + g.discussion.comments?.length, 0); + const totalReactionCount = backData?.discussion?.reactionCount; const totalCommentCount = backData?.discussion?.totalCommentCount; const totalReplyCount = backData?.discussion?.totalReplyCount + @@ -99,37 +102,43 @@ export default function Giscus({ const isNotFound = error?.status === 404; const isLocked = backData?.discussion?.locked; - const shouldShowReplyCount = !error && !isNotFound && !isLoading && totalReplyCount > 0; const shouldShowBranding = !!backData?.discussion?.url; + const shouldShowReplyCount = !error && !isNotFound && !isLoading && totalReplyCount > 0; const shouldShowCommentBox = !isLoading && !isLocked && (!error || (isNotFound && !number)); + const shouldCreateDiscussion = isNotFound && !number; return (
- {reactionsEnabled && backData?.discussion?.id ? ( + {reactionsEnabled && !isLoading ? ( ) : null}

- {isNotFound && !number && !totalCommentCount ? ( + {shouldCreateDiscussion && !totalCommentCount ? ( '0 comments' ) : error && !backData ? ( `An error occurred${error?.message ? `: ${error.message}` : ''}.` diff --git a/components/ReactButtons.tsx b/components/ReactButtons.tsx index f373d6681..8b17028ad 100644 --- a/components/ReactButtons.tsx +++ b/components/ReactButtons.tsx @@ -8,10 +8,36 @@ import { Reactions } from '../lib/reactions'; import { toggleReaction } from '../services/github/toggleReaction'; interface IReactButtonsProps { - reactionGroups: IReactionGroups; - subjectId: string; + reactionGroups?: IReactionGroups; + subjectId?: string; onReact: (content: Reactions, promise: Promise) => void; variant?: 'groupsOnly' | 'popoverOnly' | 'all'; + onDiscussionCreateRequest?: () => Promise; +} + +function PopupInfo({ + isLoggedIn, + isLoading, + current, + loginUrl, +}: { + isLoggedIn: boolean; + isLoading: boolean; + current: string; + loginUrl: string; +}) { + if (isLoading) return <>Please wait...; + if (isLoggedIn) return <>{current || 'Pick your reaction'}; + return ( + <> + + + Sign in + + {' '} + to add your reaction. + + ); } export default function ReactButtons({ @@ -19,8 +45,10 @@ export default function ReactButtons({ subjectId, onReact, variant = 'all', + onDiscussionCreateRequest, }: IReactButtonsProps) { const [current, setCurrent] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); const [ref, isOpen, setIsOpen] = useComponentVisible(false); const { token, origin } = useContext(AuthContext); const loginUrl = getLoginUrl(origin); @@ -28,13 +56,22 @@ export default function ReactButtons({ const togglePopover = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]); const react = useCallback( - (content: Reactions) => { + async (content: Reactions) => { + if (isSubmitting || (!subjectId && !onDiscussionCreateRequest)) return; + setIsSubmitting(!subjectId); + + const id = subjectId ? subjectId : await onDiscussionCreateRequest(); + onReact( content, - toggleReaction({ content, subjectId }, token, reactionGroups[content].viewerHasReacted), + toggleReaction( + { content, subjectId: id }, + token, + !!reactionGroups?.[content]?.viewerHasReacted, + ).then(() => setIsSubmitting(false)), ); }, - [onReact, reactionGroups, subjectId, token], + [isSubmitting, onDiscussionCreateRequest, onReact, reactionGroups, subjectId, token], ); const createReactionButton = useCallback( @@ -66,7 +103,7 @@ export default function ReactButtons({ const directReactionButtons = variant !== 'popoverOnly' - ? Object.entries(reactionGroups) + ? Object.entries(reactionGroups || {}) .filter(([, { count }]) => count > 0) .map(createReactionButton) : []; @@ -91,18 +128,12 @@ export default function ReactButtons({ } ease-in-out duration-100 origin-center transform transition z-20 w-[146px] color-text-secondary color-bg-overlay border rounded top-10 color-border-primary`} >

- {token ? ( - current || 'Pick your reaction' - ) : ( - <> - - - Sign in - - {' '} - to add your reaction. - - )} +

@@ -111,7 +142,7 @@ export default function ReactButtons({ key={key} type="button" className={`w-8 h-8 mr-[-1px] mt-[-1px] rounded-none gsc-emoji-button${ - reactionGroups[key].viewerHasReacted + reactionGroups?.[key]?.viewerHasReacted ? ' border color-bg-info color-border-tertiary' : '' }${!token ? ' cursor-not-allowed' : ''}`} From c0e9e3f52ca110c39948d6308198198fda62b123 Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 09:16:38 +0700 Subject: [PATCH 21/22] Check for discussion creation handler in CommentBox --- components/CommentBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/CommentBox.tsx b/components/CommentBox.tsx index b9fd5e625..a5c2f0227 100644 --- a/components/CommentBox.tsx +++ b/components/CommentBox.tsx @@ -62,7 +62,7 @@ export default function CommentBox({ }, []); const handleClick = useCallback(async () => { - if (isSubmitting) return; + if (isSubmitting || (!discussionId && !onDiscussionCreateRequest)) return; setIsSubmitting(true); const id = discussionId ? discussionId : await onDiscussionCreateRequest(); From 5b1c21aa343dd007bfd8a01f2fb9db53143eec3c Mon Sep 17 00:00:00 2001 From: sage Date: Tue, 1 Jun 2021 09:31:22 +0700 Subject: [PATCH 22/22] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e8935c2b1..0d86108fc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # [giscus][giscus] -A comments widget built on [GitHub Discussions][discussions]. Let visitors sign in with GitHub and leave comments on your website! Heavily inspired by [utterances][utterances]. +A comments system powered by [GitHub Discussions][discussions]. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by [utterances][utterances]. - [Open source][repo]. 🌏 - No tracking, no ads, always free. 📡 🚫 @@ -15,7 +15,7 @@ A comments widget built on [GitHub Discussions][discussions]. Let visitors sign ## how it works -When giscus loads, the [GitHub Discussions search API][search-api] is used to find the Discussion associated with the page based on a chosen mapping (URL, `pathname`, ``, etc.). If a matching discussion cannot be found, the giscus bot will automatically create a discussion the first time someone comments. +When giscus loads, the [GitHub Discussions search API][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][giscus-app] to [post on their behalf][authorization] using the GitHub OAuth flow. Alternatively, visitors can comment on the GitHub Discussion directly. You can moderate the comments on GitHub.