Added table of contents and ability to override the favicon

README.md

@@ -10,6 +10,8 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
 * [Installation](#installation)
 * [Usage](#usage)
     * [Pages](#pages)
+        * [Page Hero](#page-hero)
+        * [Table Of Contents](#table-of-contents)
     * [Posts](#posts)
     * [Navigation](#navigation)
     * [Colours and Styles](#colours-and-styles)
@@ -21,6 +23,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
     * [Products](#products)
     * [Scripts](#scripts)
     * [Callouts](#callouts)
+    * [Favicon](#favicon)
 * [Contributing](#contributing)
 * [Development](#development)
 * [Licence](#licence)
@@ -52,26 +55,33 @@ Or install it yourself as:
 
 ### Pages 
 
-Create your pages as individual markdown files and use the `layout: page` for normal pages. Set the pages title and subtitle in the frontmatter and it will appear in the hero.
+Create your pages as individual markdown files and use the `layout: page` for normal pages. Set the pages title and subtitle in the front matter and it will appear in the hero.
+
+#### Page Hero
 
 **New in 0.2** 
-Heros can now display a background image if you provide a `hero_image: /path/to/image.jpg` setting in your page frontmatter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
+Heros can now display a background image if you provide a `hero_image: /path/to/image.jpg` setting in your page front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
 
-You can also set the height of the hero by providing a bulma hero height class in your frontmatter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium 
+You can also set the height of the hero by providing a bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium 
 
 **New in 0.5.4**
-If you would like to add a call to action button in the hero then add `hero_link` and `hero_link_text` to the page's frontmatter.
+If you would like to add a call to action button in the hero then add `hero_link` and `hero_link_text` to the page's front matter.
 
 **New in 0.5.7**
-If you would like to hide the hero, you can set `hide_hero: true` in the page's frontmatter.
+If you would like to hide the hero, you can set `hide_hero: true` in the page's front matter.
+
+#### Table Of Contents
+
+**New in 0.5.8**
+If you want to display a table of contents (toc) then add `toc: true` to your page's front matter. You can customise the default table of contents title by setting `toc_title: My Custom Title` in the page's front matter. 
 
 ### Posts
 
 If you want posts, create a `_posts` directory to store your posts as per normal Jekyll usage, with the `layout: post`. Next create a `blog` directory with an index.html file that has `layout: blog`
 
-**New in 0.2** It will now display an image in the blog page if you set `image: /path/to/image.jpg` in your post's or page's frontmatter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
+**New in 0.2** It will now display an image in the blog page if you set `image: /path/to/image.jpg` in your post's or page's front matter, or in the [defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in your sites `_config.yml`
 
-You can also set the height of the hero by providing a bulma hero height class in your frontmatter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium
+You can also set the height of the hero by providing a Bulma hero height class in your front matter, such as `hero_height: is-fullwidth`. If you do not provide this, it will revert to is-medium
 
 
 ### Navigation
@@ -175,7 +185,7 @@ You may make multiple menus in the same file, separated by the label
 
 **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. 
+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 front matter. 
 
 ```yaml
 title: Page with tabs
@@ -384,6 +394,10 @@ subtitle: This is an example landing page
 callouts: example_callouts
 ```
 
+### Favicon
+
+The default favicon path is `{{ site.baseurl }}/favicon.png` but you can overwrite it in the sites `_config.yml` like this `favicon: /path/to/favicon.png`
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/chrisrhymes/bulma-clean-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

_config.yml

@@ -7,6 +7,7 @@ description: >
 baseurl: "/bulma-clean-theme"
 url: "https://www.csrhymes.com"
 permalink: pretty
+#favicon: /path/to/favicon.png
 
 paginate: 5
 paginate_path: "/blog/page:num"

_data/example_menu.yml

@@ -17,6 +17,8 @@
           link: /page-5/
         - name: Page Without Hero
           link: /page-without-hero/
+        - name: Page With Contents
+          link: /page-with-contents/
         - name: Landing Page With Callouts
           link: /landing/
     - name: Blog

_data/navigation.yml

@@ -13,6 +13,8 @@
       link: /page-5/
     - name: Page Without Hero
       link: /page-without-hero/
+    - name: Page With Contents
+      link: /page-with-contents/
     - name: Landing Page With Callouts
       link: /landing/
 - name: Products

_includes/head.html

@@ -3,7 +3,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ page.title }} - {{ site.title }}</title>
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
-    <link rel="shortcut icon" type="image/png" href="{{ site.baseurl }}/favicon.png" />
+    <link rel="shortcut icon" type="image/png"
+          {% if site.favicon %} href="{{ site.favicon | prepend: site.baseurl }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
+    />
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     {% seo %}
     {%- if site.google_analytics -%}

_includes/toc.html

@@ -0,0 +1,82 @@
+{% capture tocWorkspace %}
+    {% comment %}
+        Version 1.0.8
+          https://github.com/allejo/jekyll-toc
+    {% endcomment %}
+
+    {% capture my_toc %}{% endcapture %}
+    {% assign orderedList = include.ordered | default: false %}
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign nodes = include.html | split: '<h' %}
+    {% assign firstHeader = true %}
+
+    {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+        {% if headerLevel < minHeader or headerLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% if firstHeader %}
+            {% assign firstHeader = false %}
+            {% assign minHeader = headerLevel %}
+        {% endif %}
+
+        {% assign indentAmount = headerLevel | minus: minHeader %}
+        {% assign _workspace = node | split: '</h' %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+        {% assign html_id = _idWorkspace[0] %}
+
+        {% assign _classWorkspace = _workspace[0] | split: 'class="' %}
+        {% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
+        {% assign html_class = _classWorkspace[0] %}
+
+        {% if html_class contains "no_toc" %}
+            {% continue %}
+        {% endif %}
+
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+        {% assign space = '' %}
+        {% for i in (1..indentAmount) %}
+            {% assign space = space | prepend: '    ' %}
+        {% endfor %}
+
+        {% unless include.item_class == blank %}
+            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+        {% endunless %}
+
+        {% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
+    {% endfor %}
+
+    {% if include.class %}
+        {% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+
+    {% if include.id %}
+        {% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}
+
+<div class="contents">
+    <div class="menu">
+        <p class="menu-label">{{ include.contents_title }}</p>
+        {{ my_toc | markdownify | strip }}
+    </div>
+</div>
+
+

_layouts/page.html

@@ -2,6 +2,10 @@
 layout: default
 ---
 
+{% if page.toc %}
+    {% assign contentsTitle = page.toc_title | default: 'Contents' %}
+    {% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
+{% endif %}
 <div class="content">
     {{ content }}
 </div>

_sass/_layout.scss

@@ -23,3 +23,9 @@ div.highlight {
         }
     }
 }
+
+.contents {
+    box-shadow: $box-shadow;
+    padding: 1.5rem;
+    margin-bottom: 3rem;
+}

_sass/_main.scss

@@ -9,4 +9,4 @@ $tabs-link-active-border-bottom-color: $primary;
 
 @import "../node_modules/bulma/bulma.sass";
 @import "layout";
-@import "syntax"
+@import "syntax";

bulma-clean-theme.gemspec

@@ -2,15 +2,15 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "bulma-clean-theme"
-  spec.version       = "0.5.7"
+  spec.version       = "0.5.8"
   spec.authors       = ["chrisrhymes"]
   spec.email         = ["csrhymes@gmail.com"]
 
-  spec.summary       = "Clean and simple theme using Bulma"
+  spec.summary       = "Clean and simple Jekyll theme built using Bulma"
   spec.homepage      = "https://www.github.com/chrisrhymes/bulma-clean-theme"
   spec.license       = "MIT"
 
-  spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r!^(assets|_layouts|_includes|_sass|_posts|blog|LICENSE|README|package|node_modules|favicon.png|changelog.txt)!i) }
+  spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r!^(assets|_layouts|_includes|_sass|_posts|blog|LICENSE|README|package|node_modules|favicon)!i) }
 
   spec.add_runtime_dependency "jekyll", "~> 3.8"
   spec.add_runtime_dependency "jekyll-feed", "~> 0.11"

index.md

@@ -40,6 +40,7 @@ This demo site showcases the available page layout options.
 * Page With Tabs
 * Page Without Footer
 * Page Without Hero
+* Page With Contents
 * Landing Page With Callouts
 * Blog
 * Post

page-with-contents.md

@@ -0,0 +1,32 @@
+---
+layout: page
+title: Page With Contents
+subtitle: Example page with contents
+toc: true
+#toc_title: Custom Title
+menubar: example_menu
+show_sidebar: false
+---
+
+## Introduction
+
+This is an example page with contents that are generated from the page content. 
+
+The page contents are generated automatically using [Jekyll TOC](https://github.com/allejo/jekyll-toc).
+
+## Set Up
+
+To add contents to your page add `toc: true` to the page's front matter. 
+
+### Contents Title
+
+To overwrite the default title for the contents, set `toc_title: My Custom Title` in the page's front matter.
+
+### Example Front Matter 
+
+```yaml
+layout: page
+title: Page With Contents
+toc: true
+toc_title: Custom Title
+```