This is the first day of my participation in the August Challenge. For details, see:August is more challenging
What is Github Profile Readme
Github profiles are used to show the fruits of one’s work. In addition to the inherent features such as contribution statistics, dynamic overview, and top repository, Github Profile Readme transforms Markdown into HTML for rendering on your home page, and uses a simple readme.md to get through customization.
It seems a neat idea that a project repository can be described by a Readme, just as a person can be described by a Readme. It is also easy to implement. Create a repository with the same name as the user name and edit the readme.md file in the repository. The specific initialization steps follow the official document, and will not be repeated here.
Play dead simple Readme
Github’s Markdown syntax (Github Markdown-gFM) is not much different from the normal syntax, but the support for emojis may be the highlight. Detailed directions to the official guide, less than 1 minute to read.
As you might have thought, Markdown can also embed HTML in addition to the basic syntax, so it’s free to create. The reality is that HTML tag support depends on the Markdown parser, but Github’s parser only supports base tags (such as H1-h5 /p/a/img). You can use Summary + detail for folding. Select + Option cannot be used to display the drop-down menu.
Although script/style/ Canvas is not supported, IMG is still a good place to start. Img can request GIF, SVG resources, and you can use it to show an interesting GIF, or to show an ANIMATED diagram drawn in SVG. The power of Markdown is limited, but the power of the server is infinite, and never underestimate the creativity of a programmer.
Awesome – Github – Profile-Readme collects some of the existing games, and I’ll summarize them for you.
Statistics
This section introduces dynamic statistics with excellent display effects, with animation effects, click on the image to preview on a new page.
Usage: Request SVG resources using the IMG tag, for example! [](https://github-readme-stats.vercel.app/api? username={GITHUB_Username})
Github Data statistics
Intuitive presentation of Github contribution data. Calculate a level value based on the number of submissions, contributions, issues, stars, PR, followers and warehouses owned. Including the S + (above 1%), S (above 25%), + (above 45%), A + (above 60%), and B + several levels (basic level)
https://github-readme-stats.vercel.app/api?username={GITHUB_Username}
Copy the codeProject Repository: Anuraghazra/Github-ReadME-STATS. The Github-ReadME-Stats project is an excellent example of this, with multiple topics, complete configuration items, and multiple languages, as well as three other cards described below.
Configuration introduction: public configuration, statistics card exclusive configuration, subject
Github achievement statistics
Assess the level of each sub-item and gather all the SSS badges and you are the martial Arts Supreme
https://github-profile-trophy.vercel.app/?username={Github_Username}
Copy the codeProject Repository and configuration introduction: Ryo-MA/Github – Profile-trophy
Github dynamic trend statistics
A graph showing the contribution values for the last 31 days, an alternative to the thermal map.
https://activity-graph.herokuapp.com/graph?username={Github_Username}
Copy the codeProject Warehouse and configuration introduction: github.com/Ashutosh007…
Github combo stats
Statistical days of continuous contribution, persistence, motivational artifact
https://github-readme-streak-stats.herokuapp.com/?user={Github_Username}
Copy the codeProject repository: DenverCoder1/ Github – Readme-Streak – Stats
Generator: github-readme-streak-stats.herokuapp.com/demo/
Statistics of Common Languages
According to the language usage of each warehouse statistics of common languages
https://github-readme-stats.vercel.app/api/top-langs/?username={Github_Username}&layout=compact
Copy the codeProject repository: Anuraghazra/Github – ReadME-STATS
Configuration description: common configuration, language card specific options, themes
Wakatime Programming duration statistics
Call Wakatime for data showing programming time and language usage ratio. Wakatime integrates with the IDE to collect and record labor data in the IDE. The configuration procedure is as follows:
- Sign up for Wakatime
- wakatime.com/vs-code Use the Wakatime VSCode plug-in to connect to Wakatime and VSCode and start collecting statistics
- Wakatime.com/settings/pr… Configure Display code time. You can publish statistics only when you enable Display code time. In this case, you can set the time range of the data used
https://github-readme-stats.vercel.app/api/wakatime?username={Wakatime_Username}
Copy the codeProject repository: Anuraghazra/Github – ReadME-STATS
Configuration introduction: public configuration, Wakatime card exclusive options, theme
Another item that displays Wakatime statistics is a Github Action that can be used directly in the repository
Introduction to Github Action installation and configuration: AKA – Readme · Actions · Github Marketplace
The sticky warehouse
Github is limited to the top six repositories by default, and using this card breaks that limit.
https://github-readme-stats.vercel.app/api/pin/?username={Github_Username}&repo={Repo_Name}
Copy the codeProject repository: Anuraghazra/Github – ReadME-STATS
Configuration introduction: common configuration, warehouse card exclusive options, themes
Activity
This section covers more general presentations
List recent Github events
Github Action Installation and configuration introduction: Github Activity in Readme
Blog dynamic
Read the data display from the Blog’s RSS feed
Blog Post Workflow · Actions · Github Marketplace
Other Platform dynamics
With the OpenAPI in hand, jumping on the edge of bad play.
- Twitter updates: Gazf/Github – Readme – Twitter: Add Twitter to your Github readme
- Music playing on Spotify: Kittinan/Spotify – Github profile: Show your Spotify playing on your Github profile
- Todoist statistics: Todoist Readme · Actions · GitHub Marketplace
Badge (Badge)
Label + Message
Shields. IO is the dominant player in this area and can be retrieved from markdown-badges if you don’t want to set them individually.
Logo
The single Logo is Shields. IO’s blind spot, and several possible approaches are recommended:
https://raw.githubusercontent.com/requestsimple-icons,deviconsSVG file under- Download SVG files from iconFont and other icon platforms and use them in the repository
- Take it from the icon warehouse organized by others
Toy Making (Preface)
Personally, I like visualized statistics, so I wonder how it is done. The core is “data capture” and “presentation”.
To update dynamic data in a timely manner, there needs to be a trigger mechanism that is easy to relate to in two ways:
- Github Action
- Serverless service
The presentation section that ultimately works is the readme.md file, which can be updated in two ways:
- Change the readme.md content
- through
imgThe tag requests an external resource and updates the content of the external resource.
Simple lists and tables can be presented in the first way, but since Github’s Markdown parser does not support SVG tags, data visualization has to go in the second.
To sum up, there are two implementation methods:
- Github Action triggers periodically -> Get Data -> Execute Logic -> Update readme.md -> Commit. Good for simple presentations
- Send the request to the Serverless server -> Get Data -> Execute Logic -> return the built SVG resource. Suitable for dynamic visual charts
The second method is not complicated to implement with the support of Serverless services such as Vercel and Heroku.
Next, start building something:
- Implement a LeetCode stats card based on the Github – ReadME-Stats project
- Try to build a more scalable SVG generation service and explore whether existing charting components can be directly applied
- Build a Profile Readme visual generator that will probably save you the long lecture in section 2 above.