docs: enable multi language (#534)

* docs: enable multi language

* docs: spanish config

* docs: translated guides to spanish

* docs: translation for your first scene

* docs: examples translated

* docs: last pages spanish

* docs: fix translation error on links

* docs: translated missing composable page

* docs: swipe examples translations

docs/.vitepress/config/en.ts

@@ -0,0 +1,146 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Suggest changes to this page',
+    },
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          // This shows `/guide/index.md` page.
+          { text: 'Introduction', link: '/guide/' },
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Your first Scene', link: '/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/guide/nuxt' },
+          { text: 'Troubleshooting', link: '/guide/troubleshooting' },
+          { text: 'Migrate from v1', link: '/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/api/tres-canvas' },
+          {
+            text: 'Instances, arguments and props',
+            link: '/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/api/composables',
+          },
+          {
+            text: 'Events',
+            link: '/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Advanced',
+
+        items: [
+          { text: 'Extending', link: '/advanced/extending' },
+          { text: 'primitive', link: '/advanced/primitive' },
+          {
+            text: 'Caveats',
+            link: '/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Debug',
+        items: [
+          { text: 'Devtools', link: '/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Examples',
+        collapsed: true,
+        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: 'Directives',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/directives/v-log' },
+          { text: 'v-light-helper', link: '/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/directives/v-distance-to' },
+        ],
+      },
+      {
+        text: 'Ecosystem',
+        items: [
+          {
+            text: 'Cientos 💛',
+            link: 'https://cientos.tresjs.org/',
+          },
+          {
+            text: 'Nuxt module',
+            link: 'https://github.com/Tresjs/nuxt',
+          },
+          {
+            text: 'TresLeches 🍰',
+            link: 'https://tresleches.tresjs.org/',
+          },
+          {
+            text: 'Post-processing (Soon)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Guide', link: '/guide/' },
+      { text: 'API', link: '/api/tres-canvas' },
+      /*       { text: 'API', link: '/api/' },
+      { text: 'Config', link: '/config/' }, */
+      { text: 'Resources',
+        items: [
+          { text: 'Team', link: '/team' },
+          { text: 'Releases', link: 'https://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Playground',
+            link: 'https://playground.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: 'https://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Issues',
+            link: 'https://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ecosystem',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: 'https://cientos.tresjs.org/',
+              },
+              {
+                text: 'Nuxt module',
+                link: 'https://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: 'https://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },  
+    ],
+  },
+}

docs/.vitepress/config/es.ts

@@ -0,0 +1,146 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const esConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  themeConfig: {
+    editLink: {
+      pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path',
+      text: 'Sugerir cambios a esta página',
+    },
+    sidebar: [
+      {
+        text: 'Guía',
+        items: [
+          // Esto muestra la página `/guide/index.md`.
+          { text: 'Introducción', link: '/es/guide/' },
+          { text: 'Empezando', link: '/es/guide/getting-started' },
+          { text: 'Tu primera Escena', link: '/es/guide/your-first-scene' },
+          { text: 'Nuxt', link: '/es/guide/nuxt' },
+          { text: 'Solución de problemas', link: '/es/guide/troubleshooting' },
+          { text: 'Migración desde v1', link: '/es/guide/migration-guide' },
+        ],
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'TresCanvas', link: '/es/api/tres-canvas' },
+          {
+            text: 'Instancias, argumentos y props',
+            link: '/es/api/instances-arguments-and-props',
+          },
+          {
+            text: 'Composables',
+            link: '/es/api/composables',
+          },
+          {
+            text: 'Eventos',
+            link: '/es/api/events',
+          },
+        ],
+      },
+
+      {
+        text: 'Avanzado',
+
+        items: [
+          { text: 'Extender', link: '/es/advanced/extending' },
+          { text: 'primitive', link: '/es/advanced/primitive' },
+          {
+            text: 'Advertencias',
+            link: '/es/advanced/caveats',
+          },
+        ],
+      },
+      {
+        text: 'Depuración',
+        items: [
+          { text: 'Herramientas de desarrollo', link: '/es/debug/devtools' },
+        ],
+      },
+      {
+        text: 'Ejemplos',
+        collapsed: true,
+        items: [
+          { text: 'Controles de órbita', link: '/es/examples/orbit-controls' },
+          { text: 'Animaciones básicas', link: '/es/examples/basic-animations' },
+          { text: 'Grupos', link: '/es/examples/groups' },
+          { text: 'Cargar texturas', link: '/es/examples/load-textures' },
+          { text: 'Cargar modelos', link: '/es/examples/load-models' },
+          { text: 'Cargar texto', link: '/es/examples/text-3d' },
+          { text: 'Luces y sombras', link: '/es/examples/lights-shadows' },
+          { text: 'Shaders', link: '/es/examples/shaders' },
+        ],
+      },
+      {
+        text: 'Directivas',
+        collapsed: true,
+        items: [
+          { text: 'v-log', link: '/es/directives/v-log' },
+          { text: 'v-light-helper', link: '/es/directives/v-light-helper' },
+          { text: 'v-always-look-at', link: '/es/directives/v-always-look-at' },
+          { text: 'v-distance-to', link: '/es/directives/v-distance-to' },
+        ],
+      },
+      {
+        text: 'Ecosistema',
+        items: [
+          {
+            text: 'Cientos 💛',
+            link: '/eshttps://cientos.tresjs.org/',
+          },
+          {
+            text: 'Módulo Nuxt',
+            link: '/eshttps://github.com/Tresjs/nuxt',
+          },
+          {
+            text: 'TresLeches 🍰',
+            link: '/eshttps://tresleches.tresjs.org/',
+          },
+          {
+            text: 'Post-procesamiento (Próximamente)',
+          },
+        ],
+      },
+    ],
+    nav: [
+      { text: 'Guía', link: '/es/guide/' },
+      { text: 'API', link: '/es/api/tres-canvas' },
+      /*       { text: 'API', link: '/es/api/' },
+      { text: 'Configuración', link: '/es/config/' }, */
+      { text: 'Recursos',
+        items: [
+          { text: 'Equipo', link: '/es/team' },
+          { text: 'Versiones', link: '/eshttps://github.com/Tresjs/tres/releases' },
+          {
+            text: 'Playground',
+            link: '/eshttps://playground.tresjs.org/',
+          },
+          {
+            text: 'Github',
+            link: '/eshttps://github.com/Tresjs/tres/',
+          },
+          {
+            text: 'Problemas',
+            link: '/eshttps://github.com/Tresjs/tres/issues',
+          },
+          {
+            text: 'Ecosistema',
+            items: [
+              {
+                text: 'Cientos 💛',
+                link: '/eshttps://cientos.tresjs.org/',
+              },
+              {
+                text: 'Módulo Nuxt',
+                link: '/eshttps://github.com/Tresjs/nuxt',
+              },
+              {
+                text: 'TresLeches 🍰',
+                link: '/eshttps://tresleches.tresjs.org/',
+              },
+            ],
+          },
+        ],
+      },  
+    ],
+  },
+}

docs/.vitepress/config/index.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitepress'
+import { enConfig } from './en'
+import { esConfig } from './es'
+import { sharedConfig } from './shared'
+
+/* import { zhConfig } from './zh' */
+
+export default defineConfig({
+  ...sharedConfig,
+
+  locales: {
+    root: { label: 'English', lang: 'en-US', link: '/', ...enConfig },
+    es: { label: 'Español', lang: 'es-ES', link: '/es/', ...esConfig },
+    /* zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig }, */
+  },
+})

docs/.vitepress/config/shared.ts

@@ -0,0 +1,63 @@
+import { defineConfig } from 'vitepress'
+import { resolve } from 'pathe'
+
+export const sharedConfig = defineConfig({
+  title: 'TresJS',
+  description: 'Declarative ThreeJS using Vue Components',
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
+    ['meta', { name: 'theme-color', content: '#82DBC5' }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
+    ['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:site_name', content: 'TresJS' }],
+    [
+      'meta',
+      {
+        property: 'og:image',
+        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'twitter:image',
+        content: 'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
+      },
+    ],
+    ['script', { defer: 'true', 'data-domain': 'tresjs.org', src: 'https://plausible.io/js/script.js' }],
+  ],
+  themeConfig: {
+    logo: '/logo.svg',
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/tresjs/tres' },
+      { icon: 'x', link: 'https://twitter.com/tresjs_dev' },
+      { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
+    ],
+  },
+  vite: {
+    optimizeDeps: {
+      exclude: ['vitepress'],
+      include: ['three'],
+    },
+    server: {
+      hmr: {
+        overlay: false,
+      },
+    },
+    resolve: {
+      alias: {
+        '@tresjs/core': resolve(__dirname, '../../../dist/tres.js'),
+      },
+      dedupe: ['@tresjs/cientos', 'three'],
+    },
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+      },
+    },
+  },
+})