add Markdoc tags - Tabs, YT embed

src/components/mdoc/Tabs/Tab.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { getContext } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const tab = {};
+	const { registerTab, selectTab, selectedTab } = getContext(TABS);
+
+	registerTab(tab);
+</script>
+
+<style>
+	button {
+        @apply bg-none border-b-2 border-solid border-white m-0 text-gray-400 px-4 py-1;
+	}
+
+	.selected {
+        @apply border-b-2 border-solid border-gray-700 text-gray-700;
+	}
+</style>
+
+<button class:selected="{$selectedTab === tab}" on:click="{() => selectTab(tab)}">
+	<slot></slot>
+</button>

src/components/mdoc/Tabs/TabList.svelte

@@ -0,0 +1,9 @@
+<div class="tab-list">
+	<slot></slot>
+</div>
+
+<style>
+	.tab-list {
+        @apply border-b border-solid border-gray-500;
+	}
+</style>

src/components/mdoc/Tabs/TabPanel.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { getContext } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const panel = {};
+	const { registerPanel, selectedPanel } = getContext(TABS);
+
+	registerPanel(panel);
+</script>
+
+{#if $selectedPanel === panel}
+	<slot></slot>
+{/if}

src/components/mdoc/Tabs/Tabs.astro

@@ -0,0 +1,11 @@
+---
+import Tabs from './index.svelte'
+import type { TabItem } from './tabs'
+
+interface Props {
+    tabs: TabItem[]
+}
+
+const { tabs } = Astro.props
+---
+<Tabs tabs={tabs} client:visible/>

src/components/mdoc/Tabs/Tabs.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+	export const TABS = {};
+</script>
+
+<script>
+	import { setContext, onDestroy } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const tabs = [];
+	const panels = [];
+	const selectedTab = writable(null);
+	const selectedPanel = writable(null);
+
+	setContext(TABS, {
+		registerTab: tab => {
+			tabs.push(tab);
+			selectedTab.update(current => current || tab);
+
+			onDestroy(() => {
+				const i = tabs.indexOf(tab);
+				tabs.splice(i, 1);
+				selectedTab.update(current => current === tab ? (tabs[i] || tabs[tabs.length - 1]) : current);
+			});
+		},
+
+		registerPanel: panel => {
+			panels.push(panel);
+			selectedPanel.update(current => current || panel);
+
+			onDestroy(() => {
+				const i = panels.indexOf(panel);
+				panels.splice(i, 1);
+				selectedPanel.update(current => current === panel ? (panels[i] || panels[panels.length - 1]) : current);
+			});
+		},
+
+		selectTab: tab => {
+			const i = tabs.indexOf(tab);
+			selectedTab.set(tab);
+			selectedPanel.set(panels[i]);
+		},
+
+		selectedTab,
+		selectedPanel
+	});
+</script>
+
+<div class="tabs">
+	<slot></slot>
+</div>

src/components/mdoc/Tabs/index.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Tabs, TabList, TabPanel, Tab, type TabItem } from './tabs';
+    export let tabs: TabItem[] = []
+</script>
+
+<Tabs>
+    <TabList>
+        {#each tabs as tab}
+            <Tab>{tab.title}</Tab>
+        {/each}
+    </TabList>
+
+    {#each tabs as tab}
+        <TabPanel>
+            <div class="body">{tab.body}</div>
+        </TabPanel>
+    {/each}
+</Tabs>
+
+<style>
+	.body {
+        @apply px-4 py-1;
+	}
+</style>

src/components/mdoc/Tabs/tabs.ts

@@ -0,0 +1,9 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabList } from './TabList.svelte';
+export { default as TabPanel } from './TabPanel.svelte';
+export { default as Tab } from './Tab.svelte';
+
+export interface TabItem {
+    title: string
+    body: string
+}

src/components/mdoc/TweetEmbed.astro

@@ -8,15 +8,15 @@ const { url } = Astro.props
 <div
   class="twitter-embed flex flex-col items-center justify-center relative"
 >
-  <div
+  <blockquote
     class="twitter-tweet"
     data-conversation="none"
     data-theme="light"
     data-lang="en"
     data-dnt="true"
   >
     <a class="unset no-underline text-current absolute top-0 left-0" href={url}>Loading embedded tweet...</a>
-  </div>
+  </blockquote>
 </div>
 
 <script

src/components/mdoc/YTVideoEmbed.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  title: string
+  url: string
+}
+
+const { url, title } = Astro.props;
+---
+
+<div>
+  <iframe
+    class="yt-iframe"
+    width="560"
+    height="315"
+    src={url}
+    title={title}
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+  >
+  </iframe>
+</div>
+
+<style>
+  .yt-iframe {
+    @apply w-full aspect-[16/9]
+  }
+</style>

src/utils/mdoc/mdoc.config.ts

@@ -2,13 +2,17 @@ import type { Config } from '@markdoc/markdoc';
 import { callout } from './schema/callout.mdoc';
 import { link } from './schema/link.mdoc';
 import { tweetEmbed } from './schema/tweet-embed.mdoc';
+import { tabs } from './schema/tabs.mdoc';
+import { ytEmbed } from './schema/yt-embed.mdoc';
 // import { heading } from './schema/heading.mdoc';
 
 export const config: Config = {
     tags: {
         callout,
         link,
-        tweet: tweetEmbed
+        tweet: tweetEmbed,
+        yt: ytEmbed,
+        tabs
     },
     functions: {
         getCountryEmoji: {

src/utils/mdoc/schema/tabs.mdoc.ts

@@ -0,0 +1,14 @@
+import type { Schema } from '@markdoc/markdoc';
+
+export const tabs: Schema = {
+    render: 'Tabs',
+    children: ['paragraph', 'tag', 'list'],
+    attributes: {
+      tabs: {
+        type: Array,
+      },
+      heading: {
+        type: String
+      }
+    }
+};

src/utils/mdoc/schema/yt-embed.mdoc.ts

@@ -0,0 +1,15 @@
+import type { Schema } from '@markdoc/markdoc';
+
+export const ytEmbed: Schema = {
+    render: 'YTVideoEmbed',
+    attributes: {
+      url: {
+        type: String,
+        required: true
+      },
+      title: {
+        type: String,
+        required: true
+      }
+    }
+};