Fix duplication on project pages

Issue #26

app/config/sculpin_kernel.yml

@@ -4,7 +4,7 @@ sculpin_content_types:
         taxonomies:
             - tags
     projects:
-        permalink: projects/:slug_title/
+        permalink: projects/:filename/
         taxonomies:
             - skills
             - tags

assets/sass/pages/_portfolio.sass

@@ -1,21 +0,0 @@
-.project--skills
-    ul
-        list-style: none
-        margin-left: 0
-        padding-left: 0
-
-    li
-        display: inline-block
-        margin-right: 5px
-
-    img
-        max-height: 30px
-
-.project--company__has-logo
-    a:link,
-    a:hover
-        border-bottom: 0
-        display: block
-
-    img
-        max-height: 50px

assets/sass/pages/_projects.sass

@@ -0,0 +1,13 @@
+.project
+    &--company__has-logo
+        a:link,
+        a:hover
+            border-bottom: 0
+            display: block
+
+        img
+            max-height: 50px
+
+    &__website
+        @extend .btn
+        @extend .btn-primary

source/_includes/project-company.html.twig

@@ -1,25 +0,0 @@
-{% if page.company %}
-    {% set company = site.companies[page.company] %}
-
-    <div class="project--company{% if company.logo %} project--company__has-logo{% endif %}">
-        {% if page.freelance %}
-            <h2>Built for</h2>
-        {% else %}
-            <h2>Built whilst at</h2>
-        {% endif %}
-
-        {% if company.logo %}
-            {% set name = '<img src="/assets/images/experience/' ~ company.logo ~ '" alt="' ~ company.title ~ '">' %}
-        {% else %}
-            {% set name = company.title %}
-        {% endif %}
-
-        {% if company.website %}
-            <a href="{{ company.website }}" title="{{ company.title }}">
-                {{ name|raw }}
-            </a>
-        {% else %}
-            {{ name|raw }}
-        {% endif %}
-    </div>
-{% endif %}

source/_includes/project-skills.html.twig

@@ -1,14 +0,0 @@
-{% if page.skills %}
-    <div class="project--skills">
-        <h2>Skills</h2>
-
-        <ul>
-            {% for item in page.skills %}
-                {% set skill = site.skills[item] %}
-                <li>
-                    <img src="/assets/images/skills/{{ skill.image }}" alt="{{ skill.title }}" title="{{ skill.title }}">
-                </li>
-            {% endfor %}
-        </ul>
-    </div>
-{% endif %}

source/_includes/projects/company.html.twig

@@ -0,0 +1,21 @@
+{% if page.company %}
+    {% set company = site.companies[page.company] %}
+
+    <div class="project__company project__company--{{ company.logo ? 'has-logo' : 'no-logo' }}">
+        <h2>Built {{ page.freelance ? 'for' : 'whilst at' }}</h2>
+
+        {% if company.logo %}
+            {% set name = '<img src="/assets/images/experience/' ~ company.logo ~ '" alt="' ~ company.name ~ '">' %}
+        {% else %}
+            {% set name = company.name %}
+        {% endif %}
+
+        {% if company.website %}
+            <a href="{{ company.website }}" title="{{ company.name }}">
+                {{ name|raw }}
+            </a>
+        {% else %}
+            {{ name|raw }}
+        {% endif %}
+    </div>
+{% endif %}

source/_includes/projects/skills.html.twig

@@ -0,0 +1,11 @@
+{% if page.skills %}
+    <div class="project--skills">
+        <h2>Skills</h2>
+
+        <ul>
+            {% for item in page.skills|sort %}
+                <li>{{ site.skills[item].title }}</li>
+            {% endfor %}
+        </ul>
+    </div>
+{% endif %}

source/_layouts/project.html.twig

@@ -1,30 +1,18 @@
 {% extends 'page' %}
 
 {% block content_wrapper %}
-    <main class="col-md-9">
+    {% if page.image -%}
-        {{ page.blocks.content_top|raw }}
+        <img src="/assets/images/projects/{{ page.image.name ?: page.image }}" alt="{{ page.image.alt }}">
-        {{ page.blocks.content|raw }}
+    {%- endif %}
-        {{ page.blocks.content_bottom|raw }}
-    </main>
-{% endblock %}
 
-{% block content_top %}
+    {% block content %}{% endblock %}
-    {{ parent() }}
 
-    {% if page.image %}
-        <div class="project--image">
-            <img class="img-responsive" src="/assets/images/projects/{{ page.image }}" alt="The {{ page.title }} website.">
-        </div>
-    {% endif %}
-{% endblock %}
-
-{% block content_bottom %}
     {% if page.website %}
-        <div class="project--website">
+        <a class="project__website" href="{{ page.website }}">
-            <a href="{{ page.website }}" class="btn btn-primary">View the website</a>
+            View the website
-        </div>
+        </a>
     {% endif %}
 
-    {{ include('project-skills') }}
+    {{ include('projects/skills') }}
-    {{ include('project-company') }}
+    {{ include('projects/company') }}
 {% endblock %}

source/_projects/2015-roadcc.md

@@ -4,7 +4,9 @@ website: http://road.cc
 tags:
     - drupal
     - drupal-7
-image: roadcc.png
+image:
+    name: roadcc.png
+    alt: The new road.cc website
 company: microserve
 role: Lead Developer
 skills: [drupal, php, git, less]