nwtgck / gh-card Goto Github PK

View Code? Open in Web Editor NEW

1.3K 10.0 33.0 2.91 MB

:octocat: GitHub Repository Card for Any Web Site

Home Page: https://gh-card.dev

License: MIT License

Dockerfile 2.33% JavaScript 1.58% HTML 1.04% Vue 12.37% TypeScript 82.66%

github card svg png ogp embed repository markdown

gh-card's Introduction

gh-card

GitHub Repository Card for Every Web Site: https://gh-card.dev

Example SVG card

Demo

How it works?

The idea is similar to status badges from Travis CI, CircleCI and etc.

An image URL is like "https://gh-card.dev/repos/nwtgck/piping-server.svg". The request triggers the backend server to call GitHub API request. The repository information are cached currently by Redis.

Related projects

This might be similar to them. The purpose of this project is to provide an image which can be used in every site and the design should be like official GitHub repo card. I hope one day GitHub itself provides this feature officially.

gh-card's People

Contributors

Stargazers

Watchers

gh-card's Issues

text selection

If <embed> is used instead of <img> the text inside the gh-card is selectable.

<embed src="https://gh-card.dev/repos/mozilla/send.svg?fullname" />

Migrate deprecating GitHub API authentication through query parameters

Maybe, we need to migrate the API authentication in the following lines.

gh-card/backend/src/infra/DefaultGitHubApiService.ts

Lines 20 to 37 in 1abc38d

 let query = ''; 

 const headers= (() => { 

 if (this.githubCredential === undefined) { 

 return {}; 

 } else { 

 const {githubClientId, githubClientSecret} = this.githubCredential; 

 const h: {[key: string]: string} = { 

 // Basic Auth 

 "Authorization": `Basic: ${Buffer.from(`${githubClientId}:${githubClientSecret}`).toString("base64")}`, 

 }; 

 query = `?client_id=${githubClientId}&client_secret=${githubClientSecret}`; 

 return h; 

 } 

 })(); 

 const githubRes = await fetch(`https://api.github.com/repos/${repoName}${query}`, { 

 headers, 

 });

For more details, Deprecating API authentication through query parameters | GitHub Developer Guide
Related #590
Sunset Notice: API Authentication via Query Parameters | GitHub Changelog

Getting 502 Error on every request

Similarly to #155, it fails to load the .svg image. However it seems to happen with all repositories, not just some.

I can confirm it was working fine until a few days ago.

Text goes out of boundary

Maybe, something wrong with my fonts

Add suggestions drop-down to search box

New GitHub icon design!

We have new icon design on GitHub as follows.

Doesn't work for one of my repositories

For some reason, the svg for jrwrigh/ANSYS_CFX doesn't work correctly. On my website, it just sits there and tries to load an image, but it doesn't work and comes up with a broken image.

When trying to create a badge on the website (gh-card.dev), the preview image never loads. Not sure what's going on here, because it was definitely working a few weeks ago. And it works perfectly fine for all my other repositories.

number of stars and forks not rendering

This is a pretty cool project that helped me today with slides building! ❤️

Thanks a lot @nwtgck and rest of the contributor folks here who worked on this project.
Really helped me today with some repository preview images for a slide deck I'm working on ❤️

Add link to SVG

Just noticed the SVG text for the repo doesn't have a link to Github. This can be done easily with <a> tags after the 'repo name' comment.

example with my repo:
<a href="https://github.com/trishmapow"> <text xmlns="http://www.w3.org/2000/svg" fill="#0366d6" fill-opacity="1" stroke="none" xml:space="preserve" x="41" y="33" font-family="sans-serif" font-size="16" font-weight="630" font-style="normal">trishmapow/rf-jam-replay</text> </a>

Output (clickable): https://svgshare.com/i/D_M.svg

Authenticating using query parameters is deprecated

see: https://developer.github.com/changes/2019-11-05-deprecated-passwords-and-authorizations-api/#authenticating-using-query-parameters

gh-card/backend/src/main/scala/io/github/nwtgck/gh_card/GitHubApi.scala

Line 16 in 655b67c

 val query: String = gitHubAuthOpt.map(a => s"?client_id=${a.gitHubClientId}&client_secret=${a.gitHubClientSecret}").getOrElse("") 

Site down?

None of my images are loading and the example on https://gh-card.dev/ is a blank image.

Fails to render emoji and can't handle overflow words

FYI: 24OI/OI-wiki

Consider OSS License

Love the idea, quite a cool project.
Would it be possible to add an open source license?
Cheers

GitHub flavoured markdown emojis in the description aren't correctly rendered

For example, this is what happens when I try to generate the repository card for one of my repositories:

:smile_cat: should've been rendered as 😸

Seems to not working on some repository

Hello!

I tried to use gh-card on some of my repository but it doesn't work for som of them. (it work for the first one but no more)

the repository is Freyskeyd/instagram

I've no other information sorry :x

proposal: Add example for FaaS

Thank you for migrating to the TypeScript project.

It is might be friendly for users to add some examples to the README.

How to install the backend part (npm install from GitHub...)
How to use the backend part on FaaS like Netlify Functions

IPv6 support

The website lacks IPv6 support.

Add 2400:8500:1801:414:118:27:28:243 from v118-27-28-243.q6xl.static.cnode.io as an AAAA record
Configure Caddy to listen on IPv6
Configure the server for IPv6

Should have consistent size regardless of repository description length

The height of the card is different depending on the length of the repository description, if they are short or long.

Example:

Source:

Github cards on profile pages (e.g. https://github.com/nwtgck) have a consistent height regardless of the description length. Can we make cards have the same height?

https://gh-card.dev/

	let query = '';
	const headers= (() => {
	if (this.githubCredential === undefined) {
	return {};
	} else {
	const {githubClientId, githubClientSecret} = this.githubCredential;
	const h: {[key: string]: string} = {
	// Basic Auth
	"Authorization": `Basic: ${Buffer.from(`${githubClientId}:${githubClientSecret}`).toString("base64")}`,
	};
	query = `?client_id=${githubClientId}&client_secret=${githubClientSecret}`;
	return h;
	}
	})();

	const githubRes = await fetch(`https://api.github.com/repos/${repoName}${query}`, {
	headers,
	});