Repository files navigation

A free and open-sourceJekyll theme.Based on Rohan Chandratype-theme packed with extra features and easily customizable:

• Responsive design on all devices (🖥, 💻, 📱, ...)
• Portfolio 🗂, Gallery 🖼 pages for your projects
• Multi comments 💬 options
• Tags compatibility 🏷
• HandleBootstrap'ed pages:Get Bootstrap
• 🔎 Search feature:Simple-Jekyll-Search
• Math Rendering :KateX
• Diagram Rendering:Mermaid-js
• 🖋 Nice fonts:Font Awesome,Source Sans Pro,Pacifico
• Seo Tags:Jekyll-seo-tag
• 🛠 Syntax Highlighting: Easily customisableBase16
• 💡 Light and dark theme supported
• Find free of rights images onpexels

Demo Site

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

Check out this tutorial:Use as Ruby Gem

Here are the main files of the template

./Type-on-Strap├── _includes# Theme includes├── _layouts# Theme layouts (see below for details)├── _portfolio# Collection of articles for the portfolio page├── _posts# Blog posts├── _sass# Sass partials (compiled into css at runtime)├── assets|  ├── js# JS compiled for distribution + raw sources|  ├── css# CSS compiled for distribution|  ├── fonts# Font-Awesome, 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.md# Search page|   └── tags.md# The tag page├── _config.yml# sample configuration├── _data|  ├── authors.yml# Update the post authors configurations|  ├── language.yml# Localization configuration|  ├── biblio.yml# To create a reference bibliography|  ├── social.yml# Social configurations to share posts (RSS, shares, ...)|  └── icons.yml# Footer icons (Twitter, Github, Stackoverflow, ...)└── index.html# sample home page (blog page paginated)

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.

Configure Jekyll as your own blog or with a "baseurl" in_config.yml:

Jekyll websitewithout a "baseurl" (such as aGitHub Pages website with your username as the repository name):

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

Jekyll websitewith "baseurl" (like the Type on Strapdemo page):

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

And here is the basic information you will need in your_config.yml for it to work properly:

# BLOG CONFIGURATIONpost_navigation:truepaginate:10paginate_path:"blog/page:num"plugins:[jekyll-paginate, jekyll-seo-tag, jekyll-feed]

To configure the blog part and default plugins. Those plugins are validated by GitHub page.

Meta variables hold basic information about your Jekyll site, which will be used throughout the siteand asmeta properties that are used for search engines, browsers, and the site's RSS feed.

Change these variables in_config.yml:

title:My Jekyll Blog# Name of websiteavatar:assets/img/avatar.png# Path of avatar image, to be displayed in the theme's headerdescription:My blog posts# Short description, primarily used by search enginesfavicon:assets/favicon.ico# Icon displayed in the tabcolor_theme:auto# color theme auto, dark or light

You can also customize the seo tags default option following the jekyll-seo-tag plugindocumentation.The color theme can be set to dark or light (customize it invariables.scss).Usingauto you'll have a tiny icon in the navbar allowing the use to manually switch from dark to light theme.

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

header_text:Welcome to my Jekyll blogfooter_text:Copyright 2017

If you don't want anything, replace the value by" ".

The header's image (tested with 2480x1280) can be set as one image withheader_feature_imagebut can also be responsive:

header_feature_image:assets/img/header/my-header-image.pngheader_feature_image_responsive:true

By settingheader_feature_image_responsive to true, it will look for imageswith suffix-small (620x320) and-medium (1240x640) to display on smaller screen.

Localization string is a way to quickly change the template language for text likeNext Post orFollow on, ...You can find all the properties in_data/language.yml.

By default, it is in English, but you can add your own language.

Here you also can set the date format, e.g., setstr_date_format: '%B %-d, %Y' for "January, 13, 2024",str_date_format: '%Y-%m-%d' for 2024-01-13, orstr_date_format: '%d.%m.%Y' for 13.01.2024.

To enable Google Analytics (GA4), add yourMeasurement IDto_config.yml like so:

google_analytics:G-XXXXXXXXXX

It will use theGoogle Tag Manager

If you have aDisqus account, you can show a comments section below each post.

To enable Disqus comments, add yourDisqus shortnameto your project's_config.yml file:

comments:disqus_shortname:my_disqus_shortname

Cusdis is an open-source alternative to Disqus.You can read more about it in thedocumentation

To enable it, set your Cusdis name in_config.yml:

comments:cusdis_app_id:my_data-app-id

Utterances is another open source alternative linked to one's GitHub account.It stores the comments as GitHub issues on a repository for each page.

Install the utteranceapp to your repo.After installing, add your info in the_config.yml:

comments:utterances:# Enable by filling below information. For more info, go to https://utteranc.esrepo:# your public comments repository (e.g. owner/repo)issue-term:# Issue term (e.g. "comment" consider issues with this word in the title as comments)theme:# OPTIONAL: Take the `color_theme` by default, or set a custom one like github-dark-orangelabel:# OPTIONAL: Adds an issue label in the issue

When KateX is set in_config.yml:

katex:true# to enable it

You can then wrap math expressions with$$ signs in your posts and make sure you have set thekatex variablein_config.yml totrue for math typesetting.

For inline math typesetting, type your math expression on thesame 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 anew line. For example:

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

You can find a cheat sheet of the compatible LaTex symbolsonline.

Enable themermaid-js diagram rendering by setting mermaid to true in the_config.yml.This will load and init themermaid.min.js.

mermaid:default# Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral

Find all the help you need on the officialmermaid documentation.Usemermaid as color highlighter language to render the diagram or with theclass="mermaid" inside the<div>:

```mermaidsequenceDiagram    Alice->>John: Hello John, how are you?    John-->>Alice: Great!

In_data/social.yml you can customize the social icons that will be displayed in the post to share your post.You can also enable RSS.The site icons come fromFont Awesome.

In_data/icons.yml you can set the footer icon that will appear at the bottom of the page.They will redirect the user on your profile on to other platforms like Twitter, GitHub and so many more!

You can add a cookie consent with a disclaimer if you use Google Analytics while respecting theGDPR.Set to true, there will be a banner at the bottom of the page with the disclaimer, and anapprove button.Once the user clicks on "Approve" the cookies will be created for Google Analytics.

The share icons are the one at the bottom of the blog page if enabled.They will on click redirect you to the logo's platform to share the article.

Display icons in the footer.All icon variables should be your username enclosed in quotes (e.g. "username") in_data/icons.yml.

You can update the RSS settings in_data/social to change the default feed path (generated byjekyll-feel).To enable the share icons at the bottom of each article,set to true the one you'd like undershare in the_data/social.yml file.

When writing a post, be sure in jekyll to:

• Put it in the_posts folder
• Name it with the date first like2019-08-21-This-is-my-blog-post.md

Please refer to theJekyll docs for writing posts.

These are the basic features you can use with thepost layout, in the comment theOpt means thatit is optional.

---layout:posttitle:Hello World# Title of the pagehide_title:true# [Opt] Hide the title when displaying the post, but shown in lists of postsfeature-img:"assets/img/sample.png"# [Opt] Add a feature-image to the postthumbnail:"assets/img/thumbnails/sample-th.png"# [Opt] Add a thumbnail image on blog viewcolor:rgb(80,140,22)# [Opt] Add the specified color as feature image and links in postposition:1# [Opt] Set position on the menu navigation bartags:[sample, markdown, html]# [Opt] Add tags to the page---

Withthumbnail, you can add a smaller image than thefeature-img.If you don't have a thumbnail, you can still use the same image as the feature one. Or use the gulp task to create it.

If you don't use a feature image, butcolor, the transparent background is set comes fromlineart.png.You can edit it in the config file (_config.yml > color_image). If you want another one, put it in/assets/img as well.

For position, if not set on all pages, it will be by alphabetical order withoutposition then byposition order.If two pages have the same position number, the order is decided by alphabetical order on the page title.

There's alsobootstrap: true which is not mandatory and only useful if you want to add HTML content in your page thatrequiresbootstrap.It will respect the page and theme layout, mind the padding on the sides.

Theexcerpt is the head of the article rendered in the blog page.The length of the excerpt has a default of around250 characters or can be manually set in the post using:

inconflig.yml:

excerpt:true

Then in your post, add theexcerpt separator:

---layout:posttitle:Sample Pageexcerpt_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 displays text.

To easily add align images side by side in your article using thealigner.html include:

{%includealigner.htmlimages="path/to/img1.png,path/to/img2.png,path/to/img3.png"column=3caption="some description" %}

Use it in any markdown file. There are two fields in theinclude you need to look into:

• images: Takes a string separated with, of all the images' path.
  • It by default look intoassets/img/ so give the path from there.
• column: (OPTIONAL) Set the number of column you want your imaged displayed in.
  • default is 2 columns
  • column=3 set 3 columns
  • column="auto" makes as many columns as images
• caption: (OPTIONAL) Add a caption to the images

Like all CSS variables in the theme, you can edit the color of the code highlight in_sass > base > _variables.scss.The code highlighting works withbase16 you can find existing exampleof your favourite highlight color scheme on this format.

All feature pages besides the "home" one are stored in thepage folder,they will appear in the navigation bar unless you setHide: true in the front matter.

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

Non-standard features are documented below.

This layout includes the head, navigation bar and footer around your content.Unless you are making a custom layout you won't need it.

This page is used as the home page of the template (in theindex.html). It displays the list of articles 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:1280pxwhich are the dimensions of the actual picture for it to be rolling down as you scroll the page.

If your posts are not displaying ensure that you have added the linepaginate: 5 to_config.yml.

The page layout has a bit more features explained here.

---layout:pagetitle:"About"subtitle:"This is a subtitle"feature-img:"assets/img/sample.png"permalink:/about/# Set a permalink your your pagehide:true# Prevent the page title to appear in the navbaricon:"fa-search"# Will Display only the fontawesome icon (here: fa-search) and not the titletags:[sample, markdown, html]---

The hide only hides your page from the navigation bar, it is, however, still generated and can be accessed through its link.

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 aportfolio.md with this information inside:

---layout:pagetitle:Portfolio---{% include default/portfolio.html %}

You can format the portfolio posts in the_portfolio folder using thepost layout.Here is a little explanation on some of the possible features you can use.

If you decide to use a date, please be sure to use one that can be parsed such asyyyy-mm-dd.You can see more format examples in the demo posts that are available for the theme:

---layout:posttitle:Circus# Title of the portfolio postfeature-img:"assets/img/portfolio/cake.png"# Will display the image in the postimg:"assets/img/portfolio/cake.png"# Will display the image in the portfolio pagedate:2019-07-25# Not mandatory, however needs to be in date format to display the date---

Make sure your_config.yml contains the following if you are using the theme as a gem:

# PORTFOLIOcollections:portfolio:output:truepermalink:/:collection/:name

This creates the collection for Jekyll, so it can find and display your portfolio posts.

You can create a gallery usingMasonry JS which will placing the pictures at the optimal positionbased on available vertical space.You need to specify thegallery_path which will be used to find the pictures to render.It will take all the pictures under that directory. Then use theinclude to add it in your page.

---layout:pagetitle:Gallerygallery:"assets/img/pexels"---{% include default/gallery.html gallery_path=page.gallery %}

The search feature is based onSimple-Jekyll-searchthere is asearch.liquid file that will create a list of all the site posts, pages and portfolios.Then there's a script displaying the formatted results in thesearch page.

To exclude contents from the search add theexclude: true option in the markdown header.By default, all posts, pages, and collections are available in the search.Hide the search page from the navigation bar with thehide: true option.You can remove the icon by removingicon:

---layout:searchtitle:Searchicon:"search"---

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:posttitle:Markdown and HTMLtags:[sample, markdown, html]---

Tags are case-sensitiveTag_nAme ≠tag_name

All the tags will be listed on the "tags" page with a link toward the pages or posts.The Tag page can be hidden with thehide option. You can remove the icon by removingicon (like for the search page).

Jekyll works withliquid tags usually represented by:

{{liquid.tag |filter }}

These are useful to render your jekyll files.You can learn more about them onshopify's doc

Before you need to havenode andnpm installed:

• Windows:https://nodejs.org/
• Ubuntu/Debian:apt-get install nodejs npm libgl1 libxi6
• Fedora (dnf) / RHEL/CentOS (yum):dnf install node npm libglvnd-glx libXi

Then you need to installgulp-cli and its dependencies:

cd assets/sudo npm install gulp-cli -gnpm install

You can run the default task that will compress the js, css and images and create the thumbnails for the supported imageformats:

cd assets/gulp defaultgulp thumbnails-all# to create all of the images thumbnailsgulp thumbnails# to create thumbnails for the feature-img/ only# tip: run a git status to see the changesgit status

You can find more about the gulp tasks in thegulpfile.js.

To create a.md file in the_posts/ section with the jekyll format of today's date.Use this command with the title you'd like to create the very basic post.

gulp post -n'title of the post'

A file will be created following the formatyyyy-mm-dd-title-of-the-post.md with default post attributes inside.Nothing will happen if the file exists already.

You can use Type-on-strap as agem.

Using theRuby Gem Method.Add this line to your Jekyll site's Gemfile (or create one):

gem"type-on-strap"

Add this line to your Jekyll site's_config.yml file:

theme:type-on-strap

Then run Bundler to install the theme gem and dependencies:

bundle install

Then you can start adding content like:

• Add aindex.html file
• Add the feature page you want. (ex: as it is already inpages)
• Add posts in_posts and_portfolio to be displayed

Now you can use any theme gem with GitHub pages with29/11/2017 GitHub Pages Broadcast.For that remove alltheme: attributes from_config.yml and add instead:

remote_theme:sylhare/Type-on-Strap

This theme is licensed under theMIT License (MIT)

• Pictures fromPexels are under Creative Commons Zero (CC0) license
• Fonts are licensed under theSIL Open Font License (OFL)