js/ts toggle

Author: LadyBluenotes

app.config.ts

@@ -76,6 +76,7 @@ export default defineConfig(
 							cursorColor: "var(--twoslash-cursor)",
 						},
 					},
+					languageSwitcher: true,
 				},
 				toc: {
 					minDepth: 2,
@@ -136,6 +137,7 @@ export default defineConfig(
 
 import { readFile } from "node:fs/promises";
 import { codeToHtml } from "shiki";
+import defaultTheme from "@kobalte/solidbase/default-theme";
 
 function heroCodeSnippet() {
 	const virtualModuleId = "solid:hero-code-snippet";

package.json

@@ -23,6 +23,7 @@
 		"@solid-primitives/marker": "^0.2.2",
 		"@solid-primitives/media": "^2.3.3",
 		"@solid-primitives/platform": "^0.2.1",
+		"@solid-primitives/storage": "^4.3.3",
 		"@solidjs/meta": "^0.29.4",
 		"@solidjs/router": "^0.15.3",
 		"@solidjs/start": "^1.2.0",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import {
 	For,
 	Match,
 	type ParentProps,
+	Show,
 	Switch,
 	children,
 	createMemo,
@@ -11,7 +12,8 @@ import { isServer } from "solid-js/web";
 
 import { A } from "~/ui/i18n-anchor";
 import { Callout } from "~/ui/callout";
-import { Tabs, TabList, TabPanel, Tab } from "~/ui/tabs";
+import { Tabs, TabList, TabPanel, Tab, TSJSToggle } from "~/ui/tabs";
+import { usePreferredLanguage } from "@kobalte/solidbase/client";
 
 export { EditPageLink } from "~/ui/edit-page-link";
 export { PageIssueLink } from "~/ui/page-issue-link";
@@ -27,10 +29,12 @@ export const DirectiveContainer = (
 		title?: string;
 		codeGroup?: string;
 		tabNames?: string;
+		withTsJsToggle?: string;
 	} & ParentProps
 ) => {
 	const _children = children(() => props.children).toArray();
 	const tabNames = createMemo(() => props.tabNames?.split("\0") ?? []);
+	const [preferredLanguage] = usePreferredLanguage();
 
 	return (
 		<Switch
@@ -47,8 +51,27 @@ export const DirectiveContainer = (
 				<Tabs>
 					<TabList>
 						<For each={tabNames()}>
-							{(title) => <Tab value={title}>{title}</Tab>}
+							{(title) => {
+								const jsTitle = title.replace(/\.tsx?$/, (ext) => {
+									if (ext === ".tsx") {
+										return ".jsx";
+									}
+									if (ext === ".ts") {
+										return ".js";
+									}
+									return ext;
+								});
+
+								return (
+									<Tab value={title}>
+										{preferredLanguage() === "ts" ? title : jsTitle}
+									</Tab>
+								);
+							}}
 						</For>
+						<Show when={props.withTsJsToggle}>
+							<TSJSToggle />
+						</Show>
 					</TabList>
 					<For each={tabNames()}>
 						{(title, idx) => (

src/solidbase-theme/mdx-components.tsx

@@ -104,6 +104,74 @@
 			left: -1rem;
 		}
 	}
+
+	.sb-ts-js-toggle,
+	.expressive-code .sb-ts-js-toggle {
+		@apply my-auto rounded-md;
+		appearance: none;
+		display: flex;
+		align-items: center;
+		height: full;
+		outline-offset: 0;
+		padding: 0.2rem 0.4rem;
+		margin-left: auto;
+		margin-right: 4px;
+		font-size: 0.875rem;
+
+		&:hover {
+			@apply cursor-pointer bg-slate-200 dark:bg-slate-950/60;
+		}
+
+		&::before,
+		&::after {
+			width: 1.5rem;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 0.9rem;
+			color: inherit;
+		}
+
+		&::before {
+			content: "JS";
+		}
+
+		&::after {
+			content: "TS";
+			border-left: none;
+			opacity: 0.4;
+		}
+
+		&:checked {
+			&::before {
+				opacity: 0.4;
+			}
+
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+
+	html[data-preferred-language="ts"] .sb-language-group {
+		figure:last-of-type {
+			display: none;
+		}
+
+		pre + pre {
+			display: none;
+		}
+	}
+
+	html[data-preferred-language="js"] .sb-language-group {
+		figure:first-of-type {
+			display: none;
+		}
+
+		pre:has(+ pre) {
+			display: none;
+		}
+	}
 }
 
 h1 {

src/styles.css

@@ -44,7 +44,7 @@ export const DocsLayout = (props: DocsLayoutProps) => {
 				<Show when={titles()?.title} fallback={<Title>SolidDocs</Title>}>
 					{(title) => <Title>{`${title()} - ${projectTitle()}`}</Title>}
 				</Show>
-				<article class="expressive-code-overrides mx-auto w-full max-w-2xl overflow-hidden pb-16">
+				<article class="mx-auto w-full max-w-2xl overflow-hidden pb-16">
 					<Show when={titles()?.parent}>
 						{(t) => (
 							<span class="my-1 text-sm font-semibold text-blue-700 dark:text-blue-300">

src/ui/docs-layout.tsx

@@ -162,7 +162,7 @@ export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
 						when={!useCurrentRouteMetaData().isProjectRoot}
 						keyed
 						fallback={
-							<article class="expressive-code-overrides overflow-y-auto px-2 md:px-10">
+							<article class="overflow-y-auto px-2 md:px-10">
 								{props.children}
 							</article>
 						}

src/ui/layout.tsx

@@ -26,7 +26,7 @@ export function TabList(props: TabListProps) {
 		<div class="custom-scrollbar flex overflow-x-auto overflow-y-hidden">
 			<KobalteTabs.List
 				{...props}
-				class="z-1 flex w-full border-b border-blue-200 dark:border-slate-800"
+				class="z-1 flex h-full w-full rounded-t-md bg-slate-200 dark:bg-slate-800/50"
 			/>
 		</div>
 	);
@@ -41,7 +41,7 @@ export function Tab(props: TabProps) {
 	return (
 		<KobalteTabs.Trigger
 			{...props}
-			class="z-2 aria-selected-before:w-full aria-selected:before:border-blue relative top-0.5 appearance-none bg-none px-[16px] py-[4px] outline-none transition-colors duration-150 aria-selected:h-full aria-selected:bg-slate-200 aria-selected:text-black aria-selected:before:absolute aria-selected:before:inset-0 aria-selected:before:border-t aria-selected:before:border-blue-600 aria-selected:dark:bg-slate-800 aria-selected:dark:text-white aria-selected:before:dark:border-blue-200"
+			class="z-2 aria-selected-before:w-full relative appearance-none bg-none px-[16px] py-[4px] outline-none transition-colors duration-150 aria-selected:h-full aria-selected:rounded-t-md aria-selected:border-t aria-selected:border-blue-400 aria-selected:bg-white aria-selected:text-black aria-selected:before:absolute aria-selected:before:inset-0 aria-selected:dark:bg-slate-950 aria-selected:dark:text-white"
 		/>
 	);
 }
@@ -59,3 +59,15 @@ export function TabPanel(props: TabPanelProps) {
 		/>
 	);
 }
+
+export function TSJSToggle() {
+	return (
+		<input
+			type="checkbox"
+			checked
+			title="Toggle language"
+			aria-label="Toggle TS/JS"
+			class="sb-ts-js-toggle"
+		/>
+	);
+}