Githubs stats & repo

[jmrplens]

Hi,
I have made a very preliminary (and very ugly code) version to show the statistics and repositories of one or more GitHub users. I use github-readme-stats. I have never been able to get the github-metadata plugin to work and I saw that I could use this.
If anyone knows of another way or has the github-metadata plugin working, we'll talk.

Check github stats in my web

The code

_data/github.yml

- username: jmrplens
  repositories:
    - A-Lab
    - PyOctaveBand
    - TFG-TFM_EPS
    - SetFigPaper
    - FDTDexamples
    - MATLAB_Instruments
    - getANSIfrequencies
    - LoVE-BASS

_data/github_style.yml

theme:
  light_theme:
    title_color: "B509AC"
    icon_color: "4c71f2"
    text_color: "000000"
    bg_color: "ffffff"
    border_color: "e6e6e6"
  dark_theme:
    title_color: "B389F5"
    icon_color: "4c71f2"
    text_color: "e8e8e8"
    bg_color: "000000"
    border_color: "424246"

_pages/codes.md

---
layout: page
permalink: /codes/
title: Codes
nav: codes
description: A quick look at the codes and programs that I have shared on GitHub. You can also see my statistics.
---

<!-- STYLE -->
{% assign themes = "light_theme" %}
{% assign title_color = site.data.github_style.theme[themes].title_color %}
{% assign text_color = site.data.github_style.theme[themes].text_color %}
{% assign icon_color = site.data.github_style.theme[themes].icon_color %}
{% assign bg_color = site.data.github_style.theme[themes].bg_color %}
{% assign border_color = site.data.github_style.theme[themes].border_color %}
{% assign style = '&title_color=' | append: title_color | append: '&text_color=' | append: text_color | append: '&icon_color=' | append: icon_color | append: '&bg_color=' | append: bg_color | append: '&border_color=' | append: border_color %}

{% for user in site.data.github %}

<h2>GitHub: {{ user.username }}</h2>

<div class="repocards">

<div class="repocard-single">
<a href="https://github.com/{{ user.username }}"><img class="repocard-img" alt="{{ user.username }} GitHub Stats" src="https://github-readme-stats.vercel.app/api?username={{ user.username }}{{style}}"></a>
</div>
<div class="repocard-single">
<a href="https://github.com/{{ user.username }}"><img class="repocard-img" alt="{{ user.username }} Most Used Languages" src="https://github-readme-stats.vercel.app/api/top-langs/?username={{ user.username }}{{style}}&layout=compact"></a>
</div>

</div>

## Repositories

<div class="repocards">

{% for repository in user.repositories %}

<div class="repocard-single">

<a href="https://github.com/{{ user.username }}/{{ repository}}">
  <img class="repocard-img" alt="{{ user.username }} repository - {{ repository}}" src="https://github-readme-stats.vercel.app/api/pin/?username={{ user.username }}&repo={{ repository}}{{style}}">
</a>
  
</div>

{% endfor %}

</div>

{% endfor %}

CSS

.repocards {
    display: flex;
    display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -moz-flex;
  	display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
 }
 .repocard-single {
 	flex: 1 1 auto;
 	padding: 5px;
 }
 .repocard-img {
 	max-width: 375px;
 }

[alshedivat]

this looks very cool!! thanks for sharing your code. definitely would be nice to iterate/clean the code a bit and add this as a template to _includes/ or something that anyone can include in their pages directly.

(may not have time to work on this myself, but happy to review PRs if someone jumps on this!)