chore: improve frontpage visuals, frontmatter dx (#112)

* chore: remove code examples

#90

* chore: resize thumbnails to 16 x 9, add README instructions

#111

* chore: add Github links

* refactor(frontmatter): generate default values, default to published

* fix: fill in white bottom margin in dark mode

* oops

* chore(frontmatter): change unpublished to draft

* chore: add Github button to demos

* fix: remove nuxtLink from TheCodeButton

Author: andretchen0

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>