Add support for external blog posts (#647)

* Add support for external blog posts

* Cosmetic fixes

Author: alshedivat

Gemfile

@@ -18,3 +18,7 @@ group :jekyll_plugins do
     gem 'htmlcompressor'
     gem 'htmlbeautifier'
 end
+group :other_plugins do
+    gem 'httparty'
+    gem 'feedjira'
+end

_config.yml

@@ -96,6 +96,13 @@ pagination:
 disqus_shortname: al-folio # put your disqus shortname
 # https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
+# External sources.
+# If you have blog posts published on medium.com or other exteranl sources,
+# you can display them in your blog by adding a link to the RSS feed.
+external_sources:
+  - name: medium.com
+    rss_url: https://medium.com/@al-folio/feed
+
 # -----------------------------------------------------------------------------
 # Collections
 # -----------------------------------------------------------------------------
@@ -161,9 +168,9 @@ plugins:
 # Sitemap settings
 defaults:
   - scope:
-      path:            "assets/**/*.*"
+      path: "assets/**/*.*"
     values:
-      sitemap:         false
+      sitemap: false
 # Extras
 github: [metadata]
 
@@ -174,10 +181,12 @@ github: [metadata]
 # HTML remove comments (<!-- .... -->)
 remove_HTML_comments: false
 
-# HTML beautifier (_plugins/beautify.rb) / https://github.com/threedaymonk/htmlbeautifier
+# HTML beautifier (_plugins/beautify.rb).
+# Source: https://github.com/threedaymonk/htmlbeautifier
 beautify: false # This function has conflict with the code snippets, they can be displayed incorrectly
 
-# HTML minify (_plugins/minify.rb) Thanks to: https://www.ffbit.com/blog/2021/03/17/html-minification-in-jekyll.html
+# HTML minify (_plugins/minify.rb).
+# Source: https://www.ffbit.com/blog/2021/03/17/html-minification-in-jekyll.html
 minify: false
 
 # CSS/SASS minify
@@ -189,7 +198,7 @@ sass:
 # -----------------------------------------------------------------------------
 
 jekyll-archives:
-  enabled: [year, tags, categories] # enables year, tag and category archives (remove if you need to disable one of them). 
+  enabled: [year, tags, categories] # enables year, tag and category archives (remove if you need to disable one of them).
   layouts:
     year: archive-year
     tag: archive-tag

_plugins/external-posts.rb

@@ -0,0 +1,36 @@
+require 'feedjira'
+require 'httparty'
+require 'jekyll'
+
+module ExternalPosts
+  class ExternalPostsGenerator < Jekyll::Generator
+    safe true
+    priority :high
+
+    def generate(site)
+      if site.config['external_sources'] != nil
+        site.config['external_sources'].each do |src|
+          p "Fetching external posts from #{src['name']}:"
+          xml = HTTParty.get(src['rss_url']).body
+          feed = Feedjira.parse(xml)
+          feed.entries.each do |e|
+            p "...fetching #{e.url}"
+            slug = e.title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
+            path = site.in_source_dir("_posts/#{slug}.md")
+            doc = Jekyll::Document.new(
+              path, { :site => site, :collection => site.collections['posts'] }
+            )
+            doc.data['external_source'] = src['name'];
+            doc.data['feed_content'] = e.content;
+            doc.data['title'] = "#{e.title}";
+            doc.data['description'] = e.summary;
+            doc.data['date'] = e.published;
+            doc.data['redirect'] = e.url;
+            site.collections['posts'].docs << doc
+          end
+        end
+      end
+    end
+  end
+
+end

_sass/_base.scss

@@ -64,7 +64,7 @@ blockquote {
 
 .card {
   background-color: var(--global-card-bg-color);
-  
+
   img {
     width: 100%;
   }
@@ -314,6 +314,7 @@ footer.sticky-bottom {
       color: var(--global-text-color-light);
       font-size: 0.875rem;
       padding-top: 0.25rem;
+      padding-bottom: 0;
     }
     a {
       color: var(--global-text-color);
@@ -564,6 +565,7 @@ html.transition *:after {
   .post-tags{
     color: var(--global-text-color-light);
     font-size: 0.875rem;
+    padding-top: 0.25rem;
     padding-bottom: 1rem;
     a {
       color: var(--global-text-color-light);
@@ -574,15 +576,9 @@ html.transition *:after {
     }
   }
   .post-content{
-        blockquote {
-          border-left: 5px solid var(--global-theme-color);
-          padding: 8px;
-      }
-}
-}
-
-.post-tags {
-  color: var(--global-text-color-light);
-  font-size: 0.875rem;
-  padding-top: 0.25rem;
+    blockquote {
+      border-left: 5px solid var(--global-theme-color);
+      padding: 8px;
+    }
+  }
 }

blog/index.html

@@ -5,7 +5,7 @@
   enabled: true
   collection: posts
   permalink: /page/:num/
-  per_page: 3
+  per_page: 5
   sort_field: date
   sort_reverse: true
   trail:
@@ -24,7 +24,11 @@ <h2>{{ site.blog_description }}</h2>
   <ul class="post-list">
     {% for post in paginator.posts %}
 
-    {% assign read_time = post.content | number_of_words | divided_by: 180 | plus: 1 %}
+    {% if post.external_source == blank %}
+      {% assign read_time = post.content | number_of_words | divided_by: 180 | plus: 1 %}
+    {% else %}
+      {% assign read_time = post.feed_content | strip_html | number_of_words | divided_by: 180 | plus: 1 %}
+    {% endif %}
     {% assign year = post.date | date: "%Y" %}
     {% assign tags = post.tags | join: "" %}
     {% assign categories = post.categories | join: "" %}
@@ -34,12 +38,23 @@ <h3>
         {% if post.redirect == blank %}
           <a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
         {% else %}
-        <a class="post-title" href="{% if post.redirect contains '://' %}{{ post.redirect }}{% else %}{{ post.redirect | relative_url }}{% endif %}">{{ post.title }}</a>
+          {% if post.redirect contains '://' %}
+            <a class="post-title" href="{{ post.redirect }}" target="_blank">{{ post.title }}</a>
+            <svg width="2rem" height="2rem" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+              <path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="#999" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          {% else %}
+            <a class="post-title" href="{{ post.redirect | relative_url }}">{{ post.title }}</a>
+          {% endif %}
         {% endif %}
       </h3>
       <p>{{ post.description }}</p>
-      <p class="post-meta"> {{read_time}} min read &nbsp; &middot; &nbsp;
+      <p class="post-meta">
+        {{ read_time }} min read &nbsp; &middot; &nbsp;
         {{ post.date | date: '%B %-d, %Y' }}
+        {%- if post.external_source %}
+        &nbsp; &middot; &nbsp; {{ post.external_source }}
+        {%- endif %}
       </p>
       <p class="post-tags">
         <a href="{{ year | prepend: '/blog/' | prepend: site.baseurl}}">