Docs style refresh1

packages/astro-theme/components/Breadcrumbs.astro

@@ -25,8 +25,11 @@ const crumbs = path
 	});
 ---
 
-<nav aria-label="Breadcrumb" class="leading-6 text-stone-400 text-sm">
-	<ol>
+<nav
+	aria-label="Breadcrumb"
+	class="leading-6 text-stone-300 text-sm tracking-tight"
+>
+	<ol class="flex flex-wrap items-center gap-1">
 		{
 			crumbs.map(({ title, url, isLast }) => (
 				<li class="inline-flex items-center">

packages/astro-theme/components/DocsSidebar.astro

@@ -19,7 +19,7 @@ const hasMultipleLocales = !!Astro.currentLocale;
 
 <aside
 	is="docs-sidebar"
-	class="bg-stone-800 lg:bg-stone-900 fixed lg:sticky top-0 h-[100dvh] lg:top-[65px] z-10 p-8 w-full md:w-80 lg:h-[calc(100vh-4rem)] overflow-y-auto lg:text-sm"
+	class="bg-stone-800 lg:bg-stone-900 fixed lg:sticky top-0 h-[100dvh] lg:top-[65px] z-10 p-8 w-full md:w-80 lg:h-[calc(100vh-4rem)] overflow-y-auto lg:text-sm lg:border-r lg:border-stone-800/70 lg:pr-6"
 >
 	<button data-sidebar-close class="absolute top-4 right-4 lg:hidden">
 		<span class="sr-only">Close navigation</span>
@@ -38,7 +38,7 @@ const hasMultipleLocales = !!Astro.currentLocale;
 
 	{
 		entries.length > 0 && entries.length && (
-			<ol class="text-balance">
+			<ol class="text-balance space-y-1">
 				{entries
 					.filter((entry) => {
 						if (entry.type === "directory" && entry.isLanguageDirectory)

packages/astro-theme/components/DocsSidebarNavEntry.astro

@@ -27,17 +27,20 @@ const title = await getLocalisedEntryTitle(entry);
 	entry.type === "file" && (!entry.isIndex || depth === 0) && (
 		<li
 			class:list={[
-				"group py-1 text-stone-400 hover:border-stone-400 hover:text-white",
+				"group rounded-md py-1.5 transition-colors hover:border-stone-300 hover:text-stone-100",
 				{
-					"font-semibold !text-primary-500 !border-primary-600":
-						entry.href === pathname,
-					"px-4 border-l border-stone-800": depth > 0,
+					"font-semibold !text-primary-500": entry.href === pathname,
+					"font-semibold text-stone-200 text-lg": depth === 0,
+					"px-4 border-l border-stone-800 text-stone-300": depth > 0,
 					"bg-primary-600 bg-opacity-5": depth > 0 && entry.href === pathname,
 				},
 			]}
 			data-is-active={entry.href === pathname}
 		>
-			<a href={entry.href} class="block">
+			<a
+				href={entry.href}
+				class="block rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+			>
 				{title}
 			</a>
 		</li>
@@ -51,7 +54,7 @@ const title = await getLocalisedEntryTitle(entry);
 				{ "pl-4 border-l border-stone-800": depth > 0 },
 			]}
 		>
-			<h5 class="mb-1 font-semibold text-stone-300 hover:text-white">
+			<h5 class="mb-1 font-semibold text-stone-200 tracking-tight hover:text-white">
 				<a
 					href={entry.href}
 					class:list={[

packages/astro-theme/components/TableOfContentsHeading.astro

@@ -17,7 +17,7 @@ const { heading } = Astro.props;
 	<a
 		href={"#" + heading.slug}
 		class:list={[
-			"block py-1 text-stone-400 hover:text-stone-200",
+			"block rounded-md px-2 -mx-2 py-1 text-stone-300 text-sm leading-6 border-l-2 border-transparent transition-colors hover:text-stone-200 hover:bg-stone-800/40 hover:border-stone-600/70",
 			{
 				"font-medium": heading.depth <= 2,
 			},
@@ -28,7 +28,7 @@ const { heading } = Astro.props;
 
 	{
 		heading.subheadings.length > 0 && (
-			<ol class="pl-4">
+			<ol class="pl-4 mt-1 space-y-1">
 				{heading.subheadings.map((subheading) => (
 					<Astro.self heading={subheading} />
 				))}
@@ -52,12 +52,19 @@ const { heading } = Astro.props;
 			if (!a) throw new Error("expected <a> element");
 
 			const href = a.getAttribute("href");
-			console.log(href);
 
 			if (href === location.hash) {
-				a.classList.add("!text-primary-400");
+				a.classList.add(
+					"!text-primary-400",
+					"!border-primary-500/80",
+					"bg-primary-500/10"
+				);
 			} else {
-				a.classList.remove("!text-primary-400");
+				a.classList.remove(
+					"!text-primary-400",
+					"!border-primary-500/80",
+					"bg-primary-500/10"
+				);
 			}
 		}
 	}

packages/astro-theme/layouts/DocsArticle.astro

@@ -63,19 +63,19 @@ function getEditHref(id: string): string {
 		fullWidthLayout ? (
 			<slot />
 		) : (
-			<docs-article class="max-w-[92rem] w-full mx-auto flex justify-between">
+			<docs-article class="max-w-[96rem] w-full mx-auto flex justify-between gap-8 xl:gap-10">
 				<div
 					{...(language && { "data-pagefind-filter": `language:${language}` })}
 					data-sidebar-wrapper
-					class="hidden lg:block shadow-xl lg:shadow-none z-50 lg:z-30"
+					class="hidden lg:block shadow-xl lg:shadow-none z-50 lg:z-30 lg:border-r lg:border-stone-800/70 lg:pr-6"
 				>
 					<DocsSidebar {product} {entries} />
 				</div>
 				<div
 					data-backdrop
 					class="hidden lg:hidden fixed inset-0 bg-stone-900 bg-opacity-50 backdrop-blur z-40"
 				/>
-				<div class="overflow-x-hidden w-full">
+				<div class="overflow-x-hidden w-full min-w-0 lg:pl-2">
 					<div class="p-3 lg:px-8 mb-2.5 lg:mb-0 lg:mt-2.5 flex items-center gap-4 border-b lg:border-b-0 border-stone-600 border-opacity-20">
 						{entries && (
 							<button data-sidebar-toggle class="lg:hidden">
@@ -91,7 +91,7 @@ function getEditHref(id: string): string {
 						{...(product && {
 							"data-pagefind-filter": `productId:${product.id}`,
 						})}
-						class="prose prose-stone dark:prose-invert p-6 md:px-8 lg:pt-0 pb-10 w-full max-w-3xl xl:max-w-[49rem]"
+						class="prose prose-stone dark:prose-invert p-6 md:px-8 lg:pt-0 pb-10 w-full max-w-3xl lg:max-w-4xl xl:max-w-[52rem] 2xl:max-w-[56rem] text-[1.05rem] md:text-[1.08rem] leading-[1.8] prose-headings:tracking-tight prose-headings:scroll-mt-24"
 					>
 						{title === product?.name ? (
 							<div class="not-prose flex flex-col items-center mt-2 mb-10 gap-4">
@@ -107,17 +107,17 @@ function getEditHref(id: string): string {
 										}
 									/>
 								</h1>
-								<p class="text-xl font-medium text-stone-500">
+								<p class="text-xl font-medium text-stone-300">
 									{description && <Markdown.Inline of={description} />}
 								</p>
 							</div>
 						) : (
 							<>
-								<h1 class="mb-2 font-bold">
+								<h1 class="mb-3 font-bold leading-tight tracking-tight text-balance text-3xl md:text-4xl">
 									<Markdown.Inline of={title} />
 								</h1>
 								{description && (
-									<p class="mt-0 mb-8 text-stone-500 text-xl">
+									<p class="mt-0 mb-10 text-stone-300 text-xl leading-relaxed">
 										<Markdown.Inline of={description} />
 									</p>
 								)}
@@ -142,7 +142,7 @@ function getEditHref(id: string): string {
 						</div>
 					</div>
 				</div>
-				<aside class="w-32 xl:w-64 px-4 py-6 text-sm hidden xl:block h-[calc(100vh-4rem)] overflow-y-auto top-[65px] sticky">
+				<aside class="w-28 xl:w-56 pl-4 pr-2 py-6 text-xs xl:text-sm text-stone-300 hidden xl:block h-[calc(100vh-4rem)] overflow-y-auto top-[65px] sticky border-l border-stone-800/70">
 					{headings && <TableOfContents {headings} />}
 				</aside>
 			</docs-article>

packages/astro-theme/tailwind.ts

@@ -87,6 +87,56 @@ export default function makeConfig(): Config {
 						css: {
 							"--tw-prose-links": theme("colors.cheerp"),
 							"--tw-prose-invert-links": theme("colors.primary[400]"),
+							lineHeight: "1.75",
+							p: {
+								marginTop: "1.2em",
+								marginBottom: "1.2em",
+							},
+							h1: {
+								marginTop: "0",
+								marginBottom: "0.8em",
+								lineHeight: "1.2",
+							},
+							h2: {
+								marginTop: "2em",
+								marginBottom: "0.8em",
+								lineHeight: "1.25",
+							},
+							h3: {
+								marginTop: "1.6em",
+								marginBottom: "0.6em",
+								lineHeight: "1.3",
+							},
+							h4: {
+								marginTop: "1.4em",
+								marginBottom: "0.6em",
+								lineHeight: "1.35",
+							},
+							"ul,ol": {
+								marginTop: "1.2em",
+								marginBottom: "1.2em",
+							},
+							li: {
+								marginTop: "0.4em",
+								marginBottom: "0.4em",
+							},
+							blockquote: {
+								marginTop: "1.6em",
+								marginBottom: "1.6em",
+								paddingLeft: "1em",
+								borderLeftWidth: "2px",
+								borderLeftColor: theme("colors.stone[700]"),
+							},
+							pre: {
+								marginTop: "1.6em",
+								marginBottom: "1.6em",
+								borderRadius: "0.75rem",
+								border: `1px solid ${theme("colors.stone[800]")}`,
+								padding: "1.1em 1.3em",
+							},
+							code: {
+								fontWeight: "500",
+							},
 						},
 					},
 					DEFAULT: { css: disabledCss },

sites/cheerpx/package.json

@@ -14,6 +14,11 @@
 		"@astrojs/check": "^0.7.0",
 		"@astrojs/svelte": "^5.6.0",
 		"@astrojs/tailwind": "^5.1.0",
+		"@codemirror/lang-css": "^6.3.1",
+		"@codemirror/lang-html": "^6.4.11",
+		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/view": "^6.39.2",
 		"@iconify-json/bi": "^1.2.6",
 		"@iconify-json/fa": "^1.2.2",
 		"@iconify-json/fa-brands": "^1.2.2",
@@ -28,12 +33,16 @@
 		"@iconify-json/ph": "^1.2.2",
 		"@iconify-json/ri": "^1.2.6",
 		"@iconify-json/simple-icons": "^1.2.58",
+		"@iconify/svelte": "^5.1.0",
 		"@iconify-json/teenyicons": "^1.2.2",
 		"@leaningtech/astro-theme": "workspace:^",
 		"@leaningtech/cheerp-ts-three-demo": "workspace:^",
+		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"astro": "^4.5.18",
 		"astro-icon": "^1.1.5",
+		"qrcode": "^1.5.4",
 		"svelte": "^5.38.6",
+		"svelte-codemirror-editor": "^2.1.0",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.5.3"
 	}