Jekyll::URLMetadata

A jekyll plugin to extract meta information from urls and expose them to liquid variables.

This gem was originally authored to be used as a custom plugin for the static site of genicsblog.com.

Installation

Add this line to your application’s Gemfile inside the jekyll_plugins group:

group :jekyll_plugins do
    # other gems
    gem "jekyll-url-metadata"
end

Then, enable the plugin by adding it to the plugins section in the _config.yml file:

plugins:
    # - other plugins
    - jekyll-url-metadata

And then execute:

bundle install

Usage

This plugin is essentially a filter that works on any valid URL string provided inside a liquid tag. Use it as below:

{% assign meta = "https://wikipedia.org" | metadata %}

The metadata filter extracts the meta data from the given url string and returns the data as a Hash.

These are the values that are extracted:

• The <title> tag.
• The <meta> tags that have a name, property or charset fields.
• The <link> tags with a rel attribute.

The expected output for {{ meta }} from the above example would be:

{{ meta }}

{"title"=>"Wikipedia", "charset"=>"utf-8", "description"=>"Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.", "viewport"=>"initial-scale=1,user-scalable=yes", "apple-touch-icon"=>"/static/apple-touch/wikipedia.png", "shortcut icon"=>"/static/favicon/wikipedia.ico", "license"=>"//creativecommons.org/licenses/by-sa/4.0/", "preconnect"=>"//upload.wikimedia.org", "me"=>"https://wikis.world/@wikipedia"}

Let us extract the og:image from the metadata of the article Pagination in Android Room Database at Genics Blog. The following snippet does the same:

{% assign article_meta = "https://genicsblog.com/gouravkhunger/pagination-in-android-room-database-using-the-paging-3-library" | metadata %}

{{ article_meta['og:image'] }}

The output of the above code will be as follows:

https://user-images.githubusercontent.com/46792249/164977196-3de454f4-8a7e-4feb-9d1b-cfd6ea53ba03.jpg

Thus, it can be used to generate link previews at build time. The linkpreview.html implementation at Genics Blog presents how to use the plugin to generate url cards in a production Jekyll blog.

Simple link preview example

This is a link preview generated with this Jekyll package and some custom CSS.

Pagination in Android Room Database using the Paging 3 Library

The complete guide to paginating *just* a room database (without Network level pagination) with the Paging 3 library in Andro...

You need to create an include file called _include/link_preview.html

You also need to add some CSS. Using this website as example, you need to extend the minima theme. All you need to do is to create a file called _sass/minima/custom-styles.scss. If you use other Jekyll themes you must follow their documentation.

Finally you need to add a couple of variables in the _config.yml file. These are required and will truncate the title and the description to the desired number of characters.

link_preview:
  title_max_characters: 64
  description_max_characters: 128

To use this example you just need to include the link_preview.html file with a url parameter, like this:

{% include link_preview.html url="https://genicsblog.com/gouravkhunger/pagination-in-android-room-database-using-the-paging-3-library" %}