Small formatting changes

Gemfile

@@ -34,4 +34,6 @@ gem 'jekyll-redirect-from'
 gem 'jemoji'
 gem 'jekyll-mentions'
 gem 'jekyll-seo-tag'
-gem "jekyll-github-metadata"
+gem "jekyll-github-metadata"
+gem 'jekyll-avatar'
+gem 'html-pipeline'

Gemfile.lock

@@ -40,6 +40,8 @@ GEM
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
       terminal-table (~> 1.8)
+    jekyll-avatar (0.7.0)
+      jekyll (>= 3.0, < 5.0)
     jekyll-feed (0.12.1)
       jekyll (>= 3.7, < 5.0)
     jekyll-github-metadata (2.13.0)
@@ -105,7 +107,9 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  html-pipeline
   jekyll (~> 4.0.0)
+  jekyll-avatar
   jekyll-feed (~> 0.12)
   jekyll-github-metadata
   jekyll-mentions
@@ -117,4 +121,4 @@ DEPENDENCIES
   wdm (~> 0.1.1)
 
 BUNDLED WITH
-   2.0.2
+   2.1.4

_config.yml

@@ -63,6 +63,7 @@ plugins:
   - jekyll-mentions
   - jekyll-seo-tag
   - jekyll-github-metadata
+  - jekyll-avatar
 
 exclude:
   - Gemfile

_drafts/2020-10-01-Reading-a-Bitmap.md

@@ -11,6 +11,8 @@ excerpt: >-
 redirect_from: 
  - /post/XcaMdj2m/
  - /XcaMdj2m/
+uses:
+ - github-cards
 ---
 
 Recently, @rsninja722 was telling me about [a project](https://github.com/rsninja722/file2bmp) he was working on. The basic idea is that you pass a file into his program, and it generates a bitmap of the binary data. This was inspired by [an old post of mine](/post/ef7b3166) where I did the same thing with a horribly written Python script and the library [`pillow`](https://github.com/python-pillow/Pillow). 

_includes/footer.html

@@ -106,4 +106,62 @@
 {% if page.uses contains "graphs" %}
 <!-- Roughviz -->
 <script src="https://unpkg.com/rough-viz@1.0.5"></script>
+{% endif %}
+
+{% if page.uses contains "github-cards" and false %}
+
+<!-- GH user card library -->
+<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
+
+<!-- Modal containing GitHub account card -->
+<div class="modal fade" id="GitHub-account-card" tabindex="-1" role="dialog" aria-labelledby="GitHub-account-card-title"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="GitHub-account-card-title">Username</h5><a href=""
+                    id="GitHub-account-card-url"><button type="button" class="btn btn-outline-secondary">View
+                        account</button></a>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <!-- <div class="modal-body" id="GitHub-account-card-body">
+                ...
+            </div> -->
+            <!-- <div class="modal-footer">
+                
+            </div> -->
+        </div>
+    </div>
+</div>
+
+<script>
+
+    function renderGitHubUserAccount(name, url) {
+        // Set the inner HTML to be the card
+        //document.getElementById("GitHub-account-card-body").innerHTML = '<div class="github-card" data-github="' + name + '" data-width="400" data-height="158" data-theme="default"></div>' 
+        document.getElementById("GitHub-account-card-title").innerText = name.replace("@", "");
+
+        // Show the modal
+        $("#GitHub-account-card").modal("show");
+    }
+
+    // Edit every github user link
+    var github_accounts = document.getElementsByClassName("user-mention");
+    [...github_accounts].forEach((element) => {
+        // Get the user's name and URL
+        var name = element.innerText;
+        var url = `${element.href}`;
+
+        // Clear the button href
+        element.href = "#";
+
+        // Add an onclick()
+        element.onclick = () => {
+            renderGitHubUserAccount(name, url);
+        }
+    })
+</script>
+
 {% endif %}

_layouts/page.html

@@ -89,13 +89,12 @@
                     {% endif %}
                 </div>
 
-
-
             </div>
         </div>
 
     </div>
     {% include footer.html %}
+    
 
     <!-- A little script to set the header and nav color based on page type -->
     <!-- <script>