-
|
Just wanted to say thanks for developing this - it works great! My site uses Astro with Svelte integration, so I thought I'd share the svelte components for anybody else that might need them (or want to fix/improve on them): file: remark42-embed.svelte<svelte:head>
<script async lang="javascript">
var remark_config = {
host: "https://your.website.here",
site_id: "yourwebsite",
components: ["embed"],
show_rss_subsription: false,
theme: localStorage.getItem("color-theme") ?? "light",
};
!(function (e, n) {
for (var o = 0; o < e.length; o++) {
var r = n.createElement("script"),
c = ".js",
d = n.head || n.body;
"noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
(r.defer = !0),
(r.src = remark_config.host + "/web/" + e[o] + c),
d.appendChild(r);
}
})(remark_config.components || ["embed"], document);
</script>
</svelte:head>
<div id="remark42" />file: blogpageLayout.astro (partial Astro layout)---
...
import Remark42Embed from "../components/remark42-embed.svelte";
export interface Props {
frontmatter: Frontmatter;
}
const { frontmatter } = Astro.props;
---
<html lang="en">
...
<article class="markdown">
<slot />
</article>
{frontmatter.comments && <Remark42Embed client:visible />}
...
</html>file: remark42-counter.svelte<script>
export let url;
</script>
<svelte:head>
<script async lang="javascript">
var remark_config = {
host: "https://your.website.here",
site_id: "yourwebsite",
components: ["counter"],
show_rss_subsription: false,
theme: localStorage.getItem("color-theme") ?? "light",
};
!(function (e, n) {
for (var o = 0; o < e.length; o++) {
var r = n.createElement("script"),
c = ".js",
d = n.head || n.body;
"noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
(r.defer = !0),
(r.src = remark_config.host + "/web/" + e[o] + c),
d.appendChild(r);
}
})(remark_config.components || ["embed"], document);
</script>
</svelte:head>
<span class="remark42__counter" data-url={url.href} />file: blogCard.astro (partial Astro component)---
const { post } = Astro.props;
import Remark42Count from "../components/remark42-count.svelte";
...
---
<div>
...
<!-- Read Time & Comment Count -->
{
post.frontmatter.comments && (
<div class="my-2 text-center font-Roboto font-light text-gray-600 dark:text-gray-300">
{post.frontmatter.minutes} minutes •
<Remark42Count url={new URL(post.url, Astro.site)} client:load /> comments
</div>
)
}
...
</div>Cheers! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Great work! Could you please add it to the docs like Gatsby integration is added? UPD: published by https://remark42.com/docs/manuals/integration-with-astro/ |
Beta Was this translation helpful? Give feedback.
-
|
No problem - sorry, I just noticed this. Please see PR #1581. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot @snarkipus! |
Beta Was this translation helpful? Give feedback.
Great work! Could you please add it to the docs like Gatsby integration is added?
UPD: published by https://remark42.com/docs/manuals/integration-with-astro/