Create a collection of "developers" and add GitHub infos to them #1857

holger1411 · 2021-06-24T13:37:51Z

holger1411
Jun 24, 2021

Hallo!
Currently I ´am working on a test project and I´am relatively new to Eleventy.
As a test I try to build up a collection of developers and add some infos fetched from the GitHub API to the pages. Now I want to automate this and it seems I need some help with this...

But first things first: The test project can be found here

I start with a fresh 11ty install. I created a collection subfolder called /developers with an developers.json in it with this content:

{
    "layout": "layouts/developer.njk",
    "tags": ["developers"]
}

Than I add another file called holger1411.md (<- yep, thats me...) with this content:

---
githubHandle: holger1411
---

Than I installed node-fetch as dev dependency.

After it I add a /_data folder to the root directory and add the following to it:

const fetch = require("node-fetch");
module.exports = async function() {
  console.log("Fetching GitHub data...");

  return fetch("https://api.github.com/users/holger1411")
    .then(res => res.json()) // node-fetch option to transform to json
    .then(json => {
      return {
        url: json.avatar_url,
        twitter: json.twitter_username,
        followers: json.followers
      };
    });
};

I use this to fetch some basic infos for my GitHub profile and prepare that data to be available globally.

Okay and than I add a template file called "developer.njk" to the /_includes/layout folder.
That template comes with this content:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <img src="{{ github.url }}" />
    <p>Hi, my Github handle is <a href="https://github.com/{{ githubHandle }}" target="_blank">{{ githubHandle }}</a>
My Twitter handle is {{ github.twitter }} and I have {{ github.followers }}
    </p>
  </body>
</html>

And tatatata....it works. It shows my Github profil name, my follower count, my twitter profile handle and my avatar image...

So far so good...but now I want to add another developer to the collection. For example a file called zachleat.md with this content:

---
githubHandle: zachleat
---

Of course this will render my information instead of zachleat ´s...
At this point I need help. I need a dynamic API call fetching the informations for every GitHub handle in every single markdown files in the "developers" collection and than create pages with the specific informations for each developer...

I´am "just" a UX Designer with limited JS and API knowledge, but I can "smell" already that there is a easy solution near by...
I would be super happy if someone could point me in the right direction.

Big thx upfront!

Answered by pdehaan

Jun 24, 2021

I can think of two possible solutions:

an async shortcode that takes a GitHub username and returns your img and p tag output.
modify the global data file to return results for an array of GitHub usernames and use that to create pages using pagination.

Both solutions have some pros and cons, but guaranteed that you’ll learn something with each approach.

View full answer

pdehaan · 2021-06-24T14:45:38Z

pdehaan
Jun 24, 2021
Collaborator

I can think of two possible solutions:

an async shortcode that takes a GitHub username and returns your img and p tag output.
modify the global data file to return results for an array of GitHub usernames and use that to create pages using pagination.

Both solutions have some pros and cons, but guaranteed that you’ll learn something with each approach.

6 replies

pdehaan Jun 24, 2021
Collaborator

Pagination Edition

// ./src/_data/developers.js
const fetch = require("node-fetch");

const githubHandles = [
  "holger1411",
  "zachleat"
];

module.exports = async () => {
  const arr = [];
  for (const githubHandle of githubHandles) {
    const profile = await fetchGitHubUser(githubHandle)
    arr.push(profile);
  }
  // Return an array of GitHub profile objects.
  return arr;
}

async function fetchGitHubUser(githubHandle) {
  console.log(`Fetching GitHub data... ${githubHandle}`);
  const github = await fetch(`https://api.github.com/users/${githubHandle}`)
    .then(res => res.json()) // node-fetch option to transform to json
    .then(json => {
      return {
        username: githubHandle,
        url: json.avatar_url,
        twitter: json.twitter_username,
        followers: json.followers
      };
    });
  return github;
};

And then we can paginate over that array of data using something like this pagination example:

---
pagination:
  data: "developers"
  size: 1
  alias: github
permalink: "developers2/{{ github.username | slug }}/"
---

<img src="{{ github.url }}" />
<p>Hi, my GitHub handle is <a href="https://github.com/{{ github.username }}" target="_blank">{{ github.username }}</a>.</p>
<p>My Twitter handle is {{ github.twitter }} and I have {{ github.followers }} followers.</p>

OUTPUT

<!-- developers2/holger1411/index.html -->
<img src="https://avatars.githubusercontent.com/u/1568158?v=4" />
<p>Hi, my GitHub handle is <a href="https://github.com/holger1411" target="_blank">holger1411</a>.</p>
<p>My Twitter handle is holger1411 and I have 154 followers.</p>

<!-- developers2/zachleat/index.html -->
<img src="https://avatars.githubusercontent.com/u/39355?v=4" />
<p>Hi, my GitHub handle is <a href="https://github.com/zachleat" target="_blank">zachleat</a>.</p>
<p>My Twitter handle is  and I have 1390 followers.</p>

PROS

Pagination can be more flexible. Add one more GitHub username to a global data file and it will render a new page automatically.
Data fetching done in JavaScript. Layout code done in whatever language you want (we're using Nunjucks templating here, but you could use Liquid or whatever else). Not limited to JavaScript strings for formatting.

CONS

Trickier to set up.

Ryuno-Ki Jun 24, 2021

It might be even easier … https://twitter.com/zachleat/status/1407749382183735304

pdehaan Jun 24, 2021
Collaborator

Neat trick!
But I don't think it'd work for getting the twitter handle or follower count (or at least everything I tried gave me HTTP 406 errors).

Although I have been wondering if there would be a way to use the GitHub GraphQL API to get results for multiple users in a single request.

holger1411 Jun 24, 2021
Author

@pdehaan First of all: Thx for the detailed and in-deept help! And the best: It works!

I add the shortcode to the template file so I don´t have to repeat it with every content file.
And now I can mimic a Github profile just by adding a .md file with the Profile name inside the Font Matter section.

I add the changes to my demo + a simple frontpage and deploy it to Netlify:
https://angry-golick-09cc78.netlify.app/
I also add a third file called pdehaan.md ;-)

If anyone else want to test it: Fork it, add your own .md file to the collection and open a PR!. Here is the repo again: https://github.com/holger1411/11ty-api

Maybe I will add shortcodes for GitLab, Stackoverflow, dev.to, codepen, Bitbucket etc... so you can have an "aggregated combined social developer profile" ;-)

Ryuno-Ki Jun 24, 2021

Please sign me up once you have that!
(I was about to query all these APIs myself, since I signed up to quite some few of them)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create a collection of "developers" and add GitHub infos to them #1857

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Create a collection of "developers" and add GitHub infos to them #1857

holger1411 Jun 24, 2021

Replies: 1 comment · 6 replies

pdehaan Jun 24, 2021 Collaborator

pdehaan Jun 24, 2021 Collaborator

Pagination Edition

OUTPUT

PROS

CONS

Ryuno-Ki Jun 24, 2021

pdehaan Jun 24, 2021 Collaborator

holger1411 Jun 24, 2021 Author

Ryuno-Ki Jun 24, 2021

holger1411
Jun 24, 2021

Replies: 1 comment 6 replies

pdehaan
Jun 24, 2021
Collaborator

pdehaan Jun 24, 2021
Collaborator

pdehaan Jun 24, 2021
Collaborator

holger1411 Jun 24, 2021
Author