Adding Utterances via custom component

I would like to add support for comments to my blog via Utterances.

I think the way I am supposed to do it is with a custom component.

Utterances is enabled on a particular page by adding the following HTML.

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

I think I have followed all the instructions for adding a custom component. My problem is that TypeScript doesn’t think repo is a valid attribute of a script element.

TSError: ⨯ Unable to compile TypeScript: .codedoc/components/utterances/index.tsx(11,18): error TS2322: Type ‘{ src: string; repo: string; “issue-term”: string; label: string; theme: string; crossorigin: string; async: true; }’ is not assignable to type ‘ScriptAttributes’. Property ‘repo’ does not exist on type ‘ScriptAttributes’.

Conceptually, I know that I want to add tell the TypeScript type system to allow these attributes for this tag, but I don’t know how to do that. I think it should be something similar to these top search results on SO, but I am not familiar enough with this to know how to apply these solutions for a site hosted by coding.blog.

Here is the branch that contains my attempt to get this working.

How can I enable Utterances on a page of a site hosted by coding.blog?

(My apologies if this is a standard tsx problem and the solution has nothing to do with coding.blog.)

[loreanvictor]

Maybe the documentation about custom components could state that this argument is required (and maybe even give the error message that will occur is this rule is not followed). It could also recommended the idea of using _: any if the argument is not needed.

It’s hard to detect this issue since there is a second argument being passed to the function, its just that the function (the component) expects a renderer while an options parameter is being passed:

• To catch this error on compile time, you would basically need to do typechecking on markdown files,
• Only way to detect it on runtime is to run a check inside the component function at the beginning, which would defeat the purpose since the burden would fall upon the developer writing the component function.

As for documentation though, yes generally connective html and connective sdh are seriously lacking in documentation ATM.

[TysonMN]

Another potentially related issue.

When I try to pass in a theme like this…

> :DarkLight
> > :InLight
> >
> > > :Utterances theme=github-light
>
> > :InDark
> >
> > > :Utterances theme=github-light

…the comments don’t appear in dark mode. See my sample blog post 2.

P.S. I passed in github-light in both cases on purpose since I know that works for my sample blog post in both light and dark modes.