Git Product home page Git Product logo

michaelcurrin / badge-generator Goto Github PK

View Code? Open in Web Editor NEW
330.0 8.0 103.0 32.15 MB

Magically generate Markdown badges for your docs ๐Ÿ›ก๏ธ ๐Ÿฆก ๐Ÿง™

Home Page: https://michaelcurrin.github.io/badge-generator/

License: MIT License

HTML 1.47% JavaScript 0.49% Vue 35.43% TypeScript 62.08% Makefile 0.47% Shell 0.06%
boilerplate badge shield markdown badge-generator docs-generator shields shieldsio documentation-tool documentation-generator

badge-generator's Introduction

Hi, I am a software maker

Also a "Data genie" and "open sourcerer"

I'm a Senior Software Engineer working in Amsterdam. I build projects for fun with Python, JavaScript, Jekyll and more. A big fan of elegant designs, clean code, and static site generators.

My profile links are here - bio.link/michaelcurrin.

Blogs and writing ๐Ÿ“œ

I've very active, writing content daily to at least one of these.

Area Links
Blog writing dev.to - @MichaelCurrin MichaelCurrin.github.io - Coding Blog
Reference and learning MichaelCurrin.github.io - Dev Resources MichaelCurrin.github.io - Dev Cheatsheets MichaelCurrin.github.io - Code Cookbook MichaelCurrin - learn-to-code

I'm also active on Jekyll Forums - see my profile @MichaelCurrin.

Tools and skills ๐ŸŽ“

Python is my first love and preferred language - see my Python repos on GitHub.

  • Backend (render HTML and build REST APIs)
  • Frontend (HTML, CSS, JavaScript)
  • Python packages (Requests, Pandas, Django, Flask)
  • JavaScript packages (Express, Vue, React, TypeScript, ApexCharts)
  • Shell scripting (Linux and macOS)
  • Software testing (TDD, BDD, Selenium browser tests)
  • Monitoring and observability (Datadog, New Relic, and PageDuty)
  • Architect and build AWS cloud infrastructure using Terraform (SQS queues, Postgres, MongoDB, CloudFront, DNS, EC2, and Lambdas)
  • Containerized services (Docker and Kubernetes)
  • Deployment pipelines (Netlify, GitHub Actions, Buildkite, Jenkins)
  • Data Science (web scraping, data visualization, machine learning)
  • Write documentation and make documentation sites

More details on the tools:

Area Tool
OS Linux macOS
Languages Bash Python Node.js JavaScript TypeScript
Frameworks Flask Vue
Databases PostgreSQL SQLite MongoDB
Infrastructure Docker Kubernetes Buildkite Terraform GitHub Actions Netlify AWS Datadog

I've also done some programming in MySQL, Rust, C, Arduino, Deno...

Iโ€™m currently learning more about ๐ŸŒฑ

  • Go
  • Vue
  • Python

Open source contrbutions

GitHub Stats

Here are some stats from the GitHub Readme Stats project for my profile.

Top languages card Streak stats card Profile stats card

The S score means "Top 1%" and is better than A+. Stats generated using GitHub Readme Stats service.

Projects ๐Ÿ’ผ

I like to make quickstarts which can be used as templates to make websites, such as with React, Vue, MkDocs, Jekyll or Docsify. See my quickstart projects on GitHub.

My gists are available on a one-page site - Gist Viewer

What is this README profile thing? ๐Ÿค”

Read more

This page you are reading is a profile readme. Around July 2020, GitHub made this a public feature.

To make one, create a repo named after your username (matching case exactly) and create a README.md file in it. Then go to your GitHub profile and you'll see your README appear there โœจ.

badge-generator's People

Contributors

dbelokon avatar dependabot[bot] avatar jerryhue avatar michaelcurrin avatar minhhang107 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

badge-generator's Issues

Add unit tests

There is a feature branch with ideal API tests without a working app. This may or may not be used. It was partially an experiment

Move out notes

Consider moving out resource and note content to other repo to keep cheatsheets lighter, but then link to it

Add logo styles

Inspired by coverage - https://github.com/nedbat/coveragepy

These use readthedocs and .rst so the code is light

Code coverage testing for Python.

|  |license| |versions| |status|
|  |ci-status| |win-ci-status| |docs| |codecov|
|  |kit| |format| |repos| |downloads|
|  |stars| |forks| |contributors|
|  |tidelift| |twitter-coveragepy| |twitter-nedbat|

Of interest:

  • python is 2.7 | 3.5 ... and prefixed with symbol
  • contributors
  • in repositories
  • downloads - only makes sense for package
  • stars and forks are both included and use github icon prefix

Add useful params

Darker background and deeper blue and flat. Also look into long cache

colorA=24292e&colorB=0366d6&style=flat&longCache=true&logo=github
[![GitHub Marketplace](https://img.shields.io/badge/Marketplace-Link%20Checker-blue.svg?colorA=24292e&colorB=0366d6&style=flat&longCache=true&logo=github)](https://github.com/marketplace/actions/link-checker)

GitHub Marketplace

Standard:

GitHub Marketplace

Use icons in badges

Use binary data...

https://stackoverflow.com/questions/38985050/how-do-i-use-the-logo-option-in-shields-io-badges

encode e.g. https://b64.io/
or shell tool

And percent encode it

http://meyerweb.com/eric/tools/dencoder/

This can go in a recipe/cheatsheet guide too for the overall process and specific tools (or reference those tools in existing docs).

https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiwxMy40Yy0xMC41LDAtMTksOC41LTE5LDE5YzAsOC40LDUuNSwxNS41LDEzLDE4YzEsMC4yLDEuMy0wLjQsMS4zLTAuOWMwLTAuNSwwLTEuNywwLTMuMiBjLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42IGMwLjItMS4yLDAuNy0yLjEsMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEsMC43LTMuNywyLTUuMWMtMC4yLTAuNS0wLjgtMi40LDAuMi01YzAsMCwxLjYtMC41LDUuMiwyIGMxLjUtMC40LDMuMS0wLjcsNC44LTAuN2MxLjYsMCwzLjMsMC4yLDQuNywwLjdjMy42LTIuNCw1LjItMiw1LjItMmMxLDIuNiwwLjQsNC42LDAuMiw1YzEuMiwxLjMsMiwzLDIsNS4xYzAsNy4zLTQuNSw4LjktOC43LDkuNCBjMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz48L3N2Zz4%3D

logo

Note some options like logo=github are available but this above proves the custom image usecase

Add commit frequency

![GitHub commit activity](https://img.shields.io/github/commit-activity/m/michaelcurrin/code-cookbook)

GitHub commit activity
GitHub commit activity
GitHub commit activity

Note username has to be lowercased despite that not matching my actual username.

Time: y, m, w

UPDATE these seem all to give errors occasionally in my README so are not reliable

Add badges

Issues
[![GitHub Issues](https://img.shields.io/github/issues/acch/ansible-boilerplate.svg)](https://github.com/acch/ansible-boilerplate/issues)

Github stars
[![GitHub Stars](https://img.shields.io/github/stars/acch/ansible-boilerplate.svg?label=github%20%E2%98%85)](https://github.com/acch/ansible-boilerplate/)

Auto license
[![License](https://img.shields.io/github/license/acch/ansible-boilerplate.svg)](LICENSE)

From https://github.com/acch/ansible-boilerplate/blob/master/README.md

Use emojis for buttons

Use large emoji next to docs, template or site buttons. Note it might be used to link to external project to or from homepage to repo.

Note it might not work inside a docs site homepage so might have to be unicode to avoid plugin use.

Release vs tag note

Note that the release badge honors the checkbox for pre-release or not.
And the tag will use v0 as orange pre-release. Based on my testing show here before updating the release

Point license badge to license heading

This might break a pattern of people expect, but can be what I want to do which is fine.

Maybe make a choice between the heading or the file.

If the section only contains a link to the file, then maybe the heading is not even needed. But by convention it seems to appear anyway in others' repos.

Also it is useful for being clear than a badge and if details are needed.

Add GH stats generator page

e.g.

GitHub Readme Stats

[![GitHub Readme Stats](https://github-readme-stats.vercel.app/api?username=MichaelCurrin&show_icons=true)](https://github.com/anuraghazra/github-readme-stats)

Handle JS package files

package.json

e.g.

https://shields.io/category/version or search dependency or package.json or node or npm for related badges

Prod

GitHub package.json dependency version (prod)

https://img.shields.io/github/package-json/dependency-version/developit/microbundle/@rollup/plugin-json

https://img.shields.io/github/package-json/dependency-version/developit/microbundle/rollup

For package.json

Dev dep

https://img.shields.io/github/package-json/dependency-version/developit/microbundle/dev/@babel/cli

Note @babel is the scope here. In package.json the value is @babel/cli

Add logo colors

The default blue here is hard to read

Made with Python

So add color.

Made with Python

[![Made with Python](https://img.shields.io/badge/Made_with-Python-blue?logo=python&logoColor=white)](https://python.org)

This could be a choice.

Perhaps the left or right background should change.

Also remember to generate these sample logos using the core app logic and not hardcoding - so they stay consistent.

Solve usecases

Draw, write, step through usecases of all my projects

Solve them all at once. To build something once and considering edgecases.

Figure out if a droplist or checkbox or multi sections or separate makes sense. Before coding it. Or applying it to sites.
Consider fixed badges vs custom badges.
Staples and per project.

Add credits

Generate a hidden section

Won't always be true e.g. Netlify and GH pages

<!-- Shields from https://shields.io/ -->
<!-- Generated with Badge Generator https:// -->

Or a mix of both.

Add dash support

Split URL into label=X message=Y etc.

You could follow the hints on shields.io use -- to make -. This is useful for repo names and URLs without having to setup separate parameters.
but separate params end up being more readable and easier to generate and one doesn't have to remember escaping rules for dash and underscore when editing

Add menu to homepage

This can be cards or buttons rather than just text/bullets

e.g.

  • Repo badges - metadata badges for your repo
  • Generic badges -...
  • Images - ...

This could use the same text as that in each view fie.

Add repo icon to homepage

e.g.

[MichaelCurrin/repo-boilerplates](https://github.com/MichaelCurrin/repo-boilerplates)

Find a way to include Github icon too whether from shields site or SVG

Fix image on mobile

Here we have a horizontal image which has height at 300 and it gets squashed on mobile.

Screenshot_20200909-131514_Chrome

Add credit

<!-- Badges generated with: https://michaelcurrin.github.io/badge-generator/ -->

Handle spaces

Separate left from the right

Made with React-URL-Query

What about hyphen on the right side, encode it?

Break out URLs

Sample:

[![NPM Version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Downloads Stats][npm-downloads]][npm-url]

<!-- Markdown link & img dfn's -->
[npm-image]: https://img.shields.io/npm/v/datadog-metrics.svg?style=flat-square
[npm-url]: https://npmjs.org/package/datadog-metrics
[npm-downloads]: https://img.shields.io/npm/dm/datadog-metrics.svg?style=flat-square
[travis-image]: https://img.shields.io/travis/dbader/node-datadog-metrics/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/dbader/node-datadog-metrics

NPM Version
Build Status
Downloads Stats


URLs at the bottom of the page in the original but it is more convenient to keep them just under badges

Use pipe

pipe separator can be used for PY versions.

eg

[![image](https://img.shields.io/pypi/v/pipenv.svg)](https://python.org/pypi/pipenv)
[![image](https://img.shields.io/pypi/l/pipenv.svg)](https://python.org/pypi/pipenv)
[![image](https://img.shields.io/pypi/pyversions/pipenv.svg)](https://python.org/pypi/pipenv)

image
image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.