Jekyll Bootstrap - Widget - Data

   
   
 jekyll  bootstrap  
 ssg  
Article Series

Jekyll in General

Jekyll Plain

Jekyll Bootstrap OC

Jekyll Bulma MD

Conclusions

Repository

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Using static data feature.

Source Code

This article use tutor-11 theme. We will create it step by step.

8: Friends

As every SSG does, jekyll also has feature to access static data.

Data: YAML: Friends

I always like to give a link to my fellow blogger folks. So I made a special data for these great people.

# Helper for friends widget

- title: "BanditHijo (R)-Chive"
  url: https://bandithijo.github.io/

- title: "Elianiva"
  url: https://elianiva.github.io/

- title: "Azzam Syawqi Aziz"
  url: https://azzamsa.com/
  
- title: "Muhammad Fahri"
  url: https://muhammadfahri.now.sh/

- title: "Sira Argia (Aflasio)"
  url: https://aflasio.netlify.app/

...

Liquid: Shuffle

I need to show five bloggers randomly for each pages. We already have limit filter in previous article. Now we require to add a new shuffle filter in main configuration. Since liquid does not have a built in function forshuffle. We need to have additional fake randomize:

After duckduckwent fo a while, I got this shuffle code from stackoverflow:

  {% assign length = 5 %}
  {% assign size_adjusted = site.data.friends | size | minus: length %}
  {% assign start = page.date | date: "%d" | modulo: size_adjusted

Note that, you can also use plugin instead.

Partial Widget: Liquid: Friends

{% comment %}
fake randomize by using date day for array under 30 data
{% endcomment %}

{% capture widget_header %}
  <strong>Isle of Dotsites</strong>
  <i data-feather="users" class="float-right"></i>
{% endcapture %}

{% capture widget_body %}
  {% assign length = 5 %}
  {% assign size_adjusted = site.data.friends | size | minus: length %}
  {% assign start = page.date | date: "%d" | modulo: size_adjusted %}

  <ul class="widget-list">
    {% assign selection = site.data.friends | slice: start, length %}
    {% for friend in selection %}
    <li><a href="{{ friend.url }}">{{ friend.title }}</a></li>
    {% endfor %}
  </ul>
{% endcapture %}

{% assign color = "pink" %}
{% include template/widget.html %}

Data Loop

Using data is straightforward

    {% assign selection = site.data.friends %}
    {% for friend in selection %}
    <li><a href="{{ friend.url }}">{{ friend.title }}</a></li>
    {% endfor %}

Filter: Shuffle

If you can afford plugin in your CI/CD, you can utilize ruby shuffle instead in a filter.

module Jekyll
  module ShuffleFilter
    def shuffle(array)
      array.shuffle
    end
  end
end

Liquid::Template.register_filter(Jekyll::ShuffleFilter)

Now the loop become short and simple.

{% capture widget_body %}
  <ul class="widget-list">
    {% assign selection = site.data.friends | shuffle %}
    {% for friend in selection limit:5 %}
    <li><a href="{{ friend.url }}">{{ friend.title }}</a></li>
    {% endfor %}
  </ul>
{% endcapture %}

Render: Browser

You can open page kind, or post kind, to test this widget.

Jekyll: Widget: Friends

I have four blogs, each already have generated archive data. So it makes sense that I put backlinks from my own static blog, in each post.

Data: YAML: Github Archive

My generated data from my Jekyll site looks like below:

# Helper for related links

- id: 20020225
  title: "Presentation - Learning Linux Diversity"
  url: /system/2020/02/02/presentation-linux-diversity.html

- id: 20012025
  title: "Presentation - Desktop Customization"
  url: /desktop/2020/01/20/presentation-desktop-customization.html

- id: 19120325
  title: "Awesome WM - Presentation - Statusbar"
  url: /desktop/2019/12/03/awesome-presentation-statusbar.html

...

I put this in my jekyll static data directory manually.

Data: YAML: Gitlab Archive

And, my generated data from my Hugo site looks like below:

# Helper for related links
# Archives by Date

- id: 20051517
  title: "Template - Koa"
  url: /frontend/2020/05/15/template-koa/
  
- id: 20051317
  title: "Template - Express - Handlebars"
  url: /frontend/2020/05/13/template-express-handlebars/
  
- id: 20051217
  title: "Template - Express - EJS"
  url: /frontend/2020/05/12/template-express-ejs/

From my Hugo site:

I also put this in my jekyll static data directory manually.

Partial Widget: Liquid: Github Archive

I also use fake randomize.

{% comment %}
fake randomize by using year day for array under 365 data
{% endcomment %}

{% capture widget_header %}
  <strong>Web/Mobile Development</strong>
  <i data-feather="external-link" class="float-right"></i>
{% endcapture %}

{% capture widget_body %}
  {% assign length = 5 %}
  {% assign archives = site.data.archives_gitlab %}
  {% assign size_adjusted = archives | size | minus: length %}
  {% assign start = page.date | date: "%j" | modulo: size_adjusted %}

  <ul class="widget-list">
    {% assign selection = archives | slice: start, length %}
    {% for archive in selection %}
    <li><a href="https://epsi-rns.gitlab.io{{ archive.url }}"
      >{{ archive.title }}</a></li>
    {% endfor %}
  </ul>
{% endcapture %}

{% assign color = "lime" %}
{% include template/widget.html %}

Filter: Shuffle

If you can afford plugin in your CI/CD, you can utilize ruby shuffle instead in a filter, so the loop become short and simple.

{% capture widget_body %}
  <ul class="widget-list">
    {% assign selection = site.data.archives_github | shuffle %}
    {% for archive in selection limit:5 %}
    <li><a href="https://epsi-rns.github.io{{ archive.url }}"
      >{{ archive.title }}</a></li>
    {% endfor %}
  </ul>
{% endcapture %}

Render: Browser

You can open page kind, or post kind, to test this widget.

Jekyll: Widget: Backlinks from Github

Partial Widget: Liquid: Gitlab Archive

Again, I use fake randomize.

{% comment %}
fake randomize by using year day for array under 365 data
{% endcomment %}

{% capture widget_header %}
  <strong>Web/Mobile Development</strong>
  <i data-feather="external-link" class="float-right"></i>
{% endcapture %}

{% capture widget_body %}
  {% assign length = 5 %}
  {% assign archives = site.data.archives_gitlab %}
  {% assign size_adjusted = archives | size | minus: length %}
  {% assign start = page.date | date: "%j" | modulo: size_adjusted %}

  <ul class="widget-list">
    {% assign selection = archives | slice: start, length %}
    {% for archive in selection %}
    <li><a href="https://epsi-rns.gitlab.io{{ archive.url }}"
      >{{ archive.title }}</a></li>
    {% endfor %}
  </ul>
{% endcapture %}

{% assign color = "lime" %}
{% include template/widget.html %}

Filter: Shuffle

The same method applied here.

Render: Browser

You can open page kind, or post kind, to test this widget.

Jekyll: Widget: Backlinks from Gitlab

Custom Output

We have already seen in previous article, that we can generate our own custom data:

The generated data from my Jekyll site can be accessed from:

Using previously saved file _data/archives.yaml. Note that this archive saved manually from generated content. You can just copy the result manually, from _site/pages/archives.yml to folder _data/archives.yml.

Data: YAML: Archives

The data looks like below:

# Helper for related links

- id: 20031535
  title: "Company of Thieves - Oscar Wilde"
  url: /lyric/2020/03/15/company-of-thieves-oscar-wilde.html

- id: 19071535
  title: "Mothers -  No Crying in Baseball"
  url: /lyric/2019/07/15/mothers-no-crying-in-baseball.html

- id: 19052535
  title: "Brooke Annibale - Yours and Mine"
  url: /lyric/2019/05/25/brooke-annibale-yours-and-mine.html

The ID, comes from dates and minutes. automatic generated by script from previous article.

Page Content: Frontmatter

Now we can add variable in page content. Consider name the variable related_link_ids. This should contain array of id in yaml.

---
layout      : post
title       : Brooke Annibale - Yours and Mine
date        : 2019-05-25 07:35:05 +0700
categories  : lyric
tags        : [pop, 2010s]
keywords    : [OST, "One Tree Hill"]
author      : Brooke Annibale

related_link_ids :
  - 19051535  # By Your Side
---
...
---
layout      : post
title       : Brooke Annibale - By Your Side
date        : 2019-05-15 07:35:05 +0700
categories  : lyric
tags        : [pop, 2010s]
keywords    : [OST, "Grey's Anatomy"]
author      : Brooke Annibale

related_link_ids :
  - 19052535  # Yours and Mine
---
...

Jekyll: Widget: Related Links ID

Here is how its works. The widget accessed page.related_link_ids.

{% unless page.related_link_ids == nil 
   or page.related_link_ids == empty %}

  {% capture widget_header %}
  <strong>Related Posts</strong>
  <i data-feather="link-2" class="float-right"></i>
  {% endcapture %}

  {% capture widget_body %}
  <ul class="widget-list">
    {% for link_id in page.related_link_ids %}
    <li>
      {% for dpost in site.data.archives %}
      {% if dpost.id == link_id %}
        <a href="{{ site.baseurl }}{{ dpost.url }}"
          >{{ dpost.title }}</a>
      {% endif %}
      {% endfor %}
    </li>
    {% endfor %}
  </ul>
  {% endcapture %}

  {% assign color = "lime" %}
  {% include template/widget.html %}
{% endunless %}

I know it is a little bit complex. And lately, I rarely use this related_link_ids feature myself. But I still keep this feature for a few of my posts.

Render: Browser

You can open post kind, to test this widget.

Jekyll: Widget: Related Posts

You can have as many related posts as you need.

11: Summary

As a summary here is the aside partial for post layout.

Partial: Post Aside

{% include widget/archive.html %}
{% include widget/related-posts.html %}
{% include widget/tags.html %}

{% comment %}
  {% include widget/friends.html %}
  {% include widget/archives-gitlab.html %}
  {% include widget/archives-github.html %}

  {% include widget/categories.html %}
  {% include widget/tags.html %}

  {% include widget/recent-posts.html %}
  {% include widget/related-posts.html %}

  {% include widget/affiliates.html %}
  {% include widget/oto-spies.html %}
{% endcomment %}

You can add or remove widget, as you want them to be.

Render: Browser

The looks in desktop screen is shown as below figure:

Jekyll: Widgets in Desktop

What is Next?

Consider continue reading [ Jekyll Bootstrap - Pagination - Stylesheet ].

Thank you for reading.