VIX-Chevron-Up

The VIX Digital 'Link Portal'

By Catherine McDonough

Why?

As our client base was growing we were finding our bookmarks bar was getting cluttered with folders and links for Trello boards, staging environments, Google Drive folders, code repositories etc. 

Ideally we wanted everything to be one click away, but with the limited functionality of the bookmarks bar this was getting harder and harder.


~Enter 20% time~


At v9 we have a policy where we can spend 20% of our time working on what we think will most benefit the company - no matter how big or small the idea is. Of course, this is in addition to our regular projects. 

I decided to take on the bookmarks bar disaster as one of my 20% time projects. 

After some discussions with the rest of the team about what we all wanted from the link portal, we came up with the idea of having a wall of cards (kind of similar to Trello) which simply has the title of a project or suitable group heading and a list of useful links corresponding to that heading. 

How?

The first thing to decide was what to use to create our link portal. I settled on Jekyll as I had used it before, so was familiar with how to adapt it to suit our needs for this particular project by using custom collections. 

I created a blank Jekyll blog following the instructions they provide on their website and then made a few small changes.

Firstly, I created a collection named "cards" in the sites `_config.yml` file (see Chris' post for detailed instructions on setting up a collection and other fun things in Jekyll).

collections:
  cards:
    output: true

The cards are all found in a new folder called `_cards`. This is essentially works the same as the built in Jekyll `_posts` folder.

Each card in the folder uses a YAML front matter block to specify certain variables which are consistent across all the cards.

---
title: "Card One Title"
color: "#e20068"
icon: "group"
---

<h5><a href="#">Card One Link</a></h5>
<h5><a href="#">Card One Link</a></h5>
<h5><a href="#">Card One Link</a></h5>
<h5><a href="#">Card One Link</a></h5>

The YAML front matter variables are then injected into the `index.html` using Liquid tags. 

For layout and styling, I used the built in foundation pricing tables to get an idea for the basic structure and then added my own custom styling using Sass.

---
layout: default
---

<div id="home">
    <div class="row">
        {% for card in site.cards %}
        <div class="large-4 large-centered medium-6 columns">
            <ul class="card">
                <li class="card-title" style="border-bottom: 4px solid {{ card.color }};">
                    <h4><i class="fa fa-{{ card.icon }}"></i> {{ card.title }}</h4>
                </li>
                <li class="links-list">
                    {{ card.content }}
                </li>
            </ul>
        </div>
        {% endfor %}
    </div>
</div>

I decided to host the site for free using GitHub pages. The whole team can easily access the files to update links or create new cards within GitHub, which can be deployed immediately by pushing the change(s) to the master branch.

It also makes it really easy to keep track of changes and improvements that are made to the link portal.

We used the New Tab Redirect Chrome plugin to set our default new tab browser view as the link portal.

It might not be the best solution but for now it solves our problem, we've already started talking about expanding the portal into more of a dashboard where we can monitor our systems.. so the future is looking bright for our little link portal!

The Finished Product
vix_digital_link_portal_img_1
<< Back to Insights