Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shakibamoshiri/badge-for-git

badge, button, line for github and stackoverflow users using SVG
https://github.com/shakibamoshiri/badge-for-git

badge button cusom-badge custom-button dynamic-svg line svg-generator

Last synced: 3 months ago
JSON representation

badge, button, line for github and stackoverflow users using SVG

Host: GitHub
URL: https://github.com/shakibamoshiri/badge-for-git
Owner: shakibamoshiri
License: other
Created: 2018-02-14T11:06:42.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2022-04-15T18:41:07.000Z (almost 3 years ago)
Last Synced: 2024-10-31T07:34:09.667Z (4 months ago)
Topics: badge, button, cusom-badge, custom-button, dynamic-svg, line, svg-generator
Language: JavaScript
Homepage: https://shakibamoshiri.github.io/badge-for-git/
Size: 747 KB
Stars: 14
Watchers: 3
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Hi

- `badge 2 'type:web-app'`
-
- `badge 2 'birth:Date()'`
-
- `badge 2 'name:badge for git(hub)'`
-
- `badge 2 'support:all modern browsers'`
-

prerequisite

⚪ create
⚫ prerequisite
⚪ how-to
⚪ feature
⚪ troubleshooting
⚪ color-guide
⚪ dynamic-version
⚪ bottom
⚪ top

should have:

1. A font of `monospace` family. Default is: `'DejaVu Sans Mono', 'Source code variable', monospace`
2. Modern Browsers which can support **SVG** and **CSS Animation**, also **copy to clipboard**

assumption:

1. You are familiar with **Terminal** and with basic commands like: `ls`, `cd`, `cat`, etc.
2. You know how to use/apply colors in **Hex** value like: `#CB0000` or `#434343`

if:

1. you are a user/member of **Stack-overflow** then first visit: [badge-for-stackoverflow](https://github.com/shakibamoshiri/badge-for-stackoverflow)
2. you are not familiar with **Hex Color** then read the color-guide at the bottom or just visit w3schools-color-reference
3. you have any questions, suggestions, ideas, doubts, critical they are welcome :) raise an issue

how to

⚪ create
⚪ prerequisite
⚫ how-to
⚪ feature
⚪ troubleshooting
⚪ color-guide
⚪ dynamic-version
⚪ bottom
⚪ top

You will open the app, try generating a badge based on a style that is available and its command.
For example:

- `badge 10 "made-with:for-you"`

based on style 10 will generate a SVG file and you
will see it on the screen as well. Meanwhile the last SVG file you have created, its source-code
will be copied to your clipboard and that is it. It is ready to use.
Then you can go to your own repository and create a new file with `svg` extension. like: `for-you.svg`
Paste the code there and save it. It is ready to use on/in your README.md file.

step 1 generate code:

step 2 create new file:

step 3 commit new file:

step 4 (optional) click on the SVG file:

step 5 copy its link:

step 6 add that link into your README file:

and here is the result:

feature

⚪ create
⚪ prerequisite
⚪ hoe-to
⚫ feature
⚪ troubleshooting
⚪ color-guide
⚪ dynamic-version
⚪ bottom
⚪ top

- diversity
- 10 styles for badge
- 7 styles for button
- 5 style for line
- speed (= fast and straightforward SVG generation) try `badge 1..10 "bfg:bfg"`
- simplicity (= based on [constant-width font](https://en.wikipedia.org/wiki/Monospaced_font), so no ``, ``, ``, `` )
- `0%` mouse requirement
- auto-copy source-code to your clipboard
- log everything to console (for developers)
- unlimited/flexible suffix repetition (regular or empty)
- unlimited/flexible change-size
- unrestricted background/foreground-color
- prefix/suffix separation for make it even more beautiful
- unlimited new ideas (you can create your own style just by adding a single function in `JS`)

Why is that?

In **January 18th 2018** in the shields.io chat-room

> Hi. Is there any one help me about dynamic badge? I always get: invalid resource ...

diversity

| style | command | result | suffix-repetition | separation |
|-------|---------------------------|----------------------------|-------------------|------------|
| 1 | `badge 1 "prefix:suffix` | | ✔ | ✔ |
| 2 | `badge 2 "prefix:suffix` | | ✕ | ✕ |
| 3 | `badge 3 "prefix:suffix` | | ✔ | ✔ |
| 4 | `badge 4 "prefix:suffix` | | ✕ | ✕ |
| 5 | `badge 5 "prefix:suffix` | | ✔ | ✔ |
| 6 | `badge 6 "prefix:suffix` | | ✔ | ✔ |
| 7 | `badge 7 "prefix:suffix` | | ✔ | ✔ |
| 8 | `badge 8 "prefix:suffix` | | ✔ | ✔ |
| 9 | `badge 9 "prefix:suffix` | | ✔ | ✔ |
| 10 | `badge 10 "prefix:suffix` | | ✕ | ✕ |

unlimited/flexible suffix repetition (regular or empty)

- `badge 9 'one:two:three:four:five:six:seven:eight:nine:ten'`
-
- `badge 9 'one::two::three::four::five'`
-
- `badge 9 '::::::::::::::::::::'`
-
- `'DLM=10'`
- `badge 9 '::::::::::::::::::::'`
-

unlimited/flexible change-size

- `bfs 5`
- `badge 10 'made-with:for-you'`
-
- `bfs 99`
- `badge 10 'made-with:for-you'`
-

unrestricted background/foreground-color

- `badge 3 '#CB0000:#434343' #CB0000:#434343`
-
- `BTC=#FF0`
- `badge 3 '#CB0000:#434343:and text color is #FF0'`
-

prefix/suffix separation

- for styles: 1, 3, 5, 6, 7, 8, and 9
- `DLM=5`
- `badge 5 'platfrom:Linux:Windows:Mac'`
-
- `DLM=30`
- `badge 5 'platfrom:Linux:Windows:Mac'`
-
- `DLM=10`
- `badge 9 'do::::::you::::::like::::::this'`
-
- `DLM=5`
- `badge 8 'do::::::you::::::like::::::this'`
-

theme

Github (default)

- `theme G`
- `badge 5 'theme:G:github'`
-

Stack-overflow

- `theme S`
- `badge 5 'theme:S:stack-overflow'`
-

Twitter

- `theme T`
- `badge 5 'theme:T:twitter'`
-

Facebook

- `theme F`
- `badge 5 'theme:F:facebook'`
-

troubleshooting

⚪ create
⚪ prerequisite
⚪ hoe-to
⚪ feature
⚫ troubleshooting
⚪ color-guide
⚪ dynamic-version
⚪ bottom
⚪ top

old browser

- if the code is NOT copied to your clipboard, then use `shc` command (= show-clipboard) it appears at the top-right corner
- if you want to see the source-code, hit `alt-v` (= verbose) and then open your console (in you browser). source-code is logged there

inaccurate result

- run `df` command and you should get a nice and clean output (not messy)
- make sure you have the correct **font**, see the prerequisite section above
- hit `alt-l` and open your console (in browser) and see if everything is logged appropriately or not
- do NOT zoom in/out, instead use `fs` (= font-size) and `bfs` (= badge-font-size) commands
- change your browser. Different browsers handle character height/width differently.

funky mouse movement

- change your browser. Different browsers handle character height/width differently.

color guide

⚪ create
⚪ prerequisite
⚪ hoe-to
⚪ feature
⚪ troubleshooting
⚫ color-guide
⚪ dynamic-version
⚪ bottom
⚪ top

This is a very compact and brief tutorial that you can quickly learn and memorize **hex-color-value**
important:

1. do NOT think of these values (e.g `#FF0000`) as a single number or single quantity
2. ignore the leading symbol `#`. It is not important
3. separate them in your mind and when you see `#FF0000`, think about `FF`, `00` and `00`

Now, since we can represent any colors by mixing the **red**, **green** and **blue** color, each of this value is
for representing one of these main color.

- `FF,__,__` is for representing color or in binary `11111111,00000000,00000000` or in decimal `255,0,0`
- `__,FF,__` is for representing color or in binary `00000000,11111111,00000000` or in decimal `0,255,0`
- `__,__,FF` is for representing color or in binary `00000000,00000000,11111111` of in decimal `0,0,255`

You should (have to) memorize these three colors and the position of each, which comes in this order:

- `red,green,blue` or `FF,FF,FF` or `255,255,255`

Now instead of trying to memorize a number from `0` to `255` or to `FF`, divide 255 by **25** which we get 11 values and then we can memorize these, easily.
Here is a table and these **11** values which I memorized them. Even if you forgot them you can use the hex value equivalent of

- (decimal) 0, 25, 50, 75, 100, 125, 150, 175, 200, 225 and 250 which we can round it up to 255 which can be
- (hex ) 0, 19, 32, 4B, 64, 7D, 96, AF, C8, E1 and FA which we can round it up to FF

Now it is easier to memorize these eleven, other than 255 values (e.g 0 to 255).

- need bright red, use `FF`
- need dark red use `C8` or `AF`

hex (= decimal)
red: #XX0000
green: #00XX00
blue: #0000XX
mix: #XXXXXX

0 (= 0)

19 (= 25)

32 (= 50)

4B (= 75)

64 (= 100)

7D (= 125)

96 (= 150)

AF (= 175)

C8 (= 200)

E1 (= 225)

FF (= 255)

Even if these **11** values seem hard for you can divide 256 by **64** and only memorize 5 numbers

- (decimal) 0, 64, 128, 192, 255
- (hex ) 0, 40, 80, C0, FF

if you are wonder/curious about other colors like **yellow** and **orange**, they are just created by combing these three **red**, **green** and **blue**

- yellow: full-red and full-green = `#FFFF00`
- cyan: full-green and full-blue = `#00FFFF`
- purple: full-red and full-blue = `#FF00FF`
- orange: full-red and half-green = `#FF8000` (= `FF` and `80` and `00`) or (= 255, 128, 0)

dynamic-version

⚪ create
⚪ prerequisite
⚪ hoe-to
⚪ feature
⚪ troubleshooting
⚪ color-guide
⚫ dynamic-version
⚪ bottom
⚪ top

license

⚪ create
⚪ prerequisite
⚪ hoe-to
⚪ feature
⚪ troubleshooting
⚪ color-guide
⚪ dynamic-version
⚫ bottom
⚪ top