search

gleam-lang / language-tour

👩🏽‍💻 Learn Gleam in your browser
https://tour.gleam.run/
74 stars 55 forks source link

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

Closed blksnk closed 4 months ago

blksnk commented 4 months ago

image

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

UI / UX Changes

Tested with

blksnk commented 4 months ago

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

blksnk commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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? image

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

blksnk commented 4 months ago

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 commented 4 months ago

Regarding syntax highlighting, I started to collect some thoughts in https://github.com/gleam-lang/language-tour/issues/59 I think we should think about that separately, as we don't seem to currently have a "preferred" code theme

blksnk commented 4 months ago

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

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

blksnk commented 4 months ago

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

blksnk commented 4 months ago

Any news on when / if this can be merged ?

lpil commented 4 months ago

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