I think everyone who is interested in open source has more or less known the content I shared today. It is also some powerful tools I use in doing open source projects, which can make our open source projects and Github home page more powerful. Finally, I will share a readme.md of my own Github home page. You can refer to it.

After reading this article, you can learn:

  • Use readME-MD-Generator to quickly beautify your ReadMe.md
  • Use gitHub- readME-STATS to automatically generate individual statistical analysis reports
  • Use Git-emoji to visualize your code commit record

How to get a nice Readme.md for your open source project?

Wandering around the community, Okata found readME-MD-Generator.

The readME-mD-Generator helps us generate the readME structure by scanning our package.json and git configuration.

The resulting readme.md is shown as follows:

In addition, a good package.json file should contain the following metadata:

{
  "name": "H5-Dooring"."version": 1.1.3 ""."description": "H5-dooring is a powerful, open source, free H5 visual page configuration solution dedicated to providing a set of H5 landing page best practices that are simple, professional, reliable, and infinitely possible. The technology stack is based on React, and the background is developed by NodeJS.."author": "Author information"."license": "Open Source Protocol"."homepage": Home Page Address."repository": {
    "type": "git"."url": "Git Repository address"
  },
  "bugs": {
    "url": "Address for others to mention the issue."
  },
  "engines": {
    "npm": "> = 5.5.0"."node": "> = 9.3.0"}}Copy the code

You can also refer to the above specifications when you do open source projects, to make your own open source projects more robust and beautiful, here is to share a readme.md effect I use this tool to generate:

Address: mitu – editor | lightweight and powerful photo editor

Use two.github-readme-statsAutomatically generate personal statistical analysis reports

We all know that github profiles are pretty boring by default, but we’ve seen a lot of great github profiles and they’re pretty beautiful, like this one:

Why is that? To be honest, the man above is the author of the github profile tool. As you can see, his profile page has a very nice graph, and the tool that generates this dynamic graph is github- Readme-Stats. It can get GitHub statistics generated dynamically in our README, and we can use it simply by adding the following code to the README on our GitHub home page:

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-st ats)Copy the code

We just need to change it? Username = is our own GitHub username.

Customize your own statistical topics

At the same time, we can easily customize the theme of the statistical card. The default theme provided by the tool is as follows:

Again, we just need to add the following code to the README:

! [Anurag's GitHub stats](https://github-readme-stats.vercel.app/api? username=anuraghazra&show_icons=true&theme=radical)Copy the code

This makes it easy to choose your favorite theme, and even more powerful, you can customize the color of the theme, so you can try it out for yourself on Github.

Add a hot language card for your own project

The Popular Languages card shows the programming languages commonly used by our open source projects on GitHub, as shown below:

You can also set it to a compact layout:

This is as simple as configuring the following code:

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/an uraghazra/github-readme-stats)Copy the code

More details can be found on Github. The github address is as follows:

github-readme-stats

Here’s how my Github profile looks after I’ve configured it:

Use git-emoji to visualize your code submission

Git-emoji is the emoji guide for Git submission. We submit the log log according to its specification, and the image and understandable submission emojis will be generated, as follows:

We see the more famous open source project submission will have the image emoji, also follow the corresponding submission specifications. Here’s its introductory website:

Online: gitmoji.js.org/

We can use its guide to easily optimize our open source commit log, so try it

The last

Here is a github README template I configured, you can refer to: beautify your Github personal home page, later I will output more practical open source projects and frameworks on data visualization and engineering, if you have other questions or needs, you can communicate with the author.

If this post was helpful to you, I hope you can give me a like and a bookmark to encourage me to continue writing hardcore front end posts. You can also pay attention to the author of the public account talk front first push front good article.

  • How to design a component store that visually builds a platform?
  • Design the visualized large screen building engine from zero
  • Build the desktop visual editor Dooring from zero using electron
  • (low code) Visual build platform data source design analysis
  • Build PC page editor PC-Dooring from scratch
  • How to build building blocks to develop H5 pages quickly?