blog section

Gemfile

@@ -5,4 +5,6 @@ gem 'jekyll'
 group :jekyll_plugins do
     gem 'jekyll-sitemap'
     gem 'jekyll-redirect-from'
-end
+    gem 'hash-joiner'
+    gem 'simple-rss'
+end

_src/_assets/scss/page-front.scss

@@ -43,5 +43,27 @@
 
 .connect__title {
     font-size: $font-size-h3;
-    margin-bottom: $spacer / 2;
+}
+
+.articles {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    max-width: 100%;
+}
+
+.article {
+    @media ($screen-sm) {
+        flex: 0 0 45%;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+.article__title {
+    font-size: $font-size-h6;
+    margin-top: 0;
 }

_src/_plugins/blog.rb

@@ -0,0 +1,41 @@
+# http://stackoverflow.com/a/27850727/733677
+# encoding: UTF-8
+require 'open-uri'
+require 'rss'
+require 'simple-rss'
+
+module Jekyll
+
+    # Runs during jekyll build
+    class RssFeedCollector < Generator
+       safe true
+       priority :high
+       def generate(site)
+
+          rss_items = SimpleRSS.parse open('https://medium.com/feed/ipdb-blog/')
+
+          # Create a new on-the-fly Jekyll collection called "articles"
+          jekyll_items = Jekyll::Collection.new(site, 'articles')
+          site.collections['articles'] = jekyll_items
+
+          # Add fake virtual documents to the collection
+          rss_items.items.each do |item|
+            title = item.title
+            link = item.link
+
+            # Medium hack: get first image in content, then get smaller image size
+            image = item.content_encoded[/img.*?src="(.*?)"/i,1].gsub(/max\/(.*)\//, "max/400/")
+
+            path = '_articles/' + title.to_s.gsub(':','_') + '.md'
+            path = site.in_source_dir(path)
+            doc = Jekyll::Document.new(path, site: site, collection: jekyll_items)
+            doc.data['title'] = title.force_encoding('UTF-8')
+            doc.data['link'] = link
+            doc.data['image'] = image
+            jekyll_items.docs << doc
+          end
+
+       end
+    end
+
+end

_src/index.html

@@ -1,5 +1,6 @@
 ---
 layout: base
+
 front_page: true
 
 css: page-front
@@ -134,6 +135,16 @@ css: page-front
             <div class="grid__col">
                 <div class="connect connect--blog">
                     <h2 class="connect__title">{{ content.connect.blog_title }}</h2>
+
+                    <div class="articles">
+                        {% for article in site.articles | limit: 4 %}
+                        <a class="article" href="{{ article.link }}">
+                            <img src="{{ article.image | escape | strip_html }}" alt="">
+                            <h1 class="article__title">{{ article.title }}</h1>
+                        </a>
+                        {% endfor %}
+                    </div>
+
                     <a href="https://blog.ipdb.io" class="button button--text">IPDB Blog</a>
                 </div>
             </div>