Skip to content

Restyle examples and add button to show code on all examples#968

Merged
FabioRosado merged 6 commits into
pyscript:mainfrom
FabioRosado:fr/styling-examples
Nov 22, 2022
Merged

Restyle examples and add button to show code on all examples#968
FabioRosado merged 6 commits into
pyscript:mainfrom
FabioRosado:fr/styling-examples

Conversation

@FabioRosado

@FabioRosado FabioRosado commented Nov 21, 2022

Copy link
Copy Markdown
Contributor

This PR restyles the examples to match pyscript.net, this is how the main page looks like:

Screenshot 2022-11-21 at 16 38 58

It also adds a section and a button that allows users to click and see the code in use

Clip

In order to get this working I had to do the following:

  • Use prismjs for code highlighting
  • Create a custom css file specific to the examples

Finally, I stole the navbar from Kmeans and other examples and reused on each example 😄

There's a lot of examples that aren't included in the example page (should they?) so I haven't styled them

@antocuni antocuni left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow, I love it 😍
I didn't do a proper review because I'm not well versed enough in HTML/CSS to do a meaningful review, but I'm approving it in case you want to proceed with the merge.
If you like to have a "proper" review, please ask someone (not me 😅)

@FabioRosado

Copy link
Copy Markdown
Contributor Author

Thank you, just pushed a small tweak to css to make the button work on small screens 😄

@FabioRosado FabioRosado merged commit a628026 into pyscript:main Nov 22, 2022
@FabioRosado FabioRosado deleted the fr/styling-examples branch November 22, 2022 15:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants