docs: 557 cookbook

docs/.vitepress/config.ts

@@ -84,17 +84,16 @@ export default defineConfig({
         ],
       },
       {
-        text: 'Examples',
-        collapsed: true,
+        text: 'Cookbook 🍳🧑‍🍳',
         items: [
-          { text: 'Orbit Controls', link: '/examples/orbit-controls' },
-          { text: 'Basic Animations', link: '/examples/basic-animations' },
-          { text: 'Groups', link: '/examples/groups' },
-          { text: 'Load Textures', link: '/examples/load-textures' },
-          { text: 'Load Models', link: '/examples/load-models' },
-          { text: 'Load Text', link: '/examples/text-3d' },
-          { text: 'Lights & Shadows', link: '/examples/lights-shadows' },
-          { text: 'Shaders', link: '/examples/shaders' },
+          { text: 'Orbit Controls', link: '/cookbook/orbit-controls' },
+          { text: 'Basic Animations', link: '/cookbook/basic-animations' },
+          { text: 'Groups', link: '/cookbook/groups' },
+          { text: 'Load Textures', link: '/cookbook/load-textures' },
+          { text: 'Load Models', link: '/cookbook/load-models' },
+          { text: 'Load Text', link: '/cookbook/text-3d' },
+          { text: 'Lights & Shadows', link: '/cookbook/lights-shadows' },
+          { text: 'Shaders', link: '/cookbook/shaders' },
         ],
       },
       {

docs/.vitepress/config/en.ts

@@ -57,17 +57,17 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
         ],
       },
       {
-        text: 'Examples',
-        collapsed: true,
+        text: 'Cookbook 🍳🧑‍🍳',
+        link: '/cookbook/',
         items: [
-          { text: 'Orbit Controls', link: '/examples/orbit-controls' },
-          { text: 'Basic Animations', link: '/examples/basic-animations' },
-          { text: 'Groups', link: '/examples/groups' },
-          { text: 'Load Textures', link: '/examples/load-textures' },
-          { text: 'Load Models', link: '/examples/load-models' },
-          { text: 'Load Text', link: '/examples/text-3d' },
-          { text: 'Lights & Shadows', link: '/examples/lights-shadows' },
-          { text: 'Shaders', link: '/examples/shaders' },
+          { text: 'Orbit Controls', link: '/cookbook/orbit-controls' },
+          { text: 'Basic Animations', link: '/cookbook/basic-animations' },
+          { text: 'Groups', link: '/cookbook/groups' },
+          { text: 'Load Textures', link: '/cookbook/load-textures' },
+          { text: 'Load Models', link: '/cookbook/load-models' },
+          { text: 'Load Text', link: '/cookbook/text-3d' },
+          { text: 'Lights & Shadows', link: '/cookbook/lights-shadows' },
+          { text: 'Shaders', link: '/cookbook/shaders' },
         ],
       },
       {

docs/.vitepress/theme/components/Cookbook.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { data as recipes } from '../recipes.data.ts'
+</script>
+
+<template>
+  <ul class="grid grid-cols-1 sm:grid-cols-2 gap-8 -mx-4 pt-8">
+    <li
+      v-for="recipe of recipes"
+      :key="recipe.title"
+      class="list-none important-m-0"
+    >
+      <img
+        :src="recipe.thumbnail"
+        :alt="recipe.title"
+        class="aspect-video object-cover rounded-lg"
+      >
+      <a
+        :href="recipe.url"
+      >
+        <h2>
+          {{ recipe.title }}
+          <span
+            v-for="n in recipe.difficulty"
+            :key="n"
+            aria-label="chili"
+            role="img"
+            class="text-sm"
+          >🌶️</span></h2>
+
+      </a>
+      <p>{{ recipe.excerpt }}</p>
+    </li>
+  </ul>
+</template>

docs/.vitepress/theme/index.ts

@@ -1,12 +1,10 @@
 import 'uno.css'
-import { h } from 'vue'
 
 // .vitepress/theme/index.ts
 import Theme from 'vitepress/theme'
 import './config.css'
 
 import TresLayout from './TresLayout.vue'
-import HomeSponsors from './components/HomeSponsors.vue'
 
 /* const plausible = createPlausible({
   init: {
@@ -27,4 +25,5 @@ export default {
     /* ctx.app.use(plausible) */
   },
   Layout: TresLayout,
+
 }

docs/.vitepress/theme/recipes.data.ts

@@ -0,0 +1,27 @@
+import { createContentLoader } from 'vitepress'
+
+export interface Recipe {
+  title: string
+  url: string
+  excerpt: string | undefined
+  thumbnail?: string
+  difficulty?: number
+}
+
+declare const data: Recipe[]
+export { data }
+
+export default createContentLoader('cookbook/*.md', {
+  excerpt: true,
+  transform(raw): Recipe[] {
+    return raw
+      .map(({ url, frontmatter, excerpt }) => ({
+        title: frontmatter.title,
+        url,
+        thumbnail: frontmatter.thumbnail,
+        difficulty: frontmatter.difficulty,
+        excerpt: frontmatter.excerpt || frontmatter.description || excerpt,
+      })).filter(recipe => recipe.title)
+      .sort((a, b) => b.title - a.title)
+  },
+})

docs/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Cookbook: typeof import('./.vitepress/theme/components/Cookbook.vue')['default']
     DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default']
     EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default']
     ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default']

docs/examples/basic-animations.md → docs/cookbook/basic-animations.md

@@ -1,3 +1,11 @@
+---
+title: Basic Animations
+description: How to use a the useRenderLoop composable to animate your objects.
+author: alvarosabu
+thumbnail: /recipes/animations.png
+difficulty: 0
+---
+
 # Basic Animations
 
 This guide will help you get started with basic animations in TresJS.

docs/examples/groups.md → docs/cookbook/groups.md

@@ -1,3 +1,11 @@
+---
+title: Groups
+description: Learn how to group multiple objects in the scene.
+author: alvarosabu
+thumbnail: /recipes/groups.png
+difficulty: 0
+---
+
 # Group
 
 A `<TresGroup>` is an instance of the [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) class which is almost the same as a [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) but allows you to **group together multiple objects in the scene** so that they can be manipulated as a single unit (transform, rotation, etc).

docs/cookbook/index.md

@@ -0,0 +1,5 @@
+# Cookbook 🍳🧑‍🍳
+
+Discover guided recipes to help you get started with the basics of using Tres. Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.
+
+<Cookbook />

docs/examples/lights-shadows.md → docs/cookbook/lights-shadows.md

@@ -1,3 +1,11 @@
+---
+title: Lights and Shadows
+description: Learn how to add lights and shadows to your scene.
+author: alvarosabu
+thumbnail: /recipes/lights-and-shadows.png
+difficulty: 0
+---
+
 # Light-shadows
 
 This guide will help you get started with simple light and shadows in TresJS.
@@ -8,7 +16,7 @@ We will build a simple scene with three meshes and a plane but only two will hav
 ## Setting up the scene (optional)
 
 We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
-[check here to know how](/examples/orbit-controls).
+[check here to know how](/cookbook/orbit-controls).
 
 Let's put four objects in our scene, one will be the plane that receive shadows, two of them will cast shadows and the last one will not cast any shadow at all.
 
@@ -139,7 +147,7 @@ Similarly to the previous step, we set the mesh that we want to cast shadow (our
 </template>
 ```
 
-Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/examples/basic-animations), and we add movement to our cube, you will see the shadow is animated as well 🤩
+Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/cookbook/basic-animations), and we add movement to our cube, you will see the shadow is animated as well 🤩
 
 ```vue
 <script setup>

docs/examples/load-models.md → docs/cookbook/load-models.md

@@ -1,3 +1,11 @@
+---
+title: Load Models
+description: Load 3D models into your Tres scenes.
+author: alvarosabu
+thumbnail: /recipes/gltf-model.png
+difficulty: 1
+---
+
 # Load Models
 
 > All models used in this guide are from [Alvaro Saburido](https://sketchfab.com/3d-models/aku-aku-7dfcb6edf10b4098bbb965c56fd3055c).
@@ -31,7 +39,7 @@ Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive)
 
 ```html{2}
 <TresCanvas>
-    <primitive :object="scene" />
+  <primitive :object="scene" />
 </TresCanvas>
 ```
 

docs/examples/load-textures.md → docs/cookbook/load-textures.md

@@ -1,3 +1,11 @@
+---
+title: Load Textures
+description: Add texture maps to your TresJS objects.
+author: alvarosabu
+thumbnail: /recipes/load-textures.png
+difficulty: 1
+---
+
 # Load Textures
 
 > All textures used in this example are from [ambientcg](https://ambientcg.com/).

docs/examples/orbit-controls.md → docs/cookbook/orbit-controls.md

@@ -1,3 +1,11 @@
+---
+title: OrbitControls
+description: How to use OrbitControls to interact with the scene.
+author: alvarosabu
+thumbnail: /recipes/orbit-controls.png
+difficulty: 1
+---
+
 # OrbitControls
 
 <SandboxDemo url="https://play.tresjs.org/#eNqVVU1z2zYQ/Ss78nR0KEVSlp1JWaejWk7TdmInY+kW5gCRMAkbBDAAKFnj0X/PAhAlyvlydBJ23z7svl0snwYLTc3fSsWrlg6ywYUpNFMWDLWtAk5E9SYfWJMP/soFa5TUFp7gkhhWzGtSyvU1URHMb99dziSXeq5IQSO4kQspKLoUExVs4U7LBoa21pQO/+zxuKtnRKyI2YOmFm33JimkPsZ+0EtmZ1JYLbmJYEEf7eTq6zBGhZXGRSZJiIFiFwTLDWAUFSVmlYtcoMNYqDi8gadcABScEu3ryGB48vr06nJ2Poycx/haTQZWt9RbCFc1yeCOcBMMAYI1LzaKZs8lcgjZWtViCZ1O2XPdHMgehMuOdUT3Fsu6SEKHsB94sLRRnFiKJ4CLnp6r0ZKJEntXcd87wJ/3f6TaKFpYtqIz0lBNIFPSMMukQPSnswgmEfzxOR9A0oUdSX8wz1skEibcHfh9U7ojHDOnEYwjSJH5ALAYgL4ZZ8UD3AzhSpOq77/DS9FfW6tMliSarOOK2bpdtoZq11fsdlzIJnGVYfuJwbk1SUOYSFysSf5hmsxkSW9p1XKi43sjBdbWXbHPfafONTX1jdQN4deoqmaE7+tFRBIK7ARIningGa6YdupKQfh7VtX2KxFOIzhz8mbMpY+uDTrG8SmaCmLsKAzSQWZH+k6z8l/KFdU7O6ay7zUaLpLeIODR2A13f2vbcJybpSw3YcQboismMkhxkgAUKd1b6I41dQlnME7T37xhzUpb78/bXJzgKAain2ABlqR4qLRsRTkqwpM6SVN3D9LgDPsEB9EgvO9RQ5RvDW4gT5/vHLh4snChs/WXg3McJqMoBcaXlLOVjgW1iVBN0odPJ/F5nCYlMzZxZkTnA//ijojD+vgV7hCB9K/69Dvz8S12TcmDIuIlue+x07M4jcc75s4YN8zF9Lndcn0Jr8NNkfH8Neb7OzVNXwb8BuDLerG+Pfh0nHqBcenQx7g5VneHw8nWtPwF4hDwI2oEjkrasBeQdlBX/Fn8KuFs2ad0jDiaW5xJa3C13LHq2UTinlGMU/1Budd8PJmEc7n+39v2nwgfU9Pi4Rv2e/MYUv6Iw0L1CuU+tBLfKLXB/XZ+gyun52xk2fJdc77jvKVG8tblGGCX+AYx7R7OZ/uff2D4/Bfmrfsqmq6oo0Qtfs289VO3BfezFgyfvXAe79sx+4FKh8om8WQv+PYLbBTQQA==" />

docs/examples/shaders.md → docs/cookbook/shaders.md

@@ -1,3 +1,11 @@
+---
+title: Shaders
+description: Shaders open a world of possibilities.
+author: alvarosabu
+thumbnail: /recipes/shaders.png
+difficulty: 2
+---
+
 # Shaders
 
 This guide will help you get started with shaders in TresJS.
@@ -13,7 +21,7 @@ _Basic knowledge of how shaders work is necessary_
 ## Setting up the scene (optional)
 
 We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
-[look here to see how](/examples/orbit-controls).
+[look here to see how](/cookbook/orbit-controls).
 
 Now, let's put our camera in the `[11,11,11]` position.
 
@@ -110,7 +118,7 @@ void main() {
 
 ## Animating the blob
 
-Similar to what we learn in the [Basic animations](/examples/basic-animations) example, we start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
+Similar to what we learn in the [Basic animations](/cookbook/basic-animations) example, we start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
 
 ```vue
 <script setup lang="ts">

docs/examples/text-3d.md → docs/cookbook/text-3d.md

@@ -1,3 +1,11 @@
+---
+title: Text 3D
+description: Add 3D text with ease
+author: alvarosabu
+thumbnail: /recipes/text-3d.png
+difficulty: 1
+---
+
 # Text3D
 
 [TextGeometry](https://threejs.org/docs/index.html?q=text#examples/en/geometries/TextGeometry) is one of the ways we can add 3D text in our scene.

docs/es/examples/lights-shadows.md

@@ -9,7 +9,7 @@ Construiremos una escena simple con tres mallas y un plano, pero solo dos tendr
 ## Configurando la escena (opcional)
 
 Importamos todos los módulos que necesitamos, para mayor comodidad podemos usar orbit-controls de cientos,
-[ver aquí para saber cómo](/examples/orbit-controls).
+[ver aquí para saber cómo](/cookbook/orbit-controls).
 
 Coloquemos cuatro objetos en nuestra escena, uno será el plano que recibirá sombras, dos de ellos proyectarán sombras y el último no proyectará ninguna sombra en absoluto.
 
@@ -140,7 +140,7 @@ De manera similar al paso anterior, configuramos la malla que queremos que proye
 </template>
 ```
 
-Ahora tenemos todos los pasos necesarios para agregar sombras a nuestra escena, y si aplicamos lo que aprendimos en [animaciones básicas](/examples/basic-animations), y agregamos movimiento a nuestro cubo, verás que la sombra también se anima 🤩
+Ahora tenemos todos los pasos necesarios para agregar sombras a nuestra escena, y si aplicamos lo que aprendimos en [animaciones básicas](/cookbook/basic-animations), y agregamos movimiento a nuestro cubo, verás que la sombra también se anima 🤩
 
 ```vue
 <script setup>

docs/es/examples/shaders.md

@@ -13,7 +13,7 @@ _Es necesario tener conocimientos básicos sobre cómo funcionan los shaders_
 ## Configurando la escena (opcional)
 
 Importamos todos los módulos que necesitamos. Para mayor comodidad, podemos usar los orbit-controls de cientos.
-[Consulta aquí para ver cómo](/examples/orbit-controls).
+[Consulta aquí para ver cómo](/cookbook/orbit-controls).
 
 Ahora, coloquemos nuestra cámara en la posición `[11,11,11]`.
 
@@ -110,7 +110,7 @@ void main() {
 
 ## Animando el blob
 
-Similar a lo que aprendimos en el ejemplo de [Animaciones básicas](/examples/basic-animations), comenzamos haciendo referencia a nuestro blob utilizando [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
+Similar a lo que aprendimos en el ejemplo de [Animaciones básicas](/cookbook/basic-animations), comenzamos haciendo referencia a nuestro blob utilizando [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
 
 ```vue
 <script setup lang="ts">