final feedback and draft review

Author: thescientist13

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
 

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.
 

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" {

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" {

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.

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",

src/pages/docs/resources/typescript.md

@@ -8,17 +8,17 @@ 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
 
 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`.
 
 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" {