docs(plugin-video): add docs for carta-video plugin

Add docs for carta-video plugin
BearToCode · Jan 18, 2024 · bc0574b · bc0574b
1 parent 0c5fba6
commit bc0574b
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 1 deletion.
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,
+		Video
 	} from 'radix-icons-svelte';
 	import SidebarLink from './SidebarLink.svelte';
 
@@ -90,6 +91,12 @@
 		<span class="text-[0.95rem]">Anchor</span>
 	</SidebarLink>
 
+	<!-- Video -->
+	<SidebarLink href="/plugins/video">
+		<Video class="h-5 w-5" />
+		<span class="text-[0.95rem]">Video</span>
+	</SidebarLink>
+
 	<h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0">API</h3>
 
 	<!-- Utilities -->

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="/plugins/video">
+<Card.Header>
+<Icon.Video class="w-8 h-8 text-sky-300" />
+<Card.Title>Video</Card.Title>
+<Card.Description>Embed online videos in Markdown</Card.Description>
+</Card.Header>
+</Card.Root>
+
 </div>
 
 ## Examples

diff --git a/docs/src/pages/plugins/video.svelte.md b/docs/src/pages/plugins/video.svelte.md
@@ -0,0 +1,124 @@
+---
+section: Plugins
+title: Video
+---
+
+<script>
+	import Code from '$lib/components/code/Code.svelte';
+	import { Carta, CartaViewer } from 'carta-md';
+	import { video } from '@cartamd/plugin-video';
+	import '@cartamd/plugin-video/default.css';
+
+	const carta = new Carta({
+		extensions: [
+			video()
+		]
+	});
+
+	const youtube = `@[youtube](dQw4w9WgXcQ)`;
+	const vimeo = `@[vimeo](https://vimeo.com/347119375)`;
+</script>
+
+This plugin adds ability to render online video from Youtube or Vimeo.
+
+## Installation
+
+<Code>
+
+```
+npm i @cartamd/plugin-video
+```
+
+</Code>
+
+## Setup
+
+### Styles
+
+Import the default theme, or create you own:
+
+<Code>
+
+```ts
+import '@cartamd/plugin-video/default.css';
+```
+
+Note that the `align` function needs the default css to work properly.
+
+</Code>
+
+### Extension
+
+<Code>
+
+```svelte
+<script>
+	import { Carta, CartaEditor } from 'carta-md';
+	import { video } from '@cartamd/plugin-video';
+
+	const carta = new Carta({
+		extensions: [video()]
+	});
+</script>
+
+<CartaEditor {carta} />
+```
+
+</Code>
+
+## Usage
+
+You can use either video ID (e.g: `dQw4w9WgXcQ`) or video URL (e.g: `https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley`)
+
+For Youtube:
+
+<Code>
+
+```markdown
+@[youtube](dQw4w9WgXcQ)
+```
+
+</Code>
+
+<CartaViewer {carta} value={youtube} />
+
+For Vimeo:
+
+<Code>
+
+```markdown
+@[vimeo](https://vimeo.com/347119375)
+```
+
+</Code>
+
+<CartaViewer {carta} value={vimeo} />
+
+## Options
+
+Here are the options you can pass to `video()`:
+
+```ts
+export interface VideoExtensionOptions {
+	/**
+	 * Width of the video (in pixels or percentage string), defaults to 640.
+	 */
+	width?: number | string;
+	/**
+	 * Height of the video (in pixel or percentage string), defaults to 360.
+	 */
+	height?: number | string;
+	/**
+	 * Horizontal alignment of the video, defaults to 'center'.
+	 */
+	align?: 'left' | 'center' | 'right';
+	/**
+	 * Allow fullscreen, defaults to true.
+	 */
+	allowFullscreen?: boolean;
+	/**
+	 * Use youtube-nocookie.com domain, defaults to false.
+	 */
+	noCookie?: boolean;
+}
+```