Added tabs, sytax highlighting and updated bulma

Author: chrisrhymes

README.md

@@ -12,6 +12,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
     * [Colours and Styles](#colours-and-styles)
     * [Sidebar Visibility](#sidebar-visibility)
     * [Menubar](#menubar)
+    * [Tabs](#tabs)
     * [Google Analytics](#google-analytics)
 * [Contributing](#contributing)
 * [Development](#development)
@@ -133,7 +134,7 @@ Create a data file in the _data directory and use the following format (if using
 
 For the current page to have an active class, ensure the `link:` format matches your [permalink](https://jekyllrb.com/docs/permalinks/#extensionless-permalinks) format. The above example will work with `permalink: pretty` setting in your `_config.yml`
 
-### Multiple menus
+#### Multiple menus
 
 You may make multiple menus in the same file, separated by the label
 
@@ -157,7 +158,62 @@ You may make multiple menus in the same file, separated by the label
       link: /another-example-item/
 ```
 
-### Google Anaytics 
+### Tabs
+
+**New in 0.4**
+
+The tabs gets its content from a data file in your site's `_data` directory. Simply set the name of your data file in the page's menubar setting in the frontmatter. 
+
+```yml
+title: Page with tabs
+subtitle: Demo page with tabs
+layout: page
+show_sidebar: false
+menubar: example_menu
+tabs: example_tabs
+```
+
+Tabs can be used in conjunction with menubar and/or sidebar if you wish. 
+
+#### Creating a tabs data file
+
+Create a data file in the _data directory and use the following format (if using yml)
+
+```yml
+alignment: is-left
+style: is-boxed
+size: is-large
+items:
+  - name: Tabs
+    link: /page-4/
+    icon: fa-smile-wink
+  - name: Sidebar
+    link: /page-1/
+    icon: fa-square
+  - name: No Sidebar
+    link: /page-2/
+    icon: fa-ellipsis-v
+  - name: Menubar
+    link: /page-3/
+    icon: fa-bars
+```
+
+#### Settings
+
+You can control the alignment, style and size of the tabs by using the relevant [Bulma tabs classes](https://bulma.io/documentation/components/tabs/). 
+
+#### Active Tab Highlighting
+
+It will automatically mark the active tab based on the current page.
+
+#### Icons
+
+You can add icons to your tab by passing in the [Font Awesome icon class](https://fontawesome.com/icons?d=gallery).
+
+If you don't wish to show icons then simply omit the option from your yaml file.
+
+
+### Google Analytics 
 
 **New in 0.2**
 

_config.yml

@@ -16,6 +16,8 @@ plugins:
   - jekyll-paginate
   - jekyll-feed
   - jekyll-seo-tag
+  - kramdown
+  - rouge
 
 exclude: 
   - Gemfile
@@ -50,4 +52,7 @@ defaults:
       author: "C.S. Rhymes"
       layout: post
       image: https://via.placeholder.com/800x600
-      show_sidebar: false
+      show_sidebar: false
+
+markdown: kramdown
+highlighter: rouge

_data/example_menu.yml

@@ -11,9 +11,7 @@
           link: /page-2/
         - name: Page With Menubar
           link: /page-3/
+        - name: Page With Tabs
+          link: /page-4/
     - name: Blog
-      link: /blog/
-- label: Second Example Menu
-  items:
-    - name: Item
-      link: #
+      link: /blog/

_data/example_tabs.yml

@@ -0,0 +1,16 @@
+alignment: is-left
+style: is-boxed
+size: is-large
+items:
+  - name: Tabs
+    link: /page-4/
+    icon: fa-smile-wink
+  - name: Sidebar
+    link: /page-1/
+    icon: fa-angle-double-right
+  - name: No Sidebar
+    link: /page-2/
+    icon: fa-ellipsis-v
+  - name: Menubar
+    link: /page-3/
+    icon: fa-bars

_data/navigation.yml

@@ -7,5 +7,7 @@
       link: /page-2/
     - name: Page With Menubar
       link: /page-3/
+    - name: Page With Tabs
+      link: /page-4/
 - name: Blog
   link: /blog/

_includes/tabs.html

@@ -0,0 +1,18 @@
+{% if page.tabs %}
+{% assign tabs = site.data.[page.tabs] %}
+
+<div class="tabs {% if tabs.size %}{{ tabs.size }}{% endif %} {% if tabs.alignment %}{{ tabs.alignment }}{% endif %} {% if tabs.style %}{{ tabs.style }}{% endif %}">
+    <ul>
+    {% for tab in tabs.items %}
+        <li {% if tab.link == page.url %} class="is-active" {% endif %}>
+            <a href="{{ tab.link | prepend: site.baseurl }}">
+                {% if tab.icon %}
+                <span class="icon is-small"><i class="fas {{ tab.icon }}" aria-hidden="true"></i></span>
+                {% endif %}
+                <span>{{ tab.name }}</span>
+            </a>
+        </li>
+    {% endfor %}
+    </ul>
+  </div>
+  {% endif %}

_layouts/default.html

@@ -13,9 +13,8 @@
                 </div>
                 {% endif %}
                 <div class="column">
-                    <div class="content">
-                        {{ content }}
-                    </div>
+                    {% include tabs.html %}
+                    {{ content }}
                 </div>
                 {% if site.posts and page.show_sidebar %}
                 <div class="column is-4-desktop is-12-tablet">

_layouts/page.html

@@ -2,4 +2,6 @@
 layout: default
 ---
 
-{{ content }}
+<div class="content">
+    {{ content }}
+</div>

_sass/_main.scss

@@ -4,5 +4,9 @@
 $family-sans-serif: 'Montserrat', sans-serif;
 $primary: #188eac !default;
 
+$tabs-link-active-color: $primary;
+$tabs-link-active-border-bottom-color: $primary;
+
 @import "../node_modules/bulma/bulma.sass";
-@import "layout";
+@import "layout";
+@import "syntax"