feat: add sugar, links, css & content to /everything page

[blksnk]

Hello Gleam team !

While stumbling upon @lpil's stream this evening, I thought I could help out with some CSS and content for the tour.

Context

This PR is aimed at the single-page branch since I am not familiar enough with the language / codebase to finish the whole feature mentioned in #36 by myself.

This is my first time actually using the language for something other than learning purposes, so feel free to flood this PR with change requests 😄

Code / logic changes

• Rewrote a sizeable chunk of src/tour.gleam, focusing on the everything_html function
  • Edited lesson list rendering logic to include chapter names
• Edited static/common.css
  • Added new muted-indigo color, used as a dim background color for the dark theme
  • Darkened off-white a tiny bit to improve contrast with white
• Edited some rulesets in static/style.css
  • Changed --gap unit from px to rem for better responsiveness
  • Added --gap-<factor> variables (quarter, half, double)
  • Mapped --color-text-secondary for both light & dark themes
  • Rewrote most styles related to /everything page

UI / UX Changes

• Responsive (kinda for now)

  • Renders at various screen sizes

    
    
    

• Mobile table of contents

  • Tested in browser down to iPhone SE (320x667 px)

  • Screen recording on device (Pixel 7)

    screen-20240315-003829.2.mp4

• Double-scroll layout

  • side nav scrolls independently from main content

• More space between elements

• Chapter titles in between lessons

• Sticky chapter / lesson titles

• Revised styling

• Light / Dark mode support

• Side nav links work as expected

• Subtle separators between lessons / chapters

• Code previews now feature a Run button that links to the corresponding lesson's interactive tour page

Tested with

• Local environment, using gleam run + live-server

[lpil]

Thank you so much! I was worrying about how I was going to get this looking good.

I've left one note inline, but other than that I think it's perfect!

[blksnk]

I think I managed a similar look using some CSS wizardry 🧙🏼‍♂️
Let me know if this works for you

[lpil]

Could you revert the changes to the existing pages please? And remove the use of !important.

We could use the same code background colour and style as the website does today. What do you think? https://gleam.run/news/gleam-version-1/

[blksnk]

Are you referring to the changes made to navbar, and playground made to keep the original layout of the playground intact ?
I mainly need navbar to be fixed to the top for /everything's page layout to work as intended. I'll see if I manage to target & override its position only when on the appropriate page and get back to you.

!important rules will be deleted shortly, as they are not needed anymore 👍🏼

Agreed! I would be able to style the code block itself but I'd like to leave the code's syntax highlighting to you if possible.

[blksnk]

I tweaked, fixed, polished a few things and implemented your feedback.

I replicated the code blocks' style, though I'm not 100% convinced by how they look in light mode. What do you think?

In the meantime I managed to find a way to allow for the table of contents to be accessed on mobile!
I've included a screen recording in the original description at the cost of compression. Please try it out for yourself and let me know your thoughts.

Cheers

[ffigiel]

Hi, thanks for working on this!

I replicated the code blocks' style, though I'm not 100% convinced by how they look in light mode. What do you think?

Maybe you could copy the style from the docs website?

Although it looks a bit strange with such dramatic drop shadow in this case

[blksnk]

Thank you for the feedback ! I tried a bit harder and I think I made it work, using both of your ideas as inspiration.

I then got sidetracked with adding syntax highlighting for the code snippets (using highlight.js core) while preserving the current CodeFlask implementation and ended up overhauling most of the codebase 😖!

I'll stop myself from adding onto this already huge pull request and wait for your feedback. I think I definitely went too far, hopefully it still suits your needs !

[ffigiel]

Regarding syntax highlighting, I started to collect some thoughts in #59
I think we should think about that separately, as we don't seem to currently have a "preferred" code theme

[blksnk]

I agree. That's the reason I made the following changes:

• Re-implement Atom One Dark (and it's light variant) with original colors to increase legibility and allow for theme switching
• Allow for the color scheme to define the editor/snippet background color
• Move color scheme declaration & management to dedicated files
• Add support for any number of alternative color schemes through the use of normalized css variables, that map to HLJS & Code flask classes
• Allow for picking and choosing which files make it to each page (take a look at the render function in tour/pages/everything)

I personally am not too keen on Atom One Dark being the default and would like to replace it with something else (Catppuccin perhaps ?) but kept it for now as I did not want to drastically impact the editor's look in this PR

[lpil]

Thank you both! Once the note below is resolved let's merge this in and work out what we want to do with syntax highlighting etc later.

[blksnk]

@lpil Done ! I've kept the original widgets module separate. Did you need me to merge it as well ?

[blksnk]

Any news on when / if this can be merged ?

[lpil]

Wow! Absolutely incredible work! Thank you so much!

And terribly sorry that I took so long to review this. I appreciate your patience @blksnk !!

[lpil]

Oh! I've just noticed that you've added a bunch of non-brand colours. Please don't do that.