feat: v5 labs

.gitignore

@@ -19,3 +19,11 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 .nuxt/
+
+.data
+
+# AI Assistant configurations
+.cursor/
+.claude/
+CLAUDE.md
+

.netlify.toml

@@ -1,3 +1,9 @@
+[build.environment]
+  NODE_VERSION = "22"
 [build]
-  publish = "dist"
   command = "pnpm run generate"
+  publish = "dist"
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

app.config.ts

@@ -0,0 +1,15 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'teal',
+      accent: 'yellow',
+      neutral: 'zinc'
+    },
+    card: {
+      slots: {
+        root: 'rounded-xs hover:bg-linear-[115deg,#272727 .06%,#171717]',
+        body: 'p-2 sm:p-3'
+      }
+    }
+  }
+})

app/app.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('experiments'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('experiments'), {
+  server: false
+})
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' }
+  ],
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+useSeoMeta({
+  titleTemplate: title => title ? `${title} · TresJS Lab` : 'TresJS Lab',
+  ogSiteName: 'TresJS Lab',
+  twitterCard: 'summary_large_image'
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UApp>
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+    <ClientOnly>
+      <LazyUContentSearch :files="files" :navigation="navigation" />
+    </ClientOnly>
+  </UApp>
+</template>

app/assets/styles/main.css

@@ -0,0 +1,45 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme static {
+  --font-display: 'Manrope', sans-serif;
+  --font-sans: 'Inter', sans-serif;
+
+  --breakpoint-3xl: 1920px;
+  --ui-pattern-fg: color-mix(in oklab,var(--ui-text)5%,transparent);
+  --ui-pattern-bg: repeating-linear-gradient(315deg,var(--ui-pattern-fg)0,var(--ui-pattern-fg)1px,transparent 0,transparent 50%);
+  --ui-header-height: 3rem;
+
+
+  /* Teal Palette */
+  --color-teal-50: #f2fbf8;
+  --color-teal-100: #d3f4ea;
+  --color-teal-200: #a6e9d6;
+  --color-teal-300: #82dbc5;
+  --color-teal-400: #44bda2;
+  --color-teal-500: #2ba189;
+  --color-teal-600: #20816f;
+  --color-teal-700: #1d685b;
+  --color-teal-800: #1c534b;
+  --color-teal-900: #1b463f;
+  --color-teal-950: #0a2925;
+
+  /* Yellow/Brown Palette */
+  --color-yellow-50: #fff8eb;
+  --color-yellow-100: #feeac7;
+  --color-yellow-200: #fdd48a;
+  --color-yellow-300: #fbb03b;
+  --color-yellow-400: #fa9e25;
+  --color-yellow-500: #f47a0c;
+  --color-yellow-600: #b85607;
+  --color-yellow-700: #b3390a;
+  --color-yellow-800: #922b0e;
+  --color-yellow-900: #78250f;
+  --color-yellow-950: #451003;
+}
+
+.pattern-bg {
+  background-image: var(--ui-pattern-bg);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}

app/components/BlenderCube.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { nodes, materials } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+const model = nodes.Cube
+
+Object.assign(materials.coat, {
+  envMapIntensity: 4,
+  roughness: 0.5,
+  metalness: 1,
+})
+
+Object.assign(materials.paint, {
+  envMapIntensity: 2, roughness: 0.45, metalness: 0.8, color: '#555' 
+})
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>

app/components/TheActions.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import type { Page } from '~/app/types'
+
+defineProps<{
+  page: Page
+}>()
+
+const isDark = useDark()
+const visible = ref(true)
+const openInfo = ref(false)
+const toggleDark = useToggle(isDark)
+
+defineShortcuts({
+  i: () => {
+    openInfo.value = !openInfo.value
+  },
+  h: () => {
+    visible.value = !visible.value
+  }
+})
+</script>
+<template>
+  <UButtonGroup v-if="visible" size="sm">
+    <TheCodeButton />
+    <USlideover v-model:open="openInfo" size="lg" :title="page.title" :ui="{
+      content: 'max-w-2xl'
+    }">
+      <UButton :icon="'i-carbon-document'" color="neutral" variant="subtle" />
+      <template #title>
+        <div class="flex items-center gap-8">
+          <h2 class="text-2xl font-bold">{{ page.title }}</h2>
+          <UAvatarGroup size="xs">
+            <UTooltip v-for="author in page.authors" :key="author.slug" :text="author.name">
+              <UAvatar :src="author.avatar" :alt="author.name" />
+            </UTooltip>
+          </UAvatarGroup>
+        </div>
+      </template>
+      <template #body>
+        <ContentRenderer :value="page" />
+      </template>
+    </USlideover>
+    <UButton variant="subtle" color="neutral" :icon="isDark ? 'i-carbon-sun' : 'i-carbon-moon'" class="rounded-full"
+      @click="toggleDark()" />
+  </UButtonGroup>
+</template>

app/components/TheCard.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { ExperimentItem } from '~/app/types'
+
+interface Author {
+  name: string
+  avatar: string
+}
+
+interface Props {
+  experiment: ExperimentItem & {
+    stem: string
+    slug: string
+    title: string
+    thumbnail: string
+    author?: Author[] | null
+    repoPath: string
+    repoTitle: string
+  }
+}
+
+const props = defineProps<Props>()
+
+const formattedDate = computed(() =>
+  new Date(props.experiment.date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+)
+</script>
+
+<template>
+  <NuxtLink :to="`${experiment.stem}`">
+    <UCard class="relative transition-all duration-300 hover:shadow-lg hover:scale-102 hover:-translate-y-1">
+      <div class="relative aspect-video overflow-hidden bg-gray-100 dark:bg-gray-800 rounded-md">
+        <img :src="`/${experiment.stem}.png`" :alt="experiment.title"
+          class="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105">
+
+        </div>
+
+
+      <!-- Tags -->
+      <div class="py-4 flex gap-2 flex-wrap">
+        <UBadge v-for="tag in experiment.tags" :key="tag" :label="tag" color="primary" variant="soft" size="sm" />
+      </div>
+
+      <h3 class="font-display font-bold text-lg">{{ experiment.title }}</h3>
+      <p class="font-mono text-xs text-gray-500 dark:text-gray-400 mt-1">
+        {{ formattedDate }}
+      </p>
+
+      <div class="mt-4 flex justify-between items-center flex-wrap gap-2">
+
+        <div v-if="experiment.authors?.length === 1">
+          <UBadge v-for="author in experiment.authors" :key="author" color="neutral" variant="soft" :avatar="{
+            src: author.avatar,
+            alt: author.name,
+          }">
+            {{ author.name }}
+          </UBadge>
+        </div>
+        <div v-else>
+          <UAvatarGroup>
+            <template v-for="author in experiment.authors" :key="author">
+              <UTooltip :text="author.name">
+                <UAvatar :src="author.avatar" :alt="author.name" size="xs" />
+              </UTooltip>
+            </template>
+          </UAvatarGroup>
+        </div>
+        <div class="flex gap-2">
+          <UBadge 
+          v-if="experiment.featured" 
+            color="warning" 
+            variant="soft" 
+            label="Editor's Choice"
+            icon="i-lucide-star" 
+            size="sm"
+          />
+          <UTooltip :text="experiment.repoTitle">
+            <UButton color="primary" variant="ghost" icon="i-heroicons-code-bracket" size="xs" :to="experiment.repoPath"
+              target="_blank" @click.stop />
+          </UTooltip>
+        </div>
+      </div>
+    </UCard>
+  </NuxtLink>
+</template>

app/components/TheCodeButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const route = useRoute()
+
+function getSlugFromPath(path: string) {
+  return path.split('/').pop()
+}
+
+function getRepoPathFromPath(path: string) {
+  return `https://github.com/Tresjs/lab/tree/main/components/content/${getSlugFromPath(path)}`
+}
+
+function getRepoTitleFromPath(path: string) {
+  return `${getSlugFromPath(path)} – code on Github`
+}
+
+const to = getRepoPathFromPath(route.path)
+const title = getRepoTitleFromPath(route.path)
+
+</script>
+
+<template>
+  <UButton :to="to" :title="title" icon="i-carbon-logo-github" class="rounded-full" color="neutral" variant="subtle" />
+</template>

app/components/TheHeader.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <UHeader>
+    <template #title>
+      <div class="flex items-center">
+        <img src="/logo.svg" alt="Tres.js" class="h-3 mr-4">
+        <a class="font-bold text-dark font-sans text-sm" href="/" title="Home">Tres<span
+            class="text-primary-300">JS</span></a>
+      </div>
+    </template>
+    <UContentSearchButton variant="subtle" :collapsed="false" />
+
+    <template #right>
+      <UColorModeButton />
+
+      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
+        <UButton color="neutral" variant="ghost" to="https://github.com/nuxt/ui" target="_blank"
+          icon="i-simple-icons-github" aria-label="GitHub" />
+      </UTooltip>
+    </template>
+  </UHeader>
+</template>