mercury/src/components/Comments.astro
2025-05-07 18:26:08 +08:00

51 lines
No EOL
1.7 KiB
Text

---
import {siteConfig} from "../config";
import FediverseComments from "./helper/comments/Fediverse.astro";
const method = siteConfig.comments.type
const ArtalkConfig = siteConfig.comments.artalk
const giscusConfig = siteConfig.comments.giscus
interface Props {
path?: string;
}
let { path='/' } = Astro.props;
---
{method === 'artalk' &&
<div>
<!-- CSS -->
<link href={`https://${ArtalkConfig.instanceDomain}/dist/Artalk.css`} rel="stylesheet">
<!-- JS -->
<script src={`https://${ArtalkConfig.instanceDomain}/dist/Artalk.js`}></script>
<!-- Artalk -->
<div id="Comments"></div>
<script define:vars={{ instanceDomain: ArtalkConfig.instanceDomain, pagePath: path }}>
Artalk.init({
el: '#Comments',
pageKey: pagePath, // Using the passed variable
server: `https://${instanceDomain}`, // Using the passed variable
})
</script>
</div>
}
{method === 'giscus' && (
<script
src="https://giscus.app/client.js"
data-repo={giscusConfig.repo}
data-repo-id={giscusConfig.repoId}
data-category={giscusConfig.category}
data-category-id={giscusConfig.categoryId}
data-mapping={giscusConfig.mapping}
data-strict={giscusConfig.strict}
data-reactions-enabled={giscusConfig.reactionsEnabled}
data-emit-metadata={giscusConfig.emitMetadata}
data-input-position={giscusConfig.inputPosition}
data-theme={giscusConfig.theme}
data-lang={giscusConfig.lang}
crossorigin="anonymous"
async
></script>
)}
{method === 'fediverse' && <FediverseComments path={path} /> }