docs: add community plugins in README and docs

BearToCode · Jan 22, 2024 · 893742d · 893742d
1 parent d332852
commit 893742d
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,15 @@ Differently from most editors, Carta includes neither ProseMirror nor CodeMirror
 | [plugin-attachment](https://www.npmjs.com/package/@cartamd/plugin-attachment) | ![plugin-attachment](https://img.shields.io/npm/v/@cartamd/plugin-attachment) | [/plugins/attachment](https://beartocode.github.io/carta/plugins/attachment) |
 | [plugin-anchor](https://www.npmjs.com/package/@cartamd/plugin-anchor)         | ![plugin-anchor](https://img.shields.io/npm/v/@cartamd/plugin-anchor)         | [/plugins/anchor](https://beartocode.github.io/carta/plugins/anchor)         |
 
+## Community plugins
+
+| Plugin                                                                        | Description                        |
+| ----------------------------------------------------------------------------- | ---------------------------------- |
+| [carta-plugin-video](https://github.com/maisonsmd/carta-plugin-video)         | Render online videos               |
+| [carta-plugin-imsize](https://github.com/maisonsmd/carta-plugin-imsize)       | Render images in specific sizes    |
+| [carta-plugin-subscript](https://github.com/maisonsmd/carta-plugin-subscript) | Render subscripts and superscripts |
+| [carta-plugin-ins-del](https://github.com/maisonsmd/carta-plugin-ins-del)     | `<ins>` and `<del>` tags support   |
+
 # Getting started
 
 > [!WARNING]
@@ -128,6 +137,7 @@ For the full documentation, examples, guides and more checkout the [website](htt
   - [Slash](https://beartocode.github.io/carta/plugins/slash)
   - [TikZ](https://beartocode.github.io/carta/plugins/tikz)
   - [Attachment](https://beartocode.github.io/carta/plugins/attachment)
+  - [Anchor](https://beartocode.github.io/carta/plugins/anchor)
 - API:
   - [Utilities](https://beartocode.github.io/carta/api/utilities)
   - [Core](https://beartocode.github.io/carta/api/core)
@@ -148,3 +158,12 @@ npm run commit
 # or, if you have commitizen installed globally
 git cz
 ```
+
+### Running docs
+
+If you want to preview the docs:
+
+```
+cd docs
+npm run dev
+```
diff --git a/docs/src/lib/components/link/PluginLink.svelte b/docs/src/lib/components/link/PluginLink.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Archive, GithubLogo } from 'radix-icons-svelte';
+
+	export let npmLink: string;
+	export let githubLink: string;
+</script>
+
+<div class="plugin-link mb-2 mt-6 inline-flex items-center space-x-3">
+	<slot />
+
+	<a href={githubLink}>
+		<GithubLogo class="h-6 w-6 text-white hover:text-sky-300" />
+	</a>
+	<a href={npmLink}>
+		<Archive class="h-6 w-6 text-white hover:text-sky-300" />
+	</a>
+</div>
+
+<style>
+	:global(.plugin-link h1, .plugin-link h2, .plugin-link h3) {
+		margin: 0;
+	}
+</style>
diff --git a/docs/src/lib/components/sidebar/Sidebar.svelte b/docs/src/lib/components/sidebar/Sidebar.svelte
@@ -10,7 +10,8 @@
 		Link2,
 		Slash,
 		File,
-		FontStyle
+		FontStyle,
+		Stack
 	} from 'radix-icons-svelte';
 	import SidebarLink from './SidebarLink.svelte';
 
@@ -46,6 +47,12 @@
 		<span class="text-[0.95rem]">Editing Styles</span>
 	</SidebarLink>
 
+	<!-- Community Plugins -->
+	<SidebarLink href="/community-plugins">
+		<Stack class="h-5 w-5" />
+		<span class="text-[0.95rem]">Community Plugins</span>
+	</SidebarLink>
+
 	<h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0">Plugins</h3>
 
 	<!-- Math -->

diff --git a/docs/src/pages/community-plugins.svelte.md b/docs/src/pages/community-plugins.svelte.md
@@ -0,0 +1,83 @@
+---
+title: Community Plugins
+section: Overview
+---
+
+<script>
+  import PluginLink from '$lib/components/link/PluginLink.svelte';
+  import Code from '$lib/components/code/Code.svelte';
+</script>
+
+Here are is a list of several plugins developed by the community:
+
+<PluginLink
+npmLink="https://github.com/maisonsmd/carta-plugin-subscript"
+githubLink="https://github.com/maisonsmd/carta-plugin-subscript">
+
+### `carta-plugin-subscript`
+
+</PluginLink>
+
+> Adds ability to render online video from Youtube or Vimeo.
+
+<Code>
+
+```
+npm i carta-plugin-subscript
+```
+
+</Code>
+
+<PluginLink
+npmLink="https://github.com/maisonsmd/carta-plugin-imsize"
+githubLink="https://www.npmjs.com/package/carta-plugin-imsize">
+
+### `carta-plugin-imsize`
+
+</PluginLink>
+
+> Adds ability to render images in specific sizes.
+
+<Code>
+
+```
+npm i carta-plugin-imsize
+```
+
+</Code>
+
+<PluginLink
+npmLink="https://github.com/maisonsmd/carta-plugin-ins-del"
+githubLink="https://github.com/maisonsmd/carta-plugin-ins-del">
+
+### `carta-plugin-ins-del`
+
+</PluginLink>
+
+> `<ins>` and `<del>` tags support
+
+<Code>
+
+```
+npm i carta-plugin-ins-del
+```
+
+</Code>
+
+<PluginLink
+npmLink="https://github.com/maisonsmd/carta-plugin-subscript"
+githubLink="https://github.com/maisonsmd/carta-plugin-subscript">
+
+### `carta-plugin-subscript`
+
+</PluginLink>
+
+> Adds ability to render subscripts and superscripts.
+
+<Code>
+
+```
+npm i carta-plugin-subscript
+```
+
+</Code>
diff --git a/docs/src/pages/introduction.svelte.md b/docs/src/pages/introduction.svelte.md
@@ -85,6 +85,14 @@ Carta comes with a set of official plugins for the most common use cases.
 </Card.Header>
 </Card.Root>
 
+<Card.Root href="/community-plugins">
+<Card.Header>
+<Icon.Stack class="w-8 h-8 text-sky-300" />
+<Card.Title>Community Plugins</Card.Title>
+<Card.Description>Explore plugins from the community.</Card.Description>
+</Card.Header>
+</Card.Root>
+
 </div>
 
 ## Examples

diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte
@@ -24,6 +24,6 @@
 			<slot />
 			<Footer />
 		</main>
-		<HeaderTracker class="sticky top-24 hidden w-[20rem] xl:block" />
+		<HeaderTracker class="sticky top-24 hidden w-[30rem] xl:block" />
 	</div>
 </div>