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,34 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  to: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :custom="true"
+  >
+    <a
+      :href="to"
+      :title="title"
+      class="i-carbon-logo-github w-6 h-6"
+    />
+  </NuxtLink>
+</template>
+
+<style scoped>
+a {
+  display: inline-block;
+  z-index: 10;
+}
+.dark a {
+  background-color: rgb(209, 213, 219);
+  text-shadow: rgb(34, 34, 34) 1px 0 10px;
+}
+
+.sepia a {
+  text-shadow: rgb(209, 213, 219) 1px 0 10px;
+  background-color: rgb(34, 34, 34);
+}
+</style>

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>
-```
-
-::
+::

content/experiments/brickelangelo-david.md

@@ -1,34 +1,8 @@
 ---
-thumbnail: /brickelangelo-david.png
-title: Brickelangelo David
-slug: brickelangelo-david
 author: alvarosabu
-status: published
 description: Lego ThreeJS Journey challenge
 tags: ['basic', 'cientos']
 ---
 
 ::brickelangelo-david
-::
-
-::the-info
-
-![David](/brickelangelo-david.png)
-
-# Brickelangelo David
-
-Author: [@**alvarosabu**](https://twitter.com/alvarosabu).
-
-> This is the submission for the ThreeJS Challenge #2 - Lego of [ThreeJS Journey](https://threejs-journey.xyz/) discord by [Bruno Simon](https://twitter.com/simongfx).
-
-Inspired by my recent trip to Florence, Italy, I decided to recreate Michelangelo's David sculpture using Lego bricks in a procedural way `MeshSurfaceSampler` and:
-
-![Modelling David Blender](https://res.cloudinary.com/alvarosaburido/image/upload/v1692638940/projects/modelling-david-blender_kzcqf3.png)
-
-A model "David - Michelangelo" (https://skfb.ly/6X6nQ) by Kefla is licensed under CC Attribution-NonCommercial-NoDerivs (http://creativecommons.org/licenses/by-nc-nd/4.0/).
-
-I modelled a lego block following Joey’s Carlino Tutorial “Lego anything with this NEW Blender geometry nodes feature”
-
-![Model Lego piece](https://res.cloudinary.com/alvarosaburido/image/upload/v1692638940/projects/lego-block-model-blender_ayytys.png)
-
-::
+::

content/experiments/cult-of-the-lamb.md

@@ -1,9 +1,6 @@
 ---
-thumbnail: /cult-of-the-lamb.png
 title: Cult of the lamb 🐑
-slug: cult-of-the-lamb
 author: alvarosabu
-status: published
 description: Best video game ever scene to showcase Postprocessing effects
 tags: ['fog', 'backdrop', 'unrealbloom', useGLTF]
 ---