Type on Strap

Build Status Gem Version

A free and open-source Jekyll theme. Based on Rohan Chandra type-theme with a few new features:

Demo

Default Type on Strap blog

Table of Contents

  1. Usage
  2. Structure
  3. Configure Type on Strap
  4. Layout
  5. Feature pages
  6. Template as a Gem
  7. License

Usage

  1. Fork and clone the Type on Strap repo: git clone https://github.com/Sylhare/Type-on-Strap.git
  2. Install Jekyll: gem install jekyll, check #1 if you have a problem.
  3. Install the theme’s dependencies: bundle install
  4. Customize the theme
  5. Run the Jekyll server: jekyll serve

Structure

Here are the main files of the template

jekyll-theme-basically-basic
├── _draft	               # To store your drafts, they won't be published on your site
├── _includes	               # theme includes
├── _layouts                   # theme layouts (see below for details)
├── _portfolio	               # collection of article to be populated in the portfolio page
├── _posts                     # Blog posts
├── _sass                      # Sass partials 
├── assets
|  ├── js	               # theme javascript, Katex, jquery, bootstrap, jekyll search, 
|  ├── css                     # isolated Bootstrap, font-awesome, katex and main css
|  ├── fonts		       # Font-Awesome, Glyphicon, and other fonts
|  └── img		       # Images used for the template
├── pages
|   ├── 404.md		       # To be displayed when url is wrong
|   ├── about.md               # About example page
|   ├── gallery.md              # Gallery page for your photos
|   ├── portfolio.md	         # Portfolio page for your projects
|   ├── search.html	       # Search page
|   └── search.json            # Specify the search target (page, post, collection)
├── _config.yml                # sample configuration
└── index.html                 # sample home page (blog page paginated)

Configure Type on Strap

Open _config.yml in a text editor to change most of the blog’s settings.

If a variable in this document is marked as “optional”, disable the feature by removing all text from the variable.

Site configuration

Configure Jekyll as your own blog or with a subpath in in _config.yml:

Jekyll website without a subpath (such as a GitHub Pages website for a given username):

  baseurl: ""
  url: "https://username.github.io"

Jekyll website with subpath (like the Type on Strap demo page):

  baseurl: "/sub-directory"
  url: "https://username.github.io/"

Please configure this before using the theme.

Meta and Branding

Meta variables hold basic information about your Jekyll site which will be used throughout the site and as meta properties for search engines, browsers, and the site’s RSS feed.

Change these variables in _config.yml:

  theme_settings:
    title: My Jekyll Blog                 # Name of website
    avatar: assets/img/triangular.svg     # Path of avatar image, to be displayed in the theme's header
    gravatar: f98....6bfc                 # MD5 hash of your email address
    description: My blog posts            # Short description, primarily used by search engines

Customizing text

Footer and Header’s text

Customize your site header/footer with these variables in _config.yml:

  theme_settings:
    header_text: Welcome to my Jekyll blog
    header_text_feature_image: assets/img/sample3.png
    footer_text: Copyright 2017

Localisation string

Change localization string variables in _config.yml.

English text used in the theme has been grouped so you can quickly translate the theme or change labels to suit your needs.

  theme_settings:
     str_follow_on: "Follow on"
     str_rss_follow: "Follow RSS feed"
     str_email: "Email"
     str_next_post: "Next post"
     str_previous_post: "Previous post"
     str_next_page: "Next"
     str_previous_page: "Prev"
     str_continue_reading: "Continue reading"
     str_javascript_required_disqus: "Please enable JavaScript to view comments."

Other features

Jekyll works with liquid tags usually represented by:

These are useful to render your jekyll files. You can learn more about them on shopify’s doc

Footer’s icons

Display the site’s icon from Font Awesome in the footer. All icon variables should be your username enclosed in quotes (e.g. “username”) in _config.yml, except for the following variables:

  theme_settings:
     rss: true                                                   # Make sure you created a feed.xml with feed.xml layout
     email_address: type@example.com
     linkedin: https://www.linkedin.com/in/FirstLast
     stack_exchange: https://stackoverflow.com/users/0000/first-last

Comments (via Disqus)

Optionally, if you have a Disqus account, you can show a comments section below each post.

To enable Disqus comments, add your Disqus shortname to your project’s _config.yml file:

  theme_settings:
     disqus_shortname: my_disqus_shortname

Google Analytics

To enable Google Analytics, add your tracking ID to _config.yml like so:

  theme_settings:
     google_analytics: UA-NNNNNNNN-N

Math typesetting

When KateX is set in _config.yml:

  theme_settings:
     katex: true # to Enable it

You can then wrap math expressions with $$ signs in your posts and make sure you have set the katex variable in _config.yml to true for math typesetting.

For inline math typesetting, type your math expression on the same line as your content. For example:

Type math within a sentence $$2x^2 + x + c$$ to display inline

For display math typesetting, type your math expression on a new line. For example:

$$
  \bar{y} = {1 \over n} \sum_{i = 1}^{n}y_i
$$

Post excerpt

The excerpt are the first lines of an article that is display on the blog page. The length of the excerpt has a default of around 250 characters and can be manually set in the post using:

---
layout: post
title: Sample Page
excerpt_separator: <!--more-->
---

some text in the excerpt
<!--more-->
... rest of the text not shown in the excerpt ...

The html is stripped out of the excerpt so it only display text.

Layout

Please refer to the Jekyll docs for writing posts. Non-standard features are documented below.

Layout: Post

This are the basic features you can use with the post layout.

---
layout: post
title: Hello World                                # Title of the page
feature-img: "assets/img/sample.png"              # Add a feature-image to the post
thumbnail: "assets/img/thumbnail/sample-th.png"   # Add a thumbnail image on blog view
bootstrap: true                                   # Add bootstrap to the page
tags: [sample, markdown, html]
---

With thumbnail, you can add a smaller image than the feature-img. If you don’t want/have a thumbnail you can still use the same image as the feature one.

So the bootstrap is not mandatory and is only usefull if you want to add bootstrapped content in your page. It will respect the page and theme layout, mind the padding on the sides.

Layout: Page

The page layout have a bit more features explained here.

---
layout: page
title: "About" 
subtitle: "This is a subtitle"   
feature-img: "assets/img/sample.png" 
permalink: /about.html               # Set a permalink your your page
hide: true                           # Prevent the page title to appear in the navbar
tags: [sample, markdown, html]
---

The hide only hides your page from the navigation bar, it is however still generated and can be access through its link. Use the _draft folder to keep files from being generated on your site.

Layout: Default

This layout includes the head, navigation bar and footer around your content.

Feature pages

All feature pages besides the “home” one are stored in the page folder, they will appear in the navigation bar unless you set Hide: true in the front matter.

Here are the documentation for the other feature pages that can be added through _config.yml.

Home

This page is the used as the home page of the template (in the index.html). It displays the list of article in _posts. You can use this layout in another page (adding a title to it will make it appear in the navigation bar).

The recommended width and height for the home picture is width:2484px; and height:1280px which are the dimension of the actual picture for it to be rolling down as you scroll the page.

Portfolio

Portfolio is a feature page that will take all the markdown/html files in the _portfolio folder to create a 3-columns image portfolio matrix.

To use the portfolio, simply create a portfolio.md with this information inside:

--- 
layout: page
title : Portfolio 
---

<!-- Portfolio Grid Section -->

<div class="portfolio-grid">
    
    <div class="portfolio-cell">
        <a href="/portfolio/ninja" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Ninja">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/ninja.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/safe" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Creative">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/safe.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/circus" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Circus">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/circus.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/hanoi" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Tower of Hanoi">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/toh.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/tictactoe" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Tic tac toe">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/ttt.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/cake" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Cake">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/cake.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/jekyllblog" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Jekyll">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/cabin.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/submarine" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Lorem Ipsum">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/submarine.png" class="" alt="">
        </a>
    </div>
    
    <div class="portfolio-cell">
        <a href="/portfolio/gitlecture" class="portfolio-link" data-keyboard="true">
            <div class="caption" title="Github">
                <div class="caption-content">
                    <i class="fa fa-search-plus fa-3x"></i>
                </div>
            </div>
            <img src="/assets/img/portfolio/github.png" class="" alt="">
        </a>
    </div>
    
</div>

You can create a gallery using Masonry JS which will placing the pictures in optimal position based on available vertical space. You need to specify the gallery_path which will be used to find the pictures to render. It will take all of the picture under that directory. Then use the include to add it in your page.

---
layout: page
title: Gallery
gallery: "assets/img/pexels"
---

<style>
/* force scrollbar */
html { overflow-y: scroll; }
    
/* To overwrite page's padding, to get bigger images */
/* article {padding:2%;} */

</style>

<div id='masonry' class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

</div> 

<!-- Require JQuery >= 3.2.1 Requireas well -->
<script src="/assets/js/vendor/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="/assets/js/vendor/imagesloaded.min.js" type="text/javascript"></script>

The search feature is based on Simple-Jekyll-search there is a search.json file that will create a list of all of the site posts, pages and portfolios.

Then there’s a search.js displaying the formatted results entered in the search.html page.

The search page can be enable/disable in the navigation bar through the _config.yml via:

special_page:
    search: 
      icon: "search"
      enabled: true

Tags

Tags should be placed between [] in your post metadata. Separate each tag with a comma. Tags are recommended for posts and portfolio items.

For example:

---
layout: post
title: Markdown and HTML
tags: [sample, markdown, html]
---

Tags are case sensitive Tag_nAme ≠ tag_name

All the tags will be listed in tags.html with a link toward the pages or posts. The tags page can be enable/disable in the navigation bar through the _config.yml via:

special_page:
    tags: 
      icon: "tags"
      enabled: true

Template as a Gem

You can use Type-on-strap as a gem. Checkout an example in the gem-demo branch. To make the feature pages available in from the gem I created them as layouts that can be invoked in the pages folder.

So if you’re using the template as a theme, Make sure you have:

  • A index.html file
  • The right _config.yml with the theme setting such as theme: type-on-strap uncommented
  • The feature page included. (ex: as it is already in pages)
  • Some content ready in _posts and _portfolio to be displayed

Now you can use any theme gem with github pages : 29/11/2017 Github Pages Broadcast

License

The MIT License (MIT)