Add support for external blog posts (#647)

* Add support for external blog posts

* Cosmetic fixes

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}}">