1  ---
 2  title: Utterances - Comment section that just works
 3  date: 2021-02-22
 4  description: I've been wanting to add a comment section to my website because why not
 5  tags:
 6      - website
 7  ---
 8  
 9  [gatsby-link]: https://www.gatsbyjs.com/
10  [react-link]: https://reactjs.org/
11  [svelte-link]: https://svelte.dev/
12  [sapper-link]: https://sapper.svelte.dev/
13  [mdsvex-link]: https://mdsvex.com/
14  [disqus-link]: https://disqus.com/
15  [utterances-link]: https://github.com/utterance/utterances
16  [utterances-web]: https://utteranc.es/
17  [giscus-web]: https://giscus.app/
18  [issue-link]: https://github.com/utterance/utterances/issues/427
19  
20  # Introduction
21  
22  If you've been following my website long enough, you might have known that I remake my website quite a while ago. I went from [Gatsby][gatsby-link] which uses [React][react-link] + MD to [Sapper][sapper-link] which uses [Svelte][svelte-link] + [MDsveX][mdsvex-link].
23  
24  I had a comment section on my old website using [Disqus][disqus-link]. I want to add that to my new website but I think that's not really what I want because it requires a Disqus Account. While I was browsing through Github, I found [Utterances][utterances-link]. It uses Github issues to store the comments, I think this is great! I'm pretty sure most people who visit my website already have a Github account, they wouldn't need to create a new account.
25  
26  # Installation
27  
28  Adding **utterances** is really straightforward, you just need to go to [their website][utterances-web], fill the configuration, and grab the snippet. The next step is putting it where you want it to appear. In my case, it's below every post. Here's a short snippet to illustrate what I meant.
29  
30  ```html
31  <section>
32  	<main>
33  		<!-- This is the main content -->
34  		<h1>Comments</h1>
35  		{#if $theme === "dark"}
36  		<div>
37  			<script
38  				src="https://utteranc.es/client.js"
39  				repo="elianiva/elianiva.my.id"
40  				issue-term="pathname"
41  				label="Comments"
42  				theme="dark-blue"
43  				crossorigin="anonymous"
44  				async
45  			></script>
46  		</div>
47  		{:else}
48  		<div>
49  			<script
50  				src="https://utteranc.es/client.js"
51  				repo="elianiva/elianiva.my.id"
52  				issue-term="pathname"
53  				label="Comments"
54  				theme="github-light"
55  				crossorigin="anonymous"
56  				async
57  			></script>
58  		</div>
59  		{/if}
60  	</main>
61  </section>
62  ```
63  
64  I added an `if-statement` because my website has light-theme and dark-theme and **utterances** doesn't support changing the theme on-the-fly, at least _yet_. It's an [open issue][issue-link]. You could do something similar with CSS where you hide one of the comment sections depending on the active theme.
65  
66  # Closing Note
67  
68  I wasn't thinking about making this post but ended up making it so I can test the comment section XD
69  
70  It's a lot shorter than usual, but still, thank you if you've read this far. Have a wonderful day! :)
71  
72  import Update from "~/components/Update.astro";
73  
74  <Update date="2022-09-29">
75  
76  As of now, I updated my website to use [Giscus][giscus-web] because I realised that if I use the issues page for comments, it's harder for me to keep track of the actual issues :p
77  
78  </Update>