Merge pull request #80 from daviddarnes/add-pwa

3.0.0 - PWA edition

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,5 @@
+**Please read the [contributing guidelines](https://github.com/daviddarnes/alembic/blob/master/CONTRIBUTING.md) and [code of conduct](https://github.com/daviddarnes/alembic/blob/master/CODE_OF_CONDUCT.md) before creating an issue.**
+
+Please prefix your issue with one of the following: **[Bug]** **[Proposal]** **[Question]**.
+
+Please provide as much information as possible, ideally a summary to describe the issue and / or steps to reproduce the issue.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,7 @@
+**Please read the [contributing guidelines](https://github.com/daviddarnes/alembic/blob/master/CONTRIBUTING.md) and [code of conduct](https://github.com/daviddarnes/alembic/blob/master/CODE_OF_CONDUCT.md) before creating a pull request.**
+
+Please prefix your pull request with one of the following: **[Feature]** **[Fix]** **[Enhancement]**.
+
+If the pull request is a **fix** please **link to the related issue**, all bugs must have an [an issue created](https://github.com/daviddarnes/alembic/issues/new) before a fix is provided.
+
+If the pull request is a **feature** please **provide a summary of how it works**, as well as documentation in the [readme](https://github.com/daviddarnes/alembic/blob/master/README.md).

README.md

@@ -31,6 +31,7 @@
 - Available as a **theme gem** and **GitHub Pages** theme
 - Simple and elegant design that can be used out of the box or as solid starting point
 - Tested in all major browsers, including **IE and Edge**
+- Built in **Service Worker** so it can work offline and on slow connections
 - **Configurable colours** and typography in a single settings file
 - Extensive set of **shortcodes** to include various elements; such as buttons, icons, figure images and more
 - Solid **typographic framework** from [Sassline](https://sassline.com/)
@@ -83,7 +84,7 @@ _(deprecated, not recommended)_
 
 1. [Fork the repo](https://github.com/daviddarnes/alembic#fork-destination-box)
 2. Replace the `Gemfile` with one stating all the gems used in your project
-3. Delete the following unnecessary files/folders: `CODE_OF_CONDUCT.md`, `CONTRIBUTING.md`, `LICENSE`, `screenshot.png`, `CNAME` and `alembic-jekyll-theme.gemspec`
+3. Delete the following unnecessary files/folders: `.github`, `LICENSE`, `screenshot.png`, `CNAME` and `alembic-jekyll-theme.gemspec`
 4. Run the command `bundle install` in the root of project to install the jekyll remote theme gem as a dependancy
 5. Run `bundle exec jekyll serve` to build and serve your site
 6. Done! Use the [configuration](#configuration) documentation and the example [`_config.yml`](https://github.com/daviddarnes/alembic/blob/master/_config.yml) file to set things like the navigation, contact form and social sharing buttons
@@ -108,6 +109,8 @@ There are a number of optional settings for you to configure. Use the example [`
 
 You'll need to change the `description`, `title` and `url` to match with the project. You'll also need to replace the `/assets/logo.svg` and `/assets/default-social-image.png` with the project logo and default social image. Setting the site language can be done with `lang`, the theme will default to `en-US`. The `email` needs to be changed to the email you want to receive contact form enquires with. The `disqus` value can be changed to your project username on [Disqus](https://disqus.com), remove this from the `/_config.yml` file if you don't want comments enabled. Look for the `Site settings` comment within the `/_config.yml` file. The `repo` setting is optional, for now, and can be removed entirely, if you wish.
 
+By default the built in Service Worker is enabled, and will work on a 'network first' method. That is, if there is no internet connection then the content the Service Worker has cached will be used until the connection comes back. It will always look for a live version of the code first. To disable the Service Worker set an option called `serviceWorker` to false in the `/_config.yml`.
+
 ### Site navigation
 
 There are a total of 4 different navigation types:
@@ -144,7 +147,8 @@ Example usage: `{% include figure.html image="/uploads/feature-image.jpg" captio
 Available options:
 - `image`: The image shown _required_
 - `caption`: A caption to explain the image
-- `position`: The position of the image, `left` or `right`
+- `position`: The position of the image; `left`, `right` or `center`
+- `width` & `height`: Optional width and height attributes of the containing image
 
 ### `icon.html`
 An icon.
@@ -155,6 +159,7 @@ Available options:
 - `id`: The reference for the icon _required_
 - `title`: The accessible label for the icon
 - `color`: The desired colour of the icon
+- `width` & `height`: Width and height attributes for the icon, default is `16`
 
 ### `nav-share.html`
 A set of buttons that share the current page to various social networks, which is controlled within the `_config.yml` file under the `sharing_links` keyword.

_config.yml

@@ -62,7 +62,7 @@ collections:
     description: "My thoughts and ideas" # The post list page content
     feature_text: |
       Welcome to the blog
-    feature_image: "https://unsplash.it/1300/400?image=1067"
+    feature_image: "https://picsum.photos/2560/600?image=866"
 
 # 6. Jekyll collections settings
 defaults:
@@ -104,7 +104,7 @@ social_links: # Appears in sidebar. Set the urls then uncomment and comment out
   RSS: /feed.xml
 
 sharing_links: # Appear at the bottom of single blog posts, uncomment and comment out as desired. Colours set the button colour
-  Twitter: "#1DA1F2"
+  Twitter: "#0d94e7"
   facebook: "#3B5998"
   Google+: "#DC4E41"
   # Pinterest: "#BD081C"

_includes/button.html

@@ -1 +1 @@
-<a class="button" href="{{ include.link | default: "#" }}"{% if include.color %} style="background: {{ include.color }}"{% endif %}>{{ include.text | default: "Button" }}{% if include.icon %}&nbsp; {% include icon.html id=include.icon %}{% endif %}</a>
+<a class="button" href="{{ include.link | default: '#' }}"{% if include.color %} style="background: {{ include.color }}"{% endif %}>{{ include.text | default: "Button" }}{% if include.icon %}&nbsp; {% include icon.html id=include.icon title=include.icon %}{% endif %}</a>

_includes/figure.html

@@ -1,5 +1,4 @@
-{% if include.alt %}{% assign altText = include.alt %}{% else %}{% assign altText = include.caption %}{% endif %}
-<figure class="figure{% if include.position %}  figure--{{ include.position }}{% endif %}">
-  {% if include.image %}<img class="image" src="{{ include.image }}" {% if altText %}alt="Image - {{ altText }}"{% endif %}>{% else %}<small>Image not found</small>{% endif%}
+<figure class="figure  figure--{{ include.position | default: 'center' }}">
+  <img class="image" src="{{ include.image }}" alt="{{ include.alt | default: include.caption }}" {{ include.width ? include.width | prepend: 'width="' | append: '"' }} {{ include.height ? include.height | prepend: 'height="' | append: '"' }}>
   {% if include.caption %}<figcaption class="caption">{{ include.caption }}</figcaption>{% endif %}
 </figure>

_includes/icon.html

@@ -1 +1 @@
-<svg width="16" height="16" class="icon  icon--{{ include.id | default: "link" }}" role="img"{% if include.title %} aria-label="{{ include.title }} icon"{% endif %}>{% if include.title %}<title>{{ include.title }}</title>{% endif %}<use xlink:href="#{{ include.id | default: "link" }}"{% if include.color %} fill="{{ include.color }}"{% endif %}></use></svg>
+<svg width="{{ include.width | default: "16" }}" height="{{ include.height | default: "16" }}" class="icon  icon--{{ include.id | default: "link" }}" role="img" alt="{{ include.title | default: include.id }}"><title>{{ include.title | default: include.id }}</title><use xlink:href="#{{ include.id | default: "link" }}" fill="{{ include.color | default: 'CurrentColor' }}"></use></svg>

_includes/map.html

@@ -1,3 +1 @@
-<div class="map">
-  {% if include.id %}<iframe src="https://www.google.com/maps/d/u/0/embed?mid={{ include.id }}"></iframe>{% else %}<small>Map not found</small>{% endif %}
-</div>
+<div class="map"><iframe src="https://www.google.com/maps/d/u/0/embed?mid={{ include.id }}" title="{{ include.title | default: 'Map' }}"></iframe></div>

_includes/nav-header.html

@@ -20,8 +20,8 @@
 {% endif %}
 
 <template id="buttontoggle">
-  <button class="button  button--nav" aria-label="Nav toggle">
-    {% include icon.html id="nav" %}
+  <button class="button  button--nav" aria-label="Menu toggle">
+    {% include icon.html id="nav" title="Menu" %}
   </button>
 </template>
 

_includes/nav-share.html

@@ -6,16 +6,16 @@
     {% assign color = network[1] %}
 
     {% capture share_link %}
-      {% if id contains "twitter" %}https://twitter.com/intent/tweet/?url={{ url }}&text={{ page.title | uri_escape }}{% if site.twitter.username %}&via={{ site.twitter.username}}{% endif %}{% endif %}
-      {% if id contains "facebook" %}https://facebook.com/sharer/sharer.php?u={{ url }}{% endif %}
-      {% if id contains "google+" %}https://plus.google.com/share?url={{ url }}{% endif %}
-      {% if id contains "pinterest" %}https://pinterest.com/pin/create/button/?url={{ url }}&description={{ page.title }}&media={{ page.image }}{% endif %}
-      {% if id contains "linkedin" %}https://www.linkedin.com/shareArticle?url={{ url }}&title={{ page.title }}&source={{ site.title }}&mini=true{% endif %}
-      {% if id contains "tumblr" %}https://tumblr.com/widgets/share/tool?canonicalUrl={{ url }}&tags={{ page.category }}&caption={{ page.title }}{% endif %}
-      {% if id contains "reddit" %}https://reddit.com/submit?url={{ url }}&title={{ page.title }}&resubmit=true{% endif %}
-      {% if id contains "hackernews" %}https://news.ycombinator.com/submitlink?u={{ url }}&t={{ page.title }}{% endif %}
-      {% if id contains "designernews" %}https://www.designernews.co/submit?url={{ url }}&title={{ page.title }}{% endif %}
-      {% if id contains "email" %}mailto:?subject={{ page.title }}&body={{ url | prepend: "Hey, check out this: "}}{% endif %}
+      {%- if id contains "twitter" %}https://twitter.com/intent/tweet/?url={{ url }}&text={{ page.title | uri_escape }}{% if site.twitter.username %}&via={{ site.twitter.username }}{% endif %}{% endif -%}
+      {%- if id contains "facebook" %}https://facebook.com/sharer/sharer.php?u={{ url }}{% endif -%}
+      {%- if id contains "google+" %}https://plus.google.com/share?url={{ url }}{% endif -%}
+      {%- if id contains "pinterest" %}https://pinterest.com/pin/create/button/?url={{ url }}&description={{ page.title }}&media={{ page.image }}{% endif -%}
+      {%- if id contains "linkedin" %}https://www.linkedin.com/shareArticle?url={{ url }}&title={{ page.title }}&source={{ site.title }}&mini=true{% endif -%}
+      {%- if id contains "tumblr" %}https://tumblr.com/widgets/share/tool?canonicalUrl={{ url }}&tags={{ page.category }}&caption={{ page.title }}{% endif -%}
+      {%- if id contains "reddit" %}https://reddit.com/submit?url={{ url }}&title={{ page.title }}&resubmit=true{% endif -%}
+      {%- if id contains "hackernews" %}https://news.ycombinator.com/submitlink?u={{ url }}&t={{ page.title }}{% endif -%}
+      {%- if id contains "designernews" %}https://www.designernews.co/submit?url={{ url }}&title={{ page.title }}{% endif -%}
+      {%- if id contains "email" %}mailto:?subject={{ page.title }}&body={{ url | prepend: "Hey, check out this: "}}{% endif -%}
     {% endcapture %}
 
     {% include button.html text=name icon=id link=share_link color=color %}

_includes/post-meta.html

@@ -1,12 +1,12 @@
 {% if page.categories %}
   {% capture categories %}
     {% for category in page.categories %}
-      <span class="label  label--category"><a href="{{ site.baseurl }}/categories#{{ category | downcase }}">{{ category }}</a></span>{% if forloop.last == false %},{% endif %}
+      <span class="label  label--category"><a href="{{ site.baseurl }}/categories/#{{ category | downcase }}">{{ category }}</a></span>{% if forloop.last == false %},{% endif %}
     {% endfor %}
   {% endcapture %}
 {% elsif page.category %}
   {% capture categories %}
-    <span class="label  label--category"><a href="{{ site.baseurl }}/categories#{{ page.category | downcase }}">{{ page.category }}</a></span>
+    <span class="label  label--category"><a href="{{ site.baseurl }}/categories/#{{ page.category | downcase }}">{{ page.category }}</a></span>
   {% endcapture %}
 {% endif %}
 

_includes/site-aside.html

@@ -1,4 +1,4 @@
-<aside class="aside  typeset{% if include.align == "left" %}  aside--left{% endif %}">
+<aside class="aside  typeset  aside--{{ include.align | default: 'right' }}">
 
   {% if page.layout == "post" %}
     <section class="section  section--related-posts">

_includes/site-logo.html

@@ -1,3 +1,3 @@
 <a class="logo" href="{{ site.baseurl }}/">
-  <img src="{{ site.baseurl }}{{ site.logo }}" alt="{{ site.title }} logo"/>
+  <img src="{{ site.baseurl }}{{ site.logo }}" alt="{{ site.title | append: ' logo' }}"/>
 </a>

_includes/site-sw.html

@@ -0,0 +1,20 @@
+<script type="text/javascript">
+(() => {
+  const registerServiceWorker = () => {
+    if (!navigator.serviceWorker) {
+      return;
+    }
+
+    navigator.serviceWorker
+      .register("{{ "/sw.js" | relative_url }}")
+      .then(registration => {
+        console.log("Service Worker: registered");
+      })
+      .catch(err => {
+        console.log("Service Worker: registration failed ", err);
+      });
+  };
+
+  registerServiceWorker();
+})();
+</script>

_includes/video.html

@@ -1,3 +1,3 @@
 <div class="video">
-  <iframe src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen></iframe>
+  <iframe src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen title="{{ include.title | default: "Video" }}"></iframe>
 </div>

_layouts/default.html

@@ -20,6 +20,9 @@
 			{% seo %}
 		{% endif %}
 
+		<link rel="manifest" href="{{ "/manifest.json" | relative_url }}">
+		<meta name="theme-color" content="{{ site.manifest.theme_color | default: '#242e2b' }}"/>
+
     <link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
 
 		{% if site.avatarurl %}{% include site-favicons.html %}{% endif %}
@@ -29,5 +32,6 @@
 
 		{{ content }}
 
+		{% if site.serviceWorker != false %}{% include site-sw.html %}{% endif %}
 	</body>
 </html>

_posts/2016-08-27-example-post-one.md

@@ -1,7 +1,7 @@
 ---
 title: Description of an Alembic
 category: General
-feature_image: "https://unsplash.it/1200/400?image=200"
+feature_image: "https://picsum.photos/2560/600?image=872"
 ---
 
 The complete distilling apparatus consists of three parts: the "cucurbit" (Arabic ḳarʿa, Greek βίκος), the still pot containing the liquid to be distilled, which is heated by a flame; the "head" or "cap" (Arabic anbiḳ, Greek ἄμβιξ) which fits over the mouth of the cucurbit to receive the vapors, with an attached downward-sloping "tube" (Greek σωλήν), leading to the "receiver" (Arabic ḳābila, Greek ἄγγος or φιάλη) container.

_posts/2016-08-29-example-post-three.md

@@ -6,8 +6,8 @@ excerpt: |
 feature_text: |
   ## The Pot Still
   The modern pot still is a descendant of the alembic, an earlier distillation device
-feature_image: "https://unsplash.it/1200/400?image=1048"
-image: "https://unsplash.it/1200/400?image=1048"
+feature_image: "https://picsum.photos/2560/600?image=733"
+image: "https://picsum.photos/2560/600?image=733"
 ---
 
 A pot still is a type of still used in distilling spirits such as whisky or brandy. Heat is applied directly to the pot containing the wash (for whisky) or wine (for brandy). This is called a batch distillation (as opposed to a continuous distillation).

_sass/_settings.scss

@@ -1,16 +1,16 @@
 // Background colours
 $backgroundColour: #ffffff;
-$codeBackgroundColour: #f4f4f4;
-$featureBackgroundColour: #eeeeee;
+$codeBackgroundColour: #fafafa;
+$featureBackgroundColour: #f9fafa;
 $accentColour: #05bf85;
 
 // Text colours
-$headingColour: #333333;
-$bodyColour: #555555;
+$headingColour: #242e2b;
+$bodyColour: #384743;
 $linkColour: #05bf85;
 $hoverColour: #008000;
 $focusColour: #fa407a;
-$captionColour: #aaaaaa;
+$captionColour: #a8adac;
 $white: #ffffff;
 
 // Typography

_sass/_theme.scss

@@ -63,7 +63,7 @@ body {
   @include flexbox;
   @include align-items(center);
   img {
-    max-height: 4rem;
+    max-height: 5rem;
   }
 }
 
@@ -196,7 +196,7 @@ body {
   }
   &--current {
     a {
-      opacity: 0.5;
+      color: $captionColour;
     }
   }
 }
@@ -372,6 +372,7 @@ label {
 
 code {
   padding: .12rem .2rem;
+  color: $headingColour;
 }
 
 pre code {

alembic-jekyll-theme.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "alembic-jekyll-theme"
-  spec.version       = "2.3.1"
+  spec.version       = "3.0.0"
   spec.authors       = ["David Darnes"]
   spec.email         = ["[email protected]"]
 
@@ -13,7 +13,7 @@ Gem::Specification.new do |spec|
 
   spec.metadata["plugin_type"] = "theme"
 
-  spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) }
+  spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README|sw|manifest)}i) }
 
   spec.add_runtime_dependency "jekyll", "~> 3.6"
   spec.add_runtime_dependency "jekyll-sitemap", "~> 0.13"