Code Monkey home page Code Monkey logo

badgen.loopscript.com's Introduction

๐Ÿ“ File Structure

Add a file structure here with the basic details about files, below is an example.

.
โ”œโ”€โ”€ assets
โ”‚   โ”œโ”€โ”€ css
โ”‚   โ”‚   โ”œโ”€โ”€ index-ui.css
โ”‚   โ”‚   โ””โ”€โ”€ rate-ui.css
โ”‚   โ”œโ”€โ”€ images
โ”‚   โ”‚   โ”œโ”€โ”€ icons
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ shrink-button.png
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ umbrella.png
โ”‚   โ”‚   โ”œโ”€โ”€ logo_144.png
โ”‚   โ”‚   โ””โ”€โ”€ Untitled-1.psd
โ”‚   โ””โ”€โ”€ javascript
โ”‚       โ”œโ”€โ”€ index.js
โ”‚       โ””โ”€โ”€ rate.js
โ”œโ”€โ”€ CNAME
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ rate.html
โ””โ”€โ”€ README.md
No File Name Details
1 index Entry point

๐ŸŒต Branches

I use an agile continuous integration with iterations methodology, so the version is frequently updated and development is really fast.

  1. alpha is the development alpha stage branch.

  2. beta is the development beta stage branch.

  3. main is the production release branch.

  4. No other permanent branches should be created in the main repository, you can create feature branches but they should get merged with the master.

Steps to work with feature branch

  1. To start working on a new feature, create a new branch prefixed with feat and followed by feature name. (ie. feat-FEATURE-NAME)
  2. Once you are done with your changes, you can raise PR.

Steps to create a pull request

  1. Make a PR to stage branch.
  2. Comply with the best practices and guidelines e.g. where the PR concerns visual elements it should have an image showing the effect.
  3. It must pass all continuous integration checks and get positive reviews.

After this, changes will be merged.

Workflow Logic

Alt text

Hypothetically, if generic_blue_Module 1 = Dev & generic_yellow_Module 2 = Design then highlevel_workflow_logic = workflow_logic.png

Strict Guideline:

: If Key Term or Variable within nodes or hubs gets updated/renamed (i.e project_alias, entrypoints, endpoints), the previous value needs to be present in root documentation but as Strikethrough. : The logic to define a Key Term or Variable is by you as an ideation.

Guidelines:

: This is one definition of guidelines. : This is another definition of guidelines.


Original README.md :

Badgen Service

Home of badgen.net, fast badge generating service.

The Badgen Story

That's a service, that's a library, hooorey! - @tunnckoCore

Finally something to replace http://shields.io - @EGOIST

Epic work on Badgen! Porting the @dependabot badges over to it now. โšก๏ธ - @greybaker

The badgen library was born as an exploration of "is it possible to generate badge SVG markup directly (without using pdfkit/canvas/puppeteer to measure text width)?". The result is better than I expected, Width of Verdana (the de-facto font for badges) text can be calculated precisely with a prebuilt char-width-table, even no need to worry about kerning ๐Ÿคฏ

Then, logically, Badgen Service was born. I had a good time with shields.io, but as time goes by Shields gets slower, leaves more and more broken badges in READMEs. Badgen is trying to be a fast alternative with simplicity and flexibility. Its codebase is simple (2K LoCs vs Shields' 22K LoCs), well structured and fun to develop - it is pretty easy to add badge(s) for new service(s).

In the beginning, I was considering both Vercel and Google Cloud Functions. Then Vercel announced Edge Network on the same day as badgen.now.sh (the PoC of Badgen Service)'s reveal, what a fate! Cloudflare powered Vercel Edge Network is a perfect choice for such service, caching and scalability in simplicity. Badgen is the fastest possible badge generating service out there. It's fast, it's reliable, it's globally distributed and cached, thanks to Vercel.

At the time of badgen.now.sh's reveal, it had only four live badges as demonstrations. Since then, thanks to awesome people's help, Badgen keeps getting better at a fast pace. Welcome to join us, let's build the best badge service in the universe ๐Ÿ”ฅ

Anatomy

  • Written in TypeScript
  • Using badgen library to generate svg on the fly
  • Two visual styles
  • Two badge types
    • static badge - URL defined badge (label, status, color)
    • live badge - Show live status from 3rd party services
  • Builtin Icons & External Icon Support
  • Docker image amio/badgen

Developing

Contributors Maintainability Docker image

start dev server

npm run dev

start prod server

npm run build && npm start

run with docker image

docker run -p 3000:3000 amio/badgen

Add Live Badge

If a service you wish to have is still missing here, we welcome new contributions. Basically, you need to add a file in api/[name-of-service].ts and that's it. Take /crates as an example:

To ensure that your addition is working correctly, start the development server with npm run dev.

NOTES

  • You can create live badge without touching badgen.net's code. Checkout docs for /runkit or /https.

  • The /runkit support would be super handy for prototyping a new live badge.

Add Icon

You can contribute icons to badgen-icons. Please make sure new icon is optimized using svgomg.

Tracking Policy

Badgen use Sentry to collect errors for improving service, use Google Analytics on doc pages (home, /github, /packagephobia, etc.) to understand overall usage.

Badgen do not collect any identifying information.

Environments

Supported environment variables for managing a Badgen instance.

  • GITHUB_TOKENS - Comma delimited list of Github Tokens. Required for Github Badges
  • GITHUB_API - Custom Github API endpoint. e.g., https://github.mycompany.com/api/v3
  • GITHUB_API_GRAPHQL - Custom Github GraphQL API endpoint. e.g., https://github.mycompany.com/api/graphql
  • NPM_REGISTRY - Custom NPM registry endpoint
  • SENTRY_DSN - Sentry Error Monitoring Data Source Name
  • GA_MEASUREMENT_ID - Google Analytics Measurement ID

Contributors

Thanks to our contributors ๐ŸŽ‰๐Ÿ‘

Support Badgen

We are on OpenCollective https://opencollective.com/badgen

Support this project by donation, help Badgen continue and evolving!

[Become a backer]

Sponsors

badgen.loopscript.com's People

Contributors

amio avatar dependabot[bot] avatar vladimyr avatar tunnckocore avatar styfle avatar bokub avatar tusbar avatar jacobmllr95 avatar idleberg avatar faustbrian avatar andrewleedham avatar s0 avatar lukechilds avatar xobotyi avatar clarkdo avatar libinvarghese avatar simov avatar deepak-bhardwaj-ps avatar lucashalbert avatar lens0021 avatar shaqonline avatar wopian avatar viceice avatar kytta avatar neighborhood999 avatar g-plane avatar pd4d10 avatar loopscript avatar supersandro2000 avatar sim642 avatar

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.