https://github.com/igorkowalczyk/github-views
👀 Count the views of your Github profile with your own custom badge
https://github.com/igorkowalczyk/github-views
astrojs deno github github-views profile profile-views typescript
Last synced: 9 months ago
JSON representation
👀 Count the views of your Github profile with your own custom badge
- Host: GitHub
- URL: https://github.com/igorkowalczyk/github-views
- Owner: IgorKowalczyk
- License: mit
- Created: 2022-12-23T14:55:22.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-13T13:16:20.000Z (9 months ago)
- Last Synced: 2025-04-13T17:18:01.744Z (9 months ago)
- Topics: astrojs, deno, github, github-views, profile, profile-views, typescript
- Language: Vue
- Homepage: https://views.igorkowalczyk.dev
- Size: 5.59 MB
- Stars: 13
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
- Codeowners: .github/codeowners
Awesome Lists containing this project
README
---
> [!NOTE]
> Don't forget to replace example `YOUR-USERNAME` parameter with real value.
## ✨ Basic usage
- Go to https://views.igorkowalczyk.dev and enter your Github username or any other text
- Copy the generated markdown code with the style you like and paste it in your `README.md` file
```markdown
```
## 🖼️ Available styles
> [!NOTE]
> The default style is `flat`
| Style | Example | Usage |
| ----- | ---- | ---- |
| `flat` |  | `style=flat` |
| `classic` |  | `style=classic` |
> [!NOTE]
> To apply the style, add to the URL `?style=YOUR-STYLE`, if you use other parameters you can use `&style=YOUR-STYLE`
## 🎨 Custom colors
> [!NOTE]
> The default color is `blue`
| Color | Example | Usage | Label Color | Label usage |
| ----- | ---- | ---- | ---- | ---- |
| `blue` |  | `color=blue` |  | `labelColor=blue` |
| `cyan` |  | `color=cyan` |  | `labelColor=cyan` |
| `green` |  | `color=green` |  | `labelColor=green` |
| `yellow` |  | `color=yellow` |  | `labelColor=yellow` |
| `orange` |  | `color=orange` |  | `labelColor=orange` |
| `red` |  | `color=red` |  | `labelColor=red` |
| `pink` |  | `color=pink` |  | `labelColor=pink` |
| `purple` |  | `color=purple` |  | `labelColor=purple` |  | `labelColor=gray` |
| `gray` |  | `color=gray` |  | `labelColor=gray` |
| `black` |  | `color=black` |  | `labelColor=black` |
| `ff69b4` |  | `color=ff69b4` |  | `labelColor=ff69b4` |
> [!NOTE]
> To apply the style, add to the URL `?color=YOUR-COLOR`, if you use other parameters you can use `&color=YOUR-COLOR`
> [!WARNING]
> HEX colors should be used without `#` symbol prefix.
## 📊 Number format
You can display the number of views in a more readable format. You can choose between `short` and `long` format.
| Format | Example | Usage |
| ----- | ---- | ---- |
| `short` |  | `format=short` |
| `long` |  | `format=long` |
> [!NOTE]
> To apply the style, add to the URL `?format=YOUR-FORMAT`, if you use other parameters you can use `&format=YOUR-FORMAT`
## 📝 Custom text
You can overwrite default `Views` text with your own label.
```markdown
```
> [!NOTE]
> Replace whitespace with `+` character in multi-word labels.
## 📦 `JSON` format
You can get the number of views in `json` format. It can be useful if you want to use the number of views in your application.
> [!WARNING]
> The API is read-only, you can't change the number of views.
**Request:**
```
https://views.igorkowalczyk.dev/api/json/YOUR-USERNAME
```
> [!NOTE]
> Replace `YOUR-USERNAME` with your real value.
**Response:**
```json
{ "views": 123 }
```
---
## 🔩 Local Development
1. Clone [this repository](https://github.com/igorkowalczyk/github-views) `git clone https://github.com/IgorKowalczyk/github-views.git`
2. Run `pnpm i` to install all dependencies,
3. Edit the `wrangler.jsonc` file with your values
4. Run `pnpm types` to generate types for the project
5. Run `pnpm dev` to start the development server or `pnpm preview` to preview the production build
## 🖥️ Hosting with Cloudflare Workers
1. Clone [this repository](https://github.com/igorkowalczyk/github-views) `git clone https://github.com/IgorKowalczyk/github-views.git`
2. Run `pnpm i` to install all dependencies,
2. Go to [Cloudflare Workers](https://workers.cloudflare.com/) and create a new project (you can import the project from GitHub)
3. Go to Cloudflare > Storage & Databases -> KV -> Create, and create a new KV namespace
3. Link the KV namespace to the project in the `wrangler.jsonc` file
4. Edit the `wrangler.jsonc` file with your values
4. Run `pnpm types` to generate types for the project
5. Run `pnpm dev` to start the development server or `pnpm preview` to preview the production build
5. If you want to deploy the project, run `pnpm check` to check the project and `pnpm deploy` to deploy the project to Cloudflare Workers
> [!NOTE]
> Refer to the [Cloudflare Workers documentation](https://developers.cloudflare.com/workers) and [Wrangler documentation](https://developers.cloudflare.com/workers/tooling/wrangler) for more information.
## ⁉️ Issues
If you come across any errors or have suggestions for improvements, please create a [new issue here](https://github.com/igorkowalczyk/github-views/issues) and describe it clearly.
## 📥 Pull Requests
When submitting a pull request, please follow these steps:
- Clone [this repository](https://github.com/igorkowalczyk/github-views) `https://github.com/IgorKowalczyk/github-views.git`
- Create a branch from `main` and give it a meaningful name (e.g. `my-awesome-new-feature`).
- Open a [pull request](https://github.com/igorkowalczyk/github-views/pulls) on [GitHub](https://github.com/) and clearly describe the feature or fix you are proposing.
## 📋 License
This project is licensed under the MIT. See the [LICENSE](https://github.com/igorkowalczyk/github-views/blob/main/license.md) file for details