New Badge Pattern makes inline badges impossible

[nebrelbug]

Describe the bug
With the new badge pattern:

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[badge here]
<!-- ALL-CONTRIBUTORS-BADGE:END -->

Due to the way comments are rendered in Markdown, you cannot get a badge to show up inline with other badges.

To Reproduce
Steps to reproduce the behavior:

1. Ask all-contributors-bot to add a contributor
2. Look at the badge
3. Try to move the badge so it appears inline with your other badges and keeps comments

Expected behavior
There'd be a way to customize the pattern

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
All-Contributors itself isn't using the new syntax.

[Berkmann18]

What happens when you try to have the badge without the start/end comments?

[szepeviktor]

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> [badge here] <!-- ALL-CONTRIBUTORS-BADGE:END -->

When putting all on 1 line GitHub does not recognize it as a linked image.

[szepeviktor]

How does - e.g. a Packagist - badge update the count without including the actual value in its URL?

[![Packagist stats](https://img.shields.io/packagist/dt/szepeviktor/phpstan-wordpress.svg)](https://packagist.org/packages/szepeviktor/phpstan-wordpress/stats)

[Berkmann18]

How does - e.g. a Packagist - badge update the count without including the actual value in its URL?

That's actually something we should have I believe, that way the only README updates would be on the table and the badge would dynamically show the numbers.

Do you know how we could go about this?

[szepeviktor]

Maybe the Cache-Control: max-age=120 HTTP header??

See https://redbot.org/?uri=https%3A%2F%2Fimg.shields.io%2Fpackagist%2Fdt%2Fszepeviktor%2Fphpstan-wordpress.svg

[wil3]

I just added all-contributors and dealing with the same problem, it forces my build badge onto a new line. How is all-contributors doing it? I looked at the README.md and there doesn't exist those comment tags.

[wil3]

@szepeviktor you can have the server generate the image on the fly for every request. all-contributors could use a url that has the repo name in it which the server could then use to link back to to retrieve the json configuration file to get the contributor count without having to store the data themselves.

[Berkmann18]

I just added all-contributors and dealing with the same problem, it forces my build badge onto a new line. How is all-contributors doing it? I looked at the README.md and there doesn't exist those comment tags.

That's how it used to be before the start/end comment was introduced for the badge.

Fun fact: the number you see on the badge is outdated, it should be 66 as of b6d1aac (not 54).
Why is this? possibly due to the fact it's not been auto-updated.

I also checked on the CLI repo and the numbers (on the badge vs the length of contributors in .all-contributorsrc) don't match up as well.

So the badge simply does not work the way it's portrayed on this repo and on the CLI (i.e. without the comments around it).

That's a regression which would need to be looked at (PRs are welcome).

I suspect #243 would help sort this issue out as the current approach doesn't use any servers rendering so @szepeviktor's approach unfeasible.

[wil3]

Ok I think I have a nice solution that doesn't require any additional server, this can be done with dynamic shields.

If you check out the section titled Dynamic they provide a method for doing exactly what we want. The trick is to provide the full raw URL of the .all-contributorsrc json file as the data url and then using a JSONPath attribute length to get the array length of the contributors.

All inputs for dynamic badge,
data type = json
label = all contributors
data url = <url to repos raw .all-contributorsrc>
query = $.contributors.length

This is the generated badge output,

https://img.shields.io/badge/dynamic/json?color=orange&label=all%20contributors&query=%24.contributors.length&url=https%3A%2F%2Fraw.githubusercontent.com%2Fwil3%2Fgymfc%2Fmaster%2F.all-contributorsrc

And here is an example of it working as expect on my repo, https://github.com/wil3/gymfc/

Basically the user would just have to encode their json url and set it as the url query parameter, or the bot would do this. If someone can point me to the code where the bot injects the badge into the readme I can take a swing at a PR for it.

[Berkmann18]

That's awesome.
A good start for this would be the CLI, more precisely in https://github.com/all-contributors/all-contributors-cli/blob/master/src/generate/format-badge.js
The bot relies on the CLI for the badge according to this line: https://github.com/all-contributors/all-contributors-bot/blob/master/src/tasks/processIssueComment/ContentFiles/index.js#L2

[nebrelbug]

Here's an option that doesn't require any configuration to set up. Define the All-Contributors badge image earlier in the Markdown:

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[logo]: https://img.shields.io/badge/all_contributors-3-orange.svg 'Number of contributors on All-Contributors'

<!-- ALL-CONTRIBUTORS-BADGE:END -->

And later in the Markdown file, reference the defined image where you want your badge:

[![All Contributors][logo]](#link)

In the example above, I wrap the image badge inside a link. Here's a working example: https://github.com/squirrellyjs/squirrelly/blob/master/README.md

[wil3]

That's pretty sweet didn't know you could do that in markdown. Nice solution.

[JoeIzzard]

I have just opened a new issue, as there is now an 'All Contributors' badge making its way into production on Shields. This would solve the issue completely as it is dynamic and simple. Hopefully once it hits production the badge system here can be updated to use it and solve this issue too.

[JoeIzzard]

Just to add, the badge has now been deployed and is live. You can see it on shields.io now. Below is an example of this repo pulling from the live server:

It can of course be styled in the usual ways, for example:

Hope this makes it easier to maintain inline badges while still showing off actual contributor numbers and such!

[Berkmann18]

@JoeIzzard Sweet!

@all-contributors/core what do guys think about that?

[Berkmann18]

@gr2m Any thoughts on this?
I think it will make the badge more manageable.

[gr2m]

I think we shouldn't generate static badges, we should instead make it easier to shield and others to generate the badge dynamically, and/or generate a dynamic SVG badge ourselves via the app.

[Berkmann18]

@gr2m What about @JoeIzzard 's suggestion?

[janpio]

Does the workaround from #361 (comment) work for anyone? Seems the bot will unfortunately undo this: https://github.com/prisma/docs/pull/2555/files#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L4

[MicaelJarniac]

The following works for me:

https://github.com/MicaelJarniac/cookiecutter-python-project/blob/eb528f10c1f6f1fc2f67d901b65484b19259fc59/%7B%7Bcookiecutter.project_slug%7D%7D/.all-contributorsrc#L10

https://github.com/MicaelJarniac/cookiecutter-python-project/blob/eb528f10c1f6f1fc2f67d901b65484b19259fc59/%7B%7Bcookiecutter.project_slug%7D%7D/docs/README.md?plain=1#L69-L71

https://github.com/MicaelJarniac/cookiecutter-python-project/blob/eb528f10c1f6f1fc2f67d901b65484b19259fc59/%7B%7Bcookiecutter.project_slug%7D%7D/docs/README.md?plain=1#L15

[janpio]

Ah, I was missing the badgeTemplate part - makes sense. Thanks @MicaelJarniac.