New features, new sections, better semantic html and footer

[danilovaz]

Added an animated text in the header and a button for scroll to content. I separated the site of subjects in Sections to improve semantics, added 2 Sections: "How to use Gulp" and "This guys use Gulp". Also added a footer.

Preview:

[danilovaz]

@gulpjs @sindresorhus @contra

[phated]

cool!

[yocontra]

Lots of grammar and formatting fixes needed

[danilovaz]

Thanks @phated I will fix this text.

@contra Sorry, my English is not the best. Then I'll need a little help in this. If possible, could show me what needs to be fix? Thanks, I appreciate if this pull request comes to add to the project.

[yocontra]

@danilovaz Yeah I will take a look through it when i have some time.

@heikki Got a minute to help?

[danilovaz]

Okay @contra , thank you.

[heikki]

@contra traveling right now, can take a look in a day or two.

[heikki]

Hmm.. a week or two would've been more accurate. First things:

• needs rebase
• index.html indentation is inconsistent, use two spaces & follow the original style

--edit just noticed the original style was inconsistent

[tkellen]

these people use gulp, please.

[tkellen]

n/m, just saw @phated's comment, ignore me.

[yocontra]

Not sure I like the arrow being split between the header and content - it should be much smaller and solely within the header

[leo]

Looks like this PR is broken with the latest dependencies. Although it's a great inspiration for the next major improvement on this site, I don't think it's a great idea to resolve the conflicts and merge it. Not only because it's broken now, but also because I think that the PR would need a big revamp in terms of design and structure.

Since some other people complained about the current state of the site, too, I will probably add a better explanation of what Gulp actually is and a short quick start guide to the it (like this PR has it) in the next few weeks.

@danilovaz Thank you for your hard work!

---

If someone of the participants thinks differently about this, feel free to re-open it.

[yocontra]

@leo just to let you know, we are planning on switching to readme.io soon (http://gulp.readme.io) for documentation

[leo]

@contra Just for documentation? Or will the homepage completely be replaced?

[yocontra]

@leo Not sure yet, what do you think? The readme.io homepage can include custom HTML/CSS/JS if we want to

[leo]

@contra I honestly wouldn't use it at all. I mean, it's definitely an interesting tool since it allows developers to easily edit their stuff without making changes to real code. But all in all, I still think @jekyll running on GitHub Pages would be a better fit. Here are few reasons:

1. Developers don't just contribute to stuff because it's fun, but also because it helps them build an awesome portfolio with all their work in one place. Contributing to Gulp's readme.io site means doing work without anybody noticing what you've done.
2. Asking each contributor to sign up for another, different service isn't such a great thing, if you ask me (this is also related to 1).
3. I know that it would be more work to build custom markup for this thing, but I would definitely like to help you in terms of design & development.
4. All in all, I think it's way better to keep all of Gulp's code in one place (within the GH org).
5. Readme's biggest advantage is probably that you can easily add new stuff without needing to write code. Then just think about how nicely Jekyll handles pages: Just add a new .md file and you're done. Within it, you can then write in the same format as on Readme.io: Markdown.
6. Gulp is a very big project and it might even need something like a blog in the future (which is awesome with Jekyll, too: Just add a _posts folder, put all of them in there and create a single page which shows them all).
7. I'm not sure if Readme allows this, but hosting the site directly in a GH repo of course also means that people could suggest changes to the code, not only to the documentation.
8. I know this isn't the most important criterion here, but it also seems to be much slower than every site I've seen on GH Pages that was built using Jekyll. I mean, the site itself without any stylings, etc. already takes more than a second to load:

[yocontra]

@leo Features that made readme.io appealing: search, documentation versioning, discoverability

If we can make our own thing that accomplishes the same features and looks just as good then I'm all for it.

[phated]

:-1: on jekyll. Setup is miserable. I've struggled with it a ton in the past.

[leo]

@contra

• Search: Since the site will be static, we could solve this by using a client-side running JS solution. This would lead to immediate responses (like on Readme.io). The best way to handle this would probably be to simple parse the sitemap into an array and then search it.
• Documentation versioning: You're probably not talking about the Git part, but rather about allowing the visitor to switch between the docs that are related to a certain version of Gulp, right? Well, the best way would probably be to just use folders for this.
• Discoverability: I guess that's mostly related to how great the design will be. Isn't it? In terms of contributing, Jekyll on GH Pages would definitely be a better solution since it allows the whole code of the site to be public => easier discoverable.

Just look around the web, there are many big open source projects which are using Jekyll for documentation and their landing page.

[leo]

@phated Examples? I mean, while creating a lot of static sites with it, I haven't yet had any major problems with it. Also, Jekyll is Open Source, so if there's something that can be fixed, you know what to do: Just let them know... :blush:

[yocontra]

@leo If you want to take a whack at implementing it I'd love to see an example of a design/layout you see being maintainable

[leo]

@contra Sorry for the late answer, but I'm currently working on a huge project (which isn't public yet). While I'd love to help you with the development, I'm not sure if it's such a good for me to make huge efforts without even knowing if you'll be alright with Jekyll... :innocent:

Nevertheless, here are some of my thoughts on this: I would keep the main page as it currently is and maybe include a few more infos about what Gulp actually is. And then, after clicking on "Docs", the user will see an overview page which looks very similar to this (header on top which includes the most important links and a menu on the left which includes a few links to dive deeper into the docs).