Merge branch 'master' into develop

assets/sass/_base.sass

@@ -10,6 +10,9 @@ main
     img
         @extend .img-responsive
 
+    p img
+        margin: 1.5em 0
+
 .embed-container
     padding: 56.25% 0 0
     position: relative

assets/sass/base/_code.sass

@@ -1,17 +0,0 @@
-pre
-    display: block
-    overflow: auto
-    word-break: normal
-    word-wrap: no-wrap
-
-pre[class*="language-"]
-    border: 0
-    border-radius: 0
-
-pre code
-    white-space: pre
-    word-break: normal
-
-code.hljs
-    background-color: inherit
-    padding: 0

assets/sass/blog-post.sass

@@ -0,0 +1,39 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+
+.post-pager
+    clear: both
+    margin-top: 2em
+
+.post-pager div
+    flex: 1
+
+pre
+    display: block
+    overflow: auto
+    word-break: normal
+    word-wrap: no-wrap
+
+pre[class*="language-"]
+    border: 0
+    border-radius: 0
+    margin: 1.5em 0
+
+pre code
+    white-space: pre
+    word-break: normal
+
+code.hljs
+    background-color: inherit
+    padding: 0
+
+code[data-gist-id]
+    background: transparent
+    padding: 0
+
+.about-author
+    +clearfix
+
+    img
+        float: left
+        margin: 0 1em 1em 0
+        width: 50px

assets/sass/blog.sass

@@ -1,3 +1,5 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+
 .page--blog__list
     ul.posts
         list-style: none

assets/sass/components/_about-author.sass

@@ -1,7 +0,0 @@
-.about-author
-    +clearfix
-
-    img
-        float: left
-        margin: 0 1em 1em 0
-        width: 50px

assets/sass/experience.sass

@@ -1,3 +1,7 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
 .experience-item
     margin-bottom: $padding-large-vertical * 3
     +clearfix

assets/sass/main.sass

@@ -0,0 +1,12 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap'
+
+@import 'base'
+@import 'mixins'
+
+@import 'base/layout'
+@import 'base/typography'
+
+@import 'components/availability'
+@import 'components/badges'
+@import 'components/footer'
+@import 'components/meetups'

assets/sass/project.sass

@@ -1,3 +1,6 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
 .project-company
     &.has-logo
         a:link,

assets/sass/site.sass

@@ -1,21 +0,0 @@
-@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap'
-
-@import 'base'
-@import 'mixins'
-
-@import 'base/layout'
-@import 'base/typography'
-@import 'base/code'
-
-@import 'components/about-author'
-@import 'components/availability'
-@import 'components/badges'
-@import 'components/blog-list'
-@import 'components/footer'
-@import 'components/meetups'
-@import 'components/page-about'
-@import 'components/page-post'
-@import 'components/page-experience'
-@import 'components/page-talk'
-@import 'components/project-company'
-@import 'components/testimonials'

assets/sass/talk.sass

@@ -0,0 +1,14 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
+.talk-full h1
+    margin-bottom: 25px
+
+.presentation
+    background: url('../images/loading.gif') no-repeat center
+    min-height: 275px
+    width: 100%
+    +tablet
+        min-height: 460px
+    +desktop
+        min-height: 540px

assets/sass/talks-table.sass

@@ -1,15 +1,3 @@
-.talk-full h1
-    margin-bottom: 25px
-
-.presentation
-    background: url('../images/loading.gif') no-repeat center
-    min-height: 275px
-    width: 100%
-    +tablet
-        min-height: 460px
-    +desktop
-        min-height: 540px
-
 .talk-event-table
     & > thead > tr > th,
     & > tbody > tr > td

assets/sass/testimonials.sass

@@ -1,3 +1,7 @@
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins/clearfix'
+@import '../../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables'
+@import 'mixins'
+
 .testimonial
     +clearfix
     margin-bottom: 10px

gulpfile.js

@@ -20,12 +20,10 @@ var config = {
     }
 };
 
-gulp.task('styles', function () {
+var app = {};
-    return gulp.src([
+
-        config.bowerDir + '/font-awesome/css/font-awesome.css',
+app.sass = function (sourceFiles, filename) {
-        config.bowerDir + '/prism/themes/prism-twilight.css',
+    return gulp.src(sourceFiles)
-        config.sass.sourceDir + config.sass.pattern
-    ])
         .pipe(plugins.plumber())
         .pipe(plugins.if(!config.production, plugins.sourcemaps.init()))
         .pipe(plugins.sassGlob())
@@ -34,7 +32,7 @@ gulp.task('styles', function () {
             browsers: ["last 2 versions", "> 5%"],
             cascade: false
         }))
-        .pipe(plugins.concat('site.css'))
+        .pipe(plugins.concat(filename))
         .pipe(plugins.if(config.production, plugins.purifycss([
             'source/**/*.html',
             'source/**/*.md',
@@ -44,6 +42,25 @@ gulp.task('styles', function () {
         .pipe(plugins.if(!config.production, plugins.sourcemaps.write('.')))
         .pipe(plugins.if(!config.production, plugins.refresh()))
         .pipe(gulp.dest(config.sass.outputDir));
+}
+
+gulp.task('styles', function () {
+    app.sass([
+        config.bowerDir + '/font-awesome/css/font-awesome.css',
+        config.sass.sourceDir + '/main.sass'
+    ], 'main.css');
+
+    app.sass(config.sass.sourceDir + '/about.sass', 'about.css');
+    app.sass(config.sass.sourceDir + '/blog.sass', 'blog.css');
+    app.sass([
+        config.bowerDir + '/prism/themes/prism-twilight.css',
+        config.sass.sourceDir + '/blog-post.sass'
+    ], 'blog-post.css');
+    app.sass(config.sass.sourceDir + '/experience.sass', 'experience.css');
+    app.sass(config.sass.sourceDir + '/project.sass', 'project.css');
+    app.sass(config.sass.sourceDir + '/talk.sass', 'talk.css');
+    app.sass(config.sass.sourceDir + '/talks-table.sass', 'talks-table.css');
+    app.sass(config.sass.sourceDir + '/testimonials.sass', 'testimonials.css');
 });
 
 gulp.task('scripts', function () {

source/_partials/head.twig

@@ -1,24 +0,0 @@
-<head>
-    {% include 'title' %}
-
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    {% if page.meta.description %}
-        <meta name="description" content="{{ page.meta.description|e('html') }}">
-    {% endif %}
-
-    {% include 'og' with { og: page.meta.og } %}
-
-    <link rel="stylesheet" href="{{ site.url }}/assets/css/site.css">
-    {% block styles %}{% endblock %}
-
-    {% for size in site.apple_touch_icon_sizes %}
-        <link rel="apple-touch-icon" href="{{ site.avatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
-    {% endfor %}
-
-    {% for size in site.favicon_sizes %}
-        <link rel="icon" href="{{ site.avatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
-    {% endfor %}
-</head>

source/_posts/2017-05-20-turning-your-custom-drupal-module-into-a-feature.md

@@ -0,0 +1,36 @@
+---
+title: Turning Your Custom Drupal Module into a Feature
+tags:
+    - drupal
+    - drupal-7
+    - drupal-planet
+    - features
+slug: turning-drupal-module-into-feature
+---
+{% block excerpt %}
+Yesterday I was fixing a bug in an inherited Drupal 7 custom module, and I decided that I was going to add some tests to ensure that the bug was fixed and doesn’t get accidentially re-introduced in the future. The test though required me to have a particular content type and fields which are specific to this site, so weren’t present within the standard installation profile used to run tests.
+
+I decided to convert the custom module into a [Feature][0] so that the content type and it’s fields could be added to it, and therefore present on the testing site once the module is installed.
+
+To do this, I needed to expose the module to the Features API.
+{% endblock %}
+
+{% block content %}
+Yesterday I was fixing a bug in an inherited Drupal 7 custom module, and I decided that I was going to add some tests to ensure that the bug was fixed and doesn’t get accidentially re-introduced in the future. The test though required me to have a particular content type and fields which are specific to this site, so weren’t present within the standard installation profile used to run tests.
+
+I decided to convert the custom module into a [Feature][0] so that the content type and it’s fields could be added to it, and therefore present on the testing site once the module is installed.
+
+To do this, I needed to expose the module to the Features API.
+
+All that’s needed is to add this line to the `mymodule.info` file:
+
+```language-ini
+features[features_api][] = api:2
+```
+
+After clearing the cache, the module is now visible in the Features list - and ready to have the appropriate configuration added to it.
+
+!['The features list showing the custom module'](/assets/images/blog/custom-module-as-a-feature.png)
+{% endblock %}
+
+[0]: https://www.drupal.org/project/features

source/_views/default.twig

@@ -13,8 +13,8 @@
 
         {% include 'og' with { og: page.meta.og } %}
 
-        <link rel="stylesheet" href="{{ site.url }}/assets/css/site.css">
+        <link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
-        {% block styles %}{% endblock %}
+        {% block stylesheets '' %}
 
         {% for size in site.apple_touch_icon_sizes %}
             <link rel="apple-touch-icon" href="{{ site.avatar.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
@@ -62,6 +62,6 @@
             <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
         {% endif %}
 
-        {% block scripts %}{% endblock %}
+        {% block scripts '' %}
     </body>
 </html>

source/_views/post.twig

@@ -11,3 +11,7 @@
     {% include 'post/pager' %}
     {% include 'post/about-author' %}
 {% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/blog-post.css">
+{% endblock %}

source/_views/project.twig

@@ -11,3 +11,7 @@
     {% include 'project/skills' %}
     {% include 'project/company' %}
 {% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/project.css">
+{% endblock %}

source/_views/talk.twig

@@ -41,3 +41,8 @@
         {% include "talks-table" with { events: events, hide_talk: true } %}
     </div>{# .talk-events #}
 {% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/talk.css">
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/talks-table.css">
+{% endblock %}

source/blog.html

@@ -41,3 +41,7 @@ use: [posts]
 {% endblock %}
 
 {% block body_classes 'page--blog page--blog__list' %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/blog.css">
+{% endblock %}

source/experience.twig

@@ -99,38 +99,44 @@ experiences:
           Maintaining and adding new features to the Horse & Country TV website (Drupal 6).
 use: [posts]
 ---
-<h1>Experience</h1>
+{% block content %}
+    <h1>Experience</h1>
 
-{% for experience in page.experiences %}
+    {% for experience in page.experiences %}
-    {% set company = site.companies[experience.company] %}
+        {% set company = site.companies[experience.company] %}
 
-    <div class="experience-item{% if company.logo %} has-logo{% endif %}">
+        <div class="experience-item{% if company.logo %} has-logo{% endif %}">
-        {% if company.logo %}
+            {% if company.logo %}
-            <div class="experience-item-logo">
+                <div class="experience-item-logo">
-                <img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
+                    <img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
-            </div>
-        {% endif %}
-
-        <div class="experience-item-inner">
-            <h2>{{ company.name }}</h2>
-
-            {% if company.url -%}
-                <a class="experience-item-website" href="{{ company.url }}">
-                    {{- company.url -}}
-                </a>
-            {%- endif %}
-
-            <div class="experience-item-role">
-                {{- experience.role }} from {{ experience.start }} to {{ experience.end|default('Present') -}}
-                {%- if experience.location %} ({{ experience.location }}){% endif %}.
-            </div>
-
-            {% if experience.description %}
-                <div class="experience-item-description">
-                    {{ experience.description|markdown }}
                 </div>
             {% endif %}
 
-        </div>{# /.inner #}
+            <div class="experience-item-inner">
-    </div>
+                <h2>{{ company.name }}</h2>
-{% endfor %}
+
+                {% if company.url -%}
+                    <a class="experience-item-website" href="{{ company.url }}">
+                        {{- company.url -}}
+                    </a>
+                {%- endif %}
+
+                <div class="experience-item-role">
+                    {{- experience.role }} from {{ experience.start }} to {{ experience.end|default('Present') -}}
+                    {%- if experience.location %} ({{ experience.location }}){% endif %}.
+                </div>
+
+                {% if experience.description %}
+                    <div class="experience-item-description">
+                        {{ experience.description|markdown }}
+                    </div>
+                {% endif %}
+
+            </div>{# /.inner #}
+        </div>
+    {% endfor %}
+{% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/experience.css">
+{% endblock %}

source/index.md

@@ -18,11 +18,12 @@ tools:
     - { title: Ansible, website: http://www.ansible.com }
 use: [posts, testimonials]
 ---
+{% block content %}
 # About Me
 
 <img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="me img-circle">
 
-My name is Oliver Davies (aka [opdavies][1]) - a Web Developer and System Administrator based in Wales, UK. I’m a PHP specialist, a {{ site.work.role }} at [{{ site.companies[site.work.company].name }}][20], former Developer at the [{{ site.companies.drupal_association.name }}][39], part-time freelancer, open source contributor, mentor and conference speaker.
+My name is Oliver Davies (aka [opdavies][1]) - a Web Developer and System Administrator based in Wales, UK. I’m a PHP specialist, a {{ site.work.role }} at [{{ site.companies[site.work.company].name }}][20], former Developer at the [{{ site.companies.drupal_association.name }}][39], part-time freelancer, open source contributor and advocate, mentor and conference speaker.
 
 I’m a provisional member of the [Drupal Security team][14] and a webmaster and documentation maintainer for Drupal.org. [I speak at various user groups and conferences][40], and co-organise the [Drupal Bristol user group][15], [PHPSW][17] and [DrupalCamp Bristol][18].
 
@@ -47,6 +48,11 @@ I’m a provisional member of the [Drupal Security team][14] and a webmaster and
 - [Stack Overflow][37]
 - [Disqus][38]
 - IRC (freenode) - {{ site.irc.name }}
+{% endblock %}
+
+{% block stylesheets %}
+<link rel="stylesheet" href="{{ site.url }}/assets/css/about.css">
+{% endblock %}
 
 [1]: https://www.google.com/#q=opdavies
 [2]: https://www.drupal.org

source/talks.twig

@@ -5,40 +5,46 @@ meta:
     description: 'Information about previous and upcoming talks that Oliver has presented at conferences and user groups'
 use: [talks, posts]
 ---
-<h1>Talks</h1>
+{% block content %}
+    <h1>Talks</h1>
 
-<p>I regularly speak at conferences and user groups about a range of subjects including Drupal, Sculpin and Git. If you would like to me to speak at your group or conference, please <a href="/contact/">get in touch</a>.</p>
+    <p>I regularly speak at conferences and user groups about a range of subjects including Drupal, Sculpin and Git. If you would like to me to speak at your group or conference, please <a href="/contact/">get in touch</a>.</p>
 
-<p>There is also information about events that I’ve attended and spoken at on my <a href="{{ site.lanyrd.url }}">Lanyrd</a> and <a href="{{ site.joindin.url }}">Joind.in</a> profiles.</p>
+    <p>There is also information about events that I’ve attended and spoken at on my <a href="{{ site.lanyrd.url }}">Lanyrd</a> and <a href="{{ site.joindin.url }}">Joind.in</a> profiles.</p>
 
-{% set upcoming_events = [] %}
+    {% set upcoming_events = [] %}
-{% set past_events = [] %}
+    {% set past_events = [] %}
 
-{% for talk in data.talks %}
+    {% for talk in data.talks %}
-    {% for event in talk.events if event.date >= 'today'|date('Y-m-d') %}
+        {% for event in talk.events if event.date >= 'today'|date('Y-m-d') %}
-        {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
+            {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
-        {% set upcoming_events = upcoming_events|merge([event]) %}
+            {% set upcoming_events = upcoming_events|merge([event]) %}
+        {% endfor %}
+
+        {% for event in talk.events if event.date < 'today'|date('Y-m-d') %}
+            {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
+            {% set past_events = past_events|merge([event]) %}
+        {% endfor %}
     {% endfor %}
 
-    {% for event in talk.events if event.date < 'today'|date('Y-m-d') %}
+    {% if upcoming_events is not empty %}
-        {% set event = event|merge({ talk: talk })|merge(site.events[event.id]) %}
+        <h2>Upcoming Talks</h2>
-        {% set past_events = past_events|merge([event]) %}
-    {% endfor %}
-{% endfor %}
 
-{% if upcoming_events is not empty %}
+        {% include "talks-table" with {
-    <h2>Upcoming Talks</h2>
+            events: upcoming_events|sortbyfield('date'),
+            hide_feedback: true,
+        } %}
+    {% endif %}
+
+    <h2>Last 5 Talks</h2>
 
     {% include "talks-table" with {
-        events: upcoming_events|sortbyfield('date'),
+        events: past_events|sortbyfield('date')|reverse[:5]
-        hide_feedback: true,
     } %}
-{% endif %}
 
-<h2>Last 5 Talks</h2>
+    <p>You can view more talks in the <a href="/talks/archive">talks archive</a>.</p>
+{% endblock %}
 
-{% include "talks-table" with {
+{% block stylesheets %}
-    events: past_events|sortbyfield('date')|reverse[:5]
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/talks-table.css">
-} %}
+{% endblock %}
-
-<p>You can view more talks in the <a href="/talks/archive">talks archive</a>.</p>

source/testimonials.twig

@@ -89,3 +89,7 @@ use: [posts]
 {% endblock %}
 
 {% block body_classes 'page--testimonials' %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ site.url }}/assets/css/testimonials.css">
+{% endblock %}