feat: add built-in code editor for all examples

Author: jeffsieu

docs/1-basics/1-type-annotations/index.md renamed to docs/1-basics/1-type-annotations/index.mdx

@@ -1,4 +1,8 @@
-# Introduction to type annotations
+---
+sidebar_label: 1.1. Type annotations
+---
+
+# Type annotations
 
 In TypeScript, you can specify the type of a variable, function, or class by adding *type annotations*.
 
@@ -142,4 +146,10 @@ Here are some common basic types you can use:
 
 ## Exercise 1.1
 
+import Exercise1_1 from '!!raw-loader!./exercise-1.1.ts';
+import Exercise1_1_Solution from '!!raw-loader!./exercise-1.1.solution.ts';
+
 Try adding some type annotations yourself.
+
+<CodeEditor codeKey="exercise1.1.1" defaultValue={Exercise1_1} solution={Exercise1_1_Solution} />
+

docs/1-basics/10-arrays-records-tuples/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.10. Arrays, records, and tuples
+---
+
 # Arrays, records and tuples
 
 ## Arrays

docs/1-basics/11-classes/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.11. Classes
+---
+
 # Classes
 
 Classes are a way to implement object-oriented programming in JavaScript. They are automatically a type in TypeScript.

docs/1-basics/12-readonly-types-as-const/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.12. Readonly types and `as const`
+---
+
 # Readonly types and `as const`
 
 In TypeScript, you can use `as const` to declare that an object is immutable.

docs/1-basics/2-inferred-types/index.md renamed to docs/1-basics/2-inferred-types/index.mdx

@@ -1,11 +1,14 @@
+---
+sidebar_label: 1.2. Inferred types
+---
+
 # Inferred types
 
 > Reference: https://www.typescriptlang.org/docs/handbook/type-inference.html
 
 Take a look at the following piece of TypeScript code:
 
 ```ts
-
 function getUserGreeting(name: string, age: number): string {
   const isUserOld: boolean = age > 60;
   const isNameCapitalized: boolean = name[0] === name[0].toUpperCase();
@@ -14,7 +17,6 @@ function getUserGreeting(name: string, age: number): string {
   // do more stuff
   // return greeting
 }
-
 ```
 
 In the above example, we have annotated the types of `isUserOld`, `isNameCapitalized`, and `isAgeEven` to be `boolean`. However, we can remove these type annotations and TypeScript will still be able to infer the types of these variables.
@@ -52,4 +54,9 @@ These cases will be covered in later chapters. For now, when it is clear what a
 
 ## Exercise 2.1
 
+import Exercise2_1 from '!!raw-loader!./exercise-2.1.ts';
+import Exercise2_1_Solution from '!!raw-loader!./exercise-2.1.solution.ts';
+
 Make the code more concise by identifying and removing unnecessary type annotations.
+
+<CodeEditor codeKey="exercise1.2.1" defaultValue={Exercise2_1} solution={Exercise2_1_Solution} />

docs/1-basics/3-overriding-inferred-types/index.md renamed to docs/1-basics/3-overriding-inferred-types/index.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.3. Overriding inferred types
+---
+
 # Overriding inferred types
 
 Sometimes, you will need to override the types that TypeScript infers. This can be done by explicitly annotating the type of a variable or function.
@@ -37,7 +41,6 @@ const [name, setName] = useState(null);
 
 // TypeScript only allows us to set `name` to `null`
 setName("Alice"); // Error: Argument of type 'string' is not assignable to parameter of type 'SetStateAction<null>'
-
 ```
 
 Instead, we explicitly say that `name` can be either a `string` or `null`:
@@ -79,4 +82,9 @@ It is also easier to understand our code because our variable is immutable. Try
 
 ## Exercise 3.1
 
-Add explicit type annotations to fix the TypeScript errors
+import Exercise3_1 from '!!raw-loader!./exercise-3.1.ts';
+import Exercise3_1_Solution from '!!raw-loader!./exercise-3.1.solution.ts';
+
+Add explicit type annotations to fix the TypeScript errors.
+
+<CodeEditor codeKey="exercise1.3.1" defaultValue={Exercise3_1} solution={Exercise3_1_Solution} />

docs/1-basics/4-type-aliases/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.4. Type aliases
+---
+
 # Type aliases
 
 Sometimes, you have to reuse a type elsewhere in your code. Instead of repeating the type definition, you can use a type alias.

docs/1-basics/5-object-types-and-interfaces/index.md renamed to docs/1-basics/5-object-types-and-interfaces/index.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.5. Object types (and interfaces)
+---
+
 # Object types (and interfaces)
 
 Often in JavaScript, you have something like this:
@@ -99,3 +103,12 @@ type UserWithRole = User & {
 }
 // ^ UserWithRole: { name: string, age: number, role: string }
 ```
+
+## Exercise 5.1
+
+import Exercise5_1 from '!!raw-loader!./exercise-5.1.ts';
+import Exercise5_1_Solution from '!!raw-loader!./exercise-5.1.solution.ts';
+
+Define object types and interfaces to make the code more structured and readable.
+
+<CodeEditor codeKey="exercise1.5.1" defaultValue={Exercise5_1} solution={Exercise5_1_Solution} />

docs/1-basics/6-optional-properties-and-parameters/index.md renamed to docs/1-basics/6-optional-properties-and-parameters/index.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.6. Optional properties and parameters
+---
+
 # Optional properties and parameters
 
 In TypeScript, optional types and parameters allow you to define values that may or may not be present. This is useful when you want to create flexible interfaces or functions that can work with varying amounts of information.
@@ -61,3 +65,12 @@ function getUsername(user: { name: string; username?: string }) {
 ```
 
 This returns `user.username` if it exists, otherwise it falls back to `user.name`.
+
+## Exercise 6.1
+
+import Exercise6_1 from '!!raw-loader!./exercise-6.1.ts';
+import Exercise6_1_Solution from '!!raw-loader!./exercise-6.1.solution.ts';
+
+Add type annotations where necessary and modify the functions to handle optional parameters appropriately.
+
+<CodeEditor codeKey="exercise1.6.1" defaultValue={Exercise6_1} solution={Exercise6_1_Solution} />

docs/1-basics/7-union-and-literal-types/index.md renamed to docs/1-basics/7-union-and-literal-types/index.mdx

@@ -1,3 +1,7 @@
+---
+sidebar_label: 1.7. Union and literal types
+---
+
 # Union and Literal Types
 
 TypeScript provides powerful type system features that allow for more precise type definitions. Two such features are union types and literal types.
@@ -122,3 +126,12 @@ function getAction(direction: 'left' | 'right' | 'up' | 'down'): Action {
 - Union types allow you to combine multiple types into one
 - Literal types allow you to specify the exact value that a variable can have
 - Literal unions allow you to create an enum-like data type in TypeScript
+
+## Exercise 7.1
+
+import Exercise7_1 from '!!raw-loader!./exercise-7.1.ts';
+import Exercise7_1_Solution from '!!raw-loader!./exercise-7.1.solution.ts';
+
+Use union and literal types to make the code more robust and type-safe.
+
+<CodeEditor codeKey="exercise1.7.1" defaultValue={Exercise7_1} solution={Exercise7_1_Solution} />