The Trans Directory
feat: comments (giscus)
+152
-1
+83
docs/features/comments.md
+83
docs/features/comments.md
···
1
+
---
2
+
title: Comments
3
+
tags:
4
+
- component
5
+
---
6
+
7
+
Quartz also has the ability to hook into various providers to enable readers to leave comments on your site.
8
+
9
+
![[giscus-example.png]]
10
+
11
+
As of today, only [Giscus](https://giscus.app/) is supported out of the box but PRs to support other providers are welcome!
12
+
13
+
## Providers
14
+
15
+
### Giscus
16
+
17
+
First, make sure that the [[setting up your GitHub repository|GitHub]] repository you are using for your Quartz meets the following requirements:
18
+
19
+
1. The **repository is [public](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/setting-repository-visibility#making-a-repository-public)**, otherwise visitors will not be able to view the discussion.
20
+
2. The **[giscus](https://github.com/apps/giscus) app is installed**, otherwise visitors will not be able to comment and react.
21
+
3. The **Discussions feature is turned on** by [enabling it for your repository](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository).
22
+
23
+
Then, use the [Giscus site](https://giscus.app/#repository) to figure out what your `repoId` and `categoryId` should be. Make sure you select `Announcements` for the Discussion category.
24
+
25
+
![[giscus-repo.png]]
26
+
27
+
![[giscus-discussion.png]]
28
+
29
+
After entering both your repository and selecting the discussion category, Giscus will compute some IDs that you'll need to provide back to Quartz. You won't need to manually add the script yourself as Quartz will handle that part for you but will need these values in the next step!
30
+
31
+
![[giscus-results.png]]
32
+
33
+
Finally, in `quartz.layout.ts`, edit the `afterBody` field of `sharedPageComponents` to include the following options but with the values you got from above:
34
+
35
+
```ts title="quartz.layout.ts"
36
+
afterBody: [
37
+
Component.Comments({
38
+
provider: 'giscus',
39
+
options: {
40
+
// from data-repo
41
+
repo: 'jackyzha0/quartz',
42
+
// from data-repo-id
43
+
repoId: 'MDEwOlJlcG9zaXRvcnkzODcyMTMyMDg',
44
+
// from data-category
45
+
category: 'Announcements',
46
+
// from data-category-id
47
+
categoryId: 'DIC_kwDOFxRnmM4B-Xg6',
48
+
}
49
+
}),
50
+
],
51
+
```
52
+
53
+
### Customization
54
+
55
+
Quartz also exposes a few of the other Giscus options as well and you can provide them the same way `repo`, `repoId`, `category`, and `categoryId` are provided.
56
+
57
+
```ts
58
+
type Options = {
59
+
provider: "giscus"
60
+
options: {
61
+
repo: `${string}/${string}`
62
+
repoId: string
63
+
category: string
64
+
categoryId: string
65
+
66
+
// how to map pages -> discussions
67
+
// defaults to 'url'
68
+
mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
69
+
70
+
// use strict title matching
71
+
// defaults to true
72
+
strict?: boolean
73
+
74
+
// whether to enable reactions for the main post
75
+
// defaults to true
76
+
reactionsEnabled?: boolean
77
+
78
+
// where to put the comment input box relative to the comments
79
+
// defaults to 'bottom'
80
+
inputPosition?: "top" | "bottom"
81
+
}
82
+
}
83
+
```
docs/images/giscus-discussion.png
docs/images/giscus-discussion.png
This is a binary file and will not be displayed.
docs/images/giscus-example.png
docs/images/giscus-example.png
This is a binary file and will not be displayed.
docs/images/giscus-repo.png
docs/images/giscus-repo.png
This is a binary file and will not be displayed.
docs/images/giscus-results.png
docs/images/giscus-results.png
This is a binary file and will not be displayed.
+1
-1
docs/index.md
+1
-1
docs/index.md
···
31
31
32
32
## 🔧 Features
33
33
34
-
- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]] and [many more](./features) right out of the box
34
+
- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]], [[comments]] and [many more](./features) right out of the box
35
35
- Hot-reload for both configuration and content
36
36
- Simple JSX layouts and [[creating components|page components]]
37
37
- [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes
+66
quartz/components/Comments.tsx
+66
quartz/components/Comments.tsx
···
1
+
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
2
+
3
+
type Options = {
4
+
provider: "giscus"
5
+
options: {
6
+
repo: `${string}/${string}`
7
+
repoId: string
8
+
category: string
9
+
categoryId: string
10
+
mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
11
+
strict?: boolean
12
+
reactionsEnabled?: boolean
13
+
inputPosition?: "top" | "bottom"
14
+
}
15
+
}
16
+
17
+
function boolToStringBool(b: boolean): string {
18
+
return b ? "1" : "0"
19
+
}
20
+
21
+
export default ((opts: Options) => {
22
+
const Comments: QuartzComponent = (_props: QuartzComponentProps) => <div class="giscus"></div>
23
+
Comments.afterDOMLoaded = `
24
+
const giscusScript = document.createElement("script")
25
+
giscusScript.src = "https://giscus.app/client.js"
26
+
giscusScript.async = true
27
+
giscusScript.crossOrigin = "anonymous"
28
+
giscusScript.setAttribute("data-loading", "lazy")
29
+
giscusScript.setAttribute("data-emit-metadata", "0")
30
+
giscusScript.setAttribute("data-repo", "${opts.options.repo}")
31
+
giscusScript.setAttribute("data-repo-id", "${opts.options.repoId}")
32
+
giscusScript.setAttribute("data-category", "${opts.options.category}")
33
+
giscusScript.setAttribute("data-category-id", "${opts.options.categoryId}")
34
+
giscusScript.setAttribute("data-mapping", "${opts.options.mapping ?? "url"}")
35
+
giscusScript.setAttribute("data-strict", "${boolToStringBool(opts.options.strict ?? true)}")
36
+
giscusScript.setAttribute("data-reactions-enabled", "${boolToStringBool(opts.options.reactionsEnabled ?? true)}")
37
+
giscusScript.setAttribute("data-input-position", "${opts.options.inputPosition ?? "bottom"}")
38
+
39
+
const theme = document.documentElement.getAttribute("saved-theme")
40
+
giscusScript.setAttribute("data-theme", theme)
41
+
document.head.appendChild(giscusScript)
42
+
43
+
const changeTheme = (e) => {
44
+
const theme = e.detail.theme
45
+
const iframe = document.querySelector('iframe.giscus-frame')
46
+
if (!iframe) {
47
+
return
48
+
}
49
+
50
+
iframe.contentWindow.postMessage({
51
+
giscus: {
52
+
setConfig: {
53
+
theme: theme
54
+
}
55
+
}
56
+
}, 'https://giscus.app')
57
+
}
58
+
59
+
document.addEventListener("nav", () => {
60
+
document.addEventListener("themechange", changeTheme)
61
+
window.addCleanup(() => document.removeEventListener("themechange", changeTheme))
62
+
})
63
+
`
64
+
65
+
return Comments
66
+
}) satisfies QuartzComponentConstructor<Options>
+2
quartz/components/index.ts
+2
quartz/components/index.ts
···
19
19
import MobileOnly from "./MobileOnly"
20
20
import RecentNotes from "./RecentNotes"
21
21
import Breadcrumbs from "./Breadcrumbs"
22
+
import Comments from "./Comments"
22
23
23
24
export {
24
25
ArticleTitle,
···
42
43
RecentNotes,
43
44
NotFound,
44
45
Breadcrumbs,
46
+
Comments,
45
47
}