bellisario/profilator

Add GitHub profiles to Markdown in a snap

GitHub Profilator

Add GitHub profiles to Markdown in a snap

Warning
This is an Alpha version of the project, and it is not stable yet.

Official website: https://profilator.deno.dev/

Are you using GitHub Profilator? Let us know on this discussion! 🚀

Example

Profile	Smooth Error

You can also customize the scale of the Profilator (there are no step scaling limits, ex. you can also scale 0.93534...x)

1x scale	0.75x scale	0.5x scale

Warning: Currently scale cannot be below 0.5x (because Profilator will become invisible 👻)

How to use the scale option

Generate a new Profilator from Profilator website and then when adding to markdown change it like this:

+ [![Bellisario's Profilator](https://profilator.deno.dev/Bellisario?v=1.0.0.alpha.4&scale=0.75)](https://github.com/Bellisario)
- [![Bellisario's Profilator](https://profilator.deno.dev/Bellisario?v=1.0.0.alpha.4)](https://github.com/Bellisario)

Tip: you can also scale more than 1x, for example 2x, but for now the image resolution is the same, so could be grainy

Warning: Profile images over 3x will be rendered as 3x to prevent server bandwidth consumption too high and client heavy image downloads.

Other tips

Force username letter uppercase

If you want to force an username letter to be uppercase, just write the username with the letter in uppercase, Profilator will be able to parse it anyway and you'll see that in uppercase, too.
See the example below:

lowercase	forced uppercase

How it works

Under the hood, GitHub Profilator uses the GitHub API to fetch the profile data and then uses a pre-built template to generate the image, with the all the data needed.

Technologies

I decided to use Deno for this project because it's a great tool for building simple and fast servers, with the help of the awesome Deno Deploy.

The template is built with Figma (and then manually modified) and you can find the .fig file here.

Why should you use GitHub Profilator?

There is a simple answer to this question: like the description said "you can add GitHub profiles to Markdown in a snap" and I can also add you are able also to get a beautiful profile display for your GitHub profile, and not an "ugly" one like below (you can see on a lot of repositories):

Giorgio Bellisario

Development

To get started, clone the repo:

git clone https://github.com/Bellisario/profilator.git

Then, you can run the following command to start the server:

deno task dev

You can also run the following command to start the server in production mode:

deno task start

---

Warning: You could need to create a new GitHub personal access token to use this server (especially if your IP Address is associated from GitHub as "too many requests").

To use a personal access token

Create a new one from here (it requires no permissions).

Then, you can set the token into a file named .github_token in the root of the project. You can also use the terminal like this:

echo <token> > .github_token

If you prefer, you can also create a new environment variable called GITHUB_TOKEN and set it to the token, but this is not recommended for development use: it's only recommended if you want to use the server in production mode (for example) on Deno Deploy.

How to contribute

Feel free to open an issue or a pull request but follow Contributing Guidelines.

profilator's Issues

Image resize with scale

Currently, images loaded through custom scale are the same of the 1x scale.
This is bad for loading times and grainy images while using a scale more than 1x.

How will be developed

• detect the scale using the URL parameter passed
• edit template through the Replacer and multiply the original size with the scale option.

Font consistency on all sites (DEV.to issue)

Currently, there is a problem of font type on DEV.to that seems not to use Verdana/sans-serif but use the default font.

Solution: try to solve this issue using SVG or CSS properties.

---

Link of the issue: https://dev.to/cicirello/comment/2073k

Allow scale SVGs

Currently, there is just an option to embed a Profilator and there is no way to change the size.

How will be developed

• An URL parameter will be added with the key: "scale"
• The scale property will be multiplied with the original height and width values
• If no scale is passed, just multiply by 1
• The new width and height will be passed to SVG and added through the Replacer (used in the Profile function)

Cache Age not working

Cache Age seems not to work and all the requests are kept on cache too much time...

Should be used something like that:

ctx.response.headers.set(
        'cache-control',
         's-maxage=' + oneDaySeconds,
);

"Source Code" button not working

Currently the source code button is not working...

Change SVG color based on user color scheme

I'm not sure this can be made but would be great if the user will be able to see the Profilator through its color scheme and not just black.

Limitations

This actually will NOT change based by GitHub color set, because there isn't a way to detect how it's set, instead, it will be made by looking at user preferred color scheme.

How will be developed

• The color of the border and the background will be changed using CSS and looking for preferred color scheme. (I don't know if this can be actually made because of SVG. If can't be made, the fallback will be to change the SVG background color to transparent to respect user GitHub theme, but in this way the border will be kept in a black style)
• If a "forceScheme" URL parameter is passed, will be applied the theme (dark or light) manually choosen
• All the URL parameter logic will be passed into the SVG through the use of Replacer.