Merge pull request #17 from chesterhow/gem

Create a gem for this theme

.gitignore

@@ -1,3 +1,5 @@
-_site
+*.gem
+.bundle
 .sass-cache
-.jekyll-metadata
+_site
+Gemfile.lock

Gemfile

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+gemspec

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 Chester How
+Copyright (c) 2018 Chester How
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -4,34 +4,63 @@ Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here
 ![Tale screenshot](http://i.imgur.com/pXZrtmo.png)
 
 ## Features
+- Easy installation
 - Compatible with GitHub Pages
 - Responsive design (looks just as good on mobile)
 - Syntax highlighting, with the help of Pygments
 - Markdown and HTML text formatting
 - Pagination of posts
 
+## Installation
+### As a Jekyll theme
+1. Add this line to your `Gemfile`:
+
+```ruby
+gem "tale"
+```
+
+2. In `_config.yml` replace the `minima` theme with `tale`:
+
+```yaml
+theme: tale
+```
+
+3. Install the theme's gems and dependencies:
+
+```bash
+$ bundle
+```
+
+4. Rename `index.md` to `index.html`. Without this, the `jekyll-paginate` gem will not work.
+
+5. Add these 2 lines in to `_config.yml`:
+
+```yaml
+permalink:      /:year-:month-:day/:title
+paginate:       5
+```
+
+### As a Fork
+1. Fork this repository
+
+2. Delete the unnecessary files/folders: `CODE_OF_CONDUCT.md`, `LICENSE`, `README.md`, `tale.gemspec`
+
+3. Delete the `baseurl` line in `_config.yml`:
+
+```yaml
+baseurl:        "/tale"   # delete this line
+```
+
 ## Usage
-### 1. Fork and Clone
-Fork this repository then clone it.
+Once you've installed the theme, you're ready to work on your Jekyll site. To start off, I would recommend updating `_config.yml` with your site's details.
 
-### 2. Install dependencies
-Tale uses Jekyll's built-SCSS compiler to generate CSS. You'll need to install the Jekyll gem:
+To build and serve your site, run:
 
 ```bash
-$ gem install jekyll
+$ bundle exec jekyll serve
 ```
 
-### 3. Create your site
-Edit the `_config.yml` file to suit your site. Also replace posts and content with your own.
-
-### 4. Running Locally
-To test your site locally, run this in your site's root directory
-
-```bash
-$ jekyll serve --watch
-```
-
-Head to http://localhost:4000/tale/ to see your site in action.
+And you're all set! Head over to http://127.0.0.1:4000/ to see your site in action.
 
 ## Contributing
 Found a bug or have a suggestion? Feel free to create an issue or make a pull request!

_config.yml

@@ -1,31 +1,28 @@
-# Permalinks
-permalink:      /:year-:month-:day/:title
-
-# Setup
+# Site settings
 title:          Tale
-paginate:       5
+description:    "Minimal Jekyll theme for storytellers"
 baseurl:        "/tale"
 url:            "https://chesterhow.github.io"
 
+# Author
+author:
+  name:         Chester How
+  url:          https://chester.how
+  email:        chesterhow@gmail.com
+
+# Build settings
+markdown:       kramdown
+theme:          tale
+
 # Assets
 sass:
   sass_dir:     _sass
-  style:        :compressed
-
-# Build settings
-markdown:       kramdown
-
-# About
-author:
-  name:         Chester How
-  url:          http://chester.how
-  email:        chesterhow@gmail.com
-
-# Custom vars
-version:        3.4.1
-github:
-  repo:         https://github.com/chesterhow/tale
+  style:        compressed
 
 # Gems
 plugins:
   - jekyll-paginate
+
+# Permalinks
+permalink:      /:year-:month-:day/:title
+paginate:       5

_includes/head.html

@@ -11,11 +11,11 @@
   </title>
 
   <!-- CSS -->
-  <link rel="stylesheet" href="{{ site.baseurl }}/styles.css">
+  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700">
 
   <!-- Favicon -->
-  <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/favicon-16x16.png">
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/favicon-32x32.png" | relative_url }}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ "/assets/favicon-16x16.png" | relative_url }}">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ "/assets/apple-touch-icon.png" | relative_url }}">
 </head>

_layouts/home.html

@@ -0,0 +1,31 @@
+---
+layout: default
+---
+
+<div class="catalogue">
+  {% for post in paginator.posts %}
+    <a href="{{ post.url | prepend: site.baseurl }}" class="catalogue-item">
+      <div>
+        <time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%B %d, %Y" }}</time>
+        <h1 class="catalogue-title">{{ post.title }}</h1>
+        <div class="catalogue-line"></div>
+
+        <p>
+          {{ post.content | truncatewords: 30 | strip_html }}
+        </p>
+
+      </div>
+    </a>
+  {% endfor %}
+</div>
+
+<div class="pagination">
+  {% if paginator.previous_page %}
+    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="left arrow">&#8592;</a>
+  {% endif %}
+  {% if paginator.next_page %}
+    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="right arrow">&#8594;</a>
+  {% endif %}
+
+  <span>{{ paginator.page }}</span>
+</div>

_sass/tale.scss

@@ -0,0 +1,8 @@
+@import 'tale/variables';
+@import 'tale/base';
+@import 'tale/code';
+@import 'tale/post';
+@import 'tale/syntax';
+@import 'tale/layout';
+@import 'tale/pagination';
+@import 'tale/catalogue';

assets/main.scss

@@ -0,0 +1,5 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import 'tale';

index.html

@@ -1,32 +1,4 @@
 ---
-layout: default
+layout: home
 title: Home
 ---
-
-<div class="catalogue">
-  {% for post in paginator.posts %}
-    <a href="{{ post.url | prepend: site.baseurl }}" class="catalogue-item">
-      <div>
-        <time datetime="{{ post.date }}" class="catalogue-time">{{ post.date | date: "%B %d, %Y" }}</time>
-        <h1 class="catalogue-title">{{ post.title }}</h1>
-        <div class="catalogue-line"></div>
-
-        <p>
-          {{ post.content | truncatewords: 30 | strip_html }}
-        </p>
-
-      </div>
-    </a>
-  {% endfor %}
-</div>
-
-<div class="pagination">
-  {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="left arrow">&#8592;</a>
-  {% endif %}
-  {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="right arrow">&#8594;</a>
-  {% endif %}
-
-  <span>{{ paginator.page }}</span>
-</div>

styles.scss

@@ -1,13 +0,0 @@
----
-# Use a comment to ensure Jekyll reads the file to be transformed into CSS later
-# only main files contain this front matter, not partials.
----
-
-@import 'variables';
-@import 'base';
-@import 'code';
-@import 'post';
-@import 'syntax';
-@import 'layout';
-@import 'pagination';
-@import 'catalogue';

tale.gemspec

@@ -0,0 +1,20 @@
+# coding: utf-8
+
+Gem::Specification.new do |spec|
+  spec.name          = "tale"
+  spec.version       = "0.1.1"
+  spec.authors       = ["Chester How"]
+  spec.email         = ["chesterhow@gmail.com"]
+
+  spec.summary       = %q{Tale is a minimal Jekyll theme curated for storytellers.}
+  spec.homepage      = "https://github.com/chesterhow/tale"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) }
+
+  spec.add_runtime_dependency "jekyll", "~> 3.6"
+  spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
+
+  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "rake", "~> 10.0"
+end