dbartholomae/jsx-readme

Generate Readme files with a React-like syntax and package.json-aware helpers.

Hi there 👋!

I'm Daniel. If you read this, it might well be that I sent you the link so you can learn more about working with me. Or you might just have stumbled upon this page, in which case: Nice to meet you! :)

This is my Personal User Manual. If your experience with me is different or you think there is a way this document might be more useful, feel free to open an issue or suggest a change.

Who am I?

I'm a Berlin based founder, manager and developer. I have a faible for technology, data and self management. Currently my focus is on making it easy to solve business problems with TypeScript based web technology.

My professional history

You can find my professional exploits on my LinkedIn profile.

Where to find me online

It is easiest to reach me via email, but you can also follow me on Twitter. From time to time I also write blog articles.

Understanding me

My believes and how they manifest

• No one is intrinsically bad. Therefore I always believe in good intentions until proven otherwise.
• Caring about each other makes life better for everyone. Therefore I try to take care of everyone in my sphere of influence.
• We should all in principle follow the same rules and therefore I have a hard time with rules that don’t apply universally.
• Working in a group where everyone gives their best is more pleasant and effective than everyone "just doing their job". This doesn't mean spending every wake hour on the job, or not having off days. It is about attitude. Therefore I try to hold everyone including myself up to the highest standards.
• Transparency and candor both make working more pleasant and effective. Therefore I like to discuss ideas openly and get feedback from others.
• Making mistakes and learning from them is an important part of life. Therefore I always look for what to learn from mistakes, never for punishing anyone involved.
• The only way to find out something is to actually try it. Therefore I am usually looking for an experiment that allows to get feedback with the least energy required. It makes sense to learn from what others have learnt to find the right experiments, but then skipping the experiment all-together is dangerous.
• Handover of work is the biggest source of waste I’ve seen at companies. Therefore I set up teams that are responsible end-to-end for customer value, and the farther end-to-end this stretches, the better.
• Especially in software development we tend to plan too much ahead. Therefore I prefer just-in-time optimization: Not too early where I don't know yet what to optimize for, but only when the optimization actually becomes necessary.

What people tell me I'm good at

• Building and coaching teams and individuals to achieve great things while having fun.
• Meaning well and deeply caring about the people I work with.
• Helping others to be successful.
• Rapidly understanding complex problems by probing with questions and thinking through topics.
• Forcing decisions not to do things instead of wasting time on something that might not be the most effective way to go forward.

My quirks

• I can be very direct. Please let me know if I am too direct. Feel free to be direct and open with me yourself to let me know.
• It can be hard to read my emotions. Sometimes this means that I don’t seem appropriately concerned, but me remaining calm does not mean that I do not care or do not take the situation seriously. If you are unsure about my emotions, feel free to just ask.
• I'm a big fan of being organised digitally. I might sometimes put too much focus on having a clean todo list, an empty inbox ("inbox zero"), or similar. If in doubt, just ask me if something really needs to be cleaned up, and I will reflect on whether there is actual merit to it or it's just my personal preference.
• Entertaining large groups of people isn't my strong suit. I prefer to meet one-on-one and in smaller groups.
• I'm especially bad at remembering things. This is one of the reasons why I prefer written communication where I can just look things up.
• Following orders can be hard for me. Specifically it is hard for me to do things without understanding the reasoning behind it, or at least why there is no time to understand that reasoning right now. This also sometimes leads me to interfere with other people's responsibilities.

Handling stress

I am not easily stressed and will remain calm even in situations where others might freak out. Should I ever get stressed out, the symptoms are that I withdraw and become even more silent. If you feel I no longer openly and transparently communicate, please privately tell me so I can reflect and bring back communication.

Working with me

Productive times

My productive times can vary by day. I tend to be more productive later in the day, though, and usually prefer not starting work before 09:00 am.

Communicating with me

Feel free to be direct with me. I am not easily offended.

For communication I usually prefer written communication above talking as it gives you the time to optimize your message (e. g. using a top-down structure) and me the ability to understand in my own time and potentially include others into the conversation where beneficial.

I feel confident in my triaging skills. If in doubt, you can include me in written communication and I will take care of sorting out what is important for me and what is not.

If you would prefer personal communication, feel free to schedule something into my calendar. My calendar is usually well-managed.

Emergency communication

If you need an immediate response from me, please send me an SMS or call me on the phone. Due to the nature of my work I'm trying to manage my time in larger, uninterrupted chunks where possible and might not check e. g. email or Slack for longer amounts of time.

If you don't have my phone number but think you might need it, just let me know.

Other

Preferred pronouns

My preferred pronouns are they/them, but I'm also comfortable with he/him/his.

How to pronounce my name

Daniel can either be pronounced Daniel in German or Daniel in English. Bartholomae is pronounced as ˈbatolome. I don't really care though as long as I know that you are talking about me.

Dietary restrictions

• I don't eat cheese, don't drink alcohol and don't drink coffee. Weird combination, huh? :)
• I try to avoid meat, or at least to buy organic, but I'm not very good at following through with this yet.
• If in doubt, Thai or Vietnamese cuisine is always fine.

My favorite business books

You can find my professional book recommendations on Goodreads.

Obligatory fun fact

I once managed to forget my own first name for a couple seconds when asked to introduce myself.

jsx-readme's Issues

Add a HacktoberfestBadge component

Hacktoberfest is upon us, and what better way to celebrate then to make it easier for repo maintainers to show the right badge for it? There is no official badge, but Shields.io offers a badge that is recommended by the Hacktoberfest team.

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <HacktoberfestBadge year={2020} />, with an optional prop suggestionLabel that can be used as <HacktoberfestBadge year={2020} suggestionLabel='good first issue' /> to render to:

The badge needs to be exported from the badges index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

Additional context

A good badge to base this new badge on is the Codecov badge.

You can find out more about the badge on the shields.io page. It is in the issue-tracking category as "GitHub Hacktoberfest combined status" and "GitHub Hacktoberfest combined status (suggestion label override)".

Add emojis to section headings

A README shouldn't only be readable, but also nice to look at. So let's add some nice looking emoji! 🥳

This issue is meant to be a good first issue to get into coding, and into open source contribution over all, as it will require to touch few existing files, is a small change and is documented extensively. If you are new to coding, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

The ExamplesFromPkg and HomepageFromPkg components create headings. Let's start each of them with a fitting emoji. You will have to also adjust the corresponding test files.

In addition, we manually create an installation section in our e2e test. We should find a nice emoji for this paragraph as well. You will have to also adjuts the corresponding expected output file.

Additional context

When choosing emojis, please use utf-8 emojis that can be copied directly into the source code instead of images. Please keep in mind cultural implications and try to choose emojis that will appeal universally.
You can find utf-8 emojis e. j. on getemoji.com.

If you get stuck working on this, I am available for pair programming.

Add a LicenseBadge component

A GitHub repository can have a license badge rendered on top of the README.md to allow contributors / users to quickly understand which license the current project is using.

Would you be willing to help with a PR?

[X] Yes, absolutely
[ ] Yes, with some guidance
[ ] Unfortunately no time :'-(

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <LicenseBadge pkg={pkg} />.

Since Shields.io has autogenerated license badges: https://img.shields.io/github/license/<Github-Username>/<Repository>, perhaps the badge component will default to autogenerated license badges, and can have an optional prop that renders the appropriate license badge based on the license field on package.json.

Additional context

The badges example and links can be found here.
For autogenerated sheilds badge, see here.

CODE_OF_CONDUCT.md Link Broken

Contributors can't find a code of conduct

The CONTRIBUTING.md file links to a Code of Conduct page which does not exist for this repo. The project maintainer should decide how to proceed fixing this.

Add initialization script

When using jsx-readme for the first time, you need to create a README.md.tsx file and set up ts-node to run it. This is not a huge burden - but we can do better! Instead it should be possible to just run jsx-readme init and it automatically does it for you.

This issue is a bit more complicated than the other issues provided for Hacktoberfest. If you struggle with it, feel free to try an issue labelled good first issue first. If you want to give it a try, I am happy to help with this though and might even be available to pair program on it.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

Please add a script that creates a README.md.tsx file, adds ts-node as devDependency if needed and adds a docs script to run the README.md.tsx file with ts-node if there is no docs script yet. There should be an example bash file how to invoke the script:

npx jsx-readme init

This file should be invoked in an e2e test to ensure it does what it is supposed to do.

The README.md.tsx file should be similar to the one used for creating this repo, but without the custome installation section.

Please update the installation section in the README.md.tsx used for creating the README of this repo based on the new script. Please note that you will also have to update the expected result for the related e2e test.

Please make sure to also update the bin entry of package.json.

If you get stuck working on this, I am available for pair programming.

Improve installation instructions

This project is awesome but it took me more than 2 hours to understand how to build my README file with jsx-readme because the installation instructions aren't clear (at least to me, they are not).

** Would you be willing to help with a PR? **

• Yes, absolutely
• Yes, with some guidance
• Unfortunately no time :'-(

Describe the solution you'd like

The installation instructions should provide all the steps for at least 1 of the ways to build README with ts-node.

Describe alternatives you've considered

Does not apply

Additional context

I think installation instructions would be more helpfull if they were like this:

Installation

Add jsx-readme and ts-node to your devDependencies

npm i jsx-readme ts-node -D

Add these configs to your tsconfig.json:

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "jsx": "react"
   }
}

Create a README.MD template (you may copy the example from this repo examples/README.md.tsx and edit to your taste).

Add the following script to your package.json:

{
  "scripts": {
    "generate:readme": "ts-node README.md.tsx"
  }
}

Add ContributingFile component

When contributing to open source projects, a significant amount of time can be lost when setting up the repo locally and understanding the coding standards used in that repository. A good CONTRIBUTING.md file can help. Let's make it easier to add one.

This issue will take a bit longer than the other issues set up for Hacktoberfest, but it should not be too complicated. If you are interested in deeper contributions into the repository, I would recommend taking a small good first issue first and then take on this one. If you are already quite familiar with software development, this might also be an interesting starting point for the repository.

Describe the solution you'd like

Create a ContributingFile component that renders to markdown similar to this repo's CONTRIBUTING.md based on a package.json input as pkg prop. The file should be constructed based on the actual tooling, e. g. if yarn is used as the package manager (as can be obvious from a yarn.lock file), then the installation instructions should be talking about yarn instead of pnpm, or if istanbul is not used for code coverage, then adding a /* istanbul ignore next */ comment won't make sense. Also, please don't hardcode my email address as the security contact, and use a prop to set the correct email address instead ;)

It might make sense to split the component into a pure display component taking data as props, and a container component reading the needed data from package.json or the file system.

I'm open to already merging smaller versions with less functionality, as long as the component is overall useable. The goal should be to automatically build the CONTRIBUTING.md of this repository, similar to how the README.me is built.

If you get stuck working on this, I am available for pair programming.

Add AuthorSection component

Sometimes having an Author section on the README file might help. Let's automate this process.

Describe the solution you'd like

To display an Author section inferred by package.json. The component should support both the object and the string syntax. See https://docs.npmjs.com/cli/v7/configuring-npm/package-json#people-fields-author-contributors.

The component should also be able to receive a name prop which changes the output. E.g, package, library. The email part is optional.

<AuthorSection pkg={pkg} name="package" />

Describe alternatives you've considered

We can also introduce a generic component which takes in person in object or string format and output a generic profile markup. This way we can potentially reuse this component for contributors or even maintainers from package.json.

✍️ Author

This package is written with love by dbartholomae. For more info, you can reach the author via email.

Add a badge for Hits

Is your feature request related to a problem? Please describe.
A GitHub repository can have a HIT badge rendered on top of the README.md to allow contributors / users to quickly understand know how many people are viewing your GitHub projects!

** Would you be willing to help with a PR? **
[ ] Yes, absolutely

Describe the solution you'd like

This is what the badge should look like in its most basic form:

Hits

It should be accessible as
<HitsBadge username={username} project={project} />.

Since Shields.io has autogenerated license badges: https://img.shields.io/github/license//, perhaps the badge component will default to autogenerated license badges, and can have an optional prop that renders the appropriate license badge based on the license field on package.json.

Additional context

Add any other context or screenshots about the feature request here.

Add a GithubTopLanguageBadge component

When trying to contribute to an open source repo, one of the first questions to answer is: Do I know the language needed for this repo? A simple badge can answer this question at the top of the README file.

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <GithubTopLanguageBadge pkg={pkg} />. It should also be added to the default badges used by BadgesFromPkg after the DevDependenciesBadge which would automatically include it also in this repos README. This means that you will also have to adjust the expected result of the end-to-end test.

The badge needs to be exported from the badges index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

Additional context

A good badge to base this new badge on is the GitHub Workflow badge.

Add Setup Instructions Component

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

** Would you be willing to help with a PR? **

• Yes, absolutely
• Yes, with some guidance
• Unfortunately no time :'-(

Describe the solution you'd like

A component that renders the Setup instructions section to the readme. For now, it is limited to title only and Similar to this:

## Set up instructions

Further descriptions here...

Describe alternatives you've considered

N/A

Additional context

The end result should be like this:

Add CLAAssistantBadge component

Unfortunately, managing intellectual property nowadays is also an important part of open source. Fortunately, there are tools that help with this. CLA Assistant is one of them, and you will notice it latest when you open up your PR. They manage rights transfers. Let's add a badge to make it easy for open source maintainers to remain compliant.

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <CLAAssistantBadge pkg={pkg} />.

The badge needs to be exported from the badges index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

Additional context

A good badge to base this new badge on is the GitHub Workflow badge.

Add ContributersSection component

Open-source repositories like this are only possible due to contributions from people like you. Let's give a shout-out and add everyone to the README file. And let's do it automatically so that new contributors in the future will also be added automatically.

Describe the solution you'd like

Update the ContributersSection component so that it can still be included as <ContributorsSection /> and renders a full section including heading, emoji, and line breaks at the end. It should display the avatars of the 12 newest contributors, each linking to their GitHub profile, and above it the following sentence:

This package only works thanks to [all of our contributors](https://github.com/dbartholomae/jsx-readme/graphs/contributors).

After the avatars, if there are more than 12 contributors, e. g. 1514 in total, it should show

[+ 1,502 contributors](https://github.com/dbartholomae/jsx-readme/graphs/contributors)

with 1,502 being 1514 - 12.

It should take an optional prop for a Github access token in case it needs one but should try to read it from the default environmental variables if the prop is not set. In case we don't even need a token (assuming a public repository), then feel free to skip adding the prop.

The <ContributorsSection /> should be included in the Readme example script right above the <ContributingSection />.

You might have to also edit the build workflow to use env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} for the Build documentation step so that, when the Readme is built, the script has access to the token.

Describe alternatives you've considered

I searched for contributor overview pages we could just link to or images we could just embed but didn't find any nice ones.

Additional context

This will require the use of the new jsx-md async API via awaitComponent which can be seen in the ExamplesFromPkg component.

You will also need to familiarize yourself with the collaborators from the GitHub GraphQL API or the outdated GitHub Rest API.

Update jsx-md to 3.0.0

Is your feature request related to a problem? Please describe.

The new version of jsx-md allows writing asynchronous code with help of the <Await/> component. This would allow to add components that e. g. read information from the GitHub API.

** Would you be willing to help with a PR? **
[X] Yes, absolutely
[ ] Yes, with some guidance
[ ] Unfortunately no time :'-(

Describe the solution you'd like

Update jsx-md to 3.0.0

Bump typedoc from 0.21.9 to 0.22.4

The automatic update for typedoc (#82) does not work as the new version of typedoc seems to be no longer compatible with the plugin typedoc-plugin-sourcefile-url:

Error: The plugin typedoc-plugin-sourcefile-url could not be loaded.
Error: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './dist/lib/utils/component' is not defined by "exports" in 

Fix the settings and update the dependency manually.

Add a CircleCIBadge component

Some repositories use CircleCI for building. A badge showing the build status helps to understand whether the repo currently is in good shape.

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <CircleCIBadge pkg={pkg} />, with an optionals props branch and style (can only be "svg" or "shield") that can be used as <CircleCIBadge pkg={pkg} branch='master' style='svg' /> to render to:

The badge needs to be exported from the badges index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

If you are interested in an additional challenge, try to also support BitBucket and Gitlab in addition to GitHub, based on package.json

Additional context

A good badge to base this new badge on is the GitHub Workflow badge.

You can find out more about the badge on the CircleCI docs page.

Ideas welcome!

As part of Hacktoberfest, this repository has been growing at a steady rate. If you have additional ideas of what we should add, feel free to open an issue and make a suggestion! There is a template for writing a feature suggestion, and there are plenty of issues already prepared you can read for inspiration.

Suggestions could include e. g.:

• Additional badges
• Additional README sections
• Additional templates for other markdown files

Inconsistency of having <LineBreak>

Right now I've notice some inconsistency of rendering <LineBreak> internally. This results in making the generated result kind of unpredictable. In other words, should a component render an extra line break when used ?

For example:
<HomepageFromPkg />

Should render

## Homepage

You can find more about this on [https://dbartholomae.github.io/jsx-readme](https://dbartholomae.github.io/jsx-readme).

Or

## Homepage

You can find more about this on [https://dbartholomae.github.io/jsx-readme](https://dbartholomae.github.io/jsx-readme).
<-- Notice this extra line break here -->

** Would you be willing to help with a PR? **
[X] Yes, absolutely
[ ] Yes, with some guidance
[ ] Unfortunately no time :'-(

Describe the solution you'd like

Should decide whether if rendering a section should include an extra line break and stick with the rule. Probably because <HomepageFromPkg> has an extra missing line break at the end.

Additional Context

I've notice this issue while working on #14, will have to include an extra line break (double line breaks) if we stick to having an extra line break rule.

Components that include line break at the end:

1. <CodeFile> which is used in <ExamplesFromPkg>
2. <DescriptionFromPkg>

Components that does not include line break at the end:

1. <HomepageFromPkg>

Add LicenseBadge in README.md

Continuing #19, to include the LicenseBadge created for this project's README.md.

Would you be willing to help with a PR?

[X] Yes, absolutely
[ ] Yes, with some guidance
[ ] Unfortunately no time :'-(

Add FundingSection component

We can automate a funding section by inferring package.json.

Describe the solution you'd like

Create a component that renders a funding section inferred in package.json.

<FundingSection pkg={pkg} />

🤝 Show your support

Give a ⭐ if this package helped you! You can also support the development of this package by funding.

• example
• patreon

Add Optional Emoji props

Some users might not want an emoji generated on each of the section header.

Describe the solution you'd like

Add disableEmoji prop on each components that render emoji by default.

For example:

<ExamplesFromPkg disableEmoji />

Describe alternatives you've considered

Having the need to pass in disableEmoji prop to each of the components that render emoji by default might seem a bit tedious.
Perhaps having something similar to React context, that you can disable the entire Readme from generating emojis just by setting disableEmoji once on the provider. But not sure if this is doable and is probably over complicated for this use case.

Add a DiscordBadge

Sometimes documentation isn't enough - you need to reach out to the community of an open source project to get help. But how to find them? If an open source project has a related Discord channel, this badge will help to promote it.

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <DiscordBadge serverId={750063320614174871} inviteLink='https://discord.gg/X9HRSK5' />.

The badge needs to be exported from the badges index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

Additional context

A good badge to base this new badge on is the JSXReadmeBadge.

You can find out more about the badge on the shields.io page. It is in the chat category as "Discord".

Use promises API of fs

Currently we are using the synchronous API of the file system which has been deprecated for a while. Let's use promises instead.

** Would you be willing to help with a PR? **

• Yes, absolutely
• Yes, with some guidance
• Unfortunately no time :'-(

Describe the solution you'd like

Replace all usages of the synchronous API for fs with the promise API.

Additional context

This also creates an example of using awaitComponent

feat: LicenseFromPkg

Similar to <ContributingSection>, we could implement a <LicenseFromPkg /> that would generate a section with the license defined in package.json.

Would you be willing to help with a PR?

[X] Yes, absolutely
[ ] Yes, with some guidance
[ ] Unfortunately no time :'-(

Describe the solution you'd like

Create a component that can be render as <LicenseFromPkg pkg={pkg} />.
The license should be inferred from package.json and will render nothing if license is not defined.
User can provide an optional licenseFileName that when provided, will render an extra sentence

See LICENSE file provided in the repository for details.

Example output:

## License

MIT. See [LICENSE](./LICENSE) file provided in the repository for details.
<-- notice this line break -->

Add ContributingSection component

A CONTRIBUTING.md file is an established standard for communicating to contributors how to best contribute. But the first entry point to a repository is still the README file. Let's link them together with a section in the README.

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

The section should look like this:

## Contributing

If you are interested in contributing to this repository, please read up on the details in our [contributing guidelines](./CONTRIBUTING.md).

It should be accessible as <ContributingSection />, with an optional prop contributingFilePath that can be used as <ContributingSection contributingFilePath='./docs/CONTRIBUTING.md' /> to change the link.
The component also needs to be added to the end of the e2e test in examples and the corresponding expected file in test so that it shows up in this repo's README file.

The component needs to be exported from the components index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

Additional context

A good badge to base this new badge on is the GitHub Workflow badge.

A good example for a section is the HomepageFromPkg component and its usage in the examples file.

Add a CoverallsBadge component

Some repositories use Coveralls for test coverage. A badge showing the current test coverage helps to understand whether the repo currently is in good shape.

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <CoverallsBadge pkg={pkg} />, with an optionals props branch that can be used as <CoverallsBadge pkg={pkg} branch='master' /> to render to:

The badge needs to be exported from the badges index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

If you are interested in an additional challenge, try to also support BitBucket and Gitlab in addition to GitHub, based on package.json

Additional context

A good badge to base this new badge on is the GitHub Workflow badge.

Add NpmBundleSizeBadge component

When using a dependency in frontend or in a system where bootup times are critical (e. g. AWS lambda), the size of each dependency counts. Fortunately, there is Bundlephobia, which tells you how many KB (or even MB?) you will be adding with a new dependency. Let's add a badge for it!

This issue is meant to be a good first issue to get into this repository, and into open source contribution over all, as it will require to touch few existing files and is documented extensively. If this is your first contribution to open source, I encourage you to try this issue. Please note that I will only accept one of the good first issues per person to give as many people as possible the opportunity for a first contribution.

Please read our contribution guidelines before picking this up, it will also lead you through the process of setting up the repository.

Describe the solution you'd like

This is what the badge should look like in its most basic form:

It should be accessible as <NpmBundleSizeBadge pkg={pkg} />. It should also be added to the default badges used by BadgesFromPkg after the NpmDownloadsBadge which would automatically include it also in this repos README. This means that you will also have to adjust the expected result of the end-to-end test.

The badge needs to be exported from the badges index barrel file.
Please note that you will also have to provide test coverage and documentation for me to be able to accept the PR.

Additional context

A good badge to base this new badge on is the NpmVersion badge.

You can find out more about the badge on the shields.io page. It is in the size category as "npm bundle size".