docs: improve the csv documentation to align with the other pages (#3388)

Author: JosephAnson

docs/content/docs/3.files/4.csv.md

@@ -3,55 +3,99 @@ title: CSV
 description: How to define, write and query CSV data.
 ---
 
-Nuxt Content supports CSV files out of the box. You can store and query data in CSV format, with options for JSON conversion and custom delimiters.
-
-## Configuration
-
-You can configure how CSV files are parsed in your `nuxt.config.ts`:
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  content: {
-    build: {
-      csv: {
-        // Convert CSV data to JSON objects
-        json: true,
-        // Specify custom delimiter (default is ',')
-        delimiter: ','
-      }
-    }
+## Define Collection
+
+```ts [content.config.ts]
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    authors: defineCollection({
+      type: 'data',
+      source: 'authors/**.csv',
+      schema: z.object({
+        name: z.string(),
+        email: z.string(),
+        avatar: z.string()
+      })
+    })
   }
 })
+
 ```
 
-## Example Usage
+## Create `.csv` files
 
-Create a CSV file in your content directory:
+Create author files in `content/authors/` directory.
 
-```csv [content/users.csv]
+::code-group
+```csv [users.csv]
 id,name,email
 1,John Doe,[email protected]
 2,Jane Smith,[email protected]
+3,Alice Johnson,[email protected]
 ```
 
-Query the data in your components:
+```csv [team.csv]
+name,role,avatar
+John Doe,Developer,https://avatars.githubusercontent.com/u/1?v=4
+Jane Smith,Designer,https://avatars.githubusercontent.com/u/2?v=4
+```
+::
+
+::warning
+Each CSV file should have a header row that defines the column names, which will be used as object keys when parsed.
+::
+
+## Query Data
+
+Now we can query authors:
 
 ```vue
-<script setup>
-const { data } = await useAsyncData('users', () => 
-  queryCollection('users').find()
-)
+<script lang="ts" setup>
+// Find a single author
+const { data: author } = await useAsyncData('john-doe', () => {
+  return queryCollection('authors')
+    .where('name', '=', 'John Doe')
+    .first()
+})
+
+// Get all authors
+const { data: authors } = await useAsyncData('authors', () => {
+  return queryCollection('authors')
+    .order('name', 'ASC')
+    .all()
+})
 </script>
 
 <template>
   <ul>
-    <li v-for="user in data" :key="user.id">
-      {{ user.name }} ({{ user.email }})
+    <li v-for="author in authors" :key="author.id">
+      {{ author.name }} ({{ author.email }})
     </li>
   </ul>
 </template>
 ```
 
+## Configuration
+
+You can configure how CSV files are parsed in your `nuxt.config.ts`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  content: {
+    build: {
+      csv: {
+        // Convert CSV data to JSON objects
+        json: true,
+        // Specify custom delimiter (default is ',')
+        delimiter: ','
+      }
+    }
+  }
+})
+```
+
 With `json: true` in the configuration, each row will be converted to a JavaScript object with the header row used as keys:
 
 ```json
@@ -87,11 +131,12 @@ export default defineNuxtConfig({
 
 This would parse CSV files like:
 
-```csv
+```csv [semicolon-data.csv]
 id;name;email
 1;John Doe;[email protected]
+2;Jane Smith;[email protected]
 ```
 
 ::note
 The CSV parser can be disabled by setting `csv: false` in the configuration if you don't need CSV support.
-:: 
+::