Created
March 7, 2019 20:32
-
-
Save efc/141ddde8b9badb0bc32369de925aed67 to your computer and use it in GitHub Desktop.
AutoEmbed.rb is a plugin for Jekyll that automatically finds and renders embeds for any "naked URL" on the site.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# AutoEmbed plugin for Jekyll | |
# | |
# Created by Eric Celeste for Tenseg LLC | |
# March 2019 | |
# | |
# License: MIT | |
# | |
# This plugin uses the ruby-oembed library to look up an oembed for | |
# any "naked URL" (a URL in a paragraph by itself). If the oembed | |
# is found, then the HTML for the oembed is presented. If there is | |
# no oembed found, then the URL is simply turned into a link. | |
# | |
# For best results, this plugin should be combined with some SCSS | |
# to improve the visual presentation of the oembeds. This includes | |
# ensuring that videos are presented with their proper aspect ratio | |
# and that some links that clutter rich embed results are hidden. | |
# | |
# This is the recommended SCSS to accompany this plugin: | |
# | |
# .embed-container { | |
# width: 100%; | |
# iframe { | |
# width: 100%; | |
# } | |
# &.rich { | |
# div, blockquote, p { | |
# display: none; | |
# } | |
# } | |
# &.video { | |
# display: block; | |
# position: relative; | |
# width: 100%; | |
# height: 0; | |
# padding-bottom: 51%; | |
# iframe { | |
# display: block; | |
# position: absolute; | |
# width: 100%; | |
# height: 100%; | |
# top: 0; | |
# left: 0; | |
# } | |
# } | |
# } | |
# see https://github.com/ruby-oembed/ruby-oembed | |
require 'oembed' | |
# register all default oembed providers | |
::OEmbed::Providers.register_all | |
# add providers and fallbacks here, if you like | |
Jekyll::Hooks.register [:pages, :documents], :post_render do |doc| | |
if (doc.is_a?(Jekyll::Page) || doc.write?) && (doc.output_ext == ".html" || (doc.permalink&.end_with?("/"))) | |
# look for naked URLs wrapped in paragraph tags | |
doc.output = doc.output.gsub(/<p>(https?:\/\/[\S]+)<\/p>/) do |match| | |
out = '' # use this variable so we can include debugging info if we wish | |
begin | |
# if an oembed is found, then include the embed wrapped in a div | |
result = ::OEmbed::Providers.get($1) | |
fields = { | |
'provider_name' => result.fields['provider_name'], | |
'title' => result.fields['title'], | |
'type' => result.fields['type'], | |
'width' => result.fields['width'], | |
'height' => result.fields['height'], | |
} | |
style = '' | |
if fields['type'] == 'video' | |
fields['ratio'] = fields['height'].to_f / fields['width'].to_f * 100 | |
style = "padding-bottom: #{fields['ratio']}%" | |
end | |
# out += "<pre>result: #{JSON.pretty_generate(fields)}</pre>" | |
out += "<div class=\"autoembed embed-container #{result.fields['type']}\" style=\"#{style}\">#{result.html}</div>" | |
rescue StandardError => e | |
# if no oembed is found, just turn the naked URL into a link | |
# out += "<pre>#{e.message} #{e.backtrace.inspect}</pre>" | |
out += "<p class=\"autoembed no-embed\"><a href='#{$1}'>#{$1}</a></p>" | |
end | |
out | |
end | |
end | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To install this plugin on a Jekyll site, just put the
AutoEmbed.rb
file in your_plugins
directory. You should also addruby-oembed
to your gems and the recommended styles to your SCSS.