Redesign coffeescript.org?

[GeoffreyBooth]

Migrating from coffeescript6/discuss#53

Version 2.0.0-alpha1 of CoffeeScript is coming soon, and we’d like to modernize the design of coffeescript.org for the v2 docs. Any designers out there who would like to help with this?

General criteria:

• The content isn’t changing. What you see on coffeescript.org now is the same content we want to present on v2, plus a prominent note about v1 vs v2 which we’ll write soon. If someone wants to add new content, like a tutorial, that would be a separate effort.
• We want to keep it as mostly a single page, so that ctrl/cmd-F quickly finds whatever you’re looking for.
• It must be responsive. We want to keep the left-right side-by-side code examples, which would stack on mobile.
• Since the general design is one long page, I’d like something like Bootstrap’s sidebar nav that has the entire outline and shows you where you are.

Update: The work-in-progress CS2 docs have been merged into 2 branch, and can be viewed here: https://rawgit.com/jashkenas/coffeescript/2/docs/v2/

Please take this as your starting point, and submit pull requests against 2 based on this code. Note that you should only be editing files in documentation; the docs folder is for generated output only (similar to how src compiles into lib).

[jashkenas]

That all sounds perfect.

[GeoffreyBooth]

Some inspiration: https://github.com/PharkMillups/beautiful-docs

[danielbayley]

I'd love to work on this… I wonder if it would be worth splitting coffeescript.org into it's own repo and moving to a CoffeeScript oraganisation?

[jashkenas]

I'd love to work on this… I wonder if it would be worth splitting coffeescript.org into it's own repo and moving to a CoffeeScript oraganisation?

Nope! Changes to the docs are often made in sync with new features being added to the compiler.

[GeoffreyBooth]

What would be screwed up by moving the main repo into the coffeescript organization?

[jashkenas]

What would be screwed up by moving the main repo into the coffeescript organization?

Nothing at all.

[danielbayley]

What about a refresh of the logo/script font to reflect the new modern changes?

[Asc2011]

• pls, make sure to keep the docs on one html-page - so that making a doc-package for Dash/Velocity/Zeal-Docviewer stays as easy as it is today.
• the 'Try Coffeescript'-overlay is still a superb visual-concept for testing little things. I'd like a selector for the CS-compiler-version(s) one wants to use. Maybe one selector per branch 1.xx.x and 2.x.x.
• activate the code-completion, code-coloring of the editor-pane.
• a checkbox if one wants to transp./babelize the CS-output - for the buzz :)
• the right-panel, showing the resulting JS, could get a button to show the AST in the same panel.

Actually i'm working on smth. related.

[GeoffreyBooth]

@Asc2011 The v1 and v2 docs will be separate pages/sites. Our goal is just to teach people how to use CoffeeScript, not how CoffeeScript works; the latter is covered by the wiki of this repo, or sites like https://astexplorer.net.

[Asc2011]

@GeoffreyBooth In the spirit of 'interactive code writing' and 'living documents' i believe its a nice idea to have the docs and a panel to test code side-by-side.
Forget about the AST... which is not on astexplorer.net, too.

[artialex]

Would like to share some thoughts and html mock-up
I really love Laravel website, it always makes me want to learn PHP, so it was my inspiration.
Key points I tried to implement:

• It should be clear at the first glance what is the website about
• Features block, where some important info could be put
• Documentation identical to the old website

So in general what do you think, is that good for start point?
If interested, I took some code examples from here and from atom repo

debug version here : http://codepen.io/lazypacman/pen/yVoQXY

[GeoffreyBooth]

I really like the Laravel docs too. Can we make ours look a bit more like theirs? The pink and brown and yellow feels a bit much to me personally. I suppose if we want to go with the “coffee” theme we should be shades of brown, maybe highlight with dark green . . .

My big request is that we get a scrollspy sidebar like this.

[tyrollins]

Are you looking to have it built with a static site generator - Jekyll, Middleman, etc... - or a specific pre-processor - haml, Sass, Less, jade, etc... - or is basic html / css fine? Additionally, any opinion on libraries such as bootstrap / bourbon, or are we trying to keep it library free as much as possible?

[GeoffreyBooth]

It's just a single page: https://github.com/jashkenas/coffeescript/blob/master/documentation/index.html

There's some preprocessing happening to insert the code blocks, but that's it. I'd prefer not to add a CSS preprocessor into the mix unless our styling gets much more complicated than it is now. Our target browsers for CS2 are evergreen.

I was thinking of adding the Bootstrap JS at least, to enable the scrollspy; adding its CSS too would be fine I think. I would load both via CDN.