Jekyll Sidebar

The Jekyll Sidebar is a mobile-first two-column Jekyll theme inspired by Hyde.

Table of Contents

• Getting Started
• Constituents
  • Metadata
  • Sidebar Links
  • Sections
  • 404

Getting Started

curl --silent --location --show-error https://github.com/ashenm/jekyll-sidebar/archive/master.zip | \
  bsdtar --extract --keep-old-files --file - --strip-components 1

Alternately, using Git

git clone https://github.com/ashenm/jekyll-sidebar.git [DIRECTORY]

Constituents

Metadata

The metadata.html and scripts.html includes accommodate injection of additional metadata (i.e style sheets) and scripts into the document head respectively.

For instance, the file _includes\scripts.html embodying the following HTML snippet links jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

Whereas, the file _includes\metadata.html embodying the following HTML snippet sets the site’s favicon and links Font Awesome vector icons library.

<!-- favicon -->
<link rel="icon" href="https://jekyllrb.com/favicon.ico" />

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />

Sidebar Links

The Jekyll Sidebar Links facilitates external link placement on the navigation bar for external resources via the data file links.yaml.

The data file mandates the following structure; a YAML list composing of YAML associative arrays where each associative array corresponds to a single link to be placed on the navbar.

- url: ''      # the URL
  title: ''    # the link tile
  rel: ''      # the link type (defaults: external)

For instance, the GitHub link placed on the navigation bar utilises the following YAML snippet.

- url: 'https://github.com/ashenm/jekyll-sidebar'
  title: 'github'

The preceding YAML snippet yields a HTML element equivalent to the following;

<a class="nav-link" rel="external" href="https://github.com/ashenm/jekyll-sidebar">github</a>

⚠️	The text content of the navigation anchors will be transformed to titlecase and therefore the above will render Github instead of github.

Sections

The Jekyll Sidebar Sections serve as the basic blocks for standalone content. The placement of a Jekyll Page in the root directory will yield a section with a corresponding navbar entry.

📎	The navbar entry exerts the filename in the event of an undefined page title.

404

The Jekyll Sidebar includes a built-in 404 page to assist ease set-up with minimal exertion.