This website stores cookies on your computer. These cookies are used to collect information about how you interact with the website and allows us to remember you. We use this information in order to improve and customize your browsing experience and for analytics and metrics about visitors to this website. If you decline, your information won’t be tracked when you visit this website. A single cookie will be used in your browser to remember your preference not to be tracked.
Blog > Word Cloud > Word Cloud

Word Cloud

Previously I was using an adaptation to the <aside> HTML tag that comes with Middleman Blog extension for navigating blog articles. When you get tags that count into double figures this starts to look a little silly at the bottom of the page. I wanted to keep the navigation by tag, but no longer wanted to present them as a numbered list. A word cloud is what I have gone for.

I have made use of the jQuery library jQCloud. I downloaded the minified version of the library and added it to the projects javascripts folder.

tree ~/projects/website/source/javascripts

~/projects/website/source/javascripts
├── jqcloud-1.0.4.min.js
└── site.js

0 directories, 2 files

I will need to reference this file in the layout.erb, however I will need to make an additional change. I currently have jQuery referenced at the very bottom of the layout.erb file for use with Bootstrap 4, you can look back at the article Make it Pretty, this will need to be moved before the use reference of jQCloud and it's implementation, which will be rendered within the layout.erb. In other words I need to have jQuery and jQCloud in the header of the page.

layout.erb

<!doctype html>
<html lang="en">
  <head>
    ...
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <%= javascript_include_tag "jqcloud-1.0.4.min" %>
  </head>
  ...
</html>

The reference to jQuery has moved from the body tag into the head tag.

source\tags.html.erb

---
blog: main
---
<div class="container text-light text-center">
  <h1 class="display-4 my-3 my-sm-3 my-md-3 my-lg-3">Article Tags</h1>

  <script type="text/javascript">
    <%
      array_length = blog('main').tags.length
      i = 0
    %>
    var word_array = [
      <% blog('main').tags.each do |tag, articles| %>
      <% i = i+1 %>
      {text: "<%= tag %>", weight: <%= articles.size %>, link: "<%= tag_path(tag) %>"}<% if i != array_length %>,<% end %>
      <% end %>
    ];

    $(function() {
      $("#tags").jQCloud(word_array);
    });
  </script>
  <div class="d-flex justify-content-center" >
    <div  id="tags" style="width: 600px; height: 400px;"></div>
  </div>
</div>

A new page that makes use of the changes made in the layout.erb file to present the Word Cloud.