Overhaul visual design

[brson]

The current design is basically the result of a single pass back when there were only a few examples, and clearly isn't scalable. It needs a complete rethink. Some requirements

• Should be searchable my crate
• Should be searchable by topic
• CTL-F should probably work for crate names, where today they are graphic badges
• Continuing to use mdbook is preferable
• Should be a static site

Also see this issue about search and navigation for more thoughts about that subject.

[Phaiax]

You mean static site from the server side or from the client site (no javascript required/preferred)?

[budziq]

The site is generated via mdbook into a set of static html/js/css files served via github gh-pages without any backend (probably not requiring a backend would be the nicest aspect of the project to maintain).

And 99% of the styling and js comes directly from mdbook (with some additional features and fixes around the corner with upcoming mdbook 0.1.0)

Most likely we will be sticking with mdbook for now unless a better alternative comes into view.
The idea here is to solicit help from people with UX / webdev experience as current presentation is both rough and not really that user friendly. Not having any UX and webdev guys on board is currently the biggest cookbook problem.

Some ideas might be implemented directly in mdbook as we are on good terms with that project (I'm comaintainig it) and rest would be easily implemented in cookbook.

For instance in mdbook we were thinking about utilizing https://lunrjs.com for search.

[Phaiax]

One step towards Ctrl+F compatability of crate names could be to use <crate>regex</crate> instead of the definition with [![rand-badge]][rand]. Some javascript could get the version info by using the json API and replace the <crate> tag by some css that renders into a badge. The badge would look almost the same but with selectable text.

[budziq]

nice idea. on the other hand shields.io and our cache supports json output which contains the version number so js might process it in one go

[Phaiax]

which cache? the browser cache?

[budziq]

which cache? the browser cache?

https://badge-cache.kominick.com

we use caching proxy for shields.io due to its historic bad performance

[jaroslaw-weber]

I think we could split those long files into smaller ones with one example per file. If mdbooks supports subcategories with folders it would be easily maintainable (one folder one category, multiple files per category) I haven't worked with mdbooks but if we could do that we could make expendable menu, when clicking on category, with some js magic. Maybe not best solution but better than endless scrolling we have now. Something like rust book menu but expanding and hiding when clicking on category.
Also I think we could try different template for main page to make it nicer.

[jaroslaw-weber]

copypasted from chat discussion:

current ui/ux could be little more polished. personally i dont like the grey table header. also I think homepage could be little smaller ( show only titles and expand/move to category page on click) so we can see all the categories when we start a page. I would also move an contribution part to the bottom, and write very simple and short explanation what is the cookbook. https://repl.it/languages <- this looks much cleaner. I would also suggest go with something like bulma which is lightweight enough but helps with styling a lot. I could make an example UI if you are interested and we could vote/discuss it.

[jaroslaw-weber]

Brainstorming design, playing with different ideas. Ignore weird cyan color, it would be replaced with rusty color.
https://photos.app.goo.gl/NwLDD8jmsRV35k432

Edit: How about changing from mdbook to static site generator?
Something like this:
https://github.com/cobalt-org/cobalt.rs