Add logo to README, and make intro it look a little nicer

[astorije]

• Improve our lame tag line 😅 Later
• Update screenshot Later
• Name image correctly (other assets will be added later when they're needed, so we don't add everything blindly)
• Submit our new good-looking README to https://github.com/matiassingers/awesome-readme
  • Add README of The Lounge matiassingers/awesome-readme#72
• Fix thelounge.github.io ➡️ thelounge.chat
• Fix <h3>/</h2>

View the result here

Ideas welcome :)

[astorije]

@xPaw, I really gave a chance to the for-the-badge style, but couldn't make them look nice. They are way too big, and when reducing size, the text gets rather hard to read. Also they have margin issues, so they look wonky next/on top of each other. Too early I guess 😅

Also I really wanted to give a shot at / but I think it doesn't look good (well, the Travis one, at least), and it would be weird if only those 2 had logo. We can use Unicode but meh.

[xPaw]

Damn that's a lot of badges. I would prefer if they fit on 1 or 2 lines at most.

TL_Grey&Yellow_Vertical_logotype_White_Bg.svg

Don't think it's a good idea to put ampersands in URLs like that. I think all the logos should be added to an assets/logos folder, so they all can be seen. And then the ones client uses copied and optimized (with svgo) separately.

[astorije]

Damn that's a lot of badges. I would prefer if they fit on 1 or 2 lines at most.

It's "only" 3 badges more than what we have. You should see it as 2 lines though, the first line is just the freenode channel, to emphasize on it. Overall, it makes for something rather balanced and nice, I think, not overwhelmed by badges:

The 3 logos I added are the Node.js version supported, MIT license, and total downloads. Of course, none of those are mandatory, I just thought they were informative enough to go there. Node version, for example, especially since we're changing it in v3... License is meh, downloads is a nice pat in the back, but not vital I agree :)

With the current badges, on a single line (again, not counting the freenode channel as its own line), it gives:

With Node version as only extra badge:

What do you think? I'm fine with any of those 3, and don't want to overthink this lol, just make it look nice :)

Don't think it's a good idea to put ampersands in URLs like that. I think all the logos should be added to an assets/logos folder, so they all can be seen.

Oh yeah absolutely. I should have added a todo item about this, because it's not what I want to ship, I was just doing the overall shape at that point.

[MaxLeiter]

I like the way you have it - does feel balanced and clean

[astorije]

@xPaw, we need to decide which file(s) we want to add to this repo. I'm adding everything as provided to the website repo, but this one should only contain a curated version, i.e. not the .ai files, not the brand guidelines, etc.
And it would be best if we can upload only SVG unless cases where PNG is required (like for manifest or iOS or whatnot).

I figured I didn't have to do this just now, so finished the README first, but happy to hear thoughts.

[xPaw]

@astorije I think second screenshot is the best. Having too many badges (especially static ones) is just too noisy. We could probably add downloads badge into that (instead of node version). And change green color to something else so it doesn't collide with builds.

[xPaw]

Image needs renaming though.

[astorije]

@xPaw, changed, see result below. I'm actually changing my mind on downloads, since over time the npm might not be the prime way to install / download The Lounge: it will be better to do it via your OS package manager.

[xPaw]

@astorije That's true, although that still gives us some popularity metric.

[astorije]

Ahah yeah, nevermind: https://img.shields.io/github/downloads/thelounge/lounge/total.svg (not documented at the moment though).
Ah, how I would love automated deb builds...

[astorije]

Updated the name of the image, and optimized it with svgo --multipass:

logo-vertical-transparent-bg.svg:
Done in 81 ms!
3.952 KiB - 33.6% = 2.624 KiB

Any suggestion for the tag line? :)

[MaxLeiter]

Not sure how big of a deal this is, but transparent background doesn’t seem to work right on mobile

[astorije]

😩
@xPaw should we switch to PNG with transparent background?

[xPaw]

@astorije perhaps background-color:transparent can be specified in the svg?

EDIT: It's github's fault. They set background-color on img, and seemingly incorrect on mobile.

[astorije]

EDIT: It's github's fault. They set background-color on img, and seemingly incorrect on mobile.

Yep...
This is on Chai's repo with a transparent-background PNG:

Same issue.

So this should stay as is, and I'll send a ticket to their support, linking to this issue.
EDIT: Done.

[xPaw]

This could link to image from website repository.

[astorije]

I hesitated between link to the main website or nothing, and went for nothing because it's just too random :) Plus we already have a link to the website underneath. But link to the website repo, I'm not a fan, it's plain weird

[xPaw]

I meant image link

[astorije]

Ah, right, but it's already a link to the image (within this repo) so 🤷‍♂️

[xPaw]

We wouldn't have to track the logo separately in this repo, just like we don't do it for the screenshot.

[astorije]

Oh wow, I realize I totally misread what you meant from the beginning. I get it now.

I'm going to use that same image file in the app itself, so I'd have to add it anyway.

[xPaw]

Change the url here.