Setup routing

package.json

@@ -50,35 +50,35 @@
     "docs:preview": "vitepress preview docs"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=3.2",
-    "three": ">=0.133",
-    "vue": ">=3.3"
+    "@tresjs/core": ">=3.5.0",
+    "three": ">=0.158.0",
+    "vue": ">=3.3.8"
   },
   "dependencies": {
     "@dimforge/rapier3d-compat": "^0.11.2",
     "@tresjs/core": "^3.5.0",
     "three": "^0.158.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.8"
   },
   "devDependencies": {
-    "@release-it/conventional-changelog": "^7.0.2",
+    "@release-it/conventional-changelog": "^8.0.0",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@types/node": "^20.8.7",
+    "@types/node": "^20.9.0",
     "@types/three": "^0.158.2",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.4.1",
     "dts": "^0.1.1",
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-vue": "^9.18.1",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
-    "release-it": "^16.2.1",
+    "release-it": "^17.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
-    "typescript": "^5.0.2",
-    "unocss": "^0.57.2",
-    "vite": "^4.4.5",
+    "typescript": "^5.2.2",
+    "unocss": "^0.57.3",
+    "vite": "^4.5.0",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-dts": "^3.6.3",
     "vitepress": "1.0.0-rc.25",
-    "vue-tsc": "^1.8.5"
+    "vue-tsc": "^1.8.22"
   }
 }

playground/src/App.vue

@@ -4,15 +4,14 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 function setBodyClass(routeName: string) {
-  document.title = `Post-processing Playground - ${routeName}`
-  document.body.className = routeName
+	document.title = `Rapier Playground - ${routeName}`
+	document.body.className = routeName
 }
 watch([route], () => setBodyClass(route.name?.toString() ?? ''))
 </script>
 
 <template>
-  <Suspense>
-    <router-view />
-  </Suspense>
+	<Suspense>
+		<router-view />
+	</Suspense>
 </template>
-

playground/src/pages/basics/BasicsDemo.vue

@@ -0,0 +1 @@
+<template>basics demo</template>

playground/src/pages/index.vue

@@ -1,65 +1,59 @@
 <script setup lang="ts">
-import {
-  routes,
-} from '../router'
+import { basicsRoutes } from '../router/routes'
 
-const [_home, ...restRoutes] = routes
+const sections = [{ icon: '📦', title: 'Basics', routes: basicsRoutes }]
 </script>
 
 <template>
-  <div
-    class="
-  container mx-auto max-w-3xl
-  font-sans text-xs color-gray
-  bg-white 
-  "
-  >
-    <div class="mx-4">
-      <div
-        class="
-    mt-24 mb-12 text-center align-baseline items-center gap-6
-    sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse
-    "
-      >
-        <div>
-          <img
-            src="/logo.svg"
-            alt="Post-processing logo"
-            class="max-w-36 sm:max-w-xs align-baseline"
-          >
-        </div>
-        <div class="sm:w-2/3">
-          <h1
-            class="
-        w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3
-        sm:mx-none sm:w-1/2 sm:max-w-72
-        "
-          >
-            <span class="text-cientos-blue">TresJS Rapier 🗡️</span> Playground
-          </h1>
-          <p class="text-lg">
-            Testing zone for TresJS/Rapier physics
-          </p>
-        </div>
-      </div>
-      <div class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4">
-        <router-link
-          v-for="{ name, path, meta } in restRoutes"
-          :key="name"
-          :to="path"
-          class="
-          p-4 my-4 leading-normal no-underline size-m weight-600 bg-zinc-50 rounded
-          sm:my-0
-          "
-        >
-          <div class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded">
-            {{ meta.icon }}
-          </div>
-          <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
-            {{ name }}
-          </h2>
-        </router-link>
-      </div>
-    </div>
-  </div>
+	<div
+		class="container mx-auto max-w-3xl font-sans text-xs color-gray bg-white"
+	>
+		<div class="mx-4">
+			<div
+				class="mt-24 mb-12 text-center align-baseline items-center gap-6 sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse"
+			>
+				<div>
+					<img
+						src="/logo.svg"
+						alt="Rapier logo"
+						class="max-w-36 sm:max-w-xs align-baseline"
+					/>
+				</div>
+				<div class="sm:w-2/3">
+					<h1
+						class="w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3 sm:mx-none sm:w-1/2 sm:max-w-72"
+					>
+						<span class="text-cientos-blue">TresJS/Rapier 🗡️</span>Playground
+					</h1>
+					<p class="text-lg">Testing zone for TresJS/Rapier physics</p>
+				</div>
+			</div>
+			<div
+				class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4"
+			>
+				<div
+					v-for="{ title, routes, icon } in sections"
+					:key="title"
+					class="p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded sm:my-0"
+				>
+					<div
+						class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded"
+					>
+						{{ icon }}
+					</div>
+					<h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
+						{{ title }}
+					</h2>
+					<div v-for="route in routes" :key="route.name" class="link-wrapper">
+						<router-link
+							class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
+							:to="route.path"
+						>
+							<span>{{ route.name }} </span>
+						</router-link>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>

playground/src/router.ts → playground/src/router/index.ts

@@ -1,14 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { basicsRoutes } from './routes'
 
 export const routes = [
   {
     path: '/',
     name: 'Home',
-    component: () => import('./pages/index.vue'),
+    component: () => import('../pages/index.vue'),
   },
+  ...basicsRoutes
 ]
 
 export const router = createRouter({
   history: createWebHistory(),
   routes,
-})
+})

playground/src/router/routes/basics.ts

@@ -0,0 +1,7 @@
+export const basicsRoutes = [
+  {
+    path: '/basics/basic-setup',
+    name: 'Basic Setup',
+    component: () => import('../../pages/basics/BasicsDemo.vue'),
+  },
+]

playground/src/router/routes/index.ts

@@ -0,0 +1,5 @@
+import { basicsRoutes } from './basics'
+
+export {
+  basicsRoutes
+}