react-utterances-client/dist/index.js

Another React component for using Utterances 🔮 on your website!

"use client";
import * as e from "react";
import t from "classcat";
import { useSyncExternalStore as n } from "use-sync-external-store/shim";
import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
//#region src/style.css?inline
var o = ".utterances{box-sizing:border-box;width:100%;max-width:760px;margin-left:auto;margin-right:auto;position:relative}.utterances-frame{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;border:0;width:1px;min-width:100%;max-width:100%;height:100%;position:absolute;left:0;right:0}";
//#endregion
//#region src/hooks.ts
function s(e, t) {
	window.dispatchEvent(new StorageEvent("storage", {
		key: e,
		newValue: t
	}));
}
var c = (e, t, n) => {
	e.setItem(t, n), s(t, n);
}, l = (e, t) => {
	e.removeItem(t), s(t);
}, u = (e, t) => e.getItem(t), d = (e) => (window.addEventListener("storage", e), () => window.removeEventListener("storage", e)), f = () => "", p = (e) => e === "session" ? window.sessionStorage : window.localStorage;
function m(t) {
	let r = "utterances-session", i = n(d, () => u(p(t), r), f), a = e.useCallback((e) => {
		try {
			let n = typeof e == "function" ? e(i || "") : e;
			n == null ? l(p(t), r) : c(p(t), r, n);
		} catch (e) {
			console.warn(e);
		}
	}, [
		r,
		i,
		t
	]);
	return e.useEffect(() => {
		u(p(t), r) === null && c(p(t), r, "");
	}, [r, t]), [i || "", a];
}
//#endregion
//#region src/Utterances.tsx
var h = "preferred-color-scheme", g = "https://utteranc.es", _ = `${g}/utterances.html`, v = ({ repo: n, theme: s = "github-light", label: c, issueNumber: l, issueTerm: u, tokenStorage: d = "local", loading: f = "lazy", onLoad: p, onError: v, placeholder: y = !1, containerClassName: b, containerStyle: x, iframeClassName: S, iframeStyle: C }) => {
	let [w, T] = e.useState({}), [E, D] = e.useState(!1), [O, k] = m(d);
	e.useEffect(() => {
		let e = document.createElement("style");
		return e.appendChild(document.createTextNode(o)), document.head.appendChild(e), () => {
			document.head.removeChild(e);
		};
	}, []), e.useEffect(() => {
		let e = {};
		e.repo = n, s === h ? e.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "github-dark" : "github-light" : e.theme = s, c && (e.label = c), l && (e["issue-number"] = String(l)), u && (Array.isArray(u) ? e["issue-term"] = u.join(" ") : e["issue-term"] = u);
		let t = new URL(location.href), r = t.searchParams.get("utterances");
		r && (k(r), t.searchParams.delete("utterances"), history.replaceState(void 0, document.title, t.href));
		let i = document.querySelector("link[rel='canonical']");
		e.url = i ? i.href : t.origin + t.pathname + t.search, e.origin = t.origin, e.pathname = t.pathname.length < 2 ? "index" : t.pathname.slice(1).replace(/\.\w+$/, ""), e.title = document.title;
		let a = document.querySelector("meta[name='description']");
		e.description = a ? a.content : "";
		let o = encodeURIComponent(e.description).length;
		o > 1e3 && (e.description = e.description.slice(0, Math.floor(e.description.length * 1e3 / o)));
		let d = document.querySelector("meta[property='og:title'],meta[name='og:title']");
		return e["og:title"] = d ? d.content : "", e.session = r || O || "", T(e), () => {
			T({});
		};
	}, [
		n,
		s,
		c,
		l,
		u,
		d,
		O,
		k
	]);
	let A = e.useRef(null), j = e.useCallback((e) => {
		if (e.origin !== g) return;
		let t = e.data;
		t && t.type === "resize" && t.height && A.current && (A.current.style.height = `${t.height}px`);
	}, []);
	e.useEffect(() => (window.addEventListener("message", j), () => window.removeEventListener("message", j)), [j]);
	let M = e.useMemo(() => JSON.stringify(w) !== "{}", [w]), N = e.useCallback((e) => {
		D(!0), p && p(e);
	}, [p]), P = e.useMemo(() => typeof y == "boolean" ? y ? /* @__PURE__ */ i("p", { children: "Loading comments..." }) : null : y, [y]);
	return /* @__PURE__ */ i("div", {
		className: t(["utterances", b]),
		ref: A,
		style: x,
		children: M && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("iframe", {
			className: t(["utterances-frame", S]),
			title: "Comments",
			scrolling: "no",
			src: `${_}?${new URLSearchParams(w)}`,
			loading: y ? "eager" : f,
			style: {
				display: !E && y ? "none" : "block",
				...C
			},
			onLoad: N,
			onError: v
		}), !E && P] })
	});
};
//#endregion
export { v as Utterances };