move codesnippets to md files

userquin commented 6 months ago

Description

To avoid duplication and errors, all code snippets should be moved to a new md file, this way we only need to update an md file.

Alternative

No response

Additional context

No response

Validations

[X] I agree to follow this project's Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

andretchen0 commented 6 months ago

Maybe helpful/relevant to this issue:

For Cientos, for on-screen demos with snippets, we've been including demos then showing the demo's own code using VitePress' built-in include syntax.

Live docs page

https://cientos.tresjs.org/guide/staging/sky.html

Code for docs page

# Sky

<DocsDemo>
  <SkyDemo />
</DocsDemo>

`<Sky />` is a wrapper for the [Three.js `Sky` add-on](https://threejs.org/examples/?q=sky#webgl_shaders_sky).

## Usage

<<< @/.vitepress/theme/components/SkyDemo.vue{3,9}

## Props

<CientosPropsTable component-path="src/core/staging/Sky.vue" />

Link to GH

When writing docs, having snippets that are runnable and running on the page has kept me from introducing bugs in the demo code a few times.

It also has a positive effect, imho, of forcing me to make a minimum runnable example, which is then directly runnable by users; they don't have to figure out, e.g., "Where do I paste this?"

userquin commented 6 months ago

I'll include only code snippets, we've 3 languages and 2 more comming, we need to update only the example once avoiding to update every code snippet in every localised page.

About running examples, we should do it also once.

andretchen0 commented 6 months ago

@userquin

Sounds good. Good luck!

Tresjs / tres