Jekyll::Linkpreview

Jekyll plugin to generate link preview by {% linkpreview %} tag. The plugin fetches Open Graph protocol metadata of the designated page to generate preview. The og properties are saved as JSON for caching and it is used when rebuilding the site.

You can pass url directly to the tag,

{% linkpreview "https://github.com" %}

or, can pass a url variable.

{% assign github_toppage = 'https://github.com' %}
{% linkpreview github_toppage %}

The tag above generates following HTML when you run jekyll build.

<div class="jekyll-linkpreview-wrapper">
  <p><a href="https://github.com" target="_blank">https://github.com</a></p>
  <div class="jekyll-linkpreview-wrapper-inner">
    <div class="jekyll-linkpreview-content">
      <div class="jekyll-linkpreview-image">
        <a href="https://github.com" target="_blank">
          <img src="https://github.githubassets.com/images/modules/open_graph/github-logo.png" />
        </a>
      </div>
      <div class="jekyll-linkpreview-body">
        <h2 class="jekyll-linkpreview-title">
          <a href="https://github.com" target="_blank">Build software better, together</a>
        </h2>
        <div class="jekyll-linkpreview-description">GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.</div>
      </div>
    </div>
    <div class="jekyll-linkpreview-footer">
      <a href="https://github.com" target="_blank">github.com</a>
    </div>
  </div>
</div>

By applying appropriate CSS, the link preview will be like this.

When the page does not have Open Graph protocol metadata, following simple HTML will be generated.

<div class="jekyll-linkpreview-wrapper">
  <p><a href="https://example.com" target="_blank">https://example.com</a></p>
</div>

You can override the default templates, see Custom templates.

Installation

See https://jekyllrb.com/docs/plugins/installation/ .

Usage

Create _cache directory.
Embed linkpreview.css into your Website.
Use {% linkpreview %} tag.
Run jekyll build or jekyll serve.

Custom templates

You can override the default templates used for generating previews, both in case Open Graph protocol metadata exists or does not exist for a given page.

Template for pages where Open Graph protocol metadata exists

Place linkpreview.html file inside _includes/ folder of your Jekyll site (_includes/linkpreview.html)
Use built-in variables to extract data which you would like to render. Available variables are:

link_url i.e. {{ link_url }}
link_title i.e. {{ link_title }}
link_image i.e. {{ link_image }}
link_description i.e. {{ link_description }}
link_domain i.e. {{ link_domain }}

Template for pages where Open Graph protocol metadata does not exist

Place linkpreview_nog.html file inside _includes/ folder of your Jekyll site (_includes/linkpreview_nog.html)
Use built-in link_url variable to render URL data, i.e. {{ link_url }}

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/ysk24ok/jekyll-linkpreview.

License

The gem is available as open source under the terms of the MIT License.

davidschoi/jekyll-linkpreview