feat: new naming and dark mode (#93)

Author: alvarosabu

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

components/TheTag.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <span class="bg-primary inline-flex px-2 py-1 text-xs rounded">
+  <span class="bg-primary inline-flex px-2 py-1 text-xs rounded text-dark">
     <slot />
   </span>
 </template>

components/TheToolbar.vue

@@ -1,28 +1,49 @@
 <script lang="ts" setup>
-import Logo from '/assets/logo.svg'
+import { useDark, useToggle } from '@vueuse/core'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <header class="fixed top-0 z-10 w-full bg-white bg-opacity-60 py-4">
+  <header class="fixed top-0 z-10 w-full bg-white dark:bg-dark bg-opacity-60 py-4 font-sans">
     <div class="px-4 sm:px-0 container mx-auto flex justify-between">
       <div class="flex items-center">
-        <Logo class="mr-8" />
+        <img
+          src="/lab.svg"
+          alt="Tres.js"
+          class="h-3 mr-4"
+        >
         <a
           class="font-bold"
           href="/"
           title="Home"
-        >Playground</a>
+        >Lab</a>
       </div>
-      <ul class="flex justify-between w-50px">
+      <ul class="flex gap-4 justify-between items-center">
+        <button
+          title="Toggle dark mode"
+          class="bg-transparent -mt-1"
+          @click="toggleDark()"
+        >
+          <i
+            v-if="isDark"
+            class="i-carbon-sun"
+          />
+          <i
+            v-else
+            class="i-carbon-moon"
+          />
+        </button>
         <a
           href="https://tresjs.org/"
           target="_blank"
           class="i-carbon-document"
         />
         <a
-          href="https://github.com/Tresjs/playground"
+          href="https://github.com/Tresjs/lab"
           target="_blank"
-          class="i-logos-github-icon"
+          class="i-carbon-logo-github"
         />
       </ul>
     </div>

components/content/post-processing-manual/index.vue

@@ -121,10 +121,3 @@ const { hasFinishLoading } = await useProgress()
   </TresCanvas>
 </template>
 
-<style scoped>
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
-
-* {
-  font-family: 'Inter', sans-serif;
-}
-</style>

components/content/scroll-controls-demo/index.vue

@@ -1,16 +1,16 @@
-import { presetUno, presetIcons, presetTypography, presetWebFonts } from 'unocss'
+import { presetUno, presetIcons, presetTypography, presetWebFonts, transformerDirectives } from 'unocss'
 import svgLoader from 'vite-svg-loader'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   app: {
     head: {
-      title: 'TresJS Playground',
+      title: 'TresJS Lab',
       link: [
         {
           rel: 'icon',
           type: 'image/svg',
-          href: '/favicon.svg',
+          href: '/flask.svg',
         },
       ],
     },
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxt/devtools',
   ],
-  css: ['@unocss/reset/tailwind-compat.css', '@tresjs/leches/styles'],
+  css: ['/styles/main.css', '@unocss/reset/tailwind-compat.css', '@tresjs/leches/styles'],
   declare: ['*.glsl'],
   tres: {
     devtools: true,
@@ -67,7 +67,7 @@ export default defineNuxtConfig({
             'border-radius': '0.5rem',
           },
           code: {
-            'font-family': 'DM Mono',
+            'font-family': 'JetBrains Mono',
             'font-size': '0.875rem',
           },
           /*  code: {
@@ -88,16 +88,18 @@ export default defineNuxtConfig({
       }),
       presetWebFonts({
         fonts: {
-          sans: 'DM Sans',
-          serif: 'DM Serif Display',
-          mono: 'DM Mono',
+          sans: 'Inter',
+          mono: 'JetBrains Mono',
           title: 'Sacramento',
         },
       }),
     ],
     // core options
     shortcuts: [],
     rules: [],
+    transformers: [
+      transformerDirectives(),
+    ],
   },
   content: {
     highlight: {

nuxt.config.ts

@@ -21,20 +21,21 @@
     "@iconify-json/ic": "^1.1.17",
     "@iconify-json/logos": "^1.1.42",
     "@nuxt/content": "^2.10.0",
-    "@nuxt/image": "^1.1.0",
-    "@nuxt/image-edge": "1.1.0-28396365.97249ca",
+    "@nuxt/image": "^1.2.0",
+    "@nuxt/image-edge": "1.2.0-28417792.5fb7d0e",
+    "@nuxtjs/color-mode": "^3.3.2",
     "@tresjs/cientos": "3.7.0",
     "@tresjs/core": "3.6.0",
     "@tresjs/eslint-config-vue": "^0.2.1",
     "@tresjs/leches": "0.15.0-next.1",
     "@tresjs/nuxt": "2.0.1",
     "@tweakpane/plugin-essentials": "^0.2.1",
-    "@types/three": "^0.159.0",
-    "@unocss/nuxt": "^0.58.2",
+    "@types/three": "^0.160.0",
+    "@unocss/nuxt": "^0.58.3",
     "gsap": "^3.12.4",
-    "nuxt": "^3.9.0",
-    "nuxt-svgo": "^3.7.0",
-    "postprocessing": "^6.34.1",
+    "nuxt": "^3.9.1",
+    "nuxt-svgo": "^4.0.0",
+    "postprocessing": "6.34.1",
     "vite-svg-loader": "^5.1.0"
   }
 }

package.json

@@ -20,7 +20,7 @@ const { data: formattedExperiments } = await useAsyncData('/', () =>
 
 <template>
   <main>
-    <div class="w-full container mx-auto px-4 md:px-0 mb-60 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 pt-8">
+    <div class="w-full container mx-auto px-4 md:px-0 mb-60 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-16 pt-8">
       <TheCard
         v-for="experiment in formattedExperiments"
         :key="experiment._path"