ghloc-web

A website to display GitHub repository info:

• Total repo size
• Repo health calculated by GitHub (README.md, license, etc)
• Repo commit activity for the past year
• Bundle size of an npm package
• Total lines of code by file extension (provided by ghloc)

Addons

You can use a user script to add a direct link to repo's ghloc page. Can be installed with Tampermonkey.

Also Firefox addon is available. It provides LOCs stats dropdown directly on project's GitHub page and a direct link to repo's ghloc page. Source code available here.

Badges

You can use shields.io to embed badges into your README. Navigate to the endpoint badge docs and enter the following to the url field:

https://ghloc.vercel.app/api/OWNER/REPO/badge

Then you can preview your badge by clicking "Execute" and copy the full badge URL generated by shields.io which will look something like this:

https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/OWNER/REPO/badge

You can also optionally add an optional filter search param. For example the badge at the top of this README has the following URL and only counts files with .ts or .tsx extension:

https://img.shields.io/endpoint?url=https://ghloc.vercel.app/api/pajecawav/ghloc-web/badge?filter=.ts$,.tsx$

Development

You can start a dev server by running following commands:

git clone https://github.com/pajecawav/ghloc-web.git
cd ghloc-web
pnpm install
pnpm dev

Then navigate to http://localhost:3000