feat(Lines): format docs

Tresjs · Oct 1, 2023 · 28e78b1 · 28e78b1
1 parent e876314
commit 28e78b1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 50 deletions.
diff --git a/docs/.vitepress/theme/components/CatmullRomCurve3Demo.vue b/docs/.vitepress/theme/components/CatmullRomCurve3Demo.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { Vector3 } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { CatmullRomCurve3, OrbitControls } from '@tresjs/cientos'
 </script>
 
 <template>
-  <TresCanvas v-bind="{ clearColor: '#4f4f4f' }">
+  <TresCanvas clear-color="#4f4f4f">
     <CatmullRomCurve3
-      :points="[[-1.5, 0, 0], new Vector3(-0.5, 1, 0), [0.5, 0, 0], [1.5, 1, 0]]"
+      :points="[[-1.5, 0, 0], [-0.5, 1, 0], [0.5, 0, 0], [1.5, 1, 0]]"
       :segments="40"
       :line-width="10"
       color="#fbb03b"

diff --git a/docs/guide/shapes/catmullromcurve3.md b/docs/guide/shapes/catmullromcurve3.md
@@ -10,27 +10,7 @@ The `cientos` package provides a `<CatmullRomCurve3 />` component that allows yo
 
 
 ## Usage
-
-```vue{3,8-13}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { CatmullRomCurve3, OrbitControls } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas v-bind="{clearColor:'#4f4f4f'}">
-    <CatmullRomCurve3
-      :points="[[-1.5,0,0],[-0.5,1,0],[0.5,0,0],[1.5,1,0]]"
-      :segments="40"
-      :line-width="10"
-      color="#fbb03b"
-    />
-    <TresGridHelper />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-
-```
+<<< @/.vitepress/theme/components/CatmullRomCurve3Demo.vue{3,8-13}
 
 ## Props
 

diff --git a/docs/guide/shapes/line2.md b/docs/guide/shapes/line2.md
@@ -7,25 +7,7 @@
 The `cientos` package provides a `<Line2 />` component that wraps [Three.js's `Line2`](https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js).
 
 ## Usage
-
-```vue{3,8-12}
-<script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { Line2, OrbitControls } from '@tresjs/cientos'
-</script>
-
-<template>
-  <TresCanvas v-bind="{clearColor:'#888'}">
-    <Line2
-      :points="[[-0.5,0,0], [0.5,0,0] ,[0,0.8660,0], [-0.5,0,0]]"
-      :line-width="10"
-      color="#82dbc5"
-    />
-    <TresGridHelper />
-    <OrbitControls />
-  </TresCanvas>
-</template>
-```
+<<< @/.vitepress/theme/components/Line2Demo.vue{3,8-12}
 
 ## Props
 
@@ -49,7 +31,7 @@ The points prop has the following type:
 
 `Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>`
 
-The passed array is converted to `Array<number>` – i.e., a series of x, y, z, x, y, z, x ... vertex coordinates. This is done array entry by array entry, as follows:
+The passed array is converted to `Array<number>` – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:
 
 | Entry type                   | Interpretation                                                                   |
 | ---------------------------- | -------------------------------------------------------------------------------- |
@@ -62,17 +44,14 @@ The passed array is converted to `Array<number>` – i.e., a series of x, y, z,
 :::warning
 If you pass "bare" numbers in the points array, ensure that you pass "triplets" – groups of three numbers. Otherwise, you'll corrupt the coordinates that follow.
 
-This:
-
-```vue
+::: code-group
+```vue [Wrong]
 //       ✅     ❌     ✅
 :points=[[1,1], 2, 2, [3,3]]
 // result: (1,1,0) (2,2,3) (3,0,?)
 ```
 
-So, make sure that you pass three numbers in a row.
-
-```vue
+```vue [Right]
 //       ✅     ✅        ✅
 :points=[[1,1], 2, 2, 0, [3,3]]
 // result: (1,1,0) (2,2,0) (3,3,0)