docs(misc): more suggestions

docs/blog/2025-01-21-project-references.md

@@ -1,9 +1,10 @@
 ---
-title: A Beginner's Guide to TypeScript Project References
+title: Everything You Need to Know About TypeScript Project References
 slug: typescript-project-references
 authors: [Zack DeRose]
 tags: [typescript, monorepo, nx]
 cover_image: /blog/images/2025-01-21/ts-islands.png
+youtubeUrl: https://youtu.be/6M-eefksU8I
 ---
 
 Consider the following workspace:
@@ -15,7 +16,23 @@ is-even
 is-odd
   index.ts
   tsconfig.json
-tsconfig.base.json
+tsconfig.json
+```
+
+And here we can see the relevant code:
+
+```typescript {% fileName="is-even/index.ts" %}
+export function isEven(n: number): boolean {
+  return n % 2 === 0;
+}
+```
+
+```typescript {% fileName="is-even/index.ts" %}
+import { isEven } from 'is-even';
+
+export function isOdd(n: number): boolean {
+  return !isEven(n);
+}
 ```
 
 If we try to run our build script on the `is-odd` project, we see that TypeScript is unable to run the `tsc` command because at the TypeScript level, `is-odd` is not aware of the `is-even` module:
@@ -31,15 +48,9 @@ Found 1 error in index.ts:1
 
 ```
 
-As we can see, there's an error associated with this line:
-
-```typescript
-import { isEven } from 'is-even';
-```
-
 TypeScript needs to be informed as to how to find the module named `is-even`. The error message here actually suggests that we may have forgotten to add aliases to the `paths` option. To do this we can adjust our `tsconfig.json` file at the root of the monorepo:
 
-```json
+```json {% fileName="tsconfig.json" %}
 {
   "compilerOptions": {
     "paths": {
@@ -68,11 +79,11 @@ By adding boundaries at the TypeScript level, we can significantly cut down on t
 
 ![Islands of TypeScript](/blog/images/2025-01-21/ts-islands.png)
 
-To add this to our previous example, we'll adjust the `tsconfig.json` file for `is-odd` since it depends on `is-even`:
+To add this to our previous example, we'll adjust the `tsconfig.json` file for `is-odd` since it depends on `is-even` (note that the `references` field is the only difference from the `is-even/tsconfig.json` file):
 
-```json
+```json {% fileName="is-odd/tsconfig.json" %}
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
@@ -91,8 +102,21 @@ import { isEven } from 'is-even';
 ```
 
 There are alternatives to path aliases to allow for this name to be resolved. The most recent enhancements in Nx use the `workspaces` functionality of your package manager of choice (npm/pnpm/yarn/bun) as the way of resolving these names.
+With a few more adjustments to this set up, we can now use the `-b` or `--build` option when building `is-odd`. One of these is turning on [the `composite` compiler option](https://www.typescriptlang.org/tsconfig/#composite) for each project, which we can do by setting the `compilerOption` of `composite` to `true` at the root `tsconfig.json` file - since our other `tsconfig.json` files for the 2 different projects already extend our root file:
+
+```json {% fileName="tsconfig.json" %}
+{
+  "compilerOptions": {
+    "paths": {
+      "is-even": ["./is-even/index.ts"],
+      "is-odd": ["./is-odd/index.ts"]
+    },
+    "composite": true
+  }
+}
+```
 
-With this set up, we can now use the `-b` or `--build` option when building `is-odd` - let's run it now with the `--verbose` flag on:
+Let's run our build now with the `--verbose` flag on:
 
 ```{% title="Successful build with Typescript's 'Build Mode'" path="~" command="tsc -b is-odd --verbose" lineWrap=80 %}
 Projects in this build:
@@ -123,10 +147,10 @@ is-odd
   index.ts
   tsconfig.json
   tsconfig.tsbuildinfo
-tsconfig.base.json
+tsconfig.json
 ```
 
-Notice how both `is-even` AND `is-odd` now have a compiled `index.d.ts` declaration file and `index.js`. They also both have a `tsconfig.base.json` file now (this holds the additional data TypeScript needs to determine which builds are needed). With the `--build` option, TypeScript is now operating as a build orchestrator - by finding all referenced projects, determining if they are out-of-date, and then building them in the correct order.
+Notice how both `is-even` AND `is-odd` now have a compiled `index.d.ts` declaration file and `index.js`. They also both have a `tsconfig.tsbuildinfo` file now (this holds the additional data TypeScript needs to determine which builds are needed). With the `--build` option, TypeScript is now operating as a build orchestrator - by finding all referenced projects, determining if they are out-of-date, and then building them in the correct order.
 
 ## Why This Matters