mere-blog-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ac3dc3cceac4c520e7e6bafe2dafe03c728025ce
+  data.tar.gz: 6e76d01e7da2aeea836c23b4ca1b8d2979320bcf
+SHA512:
+  metadata.gz: f6a38556e42a13ea666dec76cd04e5d397d0b5d75c47185ac70b0f727b25d43ad51f77145905f2cd0670303f69e78378d81c1b9d5e20eb4ebc86334f94cb2a1d
+  data.tar.gz: 984dc5239fc5df961256f2702bde910c9c5bb594a22c1387d9a5e84b82ac6695e5e3397c709c5861692f4321d0a80abbe41c5897461a031896013e93ab281235

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 chrisrhymes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,98 @@
+# mere-blog-theme
+
+Mere is a minimal and simple blog theme, and nothing more, for use with Jekyll and GitHub Pages. It has been built with the Bulma frontend framework.
+
+It has a homepage which displays the latest 6 posts and a paginated blog page used to list out all blog posts. 
+
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "mere-blog-theme"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: mere-blog-theme
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install mere-blog-theme
+
+## Usage
+
+* [Blog Setup](#blog-setup)
+* [Posts](#posts)
+* [Homepage](#homepage)
+* [Google Analytics](#google-analytics)
+
+### Blog Setup
+
+Create a `blog` directory with an `index.html` file inside it. Set the front matter of the `blog/index.html` page with the layout of blog. 
+
+```yaml
+layout: blog
+title: Blog
+```
+
+Set the paginator up in the `_config.yml` file with the posts per page and the path to the blog.
+
+```yaml
+paginate: 5
+paginate_path: "/blog/page:num"
+```
+
+### Posts
+
+Posts should be created in the _posts directory as per standard Jekyll usage. The frontmatter should contain the layout of post, the image to use in the header and the homepage / blog page, the title of the post and the author of the post. You can also set a subtitle for the post if you want to.
+
+```yaml
+layout: post
+title: First Post
+image: /img/home.jpg
+author: C.S. Rhymes
+```
+
+Wide images will work best, with a minimum width of 1400px. 
+
+### Homepage
+
+Finally, configure the homepage by creating an `index.html` page and configure the frontmatter with the layout of homepage, the title, subtitle (optional) and the image. You can set the hero_height to is-large if you want to make the homepage header a bit larger. 
+
+```yaml
+layout: homepage
+title: Mere Blog Theme
+subtitle: This is the demo site for the Mere Blog Theme
+image: /img/home.jpg
+hero_height: is-large
+```
+
+### Google Analytics
+
+To enable Google Analytics add `google_analytics: UA-xxxxxxxx` to your `_config.yml` replacing the UA-xxxxxxxx with your Google Analytics property.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/chrisrhymes/mere-blog-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.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `mere-blog-theme.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_includes/google-analytics.html

@@ -0,0 +1,8 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script>
+  window['ga-disable-{{ site.google_analytics }}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{ site.google_analytics }}');
+</script>

data/_includes/head.html

@@ -0,0 +1,13 @@
+<head>
+    <meta charset="utf-8">
+    <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" />
+    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+    {% seo %}
+    {%- if site.google_analytics -%}
+      {%- include google-analytics.html -%}
+    {%- endif -%}
+    {%- include head-scripts.html -%}
+</head>

data/_includes/hero.html

@@ -0,0 +1,8 @@
+<section class="hero {% if page.hero_height %} {{ page.hero_height }} {% else %} is-medium {% endif %} is-bold is-dark" {% if page.image %} style="background: url('{{ page.image | prepend: site.baseurl }}') no-repeat center center; background-size: cover;" {% endif %}>
+    <div class="hero-body">
+        <div class="container">
+            <p class="title is-2">{{ page.title }}</p>
+            <p class="subtitle is-3">{{ page.subtitle }}</p>
+        </div>
+    </div>
+</section>

data/_includes/navbar.html

@@ -0,0 +1,19 @@
+<div class="navbar is-white">
+    <div class="container">
+        <div class="navbar-brand">
+            <a class="navbar-item" href="{{ site.baseurl }}/">
+                {{ site.title }}
+            </a>
+            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
+        </div>
+        <div class="navbar-menu">
+            <div class="navbar-end">
+                <a class="navbar-item" href="{{ site.baseurl }}/blog/">Blog</a>
+            </div>
+        </div>
+    </div>
+</div>

data/_includes/pagination.html

@@ -0,0 +1,23 @@
+<nav class="pagination is-centered">
+    {% if paginator.previous_page %}
+    <a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="pagination-previous is-info"><i class="fas fa-chevron-left"></i></a>
+    {% else %}
+    <p class="pagination-previous" disabled><i class="fas fa-chevron-left"></i></p>
+    {% endif %}
+    {% if paginator.next_page %}
+    <a href="{{ site.baseurl }}{{ paginator.next_page_path }}" class="pagination-next is-info"><i class="fas fa-chevron-right"></i></a>
+    {% else %}
+    <p class="pagination-next" disabled ><i class="fas fa-chevron-right"></i></p>
+    {% endif %}
+    <ul class="pagination-list">
+        {% for page in (1..paginator.total_pages) %}
+        {% if page == paginator.page %}
+        <li><a class="pagination-link is-current">{{ page }}</a></li>
+        {% elsif page == 1 %}
+        <li><a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="pagination-link">{{ page }}</a></li>
+        {% else %}
+        <li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}" class="pagination-link">{{ page }}</a></li>
+        {% endif %}
+        {% endfor %}
+    </ul>
+</nav>

data/_includes/post-item.html

@@ -0,0 +1,17 @@
+<div class="card">
+    <div class="card-image">
+        <img src="{{ post.image | prepend: site.baseurl }}" alt="{{ post.title }}" width="100%">
+    </div>
+    <div class="card-content">
+        <div class="content">
+            <a href="{{ site.baseurl }}{{ post.url }}">
+                <p class="title is-4">{{ post.title}}</p>
+            </a>
+            <p class="subtitle is-6">Published {{ post.date | date: "%b %-d, %Y" }} by {{ post.author }}</p>
+            <p>{{ post.excerpt | strip_html | strip_newlines | truncate: 200 }}</p>
+        </div>
+        <div class="has-text-centered">
+            <a href="{{ site.baseurl }}{{ post.url }}" class="button is-dark is-fullwidth">Read more</a>
+        </div>
+    </div>
+</div>

data/_layouts/blog.html

@@ -0,0 +1,19 @@
+---
+layout: default
+---
+
+{{ content }}
+
+<div class="columns is-multiline">
+    <div class="column is-12">
+        {% include pagination.html %}
+    </div>
+    {% for post in paginator.posts %}
+    <div class="column is-12">
+        {% include post-item.html %}
+    </div>
+    {% endfor %}
+    <div class="column is-12">
+            {% include pagination.html %}
+    </div>
+</div>

data/_layouts/default.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+{% include head.html %}
+<body>
+{% include navbar.html %}
+{% include hero.html %}
+<section class="section">
+    <div class="container">
+        {{ content }}
+    </div>
+</section>
+<section class="section">
+    <div class="container">
+        <div class="has-text-centered">
+            <p>Theme built by <a href="https://www.csrhymes.com">C.S. Rhymes</a></p>
+        </div>
+    </div>
+</section>
+</body>
+</html>
+

data/_layouts/homepage.html

@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<div class="content">
+    {{ content }}
+</div>
+
+<div class="columns is-multiline">
+    {% assign post_width = "6|6|12|4|4|4" | split: "|" %}
+    {% for post in site.posts limit:6 %}
+    <div class="column is-{{ post_width[forloop.index0] }}">
+        {% include post-item.html %}
+    </div>
+    {% endfor %}
+
+    <div class="column is-12">
+        <div class="columns is-centered">
+            <div class="column is-3">
+                <a class="button is-dark is-fullwidth" href="{{ site.baseurl }}/blog/">More</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<div class="content">
+    <p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
+    {{ content }}
+</div>
+
+<div class="tags">
+    {% for tag in page.tags %}
+    <span class="tag is-primary">{{ tag }}</span>
+    {% endfor %}
+</div>

data/_sass/_layout.scss

@@ -0,0 +1,25 @@
+.content {
+    ul.pagination-list {
+        list-style: none;
+        margin-left: 0;
+        margin-top: 0;
+
+        li+li {
+            margin-top: 0;
+        }
+    }
+}
+
+div.highlight {
+    margin-bottom: 1rem;
+}
+
+@include desktop {
+    .navbar-item {
+        &.is-hoverable:hover {
+            .navbar-dropdown {
+                display: block;
+            }
+        }
+    }
+}

data/_sass/_main.scss

@@ -0,0 +1,38 @@
+@charset "utf-8";
+
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Righteous&display=swap');
+$family-sans-serif: 'Open Sans', sans-serif;
+$family-serif: 'Righteous', cursive;
+$family-primary: $family-sans-serif;
+$family-secondary: $family-serif;
+$title-family: $family-secondary;
+h1, h2, h3, h4, h5, h6 {
+  font-family: $family-secondary;
+}
+
+// Colours
+$primary: #4fa6a3 !default;
+$dark: #363636;
+$light: #f6f6f6;
+$white: #ffffff;
+
+//Cards
+$card-shadow: none;
+$card-footer-border-top: none;
+$card-background-color: $light;
+
+// Pagination
+$pagination-focus-border-color: $dark;
+$pagination-current-color: $white;
+$pagination-current-background-color: $dark;
+$pagination-current-border-color: $dark;
+
+// Radius
+$radius: 0;
+$radius-large: 0;
+$radius-small: 0;
+
+@import "../node_modules/bulma/bulma.sass";
+@import "layout";
+@import "syntax";

data/_sass/syntax.scss

@@ -0,0 +1,209 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight .cm {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cp {
+  color: #999999;
+  font-weight: bold;
+}
+.highlight .c1 {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .c, .highlight .cd {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2;
+}
+.highlight .gd {
+  color: #000000;
+  background-color: #ffdddd;
+}
+.highlight .ge {
+  color: #000000;
+  font-style: italic;
+}
+.highlight .gr {
+  color: #aa0000;
+}
+.highlight .gh {
+  color: #999999;
+}
+.highlight .gi {
+  color: #000000;
+  background-color: #ddffdd;
+}
+.highlight .go {
+  color: #888888;
+}
+.highlight .gp {
+  color: #555555;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #aaaaaa;
+}
+.highlight .gt {
+  color: #aa0000;
+}
+.highlight .kc {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kd {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kn {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kp {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kr {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kt {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kv {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .mf {
+  color: #009999;
+}
+.highlight .mh {
+  color: #009999;
+}
+.highlight .il {
+  color: #009999;
+}
+.highlight .mi {
+  color: #009999;
+}
+.highlight .mo {
+  color: #009999;
+}
+.highlight .m, .highlight .mb, .highlight .mx {
+  color: #009999;
+}
+.highlight .sb {
+  color: #d14;
+}
+.highlight .sc {
+  color: #d14;
+}
+.highlight .sd {
+  color: #d14;
+}
+.highlight .s2 {
+  color: #d14;
+}
+.highlight .se {
+  color: #d14;
+}
+.highlight .sh {
+  color: #d14;
+}
+.highlight .si {
+  color: #d14;
+}
+.highlight .sx {
+  color: #d14;
+}
+.highlight .sr {
+  color: #009926;
+}
+.highlight .s1 {
+  color: #d14;
+}
+.highlight .ss {
+  color: #990073;
+}
+.highlight .s {
+  color: #d14;
+}
+.highlight .na {
+  color: #008080;
+}
+.highlight .bp {
+  color: #999999;
+}
+.highlight .nb {
+  color: #0086B3;
+}
+.highlight .nc {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .no {
+  color: #008080;
+}
+.highlight .nd {
+  color: #3c5d5d;
+  font-weight: bold;
+}
+.highlight .ni {
+  color: #800080;
+}
+.highlight .ne {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nf {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nl {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nn {
+  color: #555555;
+}
+.highlight .nt {
+  color: #000080;
+}
+.highlight .vc {
+  color: #008080;
+}
+.highlight .vg {
+  color: #008080;
+}
+.highlight .vi {
+  color: #008080;
+}
+.highlight .nv {
+  color: #008080;
+}
+.highlight .ow {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .o {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .w {
+  color: #bbbbbb;
+}
+.highlight {
+  background-color: #f8f8f8;
+}

data/assets/css/app.scss

@@ -0,0 +1,5 @@
+---
+---
+
+// Import Main CSS file from theme
+@import "main";

data/assets/js/app.js

@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 0) {
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+
+      });
+    });
+  }
+
+});