chore: improve frontpage visuals, frontmatter dx

README.md

@@ -86,15 +86,14 @@ Every demo or experiment consist on two parts
 - A vue component containing the scene under `components/content`
 
 1. Create a `your-awesome-demo.md` file under `content/experiments` directory.
-2. Add [Frontmatter](https://content.nuxtjs.org/guide/writing/markdown#front-matter) to provide the meta-data of your experiment, this is crucial to get the cards on the home page nice and pretty. Remember to add the `slug` of your `author` to the correspondant field. Be sure to add `status: published`, otherwise the thumbnail won't show up during your tests.
+2. Add [Frontmatter](https://content.nuxtjs.org/guide/writing/markdown#front-matter) to provide the meta-data of your experiment, this is crucial to get the cards on the home page nice and pretty. Remember to add the `slug` of your `author` to the correspondant field.
 
 ```md
 ---
 thumbnail: /lowpoly-planet.png
 title: Low Poly Planet
 slug: lowpoly-planet
 author: alvarosabu
-status: published
 description: Low Poly Planet exported from Blender
 tags: ['basic', 'cientos', 'useGLTF', 'blender']
 ---
@@ -117,7 +116,6 @@ thumbnail: /lowpoly-planet.png
 title: Low Poly Planet
 slug: lowpoly-planet
 author: alvarosabu
-status: published
 description: Low Poly Planet exported from Blender
 tags: ['basic', 'cientos', 'useGLTF', 'blender']
 ---
@@ -127,6 +125,12 @@ tags: ['basic', 'cientos', 'useGLTF', 'blender']
 
 5. Take a screenshot of your scene ot the `public` directory.
 
+### Broken Github demo links
+
+Note that the system will automatically add a link to your demo's source code on Github, so that visitors can see how you made your demo. 
+
+The link will be broken until your demo is merged into the main Lab branch.
+
 ## License
 
 [MIT](/LICENSE)

components/TheCard.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import TheCodeButton from './TheCodeButton.vue'
+
 defineProps<{
   title: string
   path: string
+  repoTitle: string
+  repoPath: string
   media: string
   description: string
   author: {
@@ -13,16 +17,25 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :to="path">
+  <div class="relative">
+    <NuxtLink :to="path">
+      <div class="absolute h-full w-full" />
+    </NuxtLink>
     <div class="shadow-lg rounded-lg overflow-hidden">
       <img
         class="aspect-video object-cover"
         :src="media"
       >
       <div class="p-4">
-        <h2 class="font-bold text-lg mb-2">
-          {{ title }}
-        </h2>
+        <div class="flex gap-2 mb-2">
+          <h2 class="grow font-bold text-lg">
+            {{ title }}
+          </h2>
+          <TheCodeButton
+            :to="repoPath"
+            :title="repoTitle"
+          />
+        </div>
         <p class="text-sm text-gray-400 mb-2 min-h-75px">
           {{ description }}
         </p>
@@ -46,5 +59,5 @@ defineProps<{
         </div>
       </footer>
     </div>
-  </NuxtLink>
+  </div>
 </template>

components/TheCodeButton.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  to: string
+}>()
+</script>
+
+<template>
+  <span class="rounded-full border-3">
+    <a
+      :href="to"
+      :title="title"
+      class="i-carbon-logo-github w-6 h-6"
+    />
+  </span>
+</template>
+
+<style scoped>
+.dark span {
+  background-color: rgb(34, 34, 34);
+  border-color: rgb(34, 34, 34);
+}
+
+.dark a {
+  background-color: rgb(209, 213, 219);
+  text-shadow: rgb(34, 34, 34) 1px 0 10px;
+}
+
+span, .sepia span {
+  background-color: #FFF;
+  border-color: #FFF;
+}
+
+a, .sepia a {
+  background-color: rgb(75, 85, 99);
+  text-shadow: rgb(209, 213, 219) 1px 0 10px;
+}
+</style>

components/content/synthwave/components/musicPlayer.vue → components/content/synthwave-landscape/components/musicPlayer.vue

@@ -27,10 +27,11 @@ function nextLetter() {
   }
 }
 
-watch(playing, p => {
+watch(playing, (p) => {
   if (p) {
     attributionLengthTarget = attribution.length
-  } else {
+  }
+  else {
     attributionLengthTarget = 0
   }
   nextLetter()
@@ -39,7 +40,13 @@ watch(playing, p => {
 
 <template>
   <div :class="`music-player ${typing ? 'typing' : ''}`">
-    <div @keypress="onClick" @click="onClick" class="music-player-button" tabindex="0" role="button">
+    <div
+      class="music-player-button"
+      tabindex="0"
+      role="button"
+      @keypress="onClick"
+      @click="onClick"
+    >
       <svg
         v-if="playing"
         xmlns="http://www.w3.org/2000/svg"
@@ -84,6 +91,7 @@ watch(playing, p => {
     <a href="https://freesound.org/people/vlad.zaichyk/sounds/495329/">{{ attributionDisplay }}</a>
   </div>
 </template>
+
 <style scoped>
 .music-player {
   display: flex;
@@ -94,8 +102,7 @@ watch(playing, p => {
   right: 0;
   bottom: 0;
   z-index: 10;
-  margin: 12px;
-  margin-right: 0;
+  margin: 12px 0 96px;
   padding-right: 12px;
   border: 1px solid #fff;
   border-right: 0;

components/content/synthwave/components/postprocessing.vue → components/content/synthwave-landscape/components/postprocessing.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { WebGLRenderer, Camera, Scene } from 'three'
+import type { WebGLRenderer, Scene } from 'three'
+import { Camera } from 'three'
 import { BloomEffect, ScanlineEffect, EffectComposer, RenderPass, EffectPass } from 'postprocessing'
 import { useWindowSize } from '@vueuse/core'
+
 let effectComposer: EffectComposer
 
 function setup(renderer: WebGLRenderer, scene: Scene, camera: Camera) {

content/experiments/array-cameras.md

@@ -1,184 +1,9 @@
 ---
-thumbnail: /array-cameras.png
 title: Array of cameras
-slug: array-cameras
 author: jaime-bboyjt
-status: published
 description: An advance technique using ArrayCamera with a model animation
 tags: ['array-camera', 'useGltf', 'useRenderLoop', 'useProgress']
 ---
 
 ::array-cameras
-::
-
-::the-info
-
-![array-cameras](/array-cameras.png)
-
-# Array Camera
-
-Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt).
-
-> This is an advance example of how to use array of cameras with TresJS.
-
-```vue
-// App.vue
-<script setup>
-import { computed } from 'vue'
-import { TresCanvas } from '@tresjs/core'
-import { useProgress } from '@tresjs/cientos'
-import { PerspectiveCamera, Vector4, Vector3 } from 'three'
-import { useWindowSize } from '@vueuse/core'
-
-const { width, height } = useWindowSize()
-const WIDTH = (width.value / 4) * window.devicePixelRatio
-const HEIGHT = (height.value / 4) * window.devicePixelRatio
-const ASPECT_RATIO = computed(() => width.value / height.value)
-
-const cameras = []
-
-const cameraOptions = [
-  {
-    viewPort: new Vector4(Math.floor(0), Math.floor(0), Math.ceil(WIDTH * 2), Math.ceil(HEIGHT * 2)),
-    position: new Vector3(15, 0, 3),
-    factor: 0.4,
-    name: 'left_bottom',
-  },
-  {
-    viewPort: new Vector4(Math.floor(WIDTH), Math.floor(0), Math.ceil(WIDTH * 2), Math.ceil(HEIGHT * 2)),
-    position: new Vector3(0, 0, -3),
-    factor: 2,
-    name: 'center_bottom',
-  },
-  {
-    viewPort: new Vector4(Math.floor(WIDTH * 2), Math.floor(0), Math.ceil(WIDTH * 2), Math.ceil(HEIGHT * 2)),
-    position: new Vector3(-15, 0, 3),
-    factor: 0.4,
-    name: 'right_bottom',
-  },
-  {
-    viewPort: new Vector4(Math.floor(WIDTH - 75), Math.floor(HEIGHT), Math.ceil(WIDTH * 2.5), Math.ceil(HEIGHT * 2.5)),
-    position: new Vector3(0, 0, 3),
-    factor: 2,
-    name: 'center_top',
-  },
-]
-
-cameraOptions.forEach((data) => {
-  const currentCam = new PerspectiveCamera(40, ASPECT_RATIO.value, 0.1, 10)
-  currentCam.name = data.name
-  currentCam.viewport = data.viewPort
-  currentCam.position.set(...data.position)
-  currentCam.position.multiplyScalar(data.factor)
-  currentCam.lookAt(0, 0, 0)
-  currentCam.updateMatrixWorld()
-  cameras.push(currentCam)
-})
-
-const { hasFinishLoading, progress, items } = await useProgress()
-</script>
-
-<template>
-  <Transition
-    name="fade-overlay"
-    enter-active-class="opacity-1 transition-opacity duration-200"
-    leave-active-class="opacity-0 transition-opacity duration-200"
-  >
-    <div
-      v-show="!hasFinishLoading"
-      class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
-    >
-      <div class="w-200px">
-        Loading... {{ progress }} %
-      </div>
-    </div>
-  </Transition>
-  <TresCanvas
-    window-size
-    clear-color="#82DBC5"
-    class="over-hidden"
-  >
-    <TresArrayCamera
-      :args="[cameras]"
-      :position="[0, 2, 5]"
-    />
-    <Suspense>
-      <model />
-    </Suspense>
-    <TresAmbientLight
-      :color="0xffffff"
-      :intensity="1"
-    />
-    <TresSpotLight
-      :color="0xffffff"
-      :intensity="100"
-      :position="[0, 0, 5]"
-    />
-    <TresDirectionalLight
-      :color="0xffffff"
-      :intensity="5"
-    />
-    <TresHemisphereLight />
-  </TresCanvas>
-</template>
-```
-
-```vue
-// model.vue
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { useAnimations, useGLTF, useTweakPane } from '@tresjs/cientos'
-
-const { scene: model, animations } = await useGLTF(
-  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/warcraft-3-alliance-footmanfanmade/source/Footman_RIG.glb',
-)
-console.log('jaime ~ model:', model)
-const { actions, mixer } = useAnimations(animations, model)
-
-let currentAction = actions.Idle
-
-currentAction.play()
-
-const { pane } = useTweakPane()
-
-const animationList = pane.addBlade({
-  view: 'list',
-  label: 'Animations',
-  options: [
-    { text: 'Idle', value: 'Idle' },
-    { text: 'SwordAndShieldCrouchBlockIdle', value: 'SwordAndShieldCrouchBlockIdle' },
-    { text: 'SwordAndShieldDeath_2', value: 'SwordAndShieldDeath_2' },
-    { text: 'SwordAndShieldIdle', value: 'SwordAndShieldIdle' },
-    { text: 'SwordAndShieldKick', value: 'SwordAndShieldKick' },
-    { text: 'SwordAndShieldRun(back)', value: 'SwordAndShieldRun(back)' },
-    { text: 'SwordAndShieldRun', value: 'SwordAndShieldRun' },
-    { text: 'SwordAndShieldSlash_2', value: 'SwordAndShieldSlash_2' },
-    { text: 'SwordAndShieldSlash', value: 'SwordAndShieldSlash' },
-    { text: 'T-Pose', value: 'T-Pose' },
-  ],
-  value: 'Idle',
-})
-
-animationList.on('change', (value) => {
-  currentAction.stop()
-  currentAction = actions[value.value]
-  currentAction.play()
-})
-
-const { onLoop } = useRenderLoop()
-
-onLoop(() => {
-  if (mixer) {
-    mixer.update(0.01)
-  }
-})
-</script>
-
-<template>
-  <Suspense>
-    <primitive :object="model" />
-  </Suspense>
-</template>
-```
-
-::
+::