Astro Tabbed Code Block

Astro Subcomponents
- Diagram
The Component
- Example

Astro Subcomponents

The following components are the building blocks for the tabbed code block. The block.astro component is the main component that wraps the code block. The nav.astro component is the navigation bar that allows users to switch between tabs. The frame.astro component is the frame that wraps the code block and allows for scrolling. The lang.astro component is the language label that appears at the top right of the code block.

astro

---
import { cn } from "$/util";
export interface Props extends astroHTML.JSX.HTMLAttributes {}
---

<div
	class={cn(
		"code-block group flex flex-col max-h-[20rem] md:max-h-[40rem] [&.expanded]:max-h-none",
		"relative mb-4 mt-2 rounded-md border border-base-100 bg-neutral-900 text-base-content",
		"group-[.code-block]:max-h-none group-[.code-block]:[&_>_nav]:hidden",
		"group-[.code-block]:[&_.code-frame]:block group-[.code-block]:[&_.code-frame]:overflow-y-visible",
		Astro.props.class
	)}
>
	<slot />
</div>

astro

---
import { cn } from "$/util";

export interface Props extends astroHTML.JSX.HTMLAttributes {
	tabs?: string[];
}

const { tabs = [] } = Astro.props;
const hasDots = tabs.length <= 2;
---

<script>
	function copyBlock(el: Element) {
		const idx = el.getAttribute("data-idx");
		const pre: HTMLPreElement | null | undefined = el.closest(".code-block")?.querySelector(idx ? `.panel-${idx} pre` : "pre");
		if (!pre) {
			alert("No code block found to copy");
			return;
		}
		navigator.clipboard.writeText(pre.innerText);
		document.querySelectorAll(".copy").forEach((btn) => {
			btn.querySelector("i")?.classList.remove("mdi--check");
			btn.querySelector("i")?.classList.add("mdi--content-copy");
		});
		el.querySelector("i")?.classList.add("mdi--check");
		el.querySelector("i")?.classList.remove("mdi--content-copy");
	}

	function expandBlock(el: Element) {
		el.closest(".code-block")?.classList.toggle("expanded");
		el.querySelector("i")?.classList.toggle("mdi--arrow-expand-vertical");
		el.querySelector("i")?.classList.toggle("mdi--arrow-collapse-vertical");
	}

	document.addEventListener("astro:page-load", () => {
		document.querySelectorAll("article .code-block .copy").forEach((btn) => {
			if (btn) btn.addEventListener("click", () => copyBlock(btn));
		});
		document.querySelectorAll("article .code-block .expand").forEach((btn) => {
			if (btn) btn.addEventListener("click", () => expandBlock(btn));
		});
	});
</script>

<nav
	class={cn(
		"flex items-center rounded-t justify-between gap-4 min-h-11 h-11",
		"border-b border-base-100 bg-neutral-800 p-2 text-sm",
		tabs.length && "group-[.tabbed]:py-0",
		Astro.props.class
	)}
>
	{
		hasDots && (
			<div class="flex space-x-1">
				<div class="h-2 w-2 rounded-full bg-gray-500" />
				<div class="h-2 w-2 rounded-full bg-gray-500" />
				<div class="h-2 w-2 rounded-full bg-gray-500" />
			</div>
		)
	}
	<slot />
	<div class="flex gap-3 max-sm:hidden">
		{
			tabs.length ? (
				tabs.map(async (_, idx) => (
					<>
						<button class={cn(`expand expand-${idx + 1}`, "hidden h-6 rounded-md text-neutral-100")} type="button">
							<i class="iconify mdi--arrow-expand-vertical h-6 w-6" />
						</button>
						<button class={cn(`copy copy-${idx + 1}`, "hidden h-6 rounded-md text-neutral-100")} data-idx={idx + 1} type="button">
							<i class="iconify mdi--content-copy h-6 w-6" />
						</button>
					</>
				))
			) : (
				<>
					<button class="expand hidden h-6 rounded-md text-neutral-100 group-has-[.line:nth-child(29)]:inline" type="button">
						<i class="iconify h-6 w-6 mdi--arrow-expand-vertical" />
					</button>
					<button class="copy h-6 rounded-md text-neutral-100" type="button">
						<i class="iconify h-6 w-6 mdi--content-copy" />
					</button>
				</>
			)
		}
	</div>
</nav>

astro

---
import { cn } from "$/util";
export interface Props extends astroHTML.JSX.HTMLAttributes {}
---

<div class={cn("code-frame rounded-b-lg overflow-y-auto", Astro.props.class)}>
	<slot />
</div>

astro

---
import { cn } from "$/util";
export interface Props extends astroHTML.JSX.HTMLAttributes {}
---

<span
	class={cn(
		"absolute right-0 top-[calc(2.75rem+1px)] z-10 inline-block",
		"bg-neutral-900 px-2 py-1 text-xs uppercase text-neutral-content",
		Astro.props.class
	)}
>
	<slot />
</span>

Diagram

The following diagram shows how the components are structured and how they interact with each other.

The Component

The code.astro and pre.astro components are also subcomponents of the tabbed.astro component. However, they can also be used used as the default components for rendering markdown code blocks wrapped with single or triple backticks. For more information about assigning custom components to HTML elements in .mdx files, see the Astro documentation.

The tabbed.astro compoennt is the main component that creates the tabbed code block. The component includes the CodeBlock, CodeNav, CodeLang, and CodeFrame components.

astro

---
import { cn } from "$/util";
import CodeBlock from "./block/block.astro";
import CodeFrame from "./block/frame.astro";
import CodeLang from "./block/lang.astro";
import CodeNav from "./block/nav.astro";
---

<CodeBlock class="group-[.tabbed]:m-0 group-[.tabbed]:border-0">
	<CodeNav class="group-[.tabbed]:hidden" />
	<CodeLang class="group-[.tabbed]:top-0">
		{Astro.props.lang}
	</CodeLang>
	<CodeFrame class="group-[.tabbed]:max-h-none">
		<pre class={cn(Astro.props.class, "group my-1")}><slot /></pre>
	</CodeFrame>
</CodeBlock>

astro

---
import { cn } from "$/util";
---

<code
	class={cn(
		Astro.props.class,
		"group-[.astro-code]:bg-transparent group-[.astro-code]:text-xs rounded-sm bg-white/20 text-base-content",
		"[#table-of-contents+ul_&]:bg-transparent [#table-of-contents+ul_&]:font-montserrat",
		"[:is(h1,h2,h3,h4)>&]:bg-transparent [:is(h1,h2,h3,h4)>&]:font-robo-flex"
	)}><slot /></code>

astro

---
import { cn } from "$/util";
import CodeBlock from "./block/block.astro";
import CodeFrame from "./block/frame.astro";
import CodeNav from "./block/nav.astro";

const uuid = crypto.randomUUID();
const tabs: string[] = [];
const panels: string[] = [];

let index = 0;
const classes: string[] = [];
Object.entries(Astro.slots).forEach(([name]) => {
	if (name.startsWith("tab")) {
		index += 1;
		tabs.push(name);
		classes.push(`.tabbed:has(.radio-${index}:checked) .panel-${index}`);
		classes.push(`.tabbed:has(.radio-${index}:checked) .copy-${index}`);
		classes.push(`.tabbed:has(.radio-${index}:checked):has(.panel-${index} .line:nth-child(29)) .expand-${index}`);
	} else if (name.startsWith("panel")) {
		panels.push(name);
	}
});

const inlineStyles = classes.join(", ") + " { visibility: visible; display: inline-block !important; }";
---

<CodeBlock class="tabbed">
	{tabs.length > 0 && <style set:html={inlineStyles} />}
	<CodeNav {tabs}>
		<div class="flex flex-1 overflow-x-auto">
			{
				tabs.map(async (name, idx) => {
					const index = idx + 1;
					const render = await Astro.slots.render(name);
					return (
						<label
							class={cn(
								"h-11 max-w-[calc(100vw_-_160px)] cursor-pointer whitespace-nowrap bg-neutral-900 px-3 py-[11px] opacity-50",
								"border-x border-t-[2px] border-solid border-neutral-900 border-t-neutral-600",
								"member-checked:opacity-100 member-checked:border-t-secondary member-checked:border-x-neutral-700/50",
								"member-not-checked:hover:opacity-85 member-not-checked:hover:border-t-primary"
							)}
						>
							<input class={`radio-${index} member hidden`} type="radio" name={uuid} checked={index === 1 ? "" : undefined} />
							<Fragment set:html={render} />
						</label>
					);
				})
			}
		</div>
	</CodeNav>
	<CodeFrame>
		{
			panels.length ? (
				panels.map(async (name, index) => (
					<div
						class={cn(`panel-${index + 1}`, "m-0 hidden w-full rounded bg-neutral-900 text-sm text-neutral-content")}
						set:html={await Astro.slots.render(name)}
					/>
				))
			) : (
				<div class="panel-0 m-0 w-full rounded bg-neutral-900 text-sm text-neutral-content">
					<slot />
				</div>
			)
		}
	</CodeFrame>
</CodeBlock>

Example

The tabbed.astro component is used to wrap markdown codeblocks triple backticks like the following example. Without the tabbed.astro component, the code block would still be rendered thanks to pre.astro and code.astro components, but without tabs.

For more examples, you can look at the source code for this page.

mdx

import TabbedCode from "$/components/markdown/code/tabbed.astro";

<TabbedCode>
<Fragment slot="tab-1">pre.astro</Fragment>
<Fragment slot="panel-1">
``‍`astro
---
import { cn } from "$/util";
import CodeBlock from "./block/block.astro";
import CodeFrame from "./block/frame.astro";
import CodeLang from "./block/lang.astro";
import CodeNav from "./block/nav.astro";
---

<CodeBlock class="group-[.tabbed]:m-0 group-[.tabbed]:border-0">
	<CodeNav class="group-[.tabbed]:hidden" />
	<CodeLang class="group-[.tabbed]:top-0">
		{Astro.props.lang}
	</CodeLang>
	<CodeFrame class="group-[.tabbed]:max-h-none">
		<pre class={cn(Astro.props.class, "group my-1")}><slot /></pre>
	</CodeFrame>
</CodeBlock>
``‍`
</Fragment>
<Fragment slot="tab-2">code.astro</Fragment>
<Fragment slot="panel-2">
``‍`astro
---
import { cn } from "$/util";
---

<code
	class={cn(
		Astro.props.class,
		"group-[.astro-code]:bg-transparent group-[.astro-code]:text-xs rounded-sm bg-white/20 text-base-content",
		"[#table-of-contents+ul_&]:bg-transparent [#table-of-contents+ul_&]:font-montserrat",
		"[:is(h1,h2,h3,h4)>&]:bg-transparent [:is(h1,h2,h3,h4)>&]:font-robo-flex"
	)}><slot /></code>

``‍`
</Fragment>
</TabbedCode>

Table of Contents

Astro Subcomponents

Diagram

The Component

Example