Homepage redesign

[florianbader]

Description

This PR changes the design and layout of the current FAKE homepage. The idea was to make it simpler and more beginner friendly.

I added some of the changes as GIFs, so you don't have to build to take a look at it.

The new index page is missing most of the clutter from the current website and is now focused on the current version of FAKE and also has some samples for new users.
The new navigation is fixed to the top and the height was reduced to a minimum. The left side of the navigation features all important topics of the current version of FAKE while the right side is for API references and everything regarding FAKE 4. It also includes the social media links, so visitors can jump to them quickly.

For the tutorials and API references the pages now include a table of content side navigation which is generated on the fly. This makes it more easy jump to where you want to go.

If you miss some of the FAKE 4 alerts in the FAKE 5 documentation, I also got rid of them, because who cares about FAKE 4.

The website is still mobile-friendly (except for the API pages maybe, but they were broken on the current site too).

Additionally to the clutter I got rid of on the homepage, I also removed lots of code and files which were no longer needed and which should make it easier to maintain.

I also created a new FAKE logo, which is used as the brand icon in the navigation. Tell me what you think about it.

As for the frameworks behind the new design: It now uses Bulma as CSS framework and it uses Prism for the code formatting on the index page.

This PR addresses the issues mentioned in #2040.

TODO

The new website uses some custom JavaScript and CSS which is not minified yet and also uses CSS instead of SASS. It works for now but in the future, we might want to add something for this to the build file.

[matthid]

Thanks a lot, I owe you a drink ;). You are

@forki Any objections to changing the icon to

Lets see how it looks on staging :)

[matthid]

Another question is whether we need some "quick" guide for the samples on the start page or tell people what to do with them (ie execute fake run script.fsx)?

[florianbader]

Another question is whether we need some "quick" guide for the samples on the start page or tell people what to do with them (ie execute fake run script.fsx)?

I don't think we need to do that. If the user really wants to get started, there is a big getting started button. The samples are just to give the user a feeling on how FAKE looks like and how easy it is.

[kblohm]

Looks very nice!
I found two small bugs though:

• the modules menu-entry is not working for me in firefox. The sub-menues are not showing. So it is just one large list that is way too long for one screen. In chrome everything is working as expected.
• the copy button is not properly aligned for me and it is not showing at all for the F# snippets generated with FSFormatting. You could probably just re-add clipboardTooltip.js and that should work again.

[matthid]

Ok can either of you send another pr on release/next? I might eventually but I think that's better than reverting and we can test on staging.fake.build until we are ready.

The only downside is that I cannot (easily) release until we are ready :)

And I noticed one minor thing as well: some code boxes are properly sized on mobile and some are not

[matthid]

(regarding the boxes: it's not a blocker because I think it is better than today actually ;))

[kblohm]

I just looked at the new site here at my working computer and everything is fine even in firefox. I can not reproduce the problem here, so that was maybe just some strange edge case.

[matthid]

Is it by design that these are no longer links?

[matthid]

If put inside <a> The icons will look blue and become black on hover

[matthid]

Oh:

Works in chrome but not in firefox?

[BlythMeister]

Mobile looks really quite odd...

Default mobile resolution includes horizontal scroll, when zoom out to fit main content, the banners top and bottom are too narrow.

Also, when menu expands it doesn't fill screen, so you end up with 2 scrollable windows...

I tried to capture in a video, but can't seem to upload it..

[matthid]

Ok I think I found the issue with the code-block alignment, removed some stuff

[florianbader]

Mobile looks really quite odd...

PrismJS and containers with margins don't work well together. I added a workaround for mobile devices.

@matthid Can you give me permission to push to the website_updates branch so I can add my fixes or should I create a new pull request to that branch?

[matthid]

@florianbader Please feel free to just send a PR to release/next and include changes of my branch if they are reasonable. I'm currently trying to change everything to prism and to remove the "language-fsharp" special-case as I feel like the prism boxes of the start-page look better than all the other stuff we have (and now I think I understand what you meant...). However, that turned out to be a bit tricky and requires some changes outside this repository.

Looking at the clock I might have to continue tomorrow ;)

From a bit of debugging it seems like we can remove everything in style.css above the Formatting for F# code snippets line. This fixes the issue reported by @BlythMeister as well. However a similar issue exists in the reference documentation and I haven't figured out the reason (but I feel like the tables and long unbreakable texts are to blame)