Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Add gist card #3064

Merged
merged 10 commits into from
Aug 14, 2023
Merged

Feature: Add gist card #3064

merged 10 commits into from
Aug 14, 2023

Conversation

qwerty541
Copy link
Collaborator

@qwerty541 qwerty541 commented Aug 11, 2023

This pull request adds new endpoint https://github-readme-stats-2p1ibrtpu-github-readme-stats-team.vercel.app/api/gist?id=1e0f4ebcc7c35bdee2cae9ccf6fec6ec which generates gist cards. Some examples provided below. What do you think @rickstaa @francois-rozet @anuraghazra @VydrOz?

image

image

image

image

image

image

image

image

Preview deployed there:

https://github-readme-stats-2p1ibrtpu-github-readme-stats-team.vercel.app/

TODOS:

  • docs
  • tests
  • refactoring

@vercel
Copy link

vercel bot commented Aug 11, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
github-readme-stats ✅ Ready (Inspect) Visit Preview Aug 13, 2023 10:41pm

@qwerty541 qwerty541 marked this pull request as draft August 11, 2023 04:42
@github-actions github-actions bot added the dependencies Pull requests that update a dependency file label Aug 11, 2023
@qwerty541 qwerty541 linked an issue Aug 11, 2023 that may be closed by this pull request
@codecov
Copy link

codecov bot commented Aug 11, 2023

Codecov Report

Patch coverage: 98.95% and project coverage change: +0.06% 🎉

Comparison is base (135176f) 97.62% compared to head (2ccd9a4) 97.69%.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3064      +/-   ##
==========================================
+ Coverage   97.62%   97.69%   +0.06%     
==========================================
  Files          24       26       +2     
  Lines        5343     5630     +287     
  Branches      466      487      +21     
==========================================
+ Hits         5216     5500     +284     
- Misses        125      128       +3     
  Partials        2        2              
Files Changed Coverage Δ
src/fetchers/gist-fetcher.js 97.16% <97.16%> (ø)
src/cards/gist-card.js 100.00% <100.00%> (ø)
src/common/icons.js 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@VydrOz
Copy link
Contributor

VydrOz commented Aug 11, 2023

This pull request adds new endpoint http://localhost:3000/api/gist?username=rickstaa&id=1e0f4ebcc7c35bdee2cae9ccf6fec6ec which generates gist cards. Some examples provided below. What do you think?

Perfect. I suppose we can use the same themes as the other cards.

Copy link
Collaborator Author

@qwerty541 qwerty541 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This pull request adds new endpoint http://localhost:3000/api/gist?username=rickstaa&id=1e0f4ebcc7c35bdee2cae9ccf6fec6ec which generates gist cards. Some examples provided below. What do you think?

Perfect. I suppose we can use the same themes as the other cards.

Right, this card supports all themes like the rest. I've updated the pull request description and added some examples. You can check other themes using this preview deploy of this branch: https://github-readme-stats-ksyzpjxl9-github-readme-stats-team.vercel.app/

@github-actions github-actions bot added the documentation Improvements or additions to documentation. label Aug 11, 2023
@qwerty541 qwerty541 added enhancement New feature or request. new-card New card proposal. javascript Pull requests that update Javascript code feature labels Aug 11, 2023
Copy link
Collaborator

@rickstaa rickstaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comments. I think using the GraphQL endpoint would make more sense. What do you think?

const response = (
await axios({
method: "get",
url: `https://api.github.com/gists/${id}`,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can get all information from the GraphQL API:

{
  viewer {
    gist(name: "fb514518d708593b9a218eb61381e400") {
      name
      owner {
        login
      }
      stargazerCount
      forks {
        totalCount
      }
      files{
        language {
          name
        }
        size
      }
    }
  }
}

This way, we don't need to add the parseHTML library.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you're right, this way is better since we send only one request instead of two and we don't need additional library for HTML parsing. I have updated the code.

response.files[Object.keys(response.files)[0]].filename
}`,
description: response.description,
language: response.files[Object.keys(response.files)[0]].language,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand why you use the language of the first file but a gist can have multiple files. Maybe we can use the language of the file that has the biggest size?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wrote little function for calculating primary language by files size.

https://github.com/anuraghazra/github-readme-stats/pull/3064/files#diff-85d91b5e80c17d5aa6499442fb72b2f5cc1a263e176ccba2187f106163584603R85-R103

Tell me what do you think

Copy link
Collaborator

@rickstaa rickstaa Aug 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing! I checked your code, and I think it is very well-coded 👍🏻. I guess for consistency; it would be nice:

Apart from that, I think this pull request can be merged 🚀!

@github-actions github-actions bot added the ⭐ top pull request Top pull request. label Aug 13, 2023
@github-actions github-actions bot removed the dependencies Pull requests that update a dependency file label Aug 13, 2023
@rickstaa rickstaa self-requested a review August 13, 2023 10:41
Copy link
Collaborator

@rickstaa rickstaa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check the comments above 👍🏻. Apart from that, good to go!

@@ -0,0 +1,79 @@
import { renderGistCard } from "../src/cards/gist-card";
import { describe, expect, it } from "@jest/globals";
Copy link
Collaborator

@rickstaa rickstaa Aug 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can add a snapshot test for consistency with the other cards (see https://github.com/anuraghazra/github-readme-stats/blob/master/tests/fetchTopLanguages.test.js for an example for example) 🤔?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I planned to cover new gist card code with tests completely. As you can see i have some todos at the bottom of pull request description and writing tests still actual. Currently i wrote all basic tests including rendering, fetching data and e2e. They works. We can merge this pull request now and increase tests converage to 100% step by step later. Or we can wait for full converage. On your chice, i have converted this pull requests from draft into ready to merge. Feel free to merge.

@rickstaa rickstaa merged commit fe901dd into master Aug 14, 2023
6 checks passed
@rickstaa rickstaa deleted the feature_add_gist_card branch August 14, 2023 09:28
@rickstaa
Copy link
Collaborator

@qwerty541, thanks for implementing this. Merged into main!

@qwerty541
Copy link
Collaborator Author

@qwerty541, thanks for implementing this. Merged into main!

Awesome!

@VydrOz Thank you for great idea suggestion and feedback!

@rickstaa Thank you for fast review and useful code improvements suggestions!

It was pleasure for me to implement this together with you.

devantler pushed a commit to devantler/github-readme-stats that referenced this pull request Sep 24, 2023
* Feature: Add gist card

* dev

* dev

* dev

* dev

* dev

* dev

* e2e

* e2e test timeout
ABA2396 pushed a commit to ABA2396/github-readme-stats that referenced this pull request Dec 22, 2023
* Feature: Add gist card

* dev

* dev

* dev

* dev

* dev

* dev

* e2e

* e2e test timeout
ABA2396 pushed a commit to ABA2396/github-readme-stats that referenced this pull request Dec 22, 2023
* Feature: Add gist card

* dev

* dev

* dev

* dev

* dev

* dev

* e2e

* e2e test timeout
setdebarr pushed a commit to setdebarr/github-readme-stats that referenced this pull request Jan 12, 2024
* Feature: Add gist card

* dev

* dev

* dev

* dev

* dev

* dev

* e2e

* e2e test timeout
jacobbexten pushed a commit to jacobbexten/github-readme-stats that referenced this pull request Nov 6, 2024
* Feature: Add gist card

* dev

* dev

* dev

* dev

* dev

* dev

* e2e

* e2e test timeout
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation. enhancement New feature or request. feature gist-card javascript Pull requests that update Javascript code new-card New card proposal. ⭐ top pull request Top pull request.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] Card for GitHub Gist
3 participants