2024-07-21 13:05:45 +07:00
|
|
|
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
2024-08-06 02:17:11 +07:00
|
|
|
import { classNames } from "../util/lang"
|
|
|
|
// @ts-ignore
|
|
|
|
import script from "./scripts/comments.inline"
|
2024-07-21 13:05:45 +07:00
|
|
|
|
|
|
|
type Options = {
|
|
|
|
provider: "giscus"
|
|
|
|
options: {
|
|
|
|
repo: `${string}/${string}`
|
|
|
|
repoId: string
|
|
|
|
category: string
|
|
|
|
categoryId: string
|
|
|
|
mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
|
|
|
|
strict?: boolean
|
|
|
|
reactionsEnabled?: boolean
|
|
|
|
inputPosition?: "top" | "bottom"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function boolToStringBool(b: boolean): string {
|
|
|
|
return b ? "1" : "0"
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ((opts: Options) => {
|
2024-08-06 02:17:11 +07:00
|
|
|
const Comments: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
class={classNames(displayClass, "giscus")}
|
|
|
|
data-repo={opts.options.repo}
|
|
|
|
data-repo-id={opts.options.repoId}
|
|
|
|
data-category={opts.options.category}
|
|
|
|
data-category-id={opts.options.categoryId}
|
|
|
|
data-mapping={opts.options.mapping ?? "url"}
|
|
|
|
data-strict={boolToStringBool(opts.options.strict ?? true)}
|
|
|
|
data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
|
|
|
|
data-input-position={opts.options.inputPosition ?? "bottom"}
|
|
|
|
></div>
|
|
|
|
)
|
|
|
|
}
|
2024-07-21 13:05:45 +07:00
|
|
|
|
2024-08-06 02:17:11 +07:00
|
|
|
Comments.afterDOMLoaded = script
|
2024-07-21 13:05:45 +07:00
|
|
|
|
|
|
|
return Comments
|
|
|
|
}) satisfies QuartzComponentConstructor<Options>
|