Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New design implementation #3604

Merged
merged 63 commits into from
Jan 4, 2016
Merged

New design implementation #3604

merged 63 commits into from
Jan 4, 2016

Conversation

boyanangelov
Copy link

Here is the new design for the website. I tried to follow the ideas shared in #1423. Would be great to get some feedback!

Live demo: http://boyanangelov.com/spacemacs/
Here are some screens:

screen shot 2015-11-05 at 16 46 37
screen shot 2015-11-12 at 09 54 52
screen shot 2015-11-12 at 09 55 00

@d12frosted
Copy link
Contributor

WOW

Update Sorry for short comment - wanted to describe how much like what I see.

@cpaulik
Copy link
Contributor

cpaulik commented Oct 30, 2015

Why share screens when the site is online at http://boyanangelov.com/spacemacs/ ?

Anyway I think it looks great although very familiar. But maybe I'm just a little bit annoyed that all the sites tend to look so similar nowadays.

@TheBB
Copy link
Contributor

TheBB commented Oct 30, 2015

That's sexy.

What I would like to see on this page is the main documentation org files as well as the layer READMEs rendered in something like readthedocs format. Maybe using something like ReadTheOrg? How automatic can we make this?

@boyanangelov
Copy link
Author

@d12frosted Thanks, its based on a theme (see the attributions), honestly I didn't do that much :)

@cpaulik Completely agree... Even if those designs are very minimal and work great on mobile, we should try to do something more inventive in the future, I think that would be the spacemacs way :)

@TheBB I will have a look into that.

@cpaulik
Copy link
Contributor

cpaulik commented Oct 30, 2015

Could we harmonize the font/spelling of this:

Spacemacs logo

from the README with the website?

I have no opinion on which to choose but I think they should be the same.

A fixed-width font for the logo would also be fitting in my opinion.

@robbyoconnor
Copy link
Contributor

I LOVE THIS!

@robbyoconnor
Copy link
Contributor

Some comments though -- maybe link to both master and develop docs :D

@TheBB
Copy link
Contributor

TheBB commented Oct 30, 2015

Following up on the documentation thing. I was able to convert doc/DOCUMENATION.org into a format that enabled it to be exported to HTML. Then applying the theme was not difficult.

result

Mostly the difficulty is supporting both github and org-mode style links at the same time. I wasn't able to export until I had converted all links to org style. The disadvantage with this is that the doc files are no longer useful on github. IF we can get all of them on spacemacs.org, I think that's not necessarily a problem. We can make that the official way of accessing the docs online, and reading it in Emacs is still not a problem. The README.md file would stay and the links there could be updated to point to spacemacs.org.

Another useful side-effect is that exporting the org files is a great way to find broken links and other doc bugs that go undetected.

Thoughts?

You can see my work in my readthedocs branch. It basically consists of:

  • changing all the links
  • adding the style headers

It is of course also possible to write a spacemacs/export-documentation function that does all this automatically, to generate files that can then be pushed into the gh-pages branch. Presumably we would have to write such a function eventually anyway (to deal with all the different org files we have simultaneously), but this way strikes me as the path of least (but not little) resistance and maximal awesomeness.

@syl20bnr
Copy link
Owner

@bobbyangelov Thank you so much! My feedback in random order:

  • I like the layout and the straight to the point presentation.
  • I don't like so much is the gradient and the choice of colors which make the logo not very visible.
  • I like the idea of keeping the theme of space in the colors, so something more dark as a background that place the Emacs planet in context would be wonderful. I also like the "pun" with _Space_macs.

Anyway this iteration is already a huge improvement over the current broken site and we are free to tune the theme later. But if you (everybody) have some alternate propositions before we upload it, don't hesitate :-)

@cpaulik I agree, would be great to have the fonts match.

I add @nashamri in the loop who is the author of the logo.

@TheBB Excellent ! I'm for more flexibility so being stuck on the GitHub platform for the doc is not something that I'm fond of. Moving the doc to a website is an appealing option.

@syl20bnr
Copy link
Owner

Also would it be possible to try a gradient from top to bottom instead of from left to right ?

Crazy idea would be to go from space to the land of the Emacs planet, with somewhere the orbiting Evil flagship.

The horizon line the atmosphere of the planet could mark the start of the description of the feature.

@boyanangelov
Copy link
Author

@syl20bnr I have an idea about the gradient background 🎨! I will work on that, the logo and a few minor things and then submit for one more round of feedback.

@TheBB that looks very cool! I'm not sure if I can help you, but tell me if there's something I can do.

thank you @robbyoconnor :-)

@TheBB
Copy link
Contributor

TheBB commented Oct 30, 2015

@bobbyangelov It's fine. I will keep working on this and I might make a PR against your branch eventually. You don't have to wait for me though, if you finish up then I can make another PR against gh-pages later on.

@boyanangelov
Copy link
Author

Cool 👍

@stormpat
Copy link
Contributor

@bobbyangelov Very nice work!

@nashamri
Copy link
Contributor

That's great @bobbyangelov.

I would suggest using something like this for the gradient:
sitesuggestion

If you guys like this, I can elaborate on this idea and send it to @bobbyangelov.

Also, I noticed that the shadows are removed from the logo, I don't know if that's intentional or not, but the shadows are meant to be the letter "E" from Emacs 😄 so they are kinda important.

And yeah I'm with @cpaulik for a new font. The font that I put for the logo was almost a place holder 😄

Another note about the screenshot, please use this one
668d207
😄

@TheBB
Copy link
Contributor

TheBB commented Oct 30, 2015

@bobbyangelov

I can't figure out how to make a PR against your fork, but can you grab this commit from me? 91b5e1f

It includes all the org-files in the doc and layers directories in readthedocs-like format. There are some rough edges but it should be enough to get you started on figuring out how to integrate them into the rest of the site. :-)

Feel free to bring me feedback, there are many things I can change about how this is generated, but I haven't explored it all yet.

For the rest of you, if you want to have a look:

http://thebb.github.io/spacemacs/doc/doc/DOCUMENTATION.html

replace DOCUMENTATION with CONVENTIONS or VIMUSERS or whatever.

@boyanangelov
Copy link
Author

@nashamri Love the new background, we should go for it! About the shadows - accidental editing on my part when creating a font logo 😐 Do you have ideas for fonts?

@TheBB Great, will merge that :-)

@nashamri
Copy link
Contributor

@bobbyangelov Is there a repo for the site? I'm thinking what's the best way to collab on this.

@boyanangelov
Copy link
Author

@nashamri I added you as a collaborator on my fork.

@syl20bnr
Copy link
Owner

I like this concept #3604 (comment) ❤️

@TheBB I wonder if we could already merge your changes to the documentation, it will be in develop branch only so it should not bother too much if the links are broken on GitHub while we prepare the website. It would be simpler then for the people working on the website to just take the develop branch as a reference. I'm late on the planed feature for 0.105.0 but I think we could release it combined with the new website and move some 105 items to 106.

@TheBB
Copy link
Contributor

TheBB commented Oct 30, 2015

Yeah, we could do that. I already mentally signed off for tonight but I can prepare a PR tomorrow.

This was referenced Oct 30, 2015
Closed
Closed
@boyanangelov
Copy link
Author

Hi everyone! I pushed the latest changes. I added the links to the documentation from @TheBB , and the background from @nashamri . What do you guys think?

@TheBB
Copy link
Contributor

TheBB commented Oct 31, 2015

I left these comments on gitter, copying here for posterity.

  • I like it!
  • I feel /layers/LAYERS.html deserves a link, and possibly a better styling. (I don't know much about styling.)
  • If the quick start should get such a prominent link we should revise its contents. I can do that in Documentation overhaul #3613.
  • The links under the git clone command are a bit small, I was looking for them and they took me a while to find.

@nashamri
Copy link
Contributor

Should we remove the "gitter" button at the top since we have the side chat now?

@StreakyCobra
Copy link
Contributor

For me we can keep it… or remove it… it doesn't really matter :-p

Otherwise, I can't close the sidecar pane once opened, the close button doesn't seem to be accessible.

@nashamri
Copy link
Contributor

@StreakyCobra I've experienced some glitches with the close (X) button. But usually it takes a second or two and sometimes just scrolling the chat window then I can close the side pane.

@StreakyCobra
Copy link
Contributor

Ok, it's a matter of scrolling the page, not the chat. It seems that the top menu is above the chat, preventing to access the X button.

@nashamri
Copy link
Contributor

Seems like a bug in their code. Maybe it could be a css issue? z-index?

@StreakyCobra
Copy link
Contributor

z-index

It's what I was thinking about, but I'm really not a CSS/web guy :-) If this is the problem maybe you can override it with an !important ?

@boyanangelov
Copy link
Author

@nashamri seems fixed 👍 😀

@syl20bnr
Copy link
Owner

This chat sidebar is awesome ! 💜

Funny, the maybe new website for GNU Emacs is somewhat similar for our website (same kind of colors but more vivid and feature circles :-D) http://nicolas-petton.fr/ressources/emacs-website/

@TheBB TheBB assigned TheBB and unassigned TheBB Nov 30, 2015
@nashamri
Copy link
Contributor

Wow what a coincidence! or not? lol

@d12frosted
Copy link
Contributor

Wow, nice improvements! Also I like documentation pages. It's a pleasure to read them online. Really good work.

So far I don't like only one thing - how jumpy content is when you press 'install' button (to show or hide cmd).

@d12frosted
Copy link
Contributor

Also, sometimes I don't see all round items (don't know how to call them) like in following screenshot:

screenshot 2015-12-01 09 23 56

screenshot 2015-12-01 09 25 20

It happens when I scroll softly. Usually second and forth are not seen for a while.

Update fixed screenshots

Update If you need, I can record video showing it.

@CestDiego
Copy link
Contributor

can we have http://spacemacs.org serve this now? :(

@StreakyCobra
Copy link
Contributor

@CestDiego #3604 (comment)

@nashamri
Copy link
Contributor

nashamri commented Dec 1, 2015

Bugs in the docs:

@TheBB
Copy link
Contributor

TheBB commented Dec 1, 2015

Thanks. I can fix those. May have to go hard on the emojis though.

@nashamri
Copy link
Contributor

nashamri commented Dec 1, 2015

Oh those emojis! lol
Maybe just create a png of them to make it consistent with the rest of the layers.

@TheBB
Copy link
Contributor

TheBB commented Dec 2, 2015

Updated the docs!

syl20bnr added a commit that referenced this pull request Jan 4, 2016
@syl20bnr
Merge pull request #3604 from bobbyangelov/gh-pages
3cc82af 
New design implementation
@syl20bnr syl20bnr merged commit 3cc82af into syl20bnr:gh-pages Jan 4, 2016
@syl20bnr
Copy link
Owner

syl20bnr commented Jan 4, 2016

It's in the box, great work guys ! 💜

@boyanangelov
Copy link
Author

@syl20bnr great! I am open to start working on a dynamic version in the near future :)

@syl20bnr
Copy link
Owner

syl20bnr commented Jan 9, 2016

IMPORTANT @bobbyangelov do not delete your PR branch, I will try to keep the history in spacemacs.org repo, thanks!

@boyanangelov
Copy link
Author

@syl20bnr Sure, I'll keep it. Great that you made a new repo, everything is much more organised.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
Website
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.