Adds support for repositories (#760)

* Add support for github repo cards * add support for dark theme * Add support for custom theme * repositories * fix * make it simpler * spcaing * responsive fix * adds support for usernames * make it modular * fix * show icons * cache_seconds * fix * Revert "cache_seconds" This reverts commit a9dd4d5. * add last line * fix * github only * fix * Add instructions * Add `README.md` instructions * Add `nav_order`
alshedivat · Jul 24, 2022 · f618757 · f618757
1 parent 99b14c4
commit f618757
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -439,6 +439,32 @@ Easily create beautiful grids within your blog posts and project pages:
 
 ### Other features
 
+#### GitHub repositories and user stats
+**al-folio** uses [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) to display GitHub repositories and user stats on the the `/repositories/` page.
+
+Edit the `_data/repositories.yml` and change the `github_users` and `github_repos` lists to include your own GitHub profile and repositories to the the `/repositories/` page.
+
+You may also use the following codes for displaying this in any other pages.
+```
+<!-- code for GitHub users -->
+{% if site.data.repositories.github_users %}
+<div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
+ {% for user in site.data.repositories.github_users %}
+ {% include repository/repo_user.html username=user %}
+ {% endfor %}
+</div>
+{% endif %}
+
+<!-- code for GitHub repositories -->
+{% if site.data.repositories.github_repos %}
+<div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
+ {% for repo in site.data.repositories.github_repos %}
+ {% include repository/repo.html repository=repo %}
+ {% endfor %}
+</div>
+{% endif %}
+```
+
 #### Theming
 Six beautiful theme colors have been selected to choose from.
 The default is purple, but you can quickly change it by editing `$theme-color` variable in the `_sass/_themes.scss` file.

diff --git a/_config.yml b/_config.yml
@@ -23,6 +23,18 @@ baseurl: /al-folio # the subpath of your site, e.g. /blog/
 last_updated: false # set to true if you want to display last updated in the footer
 impressum_path: # set to path to include impressum link in the footer, use the same path as permalink in a page, helps to conform with EU GDPR
 
+# -----------------------------------------------------------------------------
+# Theme
+# -----------------------------------------------------------------------------
+
+# code highlighter theme
+highlight_theme_light: github # https://github.com/jwarby/jekyll-pygments-themes
+highlight_theme_dark: native # https://github.com/jwarby/jekyll-pygments-themes
+
+# repo color theme
+repo_theme_light: default # https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
+repo_theme_dark: dark # https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md
+
 # -----------------------------------------------------------------------------
 # RSS Feed
 # -----------------------------------------------------------------------------
@@ -133,8 +145,6 @@ news_limit: 5 # leave blank to include all the news in the `_news` folder
 # Markdown and syntax highlight
 markdown: kramdown
 highlighter: rouge
-highlight_theme_light: github # https://github.com/jwarby/jekyll-pygments-themes
-highlight_theme_dark: native # https://github.com/jwarby/jekyll-pygments-themes
 kramdown:
  input: GFM
  syntax_highlighter_opts:

diff --git a/_data/repositories.yml b/_data/repositories.yml
@@ -0,0 +1,12 @@
+github_users:
+ - torvalds
+ - alshedivat
+
+github_repos:
+ - alshedivat/al-folio
+ - twbs/bootstrap
+ - jekyll/jekyll
+ - jquery/jquery
+ - FortAwesome/Font-Awesome
+ - jpswalsh/academicons
+ - mathjax/MathJax
diff --git a/_includes/repository/repo.html b/_includes/repository/repo.html
@@ -0,0 +1,14 @@
+{% assign repo_url = include.repository | split: '/' %}
+
+{% if site.data.repositories.github_users contains repo_url.first %}
+ {% assign show_owner = false %}
+{% else %}
+ {% assign show_owner = true %}
+{% endif %}
+
+<div class="repo p-2 text-center">
+ <a href="https://github.com/{{ include.repository }}">
+ <img class="repo-img-light w-100" alt="{{ include.repository }}" src="https://github-readme-stats.vercel.app/api/pin/?username={{ repo_url.first }}&repo={{ repo_url.last }}&theme={{ site.repo_theme_light }}&show_owner={{ show_owner }}">
+ <img class="repo-img-dark w-100" alt="{{ include.repository }}" src="https://github-readme-stats.vercel.app/api/pin/?username={{ repo_url.first }}&repo={{ repo_url.last }}&theme={{ site.repo_theme_dark }}&show_owner={{ show_owner }}">
+ </a>
+</div>
diff --git a/_includes/repository/repo_user.html b/_includes/repository/repo_user.html
@@ -0,0 +1,6 @@
+<div class="repo p-2 text-center">
+ <a href="https://github.com/{{ include.username }}">
+ <img class="repo-img-light w-100" alt="{{ include.username }}" src="https://github-readme-stats.vercel.app/api/?username={{ include.username }}&theme={{ site.repo_theme_light }}&show_icons=true">
+ <img class="repo-img-dark w-100" alt="{{ include.username }}" src="https://github-readme-stats.vercel.app/api/?username={{ include.username }}&theme={{ site.repo_theme_dark }}&show_icons=true">
+ </a>
+</div>
diff --git a/_pages/cv.md b/_pages/cv.md
@@ -3,6 +3,6 @@ layout: cv
 permalink: /cv/
 title: cv
 nav: true
-nav_order: 3
+nav_order: 4
 cv_pdf: example_pdf.pdf
 ---
diff --git a/_pages/dropdown.md b/_pages/dropdown.md
@@ -2,7 +2,7 @@
 layout: page
 title: submenus
 nav: true
-nav_order: 5
+nav_order: 6
 dropdown: true
 children: 
  - title: publications

diff --git a/_pages/repositories.md b/_pages/repositories.md
@@ -0,0 +1,30 @@
+---
+layout: page
+permalink: /repositories/
+title: repositories
+description: Edit the `_data/repositories.yml` and change the `github_users` and `github_repos` lists to include your own GitHub profile and repositories.
+nav: true
+nav_order: 3
+---
+
+## GitHub users
+
+{% if site.data.repositories.github_users %}
+<div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
+ {% for user in site.data.repositories.github_users %}
+ {% include repository/repo_user.html username=user %}
+ {% endfor %}
+</div>
+{% endif %}
+
+---
+
+## GitHub Repositories
+
+{% if site.data.repositories.github_repos %}
+<div class="repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center">
+ {% for repo in site.data.repositories.github_repos %}
+ {% include repository/repo.html repository=repo %}
+ {% endfor %}
+</div>
+{% endif %}
diff --git a/_pages/teaching.md b/_pages/teaching.md
@@ -4,7 +4,7 @@ permalink: /teaching/
 title: teaching
 description: Materials for courses you taught. Replace this text with your description.
 nav: true
-nav_order: 4
+nav_order: 5
 ---
 
 For now, this page is assumed to be a static description of your courses. You can convert it to a collection similar to `_projects/` so that you can have a dedicated page for each course.

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -312,6 +312,14 @@ footer.sticky-bottom {
  }
 }
 
+// Repositories
+
+@media (min-width: 768px) {
+ .repo {
+ max-width: 50%;
+ }
+}
+
 // Blog
 
 .header-bar {

diff --git a/_sass/_themes.scss b/_sass/_themes.scss
@@ -24,6 +24,13 @@
  padding-top: 12px;
  display : block;
  }
+
+ .repo-img-light {
+ display: block;
+ }
+ .repo-img-dark {
+ display: none;
+ }
 }
 
 html[data-theme='dark'] {
@@ -48,4 +55,11 @@ html[data-theme='dark'] {
  .fa-moon {
  display : none;
  }
+
+ .repo-img-light {
+ display: none;
+ }
+ .repo-img-dark {
+ display: block;
+ }
 }