chore: improve frontpage visuals, frontmatter dx

[andretchen0]

This PR contains various chores and quality-of-life improvements related to the Lab's landing page. They're largely in separate commits, so no problem rolling back all or some changes.

Problem

Thumbnails had various sizes. #111

Solution

Make all thumbnails 16:9.

@JaimeTorrealba , have a look at the glass demo thumbnail. I couldn't retake it because the texture in the demo is very light on my screen. Feel free to push a new thumbnail to this PR, if you like.

Problem

Some demos had code examples in their .md files. Others did not. #90

Solution

• Remove code examples.
• Add a Github link to cards.

NOTE:

• Some demos had to be renamed slightly for the system to be able to match up e.g., components/content/glass-example to content/experiements/glass-material.md in order to make the Github links.
• Github links are broken until files are merged – including those that had to be renamed – otherwise there aren't files to link to! :)

And since we are deriving Github links from demo names ...

Problem

.md frontmatter contained some fields that could be derived. E.g., from the path to content/experiments/my-awesome-demo we can derive:

• title: My Awesome Demo
• thumbnail: my-awesome-demo.png
• slug: my-awesome-demo

Solution

• Allow users to specify these, but try to derive them if not provided.
• Remove the derivable fields from the .md files.

Problem

status: published tripped me up a few times

Solution

• Continue to accept status: published, but if no status is set, assume published.
• Add status: unpublished to the 'hidden' demos' .md files.

Problem

Whitespace at the bottom of the screen in dark mode:

Solution

Fix the CSS. (Swap margin for padding.)

---

Closes #111, #90

[alvarosabu]

Thanks for this 🙏🏻 it looks way better.

I think we should fix the CSS of the labels to avoid breaking newline.

[alvarosabu]

@andretchen0 I think we should add also a Fab button to the single pages so the user can access directly the code similar of what threejs examples does

[andretchen0]

Hey @alvarosabu ,

I'll look into adding the code button to individual demos and push here.

Yeah, labels need some attention. I'll tackle those in a separate PR.

[andretchen0]

@andretchen0 I think we should add also a Fab button to the single pages so the user can access directly the code similar of what threejs examples does

I've added buttons to the demos.

It looks a bit unorganized in some of the demos as they add their own UI elements with different spacing/offsets.

[andretchen0]

Hey @JaimeTorrealba @alvarosabu ,

Bumping. Can we merge here? I think this takes care of all of @alvarosabu 's modification requests, but the PR hasn't been approved.

There's another lab demo in the works – #110 – and I'd like to get the updated lab online so we can spare ourselves the work of cropping thumbnails, etc.

Thanks!

[alvarosabu]

Hey @andretchen0 I saw the new changes, they look good but there is something odd with the navigation and the github button.

For some reason if you enter an experiment from the index.vue and you click the github button, it takes you to the upper directory, while if you refresh the experiment page and click the github cta it goes to the expected github link

Try changing the Nuxt link for a normal anchor, sometimes NuxtLink does weird stuff when going to external links

Screen.Recording.2024-04-16.at.15.07.46.mov

[andretchen0]

Thanks @alvarosabu for the pointer. I'll check it out.

[alvarosabu]

@andretchen0 should we merge this one and you check the routing issue in another or we just wait?

[andretchen0]

Hey @alvarosabu ,

I've removed the NuxtLink on the code buttons. They're just normal <a>s now.

I wasn't able to reproduce the bug. Maybe something to do with how I'm running the dev site?

Are you able to reproduce the bug now? If so, any other ideas?

Fwiw, feel free to push to this branch if that helps us get to a merge.

[andretchen0]

Hey @alvarosabu , bumping. Could you have a look and tell me if we can merge and close here?

Thanks!