Codetime Card

Get dynamically generated Codetime stats for your README files.

Prerequirements

• Download the VScode extension Codetime

• Log in to the Codetime website and get a token (it is needed both to connect the extension and to get userID)

• Run the following command in the terminal:

  curl https://api.codetime.dev/v3/users/self \
  --header 'Authorization: Bearer YOUR_TOKEN'

  We need the id from the response

  {
  "id":34502, //this one
  "email":null,
  "username":"QueenDekim",
  "avatar":"https://avatars.githubusercontent.com/u/85904783?v=4",
  "githubId":85904783,
  "bio":null,
  "googleId":null,
  "plan":"free",
  "timezone":null,
  "uploadToken":"**********",
  "planExpiresAt":null,
  "planStatus":null,
  "createdAt":"2024-12-29T15:38:55.291194Z",
  "updatedAt":"2024-12-29T15:38:55.291194Z"
  }

  You will use this id to create a card in the following instructions.

Using

Use the HTML img tag:

<img height="140px"
  src="https://codetime-card.vercel.app/?userID=34502"
/>

Or use the Markdown image syntax:

![Codetime Card](https://codetime-card.vercel.app/?userID=34502)

You can also get programming language statistics using the type=languages parameter:

<img height="180px"
  src="https://codetime-card.vercel.app/?userID=34502&type=languages&top_n=5"
/>

![Codetime Languages Card](https://codetime-card.vercel.app/?userID=34502&type=languages&top_n=5)

The top_n parameter is used to indicate the number of languages

You can get combined card using the type=combined parameter:

<img height="180px"
  src="https://codetime-card.vercel.app/?userID=34502&type=combined"
/>

![Codetime Languages Card](https://codetime-card.vercel.app/?userID=34502&type=combined)

Language icons are specified in svg format in the src/language-icons.js file
You can generate a preview of the icons by running the command

nodemon src/generate-svg-list.js

The final preview will be in the file icons/icons.svg

You must provide a valid userID. Additionally, Codetime Card supports several options (with their default values):

showLogo: true
theme: [tomorrow, dracula, gruvboxdark, gruvboxlight, ...]
showBorder: true
showIcons: true
showAnimations: true
type: time | languages
days: 30 // only for type=languages
top_n: 5 // only for type=languages

Themes

With built-in themes, you can customize the look of the card.

Use &theme=THEME_NAME parameter like so:

![Codetime Card](https://codetime-card.vercel.app/?userID=34502&theme=dracula)

Show example

All built-in themes

Codetime Card comes with several built-in themes (E.g. dracula, gruvboxdark, gruvboxlight, solarizeddark, solarizedlight, tomorrownight, tomorrow).

See here for all available themes.

Use GitHub's theme context tag

You can use GitHub's theme context to make the card match the user's GitHub theme automatically. Just add #gh-dark-mode-only or #gh-light-mode-only at the end of an image link.

[![Codetime Card Light](https://codetime-card.vercel.app/?userID=34502&theme=tomorrow#gh-light-mode-only)](https://codetime-card.vercel.app/?userID=34502&theme=tomorrow#gh-light-mode-only)
[![Codetime Card Dark](https://codetime-card.vercel.app/?userID=34502&theme=dracula#gh-dark-mode-only)](https://codetime-card.vercel.app/?userID=34502&theme=dracula#gh-dark-mode-only)

Show example

Use GitHub's new media feature

You can also use GitHub's new media feature in HTML to control how cards appear in light or dark themes.

<picture>
  <source
    srcset="https://codetime-card.vercel.app/?userID=34502&theme=tomorrow"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <source
    srcset="https://codetime-card.vercel.app/?userID=34502&theme=dracula"
    media="(prefers-color-scheme: dark)"
  />
  <img src="https://codetime-card.vercel.app/?userID=34502&theme=dracula" />
</picture>

Development

Start

nodemon index.js # or npm run start

and point a browser to

http://localhost:3000/?userID=34502&theme=tomorrow

with the desired options.

License

This software is published under the GPLv3 license.