diff --git a/site/src/docs/manuals/integration-with-astro/index.md b/site/src/docs/manuals/integration-with-astro/index.md new file mode 100644 index 00000000..accd927c --- /dev/null +++ b/site/src/docs/manuals/integration-with-astro/index.md @@ -0,0 +1,124 @@ +# Using Remark42 in Astro (w/Svelte Components) + +[Astro](https://astro.build/) is an all-in-one web framework for building fast, content-focused websites. + +- **Content-focused:** Astro was designed for content-rich websites. +- **Server-first:** Websites run faster when they render HTML on the server. +- **Fast by default:** It should be impossible to build a slow website in Astro. +- **Easy to use:** You don't need to be an expert to build something with Astro. +- **Fully-featured, but flexible:** Over 100+ Astro integrations to choose from. + +While Astro supports numerous front-end framework [integrations](https://docs.astro.build/en/guides/integrations-guide/#official-integrations) (e.g. React, Vue, SolidJS, etc.) this integration implements [Svelte](https://docs.astro.build/en/guides/integrations-guide/svelte/) components and Astro's [islands architecture](https://docs.astro.build/en/concepts/islands/) for partial hydration. + + + +## Svelte Component (Embedded Frame) +### remark42-embed.svelte +```js + + + + +
+``` + +## Astro Layout (Page) +### blogpageLayout.astro (partial Astro layout) +```js +--- +... +import Remark42Embed from "../components/remark42-embed.svelte"; + +export interface Props { + frontmatter: Frontmatter; +} + +const { frontmatter } = Astro.props; +--- + + ... +
+ +
+ {frontmatter.comments && } + ... + +``` +Note the use of the `client:visible` directive which will hydrate the component once the element becomes visible. + +## Svelte Component (Counter) +### remark42-counter.svelte +```js + + + + + + + +``` + +## Astro Component (Card) +### blogCard.astro (partial Astro component) +```js +--- +const { post } = Astro.props; + +import Remark42Count from "../components/remark42-count.svelte"; +... +--- +
+ ... + + { + post.frontmatter.comments && ( +
+ {post.frontmatter.minutes} minutes  •  + comments +
+ ) + } + ... +
+``` +Note the use of the `client:idle` directive which will hydrate the component once the page has completed the initial load. \ No newline at end of file diff --git a/site/src/docs/nav.json b/site/src/docs/nav.json index bb1bf2a3..7624f011 100644 --- a/site/src/docs/nav.json +++ b/site/src/docs/nav.json @@ -64,6 +64,10 @@ "title": "Kubernetes", "href": "/manuals/kubernetes/" }, + { + "title": "Astro Integration (w/Svelte)", + "href": "/manuals/integration-with-astro/" + }, { "title": "Gatsby Integration", "href": "/manuals/integration-with-gatsby/"