feat: enhance documentation and configuration options for EC-Twoslash (#78)

* feat: enhance documentation and configuration options for EC-Twoslash

* chore: update VSCode settings and remove obsolete configuration files

* fix: correct formatting in astro.config.mts for analytics script inclusion

* feat: enhance style override documentation for EC-Twoslash

* feat: enhance documentation and add Vue integration examples

* feat: update Vue integration documentation order and add TypeScript integration guide

* feat: update TypeScript label to include TSX in documentation

Author: Adammatthiesen

.vscode/settings.json

@@ -51,7 +51,9 @@
 		"twocustom",
 		"twoerror",
 		"twoslash",
+		"Twoslash",
 		"Twoslasher",
+		"Twoslashers",
 		"UIDOM",
 		"withstudiocms"
 	]

biome.json

@@ -34,5 +34,22 @@
 				"organizeImports": "on"
 			}
 		}
-	}
+	},
+	"overrides": [
+		{
+			"includes": ["**/*.astro"],
+			"linter": {
+				"rules": {
+					"correctness": {
+						"noUnusedImports": "off",
+						"noUnusedVariables": "off"
+					},
+					"style": {
+						"useConst": "off",
+						"useImportType": "off"
+					}
+				}
+			}
+		}
+	]
 }

docs/.vscode/extensions.json

@@ -23,6 +23,9 @@ export default defineConfig({
 				alt: "EC Twoslash Logo",
 			},
 			credits: true,
+			components: {
+				PageTitle: "./src/components/starlight/PageTitle.astro",
+			},
 			social: [
 				{
 					label: "GitHub",
@@ -161,6 +164,10 @@ export default defineConfig({
 					label: "Getting Started",
 					autogenerate: { directory: "getting-started" },
 				},
+				{
+					label: "Available Twoslashers",
+					autogenerate: { directory: "twoslashers" },
+				},
 				{
 					label: "Usage",
 					items: [
@@ -190,6 +197,10 @@ export default defineConfig({
 						},
 					],
 				},
+				{
+					label: "Reference",
+					autogenerate: { directory: "reference" },
+				},
 			],
 		}),
 	],

docs/.vscode/launch.json

@@ -0,0 +1,31 @@
+---
+const body = (await Astro.slots.render("default")).trim();
+const signature = body.match(/^<ul>\s*<li>\s*([\s\S]*?)\s*<\/li>\s*<\/ul>/)?.[1] ?? "";
+const signatureParts = signature.split(/<\/li>\s*<li>/);
+const extractSignaturePart = (name: string) => {
+	name = `${name}: `;
+	const idx = signatureParts.findIndex((part) => part.startsWith(name));
+	if (idx === -1) return;
+	const part = (signatureParts[idx] ?? "").replace(name, "").trim();
+	signatureParts.splice(idx, 1);
+	return part;
+};
+const propertyType = extractSignaturePart("Type");
+const defaultValue = extractSignaturePart("Default");
+const availability = extractSignaturePart("Availability");
+---
+
+<div class="property-signature not-content">
+	{propertyType && (
+		<span class="name">Type:</span>
+		<span class="value" set:html={propertyType} />
+	)}
+	{defaultValue && (
+		<span class="name">Default:</span>
+		<span class="value" set:html={defaultValue} />
+	)}
+	{availability && (
+		<span class="name">Availability:</span>
+		<span set:html={availability} />
+	)}
+</div>

docs/astro.config.mts

@@ -0,0 +1,15 @@
+---
+import { Badge } from "@astrojs/starlight/components";
+import Default from "@astrojs/starlight/components/PageTitle.astro";
+
+const {
+	entry: { data },
+} = Astro.locals.starlightRoute;
+---
+{
+    (data.template === 'splash' && data.title === "404") 
+		? <slot/> 
+		: data.addedIn 
+            ? <Default><slot/></Default><Badge text={`Added in ${data.addedIn}`} variant="success" />
+            : <Default><slot/></Default>
+}

docs/src/components/PropertySignature.astro

@@ -1,7 +1,17 @@
 import { defineCollection } from "astro:content";
 import { docsLoader } from "@astrojs/starlight/loaders";
 import { docsSchema } from "@astrojs/starlight/schema";
+import { z } from "astro/zod";
+
+const extendedDocsSchema = z.object({
+	addedIn: z.string().optional(),
+});
 
 export const collections = {
-	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+	docs: defineCollection({
+		loader: docsLoader(),
+		schema: docsSchema({
+			extend: extendedDocsSchema,
+		}),
+	}),
 };

docs/src/components/starlight/PageTitle.astro

@@ -21,7 +21,7 @@ Using the homepage as an example, here is a simple code sample:
 ```ts twoslash
 // @errors: 2540
 
-console.log((1 + 2 + 3 + 4).toFixed(2))
+console.log((1 + 2 + 3 + 4).toFixed(2));
 //                            ^|
 
 /** A Basic Todo interface*/
@@ -34,7 +34,7 @@ const todo: Readonly<Todo> = {
 //  ^?
 }
 
-todo.title = 'Hello'
+todo.title = 'Hello';
 ```
 
 ``````
@@ -46,7 +46,7 @@ todo.title = 'Hello'
 ```ts twoslash
 // @errors: 2540
 
-console.log((1 + 2 + 3 + 4).toFixed(2))
+console.log((1 + 2 + 3 + 4).toFixed(2));
 //                            ^|
 
 /** A Basic Todo interface*/
@@ -59,7 +59,7 @@ const todo: Readonly<Todo> = {
 //  ^?
 }
 
-todo.title = 'Hello'
+todo.title = 'Hello';
 ```
 
 </TabItem>

docs/src/content.config.ts

@@ -60,7 +60,7 @@ export default defineConfig({
 <TabItem label='ec.config.mjs'>
 
 ```ts twoslash ins={2, 5}
-import { defineEcConfig } from 'astro-expressive-code'
+import { defineEcConfig } from 'astro-expressive-code';
 import ecTwoSlash from "expressive-code-twoslash";
 
 export default defineEcConfig({
@@ -121,7 +121,7 @@ export default defineEcConfig({
 <TabItem label='Next.js'>
 
 ```ts twoslash title="next.config.mjs" ins={2, 6}
-import rehypeExpressiveCode from 'rehype-expressive-code'
+import rehypeExpressiveCode from 'rehype-expressive-code';
 import ecTwoSlash from "expressive-code-twoslash";
 
 /** @type {import('rehype-expressive-code').RehypeExpressiveCodeOptions} */
@@ -143,7 +143,7 @@ For more information on how to add to your Next.js config, see the [Expressive C
 Default config options shown.
 
 ```ts twoslash
-import { defineEcConfig } from 'astro-expressive-code'
+import { defineEcConfig } from 'astro-expressive-code';
 import ecTwoSlash from "expressive-code-twoslash";
 import ts from "typescript";