Skip to content

Commit d5a0b19

Browse files
alvarosabuDennisSmuda
alvarosabu
and
DennisSmuda
authored
docs: 557 cookbook (#558)
* docs: cookbook * docs: completed the rest of recipes * docs: remove unused cosole.log * docs: removed broken links * docs: anchor image * feat: cookbook for spanish translations * docs: translatable cookbook * docs: german Kochbuch * docs: updated de config with cookbook links * feat: update german cookbook translations * chore: fix broken links (cookbook instead of example) --------- Co-authored-by: Dennis Smuda <[email protected]>
1 parent 9bc7a72 commit d5a0b19

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+323
-46
lines changed

‎docs/.vitepress/config/de.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,17 +56,17 @@ export const deConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
5656
],
5757
},
5858
{
59-
text: 'Beispiele',
60-
collapsed: true,
59+
text: 'Kochbuch 🍳🧑‍🍳',
60+
link: '/de/cookbook/',
6161
items: [
62-
{ text: 'Orbit-Controls', link: '/de/examples/orbit-controls' },
63-
{ text: 'Einfache Animationen', link: '/de/examples/basic-animations' },
64-
{ text: 'Gruppen', link: '/de/examples/groups' },
65-
{ text: 'Texturen laden', link: '/de/examples/load-textures' },
66-
{ text: 'Modelle laden', link: '/de/examples/load-models' },
67-
{ text: 'Text laden', link: '/de/examples/text-3d' },
68-
{ text: 'Lichter und Schatten', link: '/de/examples/lights-shadows' },
69-
{ text: 'Shaders', link: '/de/examples/shaders' },
62+
{ text: 'Orbit-Controls', link: '/de/cookbook/orbit-controls' },
63+
{ text: 'Einfache Animationen', link: '/de/cookbook/basic-animations' },
64+
{ text: 'Gruppen', link: '/de/cookbook/groups' },
65+
{ text: 'Texturen laden', link: '/de/cookbook/load-textures' },
66+
{ text: 'Modelle laden', link: '/de/cookbook/load-models' },
67+
{ text: 'Text laden', link: '/de/cookbook/text-3d' },
68+
{ text: 'Lichter und Schatten', link: '/de/cookbook/lights-shadows' },
69+
{ text: 'Shaders', link: '/de/cookbook/shaders' },
7070
],
7171
},
7272
{

‎docs/.vitepress/config/en.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,17 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
5757
],
5858
},
5959
{
60-
text: 'Examples',
61-
collapsed: true,
60+
text: 'Cookbook 🍳🧑‍🍳',
61+
link: '/cookbook/',
6262
items: [
63-
{ text: 'Orbit Controls', link: '/examples/orbit-controls' },
64-
{ text: 'Basic Animations', link: '/examples/basic-animations' },
65-
{ text: 'Groups', link: '/examples/groups' },
66-
{ text: 'Load Textures', link: '/examples/load-textures' },
67-
{ text: 'Load Models', link: '/examples/load-models' },
68-
{ text: 'Load Text', link: '/examples/text-3d' },
69-
{ text: 'Lights & Shadows', link: '/examples/lights-shadows' },
70-
{ text: 'Shaders', link: '/examples/shaders' },
63+
{ text: 'Orbit Controls', link: '/cookbook/orbit-controls' },
64+
{ text: 'Basic Animations', link: '/cookbook/basic-animations' },
65+
{ text: 'Groups', link: '/cookbook/groups' },
66+
{ text: 'Load Textures', link: '/cookbook/load-textures' },
67+
{ text: 'Load Models', link: '/cookbook/load-models' },
68+
{ text: 'Load Text', link: '/cookbook/text-3d' },
69+
{ text: 'Lights & Shadows', link: '/cookbook/lights-shadows' },
70+
{ text: 'Shaders', link: '/cookbook/shaders' },
7171
],
7272
},
7373
{

‎docs/.vitepress/config/es.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,17 @@ export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
5757
],
5858
},
5959
{
60-
text: 'Ejemplos',
61-
collapsed: true,
60+
text: 'Recetario 🍳🧑‍🍳',
61+
link: '/es/cookbook/',
6262
items: [
63-
{ text: 'Controles de órbita', link: '/es/examples/orbit-controls' },
64-
{ text: 'Animaciones básicas', link: '/es/examples/basic-animations' },
65-
{ text: 'Grupos', link: '/es/examples/groups' },
66-
{ text: 'Cargar texturas', link: '/es/examples/load-textures' },
67-
{ text: 'Cargar modelos', link: '/es/examples/load-models' },
68-
{ text: 'Cargar texto', link: '/es/examples/text-3d' },
69-
{ text: 'Luces y sombras', link: '/es/examples/lights-shadows' },
70-
{ text: 'Shaders', link: '/es/examples/shaders' },
63+
{ text: 'Controles de órbita', link: '/es/cookbook/orbit-controls' },
64+
{ text: 'Animaciones básicas', link: '/es/cookbook/basic-animations' },
65+
{ text: 'Grupos', link: '/es/cookbook/groups' },
66+
{ text: 'Cargar texturas', link: '/es/cookbook/load-textures' },
67+
{ text: 'Cargar modelos', link: '/es/cookbook/load-models' },
68+
{ text: 'Cargar texto', link: '/es/cookbook/text-3d' },
69+
{ text: 'Luces y sombras', link: '/es/cookbook/lights-shadows' },
70+
{ text: 'Shaders', link: '/es/cookbook/shaders' },
7171
],
7272
},
7373
{

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup>
2+
import { computed } from 'vue'
3+
import { useData } from 'vitepress'
4+
import { data as recipes } from '../recipes.data.ts'
5+
6+
const { lang } = useData()
7+
8+
const filteredRecipes = computed(() => recipes.filter(recipe => recipe.lang === lang.value.split('-')[0]))
9+
</script>
10+
11+
<template>
12+
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-8 -mx-4 pt-8">
13+
<li
14+
v-for="recipe of filteredRecipes"
15+
:key="recipe.title"
16+
class="list-none important-m-0"
17+
>
18+
<a
19+
:href="recipe.url"
20+
>
21+
<img
22+
:src="recipe.thumbnail"
23+
:alt="recipe.title"
24+
class="aspect-video object-cover rounded-lg"
25+
>
26+
27+
<h3>
28+
{{ recipe.title }}
29+
<span
30+
v-for="n in recipe.difficulty"
31+
:key="n"
32+
aria-label="chili"
33+
role="img"
34+
class="text-sm"
35+
>🌶️</span>
36+
37+
</h3></a>
38+
<p>{{ recipe.excerpt }}</p>
39+
</li>
40+
</ul>
41+
</template>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { createContentLoader } from 'vitepress'
2+
3+
export interface Recipe {
4+
title: string
5+
url: string
6+
excerpt: string | undefined
7+
thumbnail?: string
8+
difficulty?: number
9+
}
10+
11+
declare const data: Recipe[]
12+
export { data }
13+
14+
export default createContentLoader('/**/cookbook/*.md', {
15+
excerpt: true,
16+
transform(raw): Recipe[] {
17+
return raw
18+
.map(({ url, frontmatter, excerpt }) => ({
19+
title: frontmatter.title,
20+
url,
21+
lang: url.split('/')[1].length === 2 ? url.split('/')[1] : 'en',
22+
thumbnail: frontmatter.thumbnail,
23+
difficulty: frontmatter.difficulty,
24+
excerpt: frontmatter.excerpt || frontmatter.description || excerpt,
25+
})).filter(recipe => recipe.title)
26+
.sort((a, b) => b.title - a.title)
27+
},
28+
})

‎docs/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export {}
77

88
declare module 'vue' {
99
export interface GlobalComponents {
10+
Cookbook: typeof import('./.vitepress/theme/components/Cookbook.vue')['default']
1011
DonutExample: typeof import('./.vitepress/theme/components/DonutExample.vue')['default']
1112
EmbedExperiment: typeof import('./.vitepress/theme/components/EmbedExperiment.vue')['default']
1213
ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default']

docs/examples/basic-animations.md renamed to docs/cookbook/basic-animations.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
---
2+
title: Basic Animations
3+
description: How to use a the useRenderLoop composable to animate your objects.
4+
author: alvarosabu
5+
thumbnail: /recipes/animations.png
6+
difficulty: 0
7+
---
8+
19
# Basic Animations
210

311
This guide will help you get started with basic animations in TresJS.

docs/examples/groups.md renamed to docs/cookbook/groups.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
---
2+
title: Groups
3+
description: Learn how to group multiple objects in the scene.
4+
author: alvarosabu
5+
thumbnail: /recipes/groups.png
6+
difficulty: 0
7+
---
8+
19
# Group
210

311
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‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Cookbook 🍳🧑‍🍳
2+
3+
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.
4+
5+
<Cookbook />

docs/examples/lights-shadows.md renamed to docs/cookbook/lights-shadows.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
---
2+
title: Lights and Shadows
3+
description: Learn how to add lights and shadows to your scene.
4+
author: alvarosabu
5+
thumbnail: /recipes/lights-and-shadows.png
6+
difficulty: 0
7+
---
8+
19
# Light-shadows
210

311
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
816
## Setting up the scene (optional)
917

1018
We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
11-
[check here to know how](/examples/orbit-controls).
19+
[check here to know how](/cookbook/orbit-controls).
1220

1321
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.
1422

@@ -139,7 +147,7 @@ Similarly to the previous step, we set the mesh that we want to cast shadow (our
139147
</template>
140148
```
141149

142-
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 🤩
150+
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 🤩
143151

144152
```vue
145153
<script setup>

0 commit comments

Comments
 (0)