doc: add draft and structure doc

docs/.vitepress/config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: "Introduction", link: "/intro" },
+          { text: "Type-safe", link: "/type-safe" },
           { text: "Examples", link: "/examples" },
         ],
       },
@@ -49,6 +50,14 @@ export default defineConfig({
           },
         ],
       },
+      {
+        text: "Framework Pattern",
+        collapsed: true,
+        items: [
+          { text: "Intro", link: "/framework-pattern/framework-pattern" },
+          { text: "Config File", link: "/framework-pattern/config-file" },
+        ],
+      },
       {
         text: "Performance",
         collapsed: true,

docs/framework-pattern/config-file.md

@@ -0,0 +1,37 @@
+# Config File
+
+When we talk about config file, it look like it's simpest feature while writing the code, however, 
+behind the scene, they need to be designed with complex logic and type interface to ensure that the config file is type-safe.
+
+## Using Simple Object
+
+For example:
+
+In next.js, they use `next.config.mjs` to configure the next.js project.
+
+```ts
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  /* config options here */
+}
+
+export default nextConfig
+```
+
+## Using Function as a Config
+
+For example: 
+
+In Vite or Vitest, they use `defineConfig` to configure the project.
+
+```ts
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  /* config options here */
+})
+```

docs/framework-pattern/framework-pattern.md

@@ -0,0 +1,4 @@
+# Intro
+
+Many Frameworks provide better type-safe support for TypeScript, this section will provide technique and design pattern that most framework apply type-safe.
+

docs/index.md

@@ -15,11 +15,11 @@ hero:
       link: /design-patterns/design-patterns
 
 features:
-  - title: Next Level TypeScript
+  - title: 🎉   Next Level TypeScript 
     details: Level up your TypeScript skills with advanced design patterns and best practices
-  - title: Data Structure
+  - title: 💪   Data Structure 
     details: Not all data structure are type-safe, this book provide ready to use data structure for type-safe approach
-  - title: Design Patterns
+  - title: 🎨   Design Patterns 
     details: Not all design pattern meet type-safety, this book provide ready to use design pattern for type-safe approach
 ---
 

docs/type-safe.md

@@ -0,0 +1,14 @@
+# What's Type-safe?
+
+Most community said that **type-safe** a lot, but no one try to define it. So, I will try to define it.
+
+Type-safe is a design pattern that provide a way to ensure that the data type is correct and consistent in the program. This pattern is very useful in modern programming language like TypeScript, where the type system is very powerful and can be used to ensure the correctness of the program.
+
+## Characteristics of Type-safe
+
+Many libraries and frameworks provide type-safe support, here is some characteristics of type-safe when the they claim that they are type-safe:
+
+- **Generic**: They use generic types
+- **Literal**: They use literal types
+- **Builder Pattern**: They use builder pattern
+- TBA