docs: adopt a new theme: `shibuya` #3754

BoboTiG · 2024-01-30T17:44:56Z

What I did

Upgraded the documentation website to another level 🍾

It brings a few things:

Vyper code actually highlighted as Vyper code (and not Python)
JSON code actually highlighted as JSON code (and not JavaScript)
Set the proper code highlighter for shell commands
A copy icon on all code snippets to ease our lives
Use brand new logos 💇🏻 (check both light and dark theme: you will see the logo changing automagically 🪄)
A proper favicon 🥂
Remove custom CSS/JS code (cleaned up the config file too)
Remove unused Markdown parser (less dependencies)
Replace occurrences of vyper.readthedocs.io with docs.vyperlang.org
Fix the Read The Docs integration

Closes #3746.

How I did it

Updated the theme
Lots of stuff to fix minor issues here and there
Fixed the Read The docs integration (we lost the HTML download option, but that's a good compromise I would say)

How to verify it

Go check https://vyper-tests.readthedocs.io 😃

Commit message

docs: Adopt a new theme: Shibuya!

Description for the changelog

Migrated to the Shibuya theme for the documentation website.

Cute Animal Picture

socket-security · 2024-01-30T17:45:31Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
pypi/shibuya@2024.1.17	network Transitive: environment, eval, filesystem, shell, unsafe	`+186`	218 MB	lepture
pypi/sphinx-copybutton@0.5.2	environment, filesystem, network Transitive: eval, shell, unsafe	`+186`	218 MB	choldgraf, ebp-bot

🚮 Removed packages: pypi/recommonmark@0.7.1, pypi/recommonmark@0.7.1, pypi/sphinx-rtd-theme@2.0.0, pypi/sphinx-rtd-theme@2.0.0

View full report↗︎

BoboTiG · 2024-01-30T17:48:03Z

docs/conf.py

-# so a file named "default.css" will overwrite the builtin "default.css".
+html_theme = "shibuya"
+html_theme_options = {
+    "accent_color": "plum",


It is possible to use another color theme, see https://shibuya.lepture.com/customisation/colors/#accent-colors for available options.

I picked "plum" because it is the closer color to the new logo (and it actually renders very well).

I can test other colors, if you would like to.

Hello!

I just tried the colour palette from https://github.com/vyperlang/vyper-brand next to the radix palette you linked and I think Purple is the closest match, tonally:

The color was updated from "plum" to "purple", and changes are live at https://vyper-tests.readthedocs.io. Thank you @pentcle!

looks great, thank you @BoboTiG

codecov-commenter · 2024-01-30T18:08:15Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (768b3e9) 84.78% compared to head (9492246) 84.81%.
Report is 5 commits behind head on master.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3754      +/-   ##
==========================================
+ Coverage   84.78%   84.81%   +0.02%     
==========================================
  Files          92       92              
  Lines       13139    13122      -17     
  Branches     2929     2933       +4     
==========================================
- Hits        11140    11129      -11     
+ Misses       1535     1530       -5     
+ Partials      464      463       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

fubuloubu · 2024-01-30T22:46:11Z

How to verify it

Go check https://vyper-tests.readthedocs.io 😃

Not sure if it's just a config thing, but this test link is missing all of the older version docs + stable tag

BoboTiG · 2024-01-30T22:57:46Z

Not sure if it's just a config thing, but this test link is missing all of the older version docs + stable tag

It's a config thing, it runs only from the PR branch for the demo.

BoboTiG · 2024-01-30T23:06:25Z

I just checked, this new theme will be available only starting from the "latest" version. It won't automatically be backported to old versions. And old versions won't be lost, I just did not enable them in the test project.

Edit: I just enabled "master" to see how it looks.

charles-cooper · 2024-01-31T18:06:44Z

@BoboTiG please don't force push to PRs that are in the middle of being reviewed! it makes it very hard to keep track of changes.

charles-cooper · 2024-01-31T18:09:15Z

i think the only confusing thing about the new theme is that the "sub" navbar moves to the right hand side of the page.

BoboTiG · 2024-01-31T19:06:16Z

I'll see to restore the sub navbar on the left 👍🏻

- move the right one to the left - adapt the main container to use the full width

BoboTiG · 2024-02-04T22:40:30Z

How about now @charles-cooper?

charles-cooper · 2024-02-06T18:14:34Z

hmm @BoboTiG, if it costs us the ability to expand the submenus, let's move the navbar back to the right.

charles-cooper · 2024-02-06T18:14:50Z

can we also change the logo (on the top left) to the purple one?

BoboTiG · 2024-02-07T10:12:09Z

You were right: the colored logo on the top-left looks cooler 👍🏻

charles-cooper

cool. thanks!

charles-cooper · 2024-02-12T22:29:43Z

i'm realizing we need lower contrast. for the light mode, it would be nice to have some kind of grey/beige/off-white as the background

(paging @pentcle )

lepture · 2024-05-21T01:09:50Z

There are updates for shibuya theme. Your current documentation has a UI issue: you can scroll down bellow the footer part.

BoboTiG commented Jan 30, 2024

View reviewed changes

BoboTiG mentioned this pull request Jan 30, 2024

docs: Adopt a new theme? #3746

Closed

BoboTiG force-pushed the feat-new-doc-theme branch from 9b24e0b to ab1395c Compare January 30, 2024 21:45

docs: Adopt a new theme: Shibuya!

54265a5

BoboTiG force-pushed the feat-new-doc-theme branch from ab1395c to 54265a5 Compare January 30, 2024 23:18

BoboTiG added 2 commits February 4, 2024 23:26

Review navbars

6ddbbab

- move the right one to the left - adapt the main container to use the full width

Proper left navbar

176495b

tweaks

60430d5

restore navbars + use the colored logo everywhere

9492246

charles-cooper approved these changes Feb 12, 2024

View reviewed changes

charles-cooper merged commit a2eb60c into vyperlang:master Feb 12, 2024
84 checks passed

charles-cooper changed the title ~~docs: Adopt a new theme: Shibuya!~~ docs: adopt a new theme: shibuya Feb 12, 2024

BoboTiG deleted the feat-new-doc-theme branch February 13, 2024 07:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: adopt a new theme: `shibuya` #3754

docs: adopt a new theme: `shibuya` #3754

BoboTiG commented Jan 30, 2024 •

edited

Loading

socket-security bot commented Jan 30, 2024 •

edited

Loading

BoboTiG Jan 30, 2024 •

edited

Loading

pentcle Jan 30, 2024 •

edited

Loading

BoboTiG Jan 30, 2024 •

edited

Loading

pentcle Jan 30, 2024

codecov-commenter commented Jan 30, 2024 •

edited

Loading

fubuloubu commented Jan 30, 2024

How to verify it

BoboTiG commented Jan 30, 2024 •

edited

Loading

BoboTiG commented Jan 30, 2024 •

edited

Loading

charles-cooper commented Jan 31, 2024

charles-cooper commented Jan 31, 2024

BoboTiG commented Jan 31, 2024

BoboTiG commented Feb 4, 2024 •

edited

Loading

charles-cooper commented Feb 6, 2024

charles-cooper commented Feb 6, 2024

BoboTiG commented Feb 7, 2024

charles-cooper left a comment

charles-cooper commented Feb 12, 2024

lepture commented May 21, 2024

docs: adopt a new theme: shibuya #3754

docs: adopt a new theme: shibuya #3754

Conversation

BoboTiG commented Jan 30, 2024 • edited Loading

What I did

How I did it

How to verify it

Commit message

Description for the changelog

Cute Animal Picture

socket-security bot commented Jan 30, 2024 • edited Loading

BoboTiG Jan 30, 2024 • edited Loading

Choose a reason for hiding this comment

pentcle Jan 30, 2024 • edited Loading

Choose a reason for hiding this comment

BoboTiG Jan 30, 2024 • edited Loading

Choose a reason for hiding this comment

pentcle Jan 30, 2024

Choose a reason for hiding this comment

codecov-commenter commented Jan 30, 2024 • edited Loading

Codecov Report

fubuloubu commented Jan 30, 2024

How to verify it

BoboTiG commented Jan 30, 2024 • edited Loading

BoboTiG commented Jan 30, 2024 • edited Loading

charles-cooper commented Jan 31, 2024

charles-cooper commented Jan 31, 2024

BoboTiG commented Jan 31, 2024

BoboTiG commented Feb 4, 2024 • edited Loading

charles-cooper commented Feb 6, 2024

charles-cooper commented Feb 6, 2024

BoboTiG commented Feb 7, 2024

charles-cooper left a comment

Choose a reason for hiding this comment

charles-cooper commented Feb 12, 2024

lepture commented May 21, 2024

docs: adopt a new theme: `shibuya` #3754

docs: adopt a new theme: `shibuya` #3754

BoboTiG commented Jan 30, 2024 •

edited

Loading

socket-security bot commented Jan 30, 2024 •

edited

Loading

BoboTiG Jan 30, 2024 •

edited

Loading

pentcle Jan 30, 2024 •

edited

Loading

BoboTiG Jan 30, 2024 •

edited

Loading

codecov-commenter commented Jan 30, 2024 •

edited

Loading

BoboTiG commented Jan 30, 2024 •

edited

Loading

BoboTiG commented Jan 30, 2024 •

edited

Loading

BoboTiG commented Feb 4, 2024 •

edited

Loading