Add list of speakers

Gemfile

@@ -7,3 +7,4 @@ gem 'builder'
 gem 'pry'
 gem 'git'
 gem 'nokogiri'
+gem 'httparty'

Gemfile.lock

@@ -31,6 +31,9 @@ GEM
     hamster (3.0.0)
       concurrent-ruby (~> 1.0)
     hashie (3.6.0)
+    httparty (0.18.1)
+      mime-types (~> 3.0)
+      multi_xml (>= 0.5.2)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
     kramdown (2.3.0)
@@ -71,8 +74,12 @@ GEM
       servolux
       tilt (~> 2.0.9)
       uglifier (~> 3.0)
+    mime-types (3.3.1)
+      mime-types-data (~> 3.2015)
+    mime-types-data (3.2020.1104)
     mini_portile2 (2.4.0)
     minitest (5.14.2)
+    multi_xml (0.6.0)
     nokogiri (1.10.10)
       mini_portile2 (~> 2.4.0)
     padrino-helpers (0.13.3.4)
@@ -110,6 +117,7 @@ PLATFORMS
 DEPENDENCIES
   builder
   git
+  httparty
   middleman
   nokogiri
   pry

config.rb

@@ -12,6 +12,9 @@
 require "lib/lrug_helpers"
 helpers LRUGHelpers
 
+require "lib/speaker_helpers"
+helpers SpeakerHelpers
+
 # get our kramdown `{::blah}` extensions
 require 'lib/lrug_extended_kramdown'
 # we have to refer to this via `@app` as otherwise it ends up being a

data/speakers.json

@@ -0,0 +1,80 @@
+{
+  "Mike Rogers": {
+    "profile": {
+      "github_username": "MikeRogers0"
+    },
+    "talks": []
+  },
+  "Ali Najaf": {
+    "profile": {
+      "github_username": "",
+      "twitter_username": "alinajaf",
+      "avatar_url": "",
+      "bio": "",
+      "blog": ""
+    },
+    "talks": [
+      "how-to-manage-happy-remote-development-teams"
+    ]
+  },
+  "Jon Rowe": {
+    "profile": {
+      "github_username": "",
+      "twitter_username": "JonRowe",
+      "avatar_url": "",
+      "bio": "",
+      "blog": ""
+    },
+    "talks": [
+      "semantic-versioning-ruby-versioning-and-the-forward-march-of-progress"
+    ]
+  },
+  "Nitish Rathi": {
+    "profile": {
+      "github_username": "",
+      "twitter_username": "latebound",
+      "avatar_url": "",
+      "bio": "",
+      "blog": ""
+    },
+    "talks": [
+      "from-confusion-to-contribution"
+    ]
+  },
+  "Mugurel Chirica": {
+    "profile": {
+      "github_username": "",
+      "twitter_username": "budmc29",
+      "avatar_url": "",
+      "bio": "",
+      "blog": ""
+    },
+    "talks": [
+      "influence-your-company-beyond-code"
+    ]
+  },
+  "Alfredo Motta": {
+    "profile": {
+      "github_username": "",
+      "twitter_username": "mottalrd",
+      "avatar_url": "",
+      "bio": "",
+      "blog": ""
+    },
+    "talks": [
+      "designing-domain-oriented-obvservability-in-your-system"
+    ]
+  },
+  "Elena Tanasoiu": {
+    "profile": {
+      "github_username": "",
+      "twitter_username": "elenatanasoiu",
+      "avatar_url": "",
+      "bio": "",
+      "blog": ""
+    },
+    "talks": [
+      "you-dont-know-what-you-dont-know"
+    ]
+  }
+}

lib/speaker_helpers.rb

@@ -0,0 +1,47 @@
+require 'httparty'
+require 'ostruct'
+
+module SpeakerHelpers
+  def all_speakers
+    data.speakers
+      .collect { |name, speaker_data| Speaker.new(name, speaker_data) }
+      .sort_by { |speaker| speaker.name }
+  end
+
+  private
+
+  class Speaker
+    attr_reader :name
+    attr_reader :profile
+    attr_reader :talks
+
+    delegate :github_username,
+      :twitter_username,
+      :avatar_url,
+      :bio,
+      :blog, to: :profile
+
+    def initialize(name, speaker_data)
+      @name = name
+      @talks = speaker_data[:talks]
+
+      if speaker_data[:profile][:github_username].present?
+        @profile = OpenStruct.new github_profile(speaker_data[:profile][:github_username])
+      else
+        @profile = OpenStruct.new speaker_data[:profile]
+      end
+    end
+
+    private
+
+    def github_profile(username)
+      @@github_users ||= {}
+      @@github_users[username] ||= load_github_profile_from_api(username)
+    end
+
+    def load_github_profile_from_api(username)
+      response = HTTParty.get("https://api.github.com/users/#{username}")
+      JSON.parse(response.body, symbolize_names: true)
+    end
+  end
+end

source/speakers/index.html.erb

@@ -9,6 +9,39 @@ created_by:
   name: Mike Rogers
 ---
 
+<div class="speaker__list">
+
+  <% all_speakers.each do |speaker| %>
+    <div class="speaker">
+      <div class="speaker__avatar">
+        <%= image_tag speaker.avatar_url, alt: "#{speaker.name} avatar" %>
+      </div>
+
+      <div class="speaker__details">
+        <h2 class="speaker__name"><%= speaker.name %></h2>
+        <div class="speaker__socials">
+          <% link_to "https://twitter.com/#{speaker.twitter_username}" do %>
+            <%= image_tag 'twitter.svg', width: 24, height: 24 %>
+          <% end %>
+
+          <% link_to "https://github.com/#{speaker.github_username}" do %>
+            <%= image_tag 'github.svg', width: 24, height: 24 %>
+          <% end %>
+        </div>
+
+        <p><%= speaker.bio %></p>
+
+        <p>Talks: <%= speaker.talks.count %></p>
+
+        <p>
+          <%= link_to speaker.blog, speaker.blog %>
+        </p>
+      </div>
+    </div>
+  <% end %>
+
+</div>
+
 <% data.coverage.sort_by { |key, value| -key.to_i }.each do |year, month_and_talks| %>
   <h2><%= year %></h2>
 

source/stylesheets/all.css.scss

@@ -18,5 +18,6 @@
 @import "components/meeting-sponsor-list";
 @import "components/coverage";
 @import "components/calendar-link";
+@import "components/speaker";
 
 @import "utilities/custom";

source/stylesheets/components/_speaker.scss

@@ -0,0 +1,51 @@
+.speaker__list {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: $space-6;
+}
+
+.speaker {
+  grid-column: span 13;
+
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: $space-6;
+}
+
+.speaker__avatar {
+  grid-column: 1 / 3;
+
+  img {
+    width: 100%;
+    border-radius: 0.25rem;
+  }
+}
+
+
+.speaker__details {
+  grid-column: 3 / 13;
+}
+
+.speaker__name {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: $space-4;
+}
+
+.speaker__socials {
+  display: inline-block;
+
+  a {
+    padding-left: $space-3;
+
+    &:hover {
+      background: none;
+      opacity: 0.5;
+    }
+  }
+
+  img {
+    display: inline-block;
+  }
+}