Support for flat icons #10

simov · 2018-07-16T12:45:45Z

I see that you support flat badges in badgen, are they supported here? I'm not seeing anything about flat icons inside the docs.

The text was updated successfully, but these errors were encountered:

amio · 2018-07-16T13:01:14Z

I'm planning to support flat badge, thinking use flat.badgen.net to serve flat style and badgen.net for classic style, should be cleaner than switching with query params.

amio · 2018-07-20T10:03:03Z

It's online now https://flat.badgen.net 🤗

simov · 2018-07-20T10:43:59Z

Nice! 🤘

styfle · 2018-07-20T16:50:06Z

Why .net instead of the .now.sh TLD?

amio · 2018-07-20T17:41:40Z

Prefer shorter url
Cleaner way to switch style (domain vs ?style=flat)
badgen.net & flat.badgen.net could serve a full preview of badge style. That url looks better than badgen.now.sh & flat-badgen.now.sh 🤔

BTW, As of (1), I even thought about shrink https://badgen.now.sh/badge/... to https://badgen.now.sh/-/... 😂 but that's not right. Do you have any better idea for shortening this /badge/ segment?

styfle · 2018-07-20T17:46:37Z

Well the original badge is:

https://badgen.now.sh/badge/:subject/:status/:color

Why not use this for flat badges:

https://badgen.now.sh/flat/:subject/:status/:color

styfle · 2018-07-20T17:47:42Z

I guess my point is: the domain name should remain the same, regardless of the "style" of badge.

amio · 2018-07-20T18:09:48Z

That's ok for static badge, but a little complicated for live badges

amio · 2018-07-20T18:15:41Z

Segments in URL are like arguments for functions, I wish to keep them as less as possible

styfle · 2018-07-20T18:44:33Z

I see what you mean. So changing the route isn't really an option.

I think it's fine to add a query string parameter for badge style.
Since the data is the same so it make sense to keep the URL the same.

This is what shields does:

https://img.shields.io/npm/v/copee.svg
https://img.shields.io/npm/v/copee.svg?style=flat
https://img.shields.io/npm/v/copee.svg?style=flat-square
https://img.shields.io/npm/v/copee.svg?style=plastic

This also gives you flexibility if you want to add more options, no need to mess with the routes.

amio · 2018-07-21T05:40:25Z

I'm OK with query string, just not a fan of it. I was thinking if we could offer a better option than Shields does? My thoughts on this can be divided into two parts:

Is there a better way for switching badge style?

What about put that info into hostname, compare these:

https://badgen.now.sh/npm/v/copee?style=flat
https://flat-badgen.now.sh/npm/v/copee

I prefer the latter one. This also brings an extra benefit: we could easily serve a full preview of all flat badges within a single server(now alias make this super handy):

![](/npm/v/copee)

I like the simplicity.

And there's another extra benefit 🤪: Put "flat" in the hostname makes it feels more "official" like, stand at the same level as "classic" style. After all, if someone want to use flat style badge, he would use it on all badges rather than in a mixed style, https://flat-badgen.now.sh will be the one-stop shop solely for flat-lovers, they don't have to pick badge from classic shop, then "change" it to flat style. I think it's a better experience.

I was think of this recently, to provide consistent style across all badges could be a goal/value of Badgen. That's why Badgen use to redirect travis-ci badge requests to it's official location at first, but then turn to serve it as live-badge, all redirection-badge are move to live-badge. These provider might not serve flat style, Badgen can do that, and provide flat style for all badges, provide consistence for users. For the same purpose, first-class experience for flat-lovers is a meaningful feature.

That's why I tend to use hostname to switch style. If so, (the second part):

What hostname looks better?

Here's some options came to me:

https://badgen.now.sh
https://flat-badgen.now.sh

https://badgen.now.sh
https://flat.badgen.now.sh

https://badgen.net
https://flat.badgen.net

(3) looks best in this situation 😋

styfle · 2018-07-21T17:39:21Z

we could easily serve a full preview of all flat badges within a single server

Yes that's a good point I didn't consider, but surely this could be accomplished with a query string parameter and maybe a dropdown to pick the style.

Take a look at https://shields.io/#styles which also shows additional options beyond style which might be beneficial such as link or maxAge.

provide consistent style across all badges could be a goal/value of Badgen.

Yep, I agree, that's a good goal.

(3) looks best in this situation

If I had to pick, 3 would be best.

One thing to note is that shields calls this style flat-square since flat is the default style. Maybe Badgen should use the same style name to avoid confusion?

tunnckoCore · 2018-07-21T17:59:07Z

I'm agree too. In anyway there should have support for query params anyway. Because there we should allow passing icon, emoji and why not label (allows changing the left side to whatever you want, i really want that feature).

Lets have both style query and domain. The badgen.net will serve the flat rounded style and will allow to pass style query param. The flat.badgen.net will serve flat-squared style.

And actually i'm agree with @styfle for the naming. It may be confusing, but it would suck if we name it flat-square.badgen.net :D

tunnckoCore · 2018-07-21T18:09:21Z

Just realizing that find-my-way router is pretty bullshit in terms of querystring and its query string tests are ridicilous - testing nothing.

I just tried and we don't have way to get queryparams with this router.

I highly think to start a branch with micro and micro-dev

amio · 2018-07-22T03:01:08Z

We should have query params support for sure 💪
Let's give "style" switch(the most used switcher) a special treatment 😄
Agree with the flat/flat-square naming confusion, here's some options with my thought(not sure yet):
1. flat-square.badgen.net - too long, not cool anymore
2. s.badgen.net - short but confusing
3. square.badgen.net - ok maybe?
4. flat.badgen.net - currently choice
After rejecting option (1), consistency with shields.io is gone. Among other choices, flat is the shortest but still meaningful one, that's how I choose it. What's your idea about these options or other proposal?

ADD A POINT: As of the confusion, I think once people see the "flat badgen page", they will get the idea. So IMO the confusion about naming conflict with Shield's traditional won't cause too much problem.

@olstenlarck As the find-my-way thing, here's my plan:

new URL('https://badgen.now.sh/badge?arg=1').searchParams

I like micro but it doesn't come with router, we still need to choose one between these.

tunnckoCore · 2018-07-22T03:19:33Z

I like micro but it doesn't come with router, we still need to choose one between these.

Exactly. Why not? Even more, we need just micro-get and microrouter. The dev environment would be awesome too.

As about the proposals.. i'm for flat.badgen.net. No matter that it may be confusing for the users - they'll get it.

amio · 2018-07-22T07:24:35Z

Overall find-my-way are better tested than micro-get and microrouter, I think the reason it doesn't really have tests for query string is it doesn't support query params 😂 It's just to make sure router doesn't get broken by query strings.

I haven't do benchmarks but from the docs, find-my-way's "radix-tree" method looks better promising than microrouter's url-pattern. Hmmm, this talk gives me an idea that, maybe I could add the query params support to micro-fork(I created it to mix microrouter's api with find-my-way's router implementation), to have benefits from both 😋

micro-dev are good to have if we had micro.

tunnckoCore · 2018-07-22T12:25:28Z

Oh, don't why i thought they parse them, hm.

Anyway, cool for the micro-fork except the name. ;d

amio · 2018-07-22T12:54:42Z

😂 Just thought the shape of fork kinda like paths of route. Maybe I should create a logo for explanation.

and nodemon => micro-dev and support query params: style, label, emoji, list Regarding #10 (comment)

amio · 2018-07-24T07:38:54Z

https://flat.badgen.net online now 💃

tunnckoCore · 2018-07-24T17:04:53Z

I think it would be better the "Query Params" to be on the top of the site, between "Usage" and the "Examples" sections. Because badges number will grow.

Also think that style | flat badge could be visually flat on the badgen.net and style | classic be visually classic on the flat.badgen.net.

styfle · 2018-07-24T17:11:49Z

Also think that style | flat badge could be visually flat on the badgen.net and style | classic be visually classic on the flat.badgen.net.

@olstenlarck Fixed in #32

amio · 2018-07-25T02:30:42Z

I think it would be better the "Query Params" to be on the top of the site, between "Usage" and the "Examples" sections. Because badges number will grow.

Agree 👍 At first I put that block on top, latter change to bottom for a little nicer(very opinionated) first screen. I'm planing move index.md to a fully customizable jsx page, with more refinement on the looks, I'll be happy to move "Query Params" to top.

amio added a commit that referenced this issue Jul 17, 2018

Update badgen to 2.0.0, support flat style #10

e2b9bd7

styfle mentioned this issue Jul 20, 2018

Add flat style badges styfle/packagephobia#105

Closed

amio mentioned this issue Jul 22, 2018

refactor: find-my-way => micro + micro-fork #29

Merged

amio added a commit that referenced this issue Jul 22, 2018

refactor: find-my-way => micro + micro-fork (#29)

c84a4a2

and nodemon => micro-dev and support query params: style, label, emoji, list Regarding #10 (comment)

amio closed this as completed Jul 24, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for flat icons #10

Support for flat icons #10

simov commented Jul 16, 2018

amio commented Jul 16, 2018

amio commented Jul 20, 2018

simov commented Jul 20, 2018

styfle commented Jul 20, 2018

amio commented Jul 20, 2018

styfle commented Jul 20, 2018

styfle commented Jul 20, 2018

amio commented Jul 20, 2018

amio commented Jul 20, 2018 •

edited

Loading

styfle commented Jul 20, 2018

amio commented Jul 21, 2018 •

edited

Loading

styfle commented Jul 21, 2018

tunnckoCore commented Jul 21, 2018 •

edited

Loading

tunnckoCore commented Jul 21, 2018 •

edited

Loading

amio commented Jul 22, 2018 •

edited

Loading

tunnckoCore commented Jul 22, 2018 •

edited

Loading

amio commented Jul 22, 2018

tunnckoCore commented Jul 22, 2018

amio commented Jul 22, 2018 •

edited

Loading

amio commented Jul 24, 2018

tunnckoCore commented Jul 24, 2018

styfle commented Jul 24, 2018

amio commented Jul 25, 2018

Support for flat icons #10

Support for flat icons #10

Comments

simov commented Jul 16, 2018

amio commented Jul 16, 2018

amio commented Jul 20, 2018

simov commented Jul 20, 2018

styfle commented Jul 20, 2018

amio commented Jul 20, 2018

styfle commented Jul 20, 2018

styfle commented Jul 20, 2018

amio commented Jul 20, 2018

amio commented Jul 20, 2018 • edited Loading

styfle commented Jul 20, 2018

amio commented Jul 21, 2018 • edited Loading

Is there a better way for switching badge style?

What hostname looks better?

styfle commented Jul 21, 2018

tunnckoCore commented Jul 21, 2018 • edited Loading

tunnckoCore commented Jul 21, 2018 • edited Loading

amio commented Jul 22, 2018 • edited Loading

tunnckoCore commented Jul 22, 2018 • edited Loading

amio commented Jul 22, 2018

tunnckoCore commented Jul 22, 2018

amio commented Jul 22, 2018 • edited Loading

amio commented Jul 24, 2018

tunnckoCore commented Jul 24, 2018

styfle commented Jul 24, 2018

amio commented Jul 25, 2018

amio commented Jul 20, 2018 •

edited

Loading

amio commented Jul 21, 2018 •

edited

Loading

tunnckoCore commented Jul 21, 2018 •

edited

Loading

tunnckoCore commented Jul 21, 2018 •

edited

Loading

amio commented Jul 22, 2018 •

edited

Loading

tunnckoCore commented Jul 22, 2018 •

edited

Loading

amio commented Jul 22, 2018 •

edited

Loading