From acffc658bca25776bcb5a3cde0b5dc2b3861c413 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 24 Mar 2025 17:43:58 -0400
Subject: [PATCH 1/8] init ecosystem and plugins docs updates and move
 typescript page under resources

---
 netlify.toml                                  |  7 +-
 src/pages/docs/plugins/css-modules.md         | 45 ++++++++++++-
 src/pages/docs/plugins/lit-ssr.md             | 30 ++++++++-
 src/pages/docs/plugins/postcss.md             | 30 ++++++++-
 src/pages/docs/plugins/raw.md                 | 45 ++++++++++++-
 src/pages/docs/reference/configuration.md     | 21 ++++++
 src/pages/docs/resources/markdown.md          |  2 +-
 .../docs/{plugins => resources}/typescript.md |  2 +-
 src/pages/guides/ecosystem/web-test-runner.md | 64 +++++++++++++++++++
 9 files changed, 239 insertions(+), 7 deletions(-)
 rename src/pages/docs/{plugins => resources}/typescript.md (99%)

diff --git a/netlify.toml b/netlify.toml
index 2e04d1c5..b880a3e6 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -11,4 +11,9 @@
 [[redirects]]
   status = 302
   from = "/discord/"
-  to = "https://discord.gg/dmDmjFCKuH"
\ No newline at end of file
+  to = "https://discord.gg/dmDmjFCKuH"
+
+[[redirects]]
+  status = 301
+  from = "/docs/plugins/typescript/"
+  to = "/docs/resources/typescript/"
\ No newline at end of file
diff --git a/src/pages/docs/plugins/css-modules.md b/src/pages/docs/plugins/css-modules.md
index 7eab7c46..3b0c02ca 100644
--- a/src/pages/docs/plugins/css-modules.md
+++ b/src/pages/docs/plugins/css-modules.md
@@ -2,7 +2,7 @@
 title: CSS Modules
 label: CSS Modules
 layout: docs
-order: 3
+order: 2
 tocHeading: 2
 ---
 
@@ -123,3 +123,46 @@ And reference that in your (Light DOM) HTML based Web Component:
 <!-- prettier-ignore-end -->
 
 From there, Greenwood will scope your CSS class names by prefixing them with the filename and a hash of the contents, inline that into a `<style>` tag in the HTML, and then strip the reference to the _module.css_ file from your JavaScript file.
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-css-modules').CssModulesPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { CssModulesPlugin } from '@greenwood/plugin-css-modules';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+To support typing of `.module.css` imports, you can add this type definition to your project:
+
+<app-ctc-block variant="snippet" heading="types.d.ts">
+
+```ts
+declare module "*.module.css" {
+  const styles: { [className: string]: string };
+  export default styles;
+}
+```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/docs/plugins/lit-ssr.md b/src/pages/docs/plugins/lit-ssr.md
index aedc195c..81e0923b 100644
--- a/src/pages/docs/plugins/lit-ssr.md
+++ b/src/pages/docs/plugins/lit-ssr.md
@@ -2,7 +2,7 @@
 title: Lit SSR
 label: Lit SSR
 layout: docs
-order: 2
+order: 1
 tocHeading: 2
 ---
 
@@ -123,3 +123,31 @@ Below is an example of generating a page of LitElement based Web Components:
 <!-- prettier-ignore-end -->
 
 > Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability.
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-renderer-lit').LitRendererPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { LitRendererPlugin } from '@greenwood/plugin-renderer-lit';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/docs/plugins/postcss.md b/src/pages/docs/plugins/postcss.md
index eeaee768..8bce1d35 100644
--- a/src/pages/docs/plugins/postcss.md
+++ b/src/pages/docs/plugins/postcss.md
@@ -2,7 +2,7 @@
 title: PostCSS
 label: PostCSS
 layout: docs
-order: 5
+order: 4
 tocHeading: 2
 ---
 
@@ -118,3 +118,31 @@ and see the results of the plugin in the generated styles
   }
 }
 ```
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-postcss').PostCssPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { PostCssPlugin } from '@greenwood/plugin-postcss';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/docs/plugins/raw.md b/src/pages/docs/plugins/raw.md
index 8e0f04ea..c0611170 100644
--- a/src/pages/docs/plugins/raw.md
+++ b/src/pages/docs/plugins/raw.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-order: 4
+order: 3
 tocHeading: 2
 ---
 
@@ -111,3 +111,46 @@ Or perfect for statically embedding SVGs into HTML:
 </app-ctc-block>
 
 <!-- prettier-ignore-end -->
+
+## Types
+
+Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  /** @type {import('@greenwood/plugin-import-raw').ImportRawPlugin} */
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```ts
+  import type { ImportRawPlugin } from '@greenwood/plugin-import-raw';
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+To support typing of `.module.css` imports, you can add this type definition to your project:
+
+<app-ctc-block variant="snippet" heading="types.d.ts">
+
+```ts
+declare module "*?type=raw" {
+  const content: string;
+  export default content;
+}
+```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
diff --git a/src/pages/docs/reference/configuration.md b/src/pages/docs/reference/configuration.md
index dce420a5..72fcc2c6 100644
--- a/src/pages/docs/reference/configuration.md
+++ b/src/pages/docs/reference/configuration.md
@@ -35,6 +35,7 @@ export default {
   port: 8080,
   prerender: false,
   staticRouter: false,
+  useTsc: false,
   workspace: new URL("./src/", import.meta.url),
 };
 ```
@@ -460,6 +461,26 @@ Setting the `staticRouter` option to `true` will add a small router runtime in p
 
 <!-- prettier-ignore-end -->
 
+## Use TypeScript Compiler
+
+Depending on the TypeScript features / JavaScript syntax you're using, you may need more then just Greenwood's default capability of only type _stripping_. For these cases where you want to use the full TypeScript compiler for transpilation, you'll want set the `useTsc` flag.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet">
+
+  ```js
+  export default {
+    useTsc: true,
+  };
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+> You will need to have installed the **typescript** package locally to your project for this feature. Learn more about what's supported in [using TypeScript with Greenwood docs](/docs/resources/typescript/).
+
 ## Workspace
 
 Path to where all your project files will be located, provided a valid `URL`. Default is `new URL('./src', import.meta.url)` relative to the project's root, where the _greenwood.config.js_ file is located.
diff --git a/src/pages/docs/resources/markdown.md b/src/pages/docs/resources/markdown.md
index adca0129..d6270dc4 100644
--- a/src/pages/docs/resources/markdown.md
+++ b/src/pages/docs/resources/markdown.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-order: 4
+order: 5
 tocHeading: 2
 ---
 
diff --git a/src/pages/docs/plugins/typescript.md b/src/pages/docs/resources/typescript.md
similarity index 99%
rename from src/pages/docs/plugins/typescript.md
rename to src/pages/docs/resources/typescript.md
index 0aa50df3..54424ea0 100644
--- a/src/pages/docs/plugins/typescript.md
+++ b/src/pages/docs/resources/typescript.md
@@ -2,7 +2,7 @@
 title: TypeScript
 label: TypeScript
 layout: docs
-order: 1
+order: 4
 tocHeading: 2
 ---
 
diff --git a/src/pages/guides/ecosystem/web-test-runner.md b/src/pages/guides/ecosystem/web-test-runner.md
index 477a1f04..9af66724 100644
--- a/src/pages/guides/ecosystem/web-test-runner.md
+++ b/src/pages/guides/ecosystem/web-test-runner.md
@@ -203,6 +203,70 @@ You can create a custom middleware in your _web-test-runner.config.js_ to resolv
 
 <!-- prettier-ignore-end -->
 
+## TypeScript
+
+If leveraging's Greenwood's [built-in TypeScript support](/docs/resources/typescript/), there are a couple options for integrating your TS based source files with WTR for testing.
+
+### esbuild
+
+WTR has an [**esbuild** plugin](https://modern-web.dev/guides/test-runner/typescript/) that can be configured to handle basic type stripping.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="web-test-runner.config.js">
+
+  ```js
+  import { esbuildPlugin } from "@web/dev-server-esbuild";
+
+  export default {
+    plugins: [
+      esbuildPlugin({ ts: true }),
+    ],
+  };
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+### `tsc`
+
+If you need the full power of the TypeScript compiler, you can leverage `tsc` directly along with your _tsconfig.json_ `compilerOptions` to transform all _.ts_ files.
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="web-test-runner.config.js">
+
+  ```js
+  import fs from "fs/promises";
+  import tsc from "typescript";
+
+  const compilerOptions = ((await import(new URL("./tsconfig.json", import.meta.url), { with: { type: "json" } })).default).compilerOptions;
+
+  export default {
+    plugins: [{
+      name: "transpile-typescript",
+      async transform(context) {
+        const { url } = context.request;
+
+        if (url.endsWith(".ts")) {
+          const contents = await fs.readFile(new URL(`.${url}`, import.meta.url), "utf-8");
+          const body = tsc.transpileModule(contents, { compilerOptions }).outputText;
+
+          return {
+            body,
+            type: "js"
+          };
+        }
+      }
+    }]
+  }
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
 ## Resource Plugins
 
 If you're using one of Greenwood's [resource plugins](/docs/plugins/), you'll need to customize WTR manually through [its plugins option](https://modern-web.dev/docs/test-runner/plugins/) so it can leverage the Greenwood plugins your using to automatically handle these custom transformations.

From 04e328788f5abdca862b53b7a55091fe84d9a55b Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 24 Mar 2025 19:18:34 -0400
Subject: [PATCH 2/8] first draft of built-in typescript docs

---
 src/pages/docs/plugins/lit-ssr.md         |   2 +
 src/pages/docs/reference/configuration.md |   4 +-
 src/pages/docs/resources/typescript.md    | 121 ++++++++--------------
 3 files changed, 50 insertions(+), 77 deletions(-)

diff --git a/src/pages/docs/plugins/lit-ssr.md b/src/pages/docs/plugins/lit-ssr.md
index 81e0923b..90de209f 100644
--- a/src/pages/docs/plugins/lit-ssr.md
+++ b/src/pages/docs/plugins/lit-ssr.md
@@ -151,3 +151,5 @@ Types should automatically be inferred through this package's exports map, but c
 </app-ctc-block>
 
 <!-- prettier-ignore-end -->
+
+> If you're using Lit with TypeScript, you'll most likely be using [their decorators](https://lit.dev/docs/components/decorators/#compiler-output-considerations), If so, make sure to enable the [`useTsc` option](/docs/reference/configuration/#use-typescript-compiler) in your Greenwood configuration file.
diff --git a/src/pages/docs/reference/configuration.md b/src/pages/docs/reference/configuration.md
index 72fcc2c6..2614cac4 100644
--- a/src/pages/docs/reference/configuration.md
+++ b/src/pages/docs/reference/configuration.md
@@ -463,7 +463,7 @@ Setting the `staticRouter` option to `true` will add a small router runtime in p
 
 ## Use TypeScript Compiler
 
-Depending on the TypeScript features / JavaScript syntax you're using, you may need more then just Greenwood's default capability of only type _stripping_. For these cases where you want to use the full TypeScript compiler for transpilation, you'll want set the `useTsc` flag.
+Depending on the TypeScript features / JavaScript syntax you're using, you may need more then just Greenwood's default capability of only type _stripping_. For these cases where you want to use the full TypeScript compiler for transpilation, you'll want to [setup TypeScript for Greenwood](/docs/resources/typescript/) and set the `useTsc` flag.
 
 <!-- prettier-ignore-start -->
 
@@ -479,7 +479,7 @@ Depending on the TypeScript features / JavaScript syntax you're using, you may n
 
 <!-- prettier-ignore-end -->
 
-> You will need to have installed the **typescript** package locally to your project for this feature. Learn more about what's supported in [using TypeScript with Greenwood docs](/docs/resources/typescript/).
+> At this time, _greenwood.config.ts_ does not support `tsc` processing. You can follow along with [this discussion](https://github.com/ProjectEvergreen/greenwood/discussions/1453) to get updates and provide feedback on this capability.
 
 ## Workspace
 
diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md
index 54424ea0..1684ce35 100644
--- a/src/pages/docs/resources/typescript.md
+++ b/src/pages/docs/resources/typescript.md
@@ -8,115 +8,86 @@ tocHeading: 2
 
 # TypeScript
 
-A plugin for authoring in [**TypeScript**](https://www.typescriptlang.org/). See the [plugin's README](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-typescript) for complete usage information.
+Greenwood provide built-in support for TypeScript, either through type-stripping (default behavior) or with the ability to fallback to [using the TypeScript compiler](/docs/reference/configuration/#use-typescript-compiler) if you're leveraging certain transformation based TypeScript features (like [`enums` and `namespaces`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/#the---erasablesyntaxonly-option)) or JavaScript syntax like Decorators. You can see an example repo [here](https://github.com/thescientist13/greenwood-native-typescript)
 
-## Installation
+> You can read [this guide](https://nodejs.org/en/learn/typescript/run-natively) to learn more about running TypeScript with NodeJS, including the [`--experimental-transform-types`](https://nodejs.org/docs/latest-v23.x/api/cli.html#--experimental-transform-types) flag.
 
-You can use your favorite JavaScript package manager to install this plugin:
+## Setup
 
-<!-- prettier-ignore-start -->
-<app-ctc-block variant="runners">
-
-  ```shell
-  npm i -D @greenwood/plugin-typescript
-  ```
-
-  ```shell
-  yarn add @greenwood/plugin-typescript --save-dev
-  ```
+The below steps will help you get up and running with TypeScript in your Greenwood project. The general recommendation is to use type-stripping during development for faster live reload, and then run TypeScript during CI (e.g. GitHub Actions) to check and enforce all types, e.g. `tsc --project tsconfig.json`.
 
-  ```shell
-  pnpm add -D @greenwood/plugin-typescript
-  ```
+1. You will need to use Node **>= 22.6.0** and set the `--experimental-strip-types` flag
+1. Install TypeScript into your project, e.g. `npm i typescript --save-dev`
+1. Create a _tsconfig.json_ file at the root of your project with these minimum configuration settings
 
-</app-ctc-block>
+  <!-- prettier-ignore-start -->
 
-<!-- prettier-ignore-end -->
+  <app-ctc-block variant="snippet" heading="tsconfig.json">
 
-And then add the plugin to your _greenwood.config.js_.
-
-<!-- prettier-ignore-start -->
+```json
+{
+  "compilerOptions": {
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true
+  }
+}
+```
 
-<app-ctc-block variant="snippet" heading="greenwood.config.js">
+  </app-ctc-block>
 
-  ```js
-  import { greenwoodPluginTypeScript } from "@greenwood/plugin-typescript";
+  <!-- prettier-ignore-end -->
 
-  export default {
-    plugins: [greenwoodPluginTypeScript()],
-  };
-  ```
+> _If you're feeling adventurous, you can use **>=23.x** and omit the `--experimental-strip-types` flag_. Keep an eye on [this PR](https://github.com/nodejs/node/pull/57298) for when unflagged type-stripping support may come to Node LTS **22.x**. 👀
 
-</app-ctc-block>
-
-<!-- prettier-ignore-end -->
+## Types
 
-## Usage
+### Configuration
 
-Now you can write some TypeScript!
+In addition to be able to author your components, SSR pages, and API routes in TypeScript, you can also author your configuration file (and plugins) in TypeScript by using a _greenwood.config.ts_ file.
 
 <!-- prettier-ignore-start -->
 
-<app-ctc-block variant="snippet">
+<app-ctc-block variant="snippet" heading="greenwood.config.ts">
 
   ```ts
-  import { html, css, LitElement, customElement, property } from "lit-element";
-
-  @customElement("app-greeting")
-  export class GreetingComponent extends LitElement {
-    static styles = css`
-      p {
-        color: blue;
-      }
-    `;
-
-    @property()
-    name = "Somebody";
-
-    render() {
-      return html`<p>Hello, ${this.name}!</p>`;
-    }
+  import type { Config } from '@greenwood/cli';
+
+  const config: Config = {
+    // ...
   }
+
+  export default config;
   ```
 
 </app-ctc-block>
 
 <!-- prettier-ignore-end -->
 
-And use it in your project like you would use a _.js_ file!
-
-<!-- prettier-ignore-start -->
-
-<app-ctc-block variant="snippet">
-
-  ```html
-  <script type="module" src="/components/greeting.ts"></script>
-  ```
+### Import Attributes
 
-</app-ctc-block>
+Currently TypeScript does not support types for standard [JSON and CSS Import Attributes](https://github.com/microsoft/TypeScript/issues/46135). You can use the below snippets as a reference for providing these types for your own project in the meantime.
 
-<!-- prettier-ignore-end -->
+<!-- prettier-ignore-start -->
 
-This is can also support SSR pages by passing the **servePage** option:
+<app-ctc-block variant="snippet" heading="types.d.ts">
 
-<!-- prettier-ignore-start -->
+  ```ts
+  declare module "*.css" {
+    const sheet: CSSStyleSheet;
 
-<app-ctc-block variant="snippet" heading="greenwood.config.js">
+    export default sheet;
+  }
 
-  ```js
-  import { greenwoodPluginTypeScript } from "@greenwood/plugin-typescript";
+  declare module "*.json" {
+    const data: object;
 
-  export default {
-    plugins: [
-      greenwoodPluginTypeScript({
-        servePage: false,
-      }),
-    ],
-  };
+    export default data;
+  }
   ```
 
 </app-ctc-block>
 
 <!-- prettier-ignore-end -->
-
-> For server and pre-rendering use cases, make sure to enable [custom imports](/docs/pages/server-rendering/#custom-imports).

From ee13b2eb598f0de58347254422733287f3e26ca3 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owen@thegreenhouse.io>
Date: Tue, 1 Apr 2025 20:52:19 -0400
Subject: [PATCH 3/8] remove references to Server and Resource interfaces

---
 src/pages/docs/reference/plugins-api.md   | 31 ++++++++---------------
 src/pages/guides/tutorials/theme-packs.md |  6 ++---
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/pages/docs/reference/plugins-api.md b/src/pages/docs/reference/plugins-api.md
index baa8124d..a16db257 100644
--- a/src/pages/docs/reference/plugins-api.md
+++ b/src/pages/docs/reference/plugins-api.md
@@ -404,11 +404,8 @@ A [resource "interface"](https://github.com/ProjectEvergreen/greenwood/tree/mast
 <app-ctc-block variant="snippet" heading="my-resource-plugin.js">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
-
-  class ExampleResource extends ResourceInterface {
+  class ExampleResource {
     constructor(compilation, options = {}) {
-      super();
 
       this.compilation = compilation; // Greenwood's compilation object
       this.options = options; // any optional configuration provided by the user of your plugin
@@ -456,9 +453,8 @@ When requesting a resource like a file, such as _/main.js_, Greenwood needs to k
 
   ```js
   import fs from "fs";
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
 
-  class UserWorkspaceResource extends ResourceInterface {
+  class UserWorkspaceResource {
     async shouldResolve(url) {
       const { pathname } = url;
       const { userWorkspace } = this.compilation.context;
@@ -509,9 +505,8 @@ Below is an example from [Greenwood's codebase](https://github.com/ProjectEvergr
 
   ```js
   import fs from "fs";
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
 
-  class StandardJavaScriptResource extends ResourceInterface {
+  class StandardJavaScriptResource {
     async shouldServe(url) {
       return url.protocol === "file:" && url.pathname.split(".").pop() === "js";
     }
@@ -555,7 +550,6 @@ Below is an example of Greenwood's [**PostCSS** plugin](/docs/plugins/postcss/)
 <app-ctc-block variant="snippet">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
   import { normalizePathnameForWindows } from "@greenwood/cli/src/lib/resource-utils.js";
   import postcss from "postcss";
 
@@ -563,9 +557,10 @@ Below is an example of Greenwood's [**PostCSS** plugin](/docs/plugins/postcss/)
     // ...
   }
 
-  class PostCssResource extends ResourceInterface {
+  class PostCssResource {
     constructor(compilation, options) {
-      super(compilation, options);
+      this.compilation = compilation;
+      this.options = options;
       this.extensions = ["css"];
       this.contentType = "text/css";
     }
@@ -621,9 +616,7 @@ import styles from "./hero.css?type=raw";
 <app-ctc-block variant="snippet">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
-
-  class ImportRawResource extends ResourceInterface {
+  class ImportRawResource {
     async shouldIntercept(url) {
       const { protocol, searchParams } = url;
       const type = searchParams.get("type");
@@ -667,13 +660,11 @@ Below is an example from [Greenwood's codebase](https://github.com/ProjectEvergr
 <app-ctc-block variant="snippet" heading="my-resource-plugin.js">
 
   ```js
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
-
   function bundleCss() {
     // ..
   }
 
-  class StandardCssResource extends ResourceInterface {
+  class StandardCssResource {
     async shouldOptimize(url, response) {
       const { protocol, pathname } = url;
 
@@ -785,12 +776,12 @@ The below is an excerpt of [Greenwood's internal LiveReload server](https://gith
 <app-ctc-block variant="snippet" heading="my-server-plugin.js">
 
   ```js
-  import { ServerInterface } from "@greenwood/cli/src/lib/server-interface.js";
   import livereload from "livereload";
 
-  class LiveReloadServer extends ServerInterface {
+  class LiveReloadServer {
     constructor(compilation, options = {}) {
-      super(compilation, options);
+      this.compilation = compilation;
+      this.options = options;
 
       this.liveReloadServer = livereload.createServer({
         /* options */
diff --git a/src/pages/guides/tutorials/theme-packs.md b/src/pages/guides/tutorials/theme-packs.md
index ecbe4193..305dbf0b 100644
--- a/src/pages/guides/tutorials/theme-packs.md
+++ b/src/pages/guides/tutorials/theme-packs.md
@@ -195,13 +195,13 @@ Additionally, we make sure to pass the flag from above for `__isDevelopment` to
   ```js
   import fs from "fs";
   import { myThemePackPlugin } from "./my-theme-pack.js";
-  import { ResourceInterface } from "@greenwood/cli/src/lib/resource-interface.js";
 
   const packageName = JSON.parse(fs.readFileSync("./package.json", "utf-8")).name;
 
-  class MyThemePackDevelopmentResource extends ResourceInterface {
+  class MyThemePackDevelopmentResource {
     constructor(compilation, options) {
-      super(compilation, options);
+      this.compilation = compilation;
+      this.options = options;
       this.extensions = ["*"];
     }
 

From d8ffe3af60b191d6ea83400e9ddbac7e2afce9c2 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owen@thegreenhouse.io>
Date: Tue, 1 Apr 2025 20:53:33 -0400
Subject: [PATCH 4/8] remove typescript plugin from plugins ToC

---
 src/pages/docs/plugins/index.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/docs/plugins/index.md b/src/pages/docs/plugins/index.md
index 0ee45117..5a87ce2b 100644
--- a/src/pages/docs/plugins/index.md
+++ b/src/pages/docs/plugins/index.md
@@ -13,7 +13,6 @@ tocHeading: 2
 ## Featured
 
 - [Lit SSR](/docs/plugins/lit-ssr/) - For Lit users, a custom renderer plugin to support Lit+SSR
-- [TypeScript](/docs/plugins/typescript/) - A plugin for transforming files written in TypeScript
 - [PostCSS](/docs/plugins/postcss/) - Leverage PostCSS plugins, like [Tailwind](/guides/ecosystem/tailwind/)
 - [CSS Modules](/docs/plugins/css-modules/) - Support for [CSS Modules](https://github.com/css-modules/css-modules) ™️ syntax
 - [Raw Loader](/docs/plugins/raw/) - Import arbitrary text files as ESM
@@ -25,7 +24,7 @@ Below is the official list of supported first-party plugins available by the Gre
 <br>
 
 | Name                                                                                                      | Description                                                                                                   |
-| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --- |
 | [Babel](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-babel)                  | Use [**Babel**](https://babeljs.io/) plugins, presets, and configuration in your project.                     |
 | [HTML Include](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-include-html)    | Inspired by the original [HTML Imports spec](https://www.html5rocks.com/en/tutorials/webcomponents/imports/). |
 | [Import Raw](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-raw)        | Enables usage of ESM syntax for loading arbitrary file contents as a string.                                  |
@@ -34,6 +33,5 @@ Below is the official list of supported first-party plugins available by the Gre
 | [Netlify](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-adapter-netlify)      | Deploy serverless and edge functions to [**Netlify**](https://www.netlify.com/).                              |
 | [Polyfills](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-polyfills)          | Web Component related polyfills for older browsers.                                                           |
 | [PostCSS](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss)              | Allows usage of [**PostCSS**](https://postcss.org/) plugins and configuration in your project.                |
-| [Puppeteer](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer) | A rendering plugin to support prerendering a Greenwood project using Puppeteer.                               |
-| [TypeScript](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-typescript)        | Allows usage of [**TypeScript**](https://www.typescriptlang.org/) syntax.                                     |
+| [Puppeteer](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer) | A rendering plugin to support prerendering a Greenwood project using Puppeteer.                               |     |
 | [Vercel](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-adapter-vercel)        | Deploy serverless and edge functions with [**Vercel**](https://vercel.com/).                                  |

From 2c029182e11d58b93622a1cde986737923c3793f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owen@thegreenhouse.io>
Date: Tue, 1 Apr 2025 20:56:03 -0400
Subject: [PATCH 5/8] call out WCC typescript support

---
 src/pages/docs/reference/appendix.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/docs/reference/appendix.md b/src/pages/docs/reference/appendix.md
index cbc93899..a3c02a44 100644
--- a/src/pages/docs/reference/appendix.md
+++ b/src/pages/docs/reference/appendix.md
@@ -92,7 +92,7 @@ It is fine-tuned for creating Light and Shadow DOM based custom elements. The fu
 - `<template>` / DocumentFragment
 - `addEventListener` (as a no-op)
 - `CSSStyleSheet` (all methods act as no-ops on the server)
-- TypeScript
+- TypeScript (type stripping)
 
 While not all DOM APIs are supported, in general you can still use them and combine their usage with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) for a quick "no-op".
 

From b9959e0aa399d596578f43b8855b0804b53d1d49 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 5 Apr 2025 21:26:34 -0400
Subject: [PATCH 6/8] basic TypeScript callouts within reference docs

---
 src/pages/docs/reference/appendix.md      | 20 ++++++++++++++++++--
 src/pages/docs/reference/configuration.md |  1 +
 src/pages/docs/reference/plugins-api.md   | 12 +++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/pages/docs/reference/appendix.md b/src/pages/docs/reference/appendix.md
index a3c02a44..2e31d508 100644
--- a/src/pages/docs/reference/appendix.md
+++ b/src/pages/docs/reference/appendix.md
@@ -1,11 +1,27 @@
 ---
 layout: docs
-order: 5
+order: 4
 tocHeading: 2
 ---
 
 # Appendix
 
+## Types
+
+In addition to [supporting TypeScript](/docs/resources/typescript/) out of the box, Greenwood also exports a number of useful types that you can use if authoring your configuration files, plugins, etc as TypeScript. You can find all available types for the CLI [here](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/types/index.d.ts) including types for configuration, content as data APIs, graph and compilation objects, plugins, and more. Each of Greenwood's plugin will also provide their own set of types within their package at _src/types/index.d.ts_.
+
+For example, here is how to author a TypeScript based configuration file:
+
+```ts
+import type { Config } from "@greenwood/cli";
+
+const config: Config = {
+  prerender: true,
+};
+
+export default config;
+```
+
 ## Build Output
 
 Greenwood produces a consistent build output that typically mirrors the source directory as it persists all file naming, albeit with hashes included. For static content, this can be used by static hosting sites with no additional configuration, on serverless hosting with our adapters, or self-hosted.
@@ -88,7 +104,7 @@ It is fine-tuned for creating Light and Shadow DOM based custom elements. The fu
 - `customElements.define`
 - `attachShadow`
 - `innerHTML`
-- ` [get|set|has]Attribute`
+- `[get|set|has]Attribute`
 - `<template>` / DocumentFragment
 - `addEventListener` (as a no-op)
 - `CSSStyleSheet` (all methods act as no-ops on the server)
diff --git a/src/pages/docs/reference/configuration.md b/src/pages/docs/reference/configuration.md
index 2614cac4..d9a7f54c 100644
--- a/src/pages/docs/reference/configuration.md
+++ b/src/pages/docs/reference/configuration.md
@@ -11,6 +11,7 @@ This section details all the supported configuration options available with **Gr
 Below is a _greenwood.config.js_ file reflecting default values:
 
 ```js
+/** @type {import('@greenwood/cli').Config} */
 export default {
   activeContent: false,
   basePath: "",
diff --git a/src/pages/docs/reference/plugins-api.md b/src/pages/docs/reference/plugins-api.md
index a16db257..d4b933e3 100644
--- a/src/pages/docs/reference/plugins-api.md
+++ b/src/pages/docs/reference/plugins-api.md
@@ -10,6 +10,8 @@ tocHeading: 2
 
 Below are the various plugin types you can use to extend and further customize Greenwood.
 
+> Types are available for all plugin constructs. Please see our [reference docs](/docs/reference/appendix/#types) to learn more.
+
 ## Overview
 
 Each plugin must return a function that has the following three properties:
@@ -72,6 +74,7 @@ An adapter plugin is simply an `async` function that gets invoked by the Greenwo
 <app-ctc-block variant="snippet">
 
   ```js
+  /** @type {import("@greenwood/cll").AdapterPlugin} */
   const greenwoodPluginMyPlatformAdapter = () => {
     return {
       type: "adapter",
@@ -93,7 +96,7 @@ An adapter plugin is simply an `async` function that gets invoked by the Greenwo
 
 ### Example
 
-The most common use case is to "shim" in a hosting platform handler function in front of Greenwood's, which is based on two parameters of `Request` / `Response`. In addition, producing any hosting provided specific metadata is also doable at this stage.
+The most common use case is to "shim" in a hosting platform handler function in front of Greenwood's, which is based on standard `Request` / `Response` objects. In addition, producing any hosting provided specific metadata is also doable at this stage.
 
 Here is an example of the "generic adapter" created for Greenwood's own internal test suite.
 
@@ -224,6 +227,7 @@ Your plugin might look like this:
   *     acme-theme-pack.js
   *     package.json
   */
+  /** @type {import("@greenwood/cll").ContextPlugin} */
   export function myContextPlugin() {
     return {
       type: "context",
@@ -259,6 +263,7 @@ This plugin supports providing an array of "paired" URL objects that can either
 <app-ctc-block variant="snippet" heading="my-copy-plugin.js">
 
   ```js
+  /** @type {import("@greenwood/cll").CopyPlugin} */
   export function myCopyPlugin() {
     return {
       type: "copy",
@@ -344,6 +349,7 @@ This plugin expects to be given a path to a module that exports a function to ex
 <app-ctc-block variant="snippet" heading="my-renderer-plugin.js">
 
   ```js
+  /** @type {import("@greenwood/cll").RendererPlugin} */
   const greenwoodPluginMyCustomRenderer = () => {
     return {
       type: "renderer",
@@ -416,6 +422,7 @@ A [resource "interface"](https://github.com/ProjectEvergreen/greenwood/tree/mast
     // lifecycles go here
   }
 
+  /** @type {import("@greenwood/cll").ResourcePlugin} */
   export function myExampleResourcePlugin(options = {}) {
     return {
       type: "resource",
@@ -715,6 +722,7 @@ Simply use the `provider` method to return an array of Rollup plugins:
 
   const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
 
+  /** @type {import("@greenwood/cll").RollupPlugin} */
   export function myRollupPlugin() {
     const now = new Date().now();
 
@@ -798,6 +806,7 @@ The below is an excerpt of [Greenwood's internal LiveReload server](https://gith
     }
   }
 
+  /** @type {import("@greenwood/cll").ServerPlugin} */
   export function myServerPlugin(options = {}) {
     return {
       type: "server",
@@ -824,6 +833,7 @@ This plugin supports providing an array of "page" objects that will be added as
 <app-ctc-block variant="snippet" heading="my-source-plugin.js">
 
   ```js
+  /** @type {import("@greenwood/cll").SourcePlugin} */
   export const customExternalSourcesPlugin = () => {
     return {
       type: "source",

From 0cef20ef5852609ae60f986e2c497d4b48931f97 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 12 Apr 2025 13:05:41 -0400
Subject: [PATCH 7/8] final feedback and draft review

---
 src/pages/docs/content-as-data/collections.md |  4 +--
 src/pages/docs/content-as-data/data-client.md |  4 ++-
 src/pages/docs/plugins/css-modules.md         |  2 +-
 src/pages/docs/plugins/raw.md                 |  4 +--
 src/pages/docs/reference/appendix.md          | 36 ++++++++++++++++++-
 src/pages/docs/reference/plugins-api.md       | 16 ++++-----
 src/pages/docs/resources/typescript.md        | 12 ++++---
 7 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/src/pages/docs/content-as-data/collections.md b/src/pages/docs/content-as-data/collections.md
index d26b5d67..cfecbc87 100644
--- a/src/pages/docs/content-as-data/collections.md
+++ b/src/pages/docs/content-as-data/collections.md
@@ -6,9 +6,9 @@ tocHeading: 2
 
 # Collections
 
-Collections are a feature in Greenwood by which you can use [frontmatter](/docs/resources/markdown/#frontmatter) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/).
+Collections are a feature in Greenwood by which you can use [frontmatter](/docs/resources/markdown/#frontmatter) to group pages that can then be referenced through [JavaScript](/docs/content-as-data/data-client/) or [active frontmatter](/docs/content-as-data/active-frontmatter/). This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
 
-This can be a useful way to group pages for things like navigation menus based on the content in your pages directory.
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
 
 ## Usage
 
diff --git a/src/pages/docs/content-as-data/data-client.md b/src/pages/docs/content-as-data/data-client.md
index 098e2b3f..6bdf56c2 100644
--- a/src/pages/docs/content-as-data/data-client.md
+++ b/src/pages/docs/content-as-data/data-client.md
@@ -6,7 +6,9 @@ tocHeading: 2
 
 # Data Client
 
-To access your content as data with Greenwood, there are three pre-made APIs you can use, based on your use case. These are isomorphic in that they will consume live data during development, and statically build out each query at build time to its own JSON file that will be fetched client side without needing a. This way, you can serialize and / or hydrate from this data as needed based on your needs.
+To access your content as data with Greenwood, there are three pre-made APIs you can use, based on your use case. These are isomorphic in that they will consume live data during development, and statically build out each query at build time to its own JSON file that will be fetched client side without needing a server. This way, you can serialize and / or hydrate from this data as needed based on your needs.
+
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
 
 > This feature works best when used for build time templating when combined with the [**static** optimization](/docs/reference/configuration/#optimization) setting.
 
diff --git a/src/pages/docs/plugins/css-modules.md b/src/pages/docs/plugins/css-modules.md
index 3b0c02ca..d180e00f 100644
--- a/src/pages/docs/plugins/css-modules.md
+++ b/src/pages/docs/plugins/css-modules.md
@@ -154,7 +154,7 @@ Types should automatically be inferred through this package's exports map, but c
 
 To support typing of `.module.css` imports, you can add this type definition to your project:
 
-<app-ctc-block variant="snippet" heading="types.d.ts">
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
 
 ```ts
 declare module "*.module.css" {
diff --git a/src/pages/docs/plugins/raw.md b/src/pages/docs/plugins/raw.md
index c0611170..007b35a9 100644
--- a/src/pages/docs/plugins/raw.md
+++ b/src/pages/docs/plugins/raw.md
@@ -140,9 +140,9 @@ Types should automatically be inferred through this package's exports map, but c
 
 <!-- prettier-ignore-end -->
 
-To support typing of `.module.css` imports, you can add this type definition to your project:
+To support typing of raw file imports, you can add this type definition to your project:
 
-<app-ctc-block variant="snippet" heading="types.d.ts">
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
 
 ```ts
 declare module "*?type=raw" {
diff --git a/src/pages/docs/reference/appendix.md b/src/pages/docs/reference/appendix.md
index 2e31d508..eb28370e 100644
--- a/src/pages/docs/reference/appendix.md
+++ b/src/pages/docs/reference/appendix.md
@@ -8,7 +8,7 @@ tocHeading: 2
 
 ## Types
 
-In addition to [supporting TypeScript](/docs/resources/typescript/) out of the box, Greenwood also exports a number of useful types that you can use if authoring your configuration files, plugins, etc as TypeScript. You can find all available types for the CLI [here](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/types/index.d.ts) including types for configuration, content as data APIs, graph and compilation objects, plugins, and more. Each of Greenwood's plugin will also provide their own set of types within their package at _src/types/index.d.ts_.
+In addition to [supporting TypeScript](/docs/resources/typescript/) out of the box, Greenwood also exports a number of useful types that you can use when authoring your configuration files, plugins, data clients, etc as TypeScript. You can find all available types for the CLI [here](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/types/index.d.ts) including types for configuration, content as data APIs, graph and compilation objects, plugins, and more. Each of Greenwood's plugin will also provide their own set of types within their package at _src/types/index.d.ts_.
 
 For example, here is how to author a TypeScript based configuration file:
 
@@ -22,6 +22,40 @@ const config: Config = {
 export default config;
 ```
 
+Here's an example of authoring with Greenwood's Collection capability.
+
+```ts
+import { getContentByRoute } from "@greenwood/cli/src/data/client.js";
+import type { Page } from "@greenwood/cli";
+
+type BlogPost = Page & {
+  data: {
+    author: string;
+  };
+};
+
+export default class BlogPostsList extends HTMLElement {
+  async connectedCallback() {
+    const posts: BlogPost[] = await getContentByRoute("/blog/");
+
+    this.innerHTML = `
+      <div>
+        ${posts
+          .reverse()
+          .map((post) => {
+            return `
+              <li><a href="${post.route}">"${post.title}"</a><span>by: ${post.data.author}</span></li>
+            `;
+          })
+          .join("")}
+      </div>
+    `;
+  }
+}
+
+customElements.define("blog-posts-list", BlogPostsList);
+```
+
 ## Build Output
 
 Greenwood produces a consistent build output that typically mirrors the source directory as it persists all file naming, albeit with hashes included. For static content, this can be used by static hosting sites with no additional configuration, on serverless hosting with our adapters, or self-hosted.
diff --git a/src/pages/docs/reference/plugins-api.md b/src/pages/docs/reference/plugins-api.md
index d4b933e3..6eab981a 100644
--- a/src/pages/docs/reference/plugins-api.md
+++ b/src/pages/docs/reference/plugins-api.md
@@ -74,7 +74,7 @@ An adapter plugin is simply an `async` function that gets invoked by the Greenwo
 <app-ctc-block variant="snippet">
 
   ```js
-  /** @type {import("@greenwood/cll").AdapterPlugin} */
+  /** @type {import("@greenwood/cli").AdapterPlugin} */
   const greenwoodPluginMyPlatformAdapter = () => {
     return {
       type: "adapter",
@@ -227,7 +227,7 @@ Your plugin might look like this:
   *     acme-theme-pack.js
   *     package.json
   */
-  /** @type {import("@greenwood/cll").ContextPlugin} */
+  /** @type {import("@greenwood/cli").ContextPlugin} */
   export function myContextPlugin() {
     return {
       type: "context",
@@ -263,7 +263,7 @@ This plugin supports providing an array of "paired" URL objects that can either
 <app-ctc-block variant="snippet" heading="my-copy-plugin.js">
 
   ```js
-  /** @type {import("@greenwood/cll").CopyPlugin} */
+  /** @type {import("@greenwood/cli").CopyPlugin} */
   export function myCopyPlugin() {
     return {
       type: "copy",
@@ -349,7 +349,7 @@ This plugin expects to be given a path to a module that exports a function to ex
 <app-ctc-block variant="snippet" heading="my-renderer-plugin.js">
 
   ```js
-  /** @type {import("@greenwood/cll").RendererPlugin} */
+  /** @type {import("@greenwood/cli").RendererPlugin} */
   const greenwoodPluginMyCustomRenderer = () => {
     return {
       type: "renderer",
@@ -422,7 +422,7 @@ A [resource "interface"](https://github.com/ProjectEvergreen/greenwood/tree/mast
     // lifecycles go here
   }
 
-  /** @type {import("@greenwood/cll").ResourcePlugin} */
+  /** @type {import("@greenwood/cli").ResourcePlugin} */
   export function myExampleResourcePlugin(options = {}) {
     return {
       type: "resource",
@@ -722,7 +722,7 @@ Simply use the `provider` method to return an array of Rollup plugins:
 
   const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
 
-  /** @type {import("@greenwood/cll").RollupPlugin} */
+  /** @type {import("@greenwood/cli").RollupPlugin} */
   export function myRollupPlugin() {
     const now = new Date().now();
 
@@ -806,7 +806,7 @@ The below is an excerpt of [Greenwood's internal LiveReload server](https://gith
     }
   }
 
-  /** @type {import("@greenwood/cll").ServerPlugin} */
+  /** @type {import("@greenwood/cli").ServerPlugin} */
   export function myServerPlugin(options = {}) {
     return {
       type: "server",
@@ -833,7 +833,7 @@ This plugin supports providing an array of "page" objects that will be added as
 <app-ctc-block variant="snippet" heading="my-source-plugin.js">
 
   ```js
-  /** @type {import("@greenwood/cll").SourcePlugin} */
+  /** @type {import("@greenwood/cli").SourcePlugin} */
   export const customExternalSourcesPlugin = () => {
     return {
       type: "source",
diff --git a/src/pages/docs/resources/typescript.md b/src/pages/docs/resources/typescript.md
index 1684ce35..bbddd9b7 100644
--- a/src/pages/docs/resources/typescript.md
+++ b/src/pages/docs/resources/typescript.md
@@ -8,9 +8,9 @@ tocHeading: 2
 
 # TypeScript
 
-Greenwood provide built-in support for TypeScript, either through type-stripping (default behavior) or with the ability to fallback to [using the TypeScript compiler](/docs/reference/configuration/#use-typescript-compiler) if you're leveraging certain transformation based TypeScript features (like [`enums` and `namespaces`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/#the---erasablesyntaxonly-option)) or JavaScript syntax like Decorators. You can see an example repo [here](https://github.com/thescientist13/greenwood-native-typescript)
+Greenwood provides built-in support for TypeScript, either through type-stripping (default behavior) or with the ability to fallback to [using the TypeScript compiler](/docs/reference/configuration/#use-typescript-compiler) if you're leveraging certain transformation based TypeScript features (like [`enums` and `namespaces`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/#the---erasablesyntaxonly-option)) or JavaScript syntax like Decorators. If you need these additional capabilities, you can set the [`useTsc` option](/docs/reference/configuration/#use-typescript-compiler) in your Greenwood configuration file.
 
-> You can read [this guide](https://nodejs.org/en/learn/typescript/run-natively) to learn more about running TypeScript with NodeJS, including the [`--experimental-transform-types`](https://nodejs.org/docs/latest-v23.x/api/cli.html#--experimental-transform-types) flag.
+> You can read [this guide](https://nodejs.org/en/learn/typescript/run-natively) to learn more about running TypeScript with NodeJS, including the [`--experimental-transform-types`](https://nodejs.org/docs/latest-v23.x/api/cli.html#--experimental-transform-types) flag. You can see an example Greenwood TypeScript repo [here](https://github.com/thescientist13/greenwood-native-typescript).
 
 ## Setup
 
@@ -18,7 +18,7 @@ The below steps will help you get up and running with TypeScript in your Greenwo
 
 1. You will need to use Node **>= 22.6.0** and set the `--experimental-strip-types` flag
 1. Install TypeScript into your project, e.g. `npm i typescript --save-dev`
-1. Create a _tsconfig.json_ file at the root of your project with these minimum configuration settings
+1. Create a _tsconfig.json_ file at the root of your project with these minimum configuration settings. We recommend adding the [`erasableSyntaxOnly` setting](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly)
 
   <!-- prettier-ignore-start -->
 
@@ -46,7 +46,7 @@ The below steps will help you get up and running with TypeScript in your Greenwo
 
 ### Configuration
 
-In addition to be able to author your components, SSR pages, and API routes in TypeScript, you can also author your configuration file (and plugins) in TypeScript by using a _greenwood.config.ts_ file.
+In addition to being able to author your components, SSR pages, and API routes in TypeScript, you can also author your configuration file (and plugins) in TypeScript by using a _greenwood.config.ts_ file.
 
 <!-- prettier-ignore-start -->
 
@@ -66,13 +66,15 @@ In addition to be able to author your components, SSR pages, and API routes in T
 
 <!-- prettier-ignore-end -->
 
+See our [reference docs on Greenwood's available types](/docs/reference/appendix/#types) for more information on authoring with TypeScript.
+
 ### Import Attributes
 
 Currently TypeScript does not support types for standard [JSON and CSS Import Attributes](https://github.com/microsoft/TypeScript/issues/46135). You can use the below snippets as a reference for providing these types for your own project in the meantime.
 
 <!-- prettier-ignore-start -->
 
-<app-ctc-block variant="snippet" heading="types.d.ts">
+<app-ctc-block variant="snippet" heading="src/types.d.ts">
 
   ```ts
   declare module "*.css" {

From d7fbef47552a5d43abc7f5a858f68cefcc760b1f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 12 Apr 2025 13:10:54 -0400
Subject: [PATCH 8/8] formatting

---
 src/pages/docs/reference/appendix.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/docs/reference/appendix.md b/src/pages/docs/reference/appendix.md
index eb28370e..9f326bab 100644
--- a/src/pages/docs/reference/appendix.md
+++ b/src/pages/docs/reference/appendix.md
@@ -44,7 +44,7 @@ export default class BlogPostsList extends HTMLElement {
           .reverse()
           .map((post) => {
             return `
-              <li><a href="${post.route}">"${post.title}"</a><span>by: ${post.data.author}</span></li>
+              <li><a href="${post.route}">${post.title}</a><span>by: ${post.data.author}</span></li>
             `;
           })
           .join("")}