chore(docs): move code snippets to md components

docs/.vitepress/theme/components/DirectiveVAlwaysLookAtExampleCode.md

@@ -0,0 +1,29 @@
+```vue{4,6,20,23}
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+
+const sphereRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+// here we update the position of the sphere and the camera will always follow the object
+onLoop(({ elapsed }) => {
+  if (sphereRef.value) {
+    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
+  }
+})
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]"
+        v-always-look-at="sphereRef"
+      />
+      <Sphere
+        ref="sphereRef"
+        :scale="0.5"
+      />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVAlwaysLookAtUsageCode.md

@@ -0,0 +1,14 @@
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, vAlwaysLookAt } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+      <TresPerspectiveCamera :position="[0, 2, 5]" />
+      <Box
+        v-always-look-at="new Vector3(0, 0, 0)"
+      />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVDistanceToCode.md

@@ -0,0 +1,22 @@
+```vue{2,8,13}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphere1Ref"
+      :position="[-2, slider, 0]"
+      :scale="0.5"
+    />
+    <Sphere
+      v-distance-to="sphere1Ref"
+      :position="[2, 0, 0]"
+      :scale="0.5"
+    />
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVLightHelperUsageCode.md

@@ -0,0 +1,22 @@
+```vue{2,8,11,14,17}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
+</script>
+<template>
+  <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <TresDirectionalLight
+      v-light-helper
+    />
+    <TresPointLight
+      v-light-helper
+    />
+    <TresSpotLight
+      v-light-helper
+    />
+    <TresHemisphereLight
+      v-light-helper
+    />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVLogCode.md

@@ -0,0 +1,22 @@
+```vue
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+
+const sphereRef = shallowRef()
+
+watch(sphereRef, (value) => {
+  console.log(value) // Really for a log?!!! 😫
+})
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+    />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```

docs/.vitepress/theme/components/DirectiveVLogUsageCode.md

@@ -0,0 +1,17 @@
+```vue{2,10,12}
+<script setup lang="ts">
+import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
+</script>
+<template>
+    <TresCanvas >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Sphere
+      ref="sphereRef"
+      :scale="0.5"
+      v-log:material  <!-- will print just the material 🎉 -->
+    />
+    <OrbitControls v-log />
+  </TresCanvas>
+</template>
+```
+

docs/.vitepress/theme/components/GuideInstall.md

@@ -0,0 +1,15 @@
+::: code-group
+
+```bash [npm]
+npm install @tresjs/core three 
+```
+
+```bash [yarn]
+yarn add @tresjs/core three 
+```
+
+```bash [pnpm]
+pnpm add @tresjs/core three 
+```
+
+:::

docs/.vitepress/theme/components/GuideInstallTypescript.md

@@ -0,0 +1,15 @@
+::: code-group
+
+```bash [npm]
+npm install @types/three -D
+```
+
+```bash [yarn]
+yarn add @types/three -D
+```
+
+```bash [pnpm]
+pnpm add @types/three -D
+```
+
+:::

docs/.vitepress/theme/components/GuideLunchbox.md

@@ -0,0 +1,16 @@
+```ts
+// Example Vite setup
+import { createApp } from 'vue'
+import { createApp as createLunchboxApp } from 'lunchboxjs'
+import App from './App.vue'
+import LunchboxApp from './LunchboxApp.vue'
+
+// html app
+const app = createApp(App)
+app.mount('#app')
+
+// lunchbox app
+const lunchboxApp = createLunchboxApp(LunchboxApp)
+// assuming there's an element with ID `lunchbox` in your HTML app
+lunchboxApp.mount('#lunchbox')
+```

docs/.vitepress/theme/components/GuideVite.md

@@ -0,0 +1,12 @@
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ],
+})
+```

docs/components.d.ts

@@ -7,11 +7,23 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    DirectiveVAlwaysLookAtExampleCode: typeof import('./.vitepress/theme/components/DirectiveVAlwaysLookAtExampleCode.md')['default']
+    DirectiveVAlwaysLookAtUsageCode: typeof import('./.vitepress/theme/components/DirectiveVAlwaysLookAtUsageCode.md')['default']
+    DirectiveVDistanceToCode: typeof import('./.vitepress/theme/components/DirectiveVDistanceToCode.md')['default']
+    DirectiveVDistinceToCode: typeof import('./.vitepress/theme/components/DirectiveVDistinceToCode.md')['default']
+    DirectiveVLightHelperUsageCode: typeof import('./.vitepress/theme/components/DirectiveVLightHelperUsageCode.md')['default']
+    DirectiveVLogCode: typeof import('./.vitepress/theme/components/DirectiveVLogCode.md')['default']
+    DirectiveVLogUsageCode: typeof import('./.vitepress/theme/components/DirectiveVLogUsageCode.md')['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']
     FirstScene: typeof import('./.vitepress/theme/components/FirstScene.vue')['default']
     FirstSceneLightToon: typeof import('./.vitepress/theme/components/FirstSceneLightToon.vue')['default']
+    GudeInstallTS: typeof import('./.vitepress/theme/components/GudeInstallTS.md')['default']
+    GuideInstall: typeof import('./.vitepress/theme/components/GuideInstall.md')['default']
+    GuideInstallTypescript: typeof import('./.vitepress/theme/components/GuideInstallTypescript.md')['default']
+    GuideLunchbox: typeof import('./.vitepress/theme/components/GuideLunchbox.md')['default']
+    GuideVite: typeof import('./.vitepress/theme/components/GuideVite.md')['default']
     HomeSponsors: typeof import('./.vitepress/theme/components/HomeSponsors.vue')['default']
     LocalOrbitControls: typeof import('./.vitepress/theme/components/LocalOrbitControls.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']

docs/de/directives/v-always-look-at.md

@@ -4,20 +4,7 @@ Mit der neuen Direktive `v-always-look-at`, die von **TresJS** bereitgestellt wi
 
 ## Benutzung
 
-```vue{3,9}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]" />
-      <Box
-        v-always-look-at="new Vector3(0, 0, 0)"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtUsageCode />
 
 Egal, wohin sich die Box bewegt, sie wird immer auf die Position [0,0,0] ausgerichtet sein.
 
@@ -32,32 +19,4 @@ Ein weiterer Vorteil ist, dass du mit der Kamera auch nicht-stationäre Objekte
 
 Zum Beispiel:
 
-```vue{4,6,20,23}
-<script setup lang="ts">
-import { shallowRef } from 'vue'
-import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { Box, vAlwaysLookAt } from '@tresjs/cientos'
-
-const sphereRef = shallowRef()
-
-const { onLoop } = useRenderLoop()
-
-// Die Position der Kugel wird verändert, aber die Kamera folgt ihr.
-onLoop(({ elapsed }) => {
-  if (sphereRef.value) {
-    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
-  }
-})
-</script>
-<template>
-    <TresCanvas >
-      <TresPerspectiveCamera :position="[0, 2, 5]"
-        v-always-look-at="sphereRef"
-      />
-      <Sphere
-        ref="sphereRef"
-        :scale="0.5"
-      />
-  </TresCanvas>
-</template>
-```
+<DirectiveVAlwaysLookAtExampleCode />

docs/de/directives/v-distance-to.md

@@ -6,31 +6,10 @@ Mit der neuen Direktive `v-distance-to` ist es einfacher als je zuvor. Du musst
 
 Zusätzlich wird ein Pfeil zwischen den beiden Objekten erstellt.
 
-```vue{2,8,13}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphere1Ref"
-      :position="[-2, slider, 0]"
-      :scale="0.5"
-    />
-    <Sphere
-      v-distance-to="sphere1Ref"
-      :position="[2, 0, 0]"
-      :scale="0.5"
-    />
-    <TresGridHelper :args="[10, 10]" />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVDistanceToCode />
 
 Die Verwendung von `v-distance-to` ist reaktiv, sodass sie perfekt mit `@tres/leches` 🍰 funktioniert.
 
 ::: warning
 `v-distance-to` wird kein bewegtes Objekt innerhalb des RenderLoops messen.
-:::
+:::

docs/de/directives/v-light-helper.md

@@ -10,25 +10,4 @@ Die folgenden Lichter werden unterstützt:
 
 ## Usage
 
-```vue{2,8,11,14,17}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLightHelper } from '@tresjs/cientos'
-</script>
-<template>
-  <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <TresDirectionalLight
-      v-light-helper
-    />
-    <TresPointLight
-      v-light-helper
-    />
-    <TresSpotLight
-      v-light-helper
-    />
-    <TresHemisphereLight
-      v-light-helper
-    />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLightHelperUsageCode />

docs/de/directives/v-log.md

@@ -4,50 +4,14 @@
 
 Wenn du deine Instanz loggen möchtest, musst du normalerweise die Template-Referenz verwenden und diese dann loggen:
 
-```vue
-<script setup lang="ts">
-import { shallowRef, watch } from 'vue'
-
-const sphereRef = shallowRef()
-
-watch(sphereRef, (value) => {
-  console.log(value) // Echt jetzt?!!! 😫
-})
-</script>
-
-<template>
-  <TresCanvas>
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-    />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogCode />
 
 Das ist VIEL Code nur für ein einfaches Log, oder?
 
 ## Benutzung
 
 Mit der neuen Direktive v-log, die von **TresJS** bereitgestellt wird, kannst du das gleiche tun, indem du einfach `v-log` zur Instanz hinzufügst.
 
-```vue{2,10,12}
-<script setup lang="ts">
-import { OrbitControls, Sphere, vLog } from '@tresjs/cientos'
-</script>
-<template>
-    <TresCanvas >
-    <TresPerspectiveCamera :position="[0, 2, 5]" />
-    <Sphere
-      ref="sphereRef"
-      :scale="0.5"
-      v-log:material  <!-- wird nur das Material loggen 🎉 -->
-    />
-    <OrbitControls v-log />
-  </TresCanvas>
-</template>
-```
+<DirectiveVLogUsageCode />
 
 Du kannst auch einen Modifikator mit dem Namen einer Eigenschaft übergeben. Zum Beispiel `v-log:material`, damit direkt die `material` Eigenschaft gelogged wird 😍.