Table with githubbuttons

[malekcellier]

Hi!

First of, great work with al-folio, I really enjoy using it. Thanks for sharing that!

I like how you grouped repos in tables here: https://maruan.alshedivat.com/code/ but couldn't find it in the examples. I can see it depends on https://buttons.github.io/.

What's the best way to reproduce this?

Cheers
Malek

[george-gca]

The solutions in the example about tables don't fit your needs?

[malekcellier]

Have you looked at the link I provided above?

[george-gca]

Yes, and I don't see the problem there. That probably was not done automatically since it contains information like date of the repository, so you have to do it manually like

Date	Project	Package	GitHub
Dec, 2020	Federated learning via posterior averaging	fedpa	HTML Code for button

the rest is basically table styling.

[malekcellier]

Thanks @george-gca. I was just wondering where to put the various bits:

1. The github buttons source:

<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>

Where to put that source?

2. The tag itself, how to put is in the md file? It is not clear to me

<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/name/repo" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star name/repo on GitHub">Star</a>

How to include that tag in the table?

Thanks

[george-gca]

1. Where we put also the other script entries, at the bottom of _layouts/default.liquid
2. Exactly at the location you would put the text in the table. Markdown files in jekyll support html tags:

| Date | Project | Package | GitHub |
|:---:|:---|:---|:---|
| Dec, 2020 | Federated learning via posterior averaging | [fedpa](https://github.com/alshedivat/fedpa) | <a class="github-button" href="https://github.com/name/repo" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star name/repo on GitHub">Star</a> |