jekyll / jekyll-avatar Goto Github PK

View Code? Open in Web Editor NEW

89.0 15.0 9.0 113 KB

A Jekyll plugin for rendering GitHub avatars

License: MIT License

Ruby 99.13% Shell 0.87%

jekyll jekyll-plugin github avatars github-pages

jekyll-avatar's Introduction

Jekyll Avatar

A Jekyll plugin for rendering GitHub avatars

Jekyll Avatar makes it easy to add GitHub avatars to your Jekyll site by specifying a username. If performance is a concern, Jekyll Avatar is deeply integrated with the GitHub avatar API, ensuring avatars are cached and load in parallel. It even automatically upgrades users to Retina images, when supported.

Installation

Add the following to your site's Gemfile:

gem 'jekyll-avatar'

And add the following to your site's _config.yml file:

plugins:
  - jekyll-avatar

Note: If you are using a Jekyll version less than 3.5.0, use the gems key instead of plugins.

Usage

Simply add the following, anywhere you'd like a user's avatar to appear:

{% avatar [USERNAME] %}

With [USERNAME] being the user's GitHub username:

{% avatar hubot %}

That will output:

<img class="avatar avatar-small" src="https://avatars3.githubusercontent.com/hubot?v=3&amp;s=40" alt="hubot" srcset="https://avatars3.githubusercontent.com/hubot?v=3&amp;s=40 1x, https://avatars3.githubusercontent.com/hubot?v=3&amp;s=80 2x, https://avatars3.githubusercontent.com/hubot?v=3&amp;s=120 3x, https://avatars3.githubusercontent.com/hubot?v=3&amp;s=160 4x" width="40" height="40" />

Customizing

You can customize the size of the resulting avatar by passing the size argument:

{% avatar hubot size=50 %}

That will output:

<img class="avatar" src="https://avatars3.githubusercontent.com/hubot?v=3&amp;s=50" alt="hubot" srcset="https://avatars3.githubusercontent.com/hubot?v=3&amp;s=50 1x, https://avatars3.githubusercontent.com/hubot?v=3&amp;s=100 2x, https://avatars3.githubusercontent.com/hubot?v=3&amp;s=150 3x, https://avatars3.githubusercontent.com/hubot?v=3&amp;s=200 4x" width="50" height="50" />

Passing the username as variable

You can also pass the username as a variable, like this:

{% assign user="hubot" %}
{% avatar {{ user }} %}

Or, if the variable is someplace a bit more complex, like a loop:

{% assign employees = "alice|bob" | split:"|" %}
{% for employee in employees %}
  {% avatar user=employee %}
{% endfor %}

Lazy loading images

For pages showing a large number of avatars, you may want to load the images lazily.

{% avatar hubot lazy=true %}

This will set the data-src and data-srcset attributes on the <img> tag, which is compatible with many lazy load JavaScript plugins, such as:

Using with GitHub Enterprise

To use Jekyll Avatars with GitHub Enterprise, you must set the PAGES_AVATARS_URL environmental variable.

This should be the full URL to the avatars subdomain or subpath. For example:

With subdomain isolation: PAGES_AVATARS_URL="https://avatars.github.example.com"
Without subdomain isolation: PAGES_AVATARS_URL="https://github.example.com/avatars"

jekyll-avatar's People

Contributors

Stargazers

Watchers

Forkers

zxl777 afeld firefoxxy8 kenman345 ashmaroli intika-jekyll-plugins tblobaum seanpm2001

jekyll-avatar's Issues

Error with avatars in for loops/variable-defined usernames

Describe the bug

Hi!
I just started a site on github pages with jekyll and this plugin.

(page is located at https://cakebot.club/contributors.html )

It seems that in production, all the rendered avatars are the first avatar in the data set, not the defined ones

Steps to reproduce the behavior

Go to the link above
See error

Expected behavior

The avatars should match the data given, not just mine.
@121jwang and @paramt 's avatars should be visible next to their names

Additional context

My markdown:

---
title: Contributors
layout: default
---

## Contributors

Cakebot would not be possible without the help, time, and dedication of the following people:

{% for contributor in site.data.contributors %}
  * {% avatar {{ contributor.github }} size=50 %} {{ contributor.name }} - @{{ contributor.github }}
{% endfor %}

data file (csv):

name,github
jumbo,RDIL
Tarsh,121jwang
Param,paramt

Thank you!

GitHub Pages Build Fails

Just tried to add this to our GitHub pages jekyll site and, although it's listed in the approved plugins list, it caused our build to fail. Used version 0.5.0 as indicated in the list.

Remove `data-proofer-ignore`

45bab4f#commitcomment-16370095

This is use case specific and shouldn't be there for everyone.

Plugin no longer works correctly with Jekyll 4.x

The changes to the template rendering in Jekyll 4 seems to have broken rendering of avatars in templates that use usernames from front-matter in pages.

Reproduction case

https://github.com/kusma/jekyll-avatar-issue-37-repro

Expected behavior:

foo.html gets the foo avatar rendered, and bar.html gets the bar avatar rendered.

Actual behavor:

foo.html gets the avatar from bar.html instead.

(split out from #37)

Escape `&`?

So, this is weird. The HTML seems to be valid but when I look into Firefox source I see that it sees the ampersand as invalid.

Example from https://government.github.com/:

Shouldn't this be escaped anyway, for backwards compatibility too?

Double the requested size to better support retina

E.g., size in the URL should be double the displayed width/height.

Issue with custom variable for `user`

So, I was trying to get this working, but I end up with the same image from the first loop item.

Code fragment

 <div class="row">
     <div class="col-md-12">
         <div class="list-group mpc-team">
           {% for member in site.data.team.active %}
             <div class="list-group-item">
               <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user={{ member.user }}&amp;type=follow" title="Follow {{ member.user }} on GitHub"></iframe>
               <a class="team-member" href="https://github.com/{{ member.user }}">
                  {% avatar {{ member.user }} size=32 %}
                  <strong>{{ member.name }}</strong> <small>@{{ member.user }}</small>
               </a>
             </div>
           {% endfor %}
         </div>
     </div>
 </div>

Output:

Full code https://github.com/mpc-hc/mpc-hc.org/tree/about

Am I missing something?

Class Names

I'd prefer if avatar wasn't set by default, it's a bit generic and could be included in people's stylesheets for other uses.

I'd like to be able to set my own class to be added as well. For example, to set some of Bootstrap's styling classes to the outputted <img>.

Confirm we're doing it right

@technoweenie, when you get a chance (absolutely no rush), hoping to once again borrow some of your avatar expertise, as this plugin is an attempt to put into (broader) practice your guidance from github/government.github.com#406 (regarding using avatar0-3 to ensure caching and load avatars in parallel).

You can see all ~50 lines in https://github.com/benbalter/jekyll-avatar/blob/master/lib/jekyll/avatar.rb, if you're interested, but the key bits:

To calculate `avatars0-3`:

Zlib.crc32(path) % SERVERS

(where SERVERS is 4)

The resulting output:

<img class="avatar avatar-small" src="https://avatars3.githubusercontent.com/hubot?v=3&amp;s=40" alt="hubot" width="40" height="40" />

Any red flags / potential improvements there? Seeing how often we use this on GitHub-properties alone, figured it be worth putting things into a Jekyll plugin to codify best practices.

/cc @parkr

lazy image loading support

I am a frequent visitor to https://government.github.com/community/, which uses this plugin to display the avatars. The page takes 6.7 seconds to load on my relatively fast connection/machine, because there are 1065 images being requested.

In short, it would be great for jekyll-avatar to support lazy image loading. I've looked at a few plugins, and they all use the image URL in a data-src attribute (rather than src). Open to a pull request to support that?

cc @jbjonesjr

doesnt work with variables

{% avatar {{ page.author }} %} for some reason tries to load the avatar based on the name of the author instead of the username passed in

{{ page.author }} is tblobaum
tblobaum has name set as Thomas Blobaum in GitHub
{% avatar {{ page.author }} %} tries to load the avatar for "Thomas " instead of tblobaum

Wasteful allocations due to multiple parsing of the same `host` url

Summary

Multiple parsing of the same host url is a waste of resources.
Based on the following source-code, #url is called at least 4 times per call to #render. Each call to #url however calls Addressable::URI.parse host to parse the same host url string (depends on an environment variable value)
https://github.com/benbalter/jekyll-avatar/blob/9d6fb27c5bdfee1fedcbd871a1f643047b87fc3d/lib/jekyll-avatar.rb#L74-L91

I tried extracting Addressable::URI.parse host into a memoized private method. While benchmarks show that it's faster, the test suite fails..

What would be the best solution for this..?

local jekyll invalid liquid error

hi i set up my site local and when i did bundle exec jekyll serve i got this error

Configuration file: C:/Users/myusername/Documents/GitHub/foamey/_config.yml
Source: C:/Users/myusername/Documents/GitHub/foamey
Destination: C:/Users/myusername/Documents/GitHub/foamey/_site
Incremental build: disabled. Enable with --incremental
Generating...
Liquid Exception: Liquid syntax error (line 13): Unknown tag 'avatar' in /Users/Julie/Documents/GitHub/foamey/_layouts/posts.html
jekyll 3.2.1 | Error: Liquid syntax error (line 13): Unknown tag 'avatar'

wondering how to fix it this is the file

<!doctype html>

{% feed_meta %} <title>{{ page.title }}</title> {% include header.html %} {% include {{ site.nav }} %} {% avatar foamery %} {{ page.date | date: '%B %d, %Y' }} {{ content }} {% include footer.html %} {% include navscript.html %}

Native lazyloading support

There's a native loading attribute for lazyloading images and Browsers already support it.

It would be nice if the plugin supported this and used the src attribute when the option is enabled.

Avatars for GHE?

Hi Ben,
Thanks for the nice gem.
It works nicely for public GH, but since its wired to avatars0.githubusercontent.com, its not finding avatars for any of our GHE users.

Is there a way override the host in the gem to point to an equivalent for our GHE?
Thanks