Personal Genome Project: Global Network (Jekyll)

This is the repo for the rewrite of the PGP Global website

• Instructions and Documentation
• Issues
• Nice to Have
  • Gravatars Fallback
  • Replace Captions and Shortcodes
  • SCSS (extra/non-essential)

Instructions and Documentation

Currently in progress - writing documentation for workflow, snippets, notes about site structure, editing, etc.

See A current list of documentation files includes:

• Documentation - general documentation
• Resources - a list of various resources related to in-progress tasks

Issues

• Redo archives plugin, based on newer code from Arvados version
• Add Read More button to Blog Main Page
• Finishing replacing relative URLs where relevant
  • See CDN - Cloudflare regarding performance
• Blog logo issue
• Homepage Logo issue?
  • Previous note: Seems to be a result of bootstrap's margin-left: -15px; margin-right: -15px; setting on .row classes
• Blog page would seriously benefit from CDN!!
• Add ARIA roles
• Figure out what defaults can be removed from _config.yml
• Double check:
  • favicon w/ Real Favicon Generator (should be fine)
  • Contact Form
• Verify site with Webmaster Tools, prior to launch
• Flickr API for Sidebar(?) - Is this still relevant?

Nice to Have

• Responsive Images and/or Lazy Loading

  • May be very relevant for blog on mobile
  • There is already an _includes/lazyload.html - doesn't seem to be being used currently
  • Plugin Options:
    • https://github.com/wildlyinaccurate/jekyll-responsive-image
    • Instructions here: https://ivovalchev.medium.com/jekyll-responsive-images-with-srcset-5da131415d0f
  • Non-Plugin Options:
    • Responsive Images in Jekyll without a plugin
    • Designing responsive image layouts with Jekyll

• Fallback for Author gravatars

• Convert max-width: 767px section in _media.scss to min-width

Gravatars Fallback

Something like this, but in reverse/more nuanced:

{% for author in site.authors %}
{% if author.image and author.image != '/assets/images/no_gravatar.png' %}
  <img src="{{ author.image }}" alt="Author thumbnail for {{ author.name }}" class="avatar avatar-48 grav-hased" height="48" width="48"></a></li>
  {% elsif author.email %}
    <script>
      document.write('<li><a id="{{ author.gravatar_name }}" href="{{ site.url }}{{ site.baseurl }}{{ author.url }}">')
      document.write('<img src="' + get_gravatar('{{ author.email }}', 48) + '" alt="Author thumbnail for {{ author.name }}" class="avatar avatar-48 grav-hased" height="48" width="48" /></a></li>');
    </script>

  {% endif %}        
{% endfor%}

Replace Captions and Shortcodes

1. Shortcodes need to be replaced with actual code wherever possible. See e.g. here.

• [caption] covers 21 posts. I can't say for other shortcodes without manually looking through posts.
• [youtube] covers 8 posts
• [polldaddy]covers 1 posts

SCSS (extra/non-essential)

1. Replace all fixed line heights w/ relative numbers
   • Using a base SCSS variable wherever possible
2. Month Archives: 425px, 768px - would be nice to tweak the styles a bit, so the Archive Title doesn't split into the next line