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;
+  }
 }