Code Monkey home page Code Monkey logo

jekyll-sidebar's Introduction

Jekyll Sidebar

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

Build Status

A Jekyll Sidebar Site on A Mobile Device A Jekyll Sidebar Site on A Larger Device

Table of Contents

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" />

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.

jekyll-sidebar's People

Contributors

ashenm avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.