Documentation + VanillaMusic.io

adrian-bl commented 8 years ago

Thanks to @xbao, we are the owners of vanillamusic.io. We are currently using the domain to display an ugly nginx-dirlisting of the latest nightly build.

IMO, we should have some nice landing page with some basic end-user documentation + faq's. The hosting could be done on github itself, so users could send us pull requests (and some might get commit permission to the website repo)

/cc @aminb

bandali0 commented 8 years ago

Agreed.

Here are gh-pages of some projects I've stumbled upon that looked quite nice, and could of "inspiration" for different parts (docs, the design, etc):

adrian-bl commented 8 years ago

Opengur looks quite strange on my mobile phone (to smallish) but i like MaterialDrawer and spacemacs. The materialdrawer theme seems to be a builtin-option for github-pages, so using it should be pretty simple.

adrian-bl commented 8 years ago

Ok, this was pretty simple: I created a github page at vanilla-music.github.io using the page generator.

The generator is very clunky when it comes to updating content, but at least we do now have a semi-sane layout :-)

http://vanillamusic.io/ should also already point to the GH page (if it doesnt: wait until the old DNS entry expiers).

@aminb @xbao you both should have write access to the repo at: https://github.com/vanilla-music/vanilla-music.github.io

bandali0 commented 8 years ago

Good start.

There are lots of [better looking] themes for Jekyll around the web, I'll try to list and suggest some of them. Of the ones I listed above, I think MaterialDrawer looks best and also quite simple.

P.S. I do have write access :)

adrian-bl commented 8 years ago

I'd vastly prefer hugo over Jekyll as i just don't like to install a crapload of ruby stuff just to generate a static page :-)

They also have some web-2.0-ish looking themes (mostly MIT licensed) at: http://themes.gohugo.io/

adrian-bl commented 8 years ago

I think MaterialDrawer looks best and also quite simple.

I also like it and switched vanillamusic.io to it as it is available from the page-generator ;-)

Going with Material Drawer and the page-generator would be fine with me as we probably do not have too many site updates anyway.

But if we go with a non-stock-solution: i'd really like to avoid installing a full framework just to generate a few kilobytes of text ;-)

bandali0 commented 8 years ago

@adrian-bl Good point about not wanting to install Ruby (who does, eh? :wink:) but the advantage of going with Jekyll is that you don't have to have it installed locally, and when you push a repo structured for Jekyll to GitHub, GitHub automatically builds and generates the static site for you, which is nice. Now if you want to generate and debug locally, that's a whole other story, and for that you obviously do need Jekyll.

Thanks for switching to the MaterialDrawer one, looks much better already. I've got classes for the rest of the day, but I'll take a look at Hugo when I'm back.

In the mean time, there's a whole list of Jekyll themes here and here if you want to take a look and see if anything catches your eye.

adrian-bl commented 8 years ago

and when you push a repo structured for Jekyll to GitHub, GitHub automatically builds and generates the static site for you, which is nice.

Ah, i didn't know that! In this case i prefer Jekyll over Hugo :-)

In the mean time, there's a whole list of Jekyll themes here and here if you want to take a look and see if anything catches your eye.

Thanks, i'll have a look. But feel free to play with the repo: you should have commit privileges (but updates take ~60 seconds to show up)

adrian-bl commented 8 years ago

@aminb btw: i also asked github to 'detach' us from the old vanilla music fork. This has been done and we are now a normal standalone-repo (and hopefully should be able to create a wiki after the cached content expires)

refi64 commented 8 years ago

FYI, I think it would be cooler to link to a fancy YouTube video or something like that than using an animated GIF. Those can be kind of weird at times.

adrian-bl commented 8 years ago

The GIF was just something i had lurking around. But i'm not a big fan of embedded YT videos.

But a small demo as a WEBM video would be nice (i could host this somewhere off github)

xbao commented 8 years ago

Brilliant, looks great! Gif is a nice touch. It would be nice to have vanillamusic.io/nightly point to the nightly apk if the current setup allows.

+1 on the detaching. The Play store shenanigans still leave a sour taste in my mouth.

breversa commented 8 years ago

Regarding the FAQ, I don't know where to ask this, so I'll just do it here : what MP3 tag type does Vanilla read ReplayGain from ? ID3v2 or APE ? I'm using soundKonverter (http://kde-apps.org/content/show.php?content=29024) to calculate the gain, and it asks for either of those tags.

adrian-bl commented 8 years ago

We read ID3v2 and LAME headers, see https://github.com/adrian-bl/bastp/tree/master/ch/blinkenlights/bastp

Spielmops commented 8 years ago

Nice to see a dedicated webpage for my favourite music-player. It wood be nice to see a little bit of documentation or FAQ's here. I was just searching, where Vanilla stores the playlists to no avail (wanted to save them). By the way

Here is an insanely big GIF: I blocked this gif immediately, it makes me insane ....

adrian-bl commented 8 years ago

The page is far from being finished: If someone would like to contribute, feel free to do so. A FAQ would be very nice - we could already start collecting some questions and i'd be happy to answer them.

Btw: About the playlists: They are stored in Androids internal media database (and therefore shared with other music players)

I blocked this gif immediately, it makes me insane ....

Haha :-D I somehow like the small demo, but we should convert it to webm and make it click-to-play

Allanitomwesh commented 8 years ago

WebM is best Its also a good idea to steer well clear of JavaScript and other non open things I also think the nightly link should lead to github,but this is just opinion. If I can help in any way (other than programming I suck at that) let me know

ghost commented 8 years ago

I converted the gif to webm with ffmpeg since everyone agrees but nobody is doing it.. https://raw.githubusercontent.com/ggrats/vanilla-music.github.io/master/example.webm

adrian-bl commented 8 years ago

I played around with hugo and re-did the whole site: http://vanillamusic.io/ - i think it looks pretty okayish?

bandali0 commented 8 years ago

@ggrats Nice!

@adrian-bl Looks pretty good! Some suggestions:

If possible, in the header image, move the phone further to the left on the "desk", so that the texts and buttons don't cover the phone. What do you think?
The typography could use some help, the serif font (Arbutus ?) doesn't look too good, at least not on Linux with Firefox.

ToNIX- commented 8 years ago

@adrian-bl It looks pretty good overall!

I don't like the white buttons "Play store" "F-droid" and "github" on top of the white screen cellphone. The buttons should be another color (orange/black maybe?).
Even on Windows 8.1, the font doesn't look good too. There's no "cleartype" effect on it, it's pixelized.
Do you want to mention reddit.com/r/vanillamusic on the page? This is usually the easiest way to reach users.

adrian-bl commented 8 years ago

@aminb

I'll give that a try: i'll create a new photo when i have better sunlight (its dark and raining right now)
Looks ok for me on Firefox with void-linux, but i changed it to 'Helvetica', 'Arial'

@ToNIX-

Changed the buttons to vanillas-orange - what do you think?
Yes, we should probably do that. Should we create a new section for this or stuff it into 'get involved' ?

ToNIX- commented 8 years ago

@adrian-bl

Orange looks better for the buttons, it doesn't "clash" with the cellphone behind it. I like it.
The reddit could be in the "Getting involved" IMHO, since the whole community could answer to the questions posted there.
I found another little problem with font size. The headers "Downloads" and "Get involved!" have the same size of their content ("App stores", "Nightly builds", "Translation", "Submitting patches", "Reporting bugs"). Maybe have the headers bigger than the content, just like the "Screenshots" section?

Spielmops commented 8 years ago

Very good! The page is "sane" now ... Spielmops

ghost commented 8 years ago

@aminb I think the font just looks like that naturally, chrome's font rendering has always been garbage and it's looking the same as firefox on linux too.

looks nice now though, on asus zenfone as well. No more animated picture? I thought it was unique and cool to see the app in action.

@adrian-bl is the hugo font just loaded no matter what because of it being made by hugo (whatever that is) as it says on the bottom? I just saw the .woff being loaded and not used (I'm blind too so maybe it is used).

adrian-bl commented 8 years ago

Ok, i added the reddit page and created a new (still shitty) photo.

@ggrats The font is used for the github octocat icon. Hugo is the static site generator we are using

refi64 commented 8 years ago

Really little detail, but should the black outline on the orange buttons be a little thinner? Looks slightly thick IMO.

ToNIX- commented 8 years ago

@kirbyfan64 It looks like 1px to me, are you zoomed in?

ghost commented 8 years ago

.btn { border: 1px solid transparent; }

just look at the code?

refi64 commented 8 years ago

Huh, something about it just looks a bit weird to me.

ToNIX- commented 8 years ago

@kirbyfan64 Can you provide a screenshot?

refi64 commented 8 years ago

Wait, I just figured it out. I think it's that almost all of the other "blacks" on the page (such as the text) are actually #2b2b2b, but the outline is straight black, so it looks too strong.

In addition, most of the other edges on the page are softer-looking. For instance, the bounds between sections of the page have a shadow that gives it a softer look, and the Vanilla Music icon has a slightly blurred edge.

adrian-bl commented 8 years ago

Well: Everything is in https://github.com/vanilla-music/vanilla-music.github.io - pull requests are welcome ;-)

ghost commented 8 years ago

@kirbyfan64 line 266 of HPstyles.css is the block border-color: black;

maybe change it to #656565 seems good, but I'm not one to care for looks so probably not a good eye for it... however the 2b2b2b seemed still to have the same effect of "thicker" border

refi64 commented 8 years ago

@adrian-bl What version of Hugo are you using? I'm trying to build the page sources, but Hugo's adding a bunch of random hashes to everything that ends up screwing with the diffs.

adrian-bl commented 8 years ago

Hugo Static Site Generator v0.16-DEV BuildDate: 2016-05-01T11:03:14+02:00

But 0.15 should be good enough.

Note that the actual sources are in _hugo.

eg:

cd _hugo
hugo server

adrian-bl commented 8 years ago

Closing this as i'm happy with the website so far: Please open website-related issues at https://github.com/vanilla-music/vanilla-music.github.io

vanilla-music / vanilla

Documentation + VanillaMusic.io #262