feat(): breadcrumbs (#82)

bart-krakowski · jedrzejchalubek · commit 5ea85b07991d · 2019-10-02T10:23:36.000+02:00
diff --git a/src/_includes/components/breadcrumbs.html b/src/_includes/components/breadcrumbs.html
@@ -0,0 +1,25 @@
+<ul class="breadcrumbs flex gutter list list--unstyle">
+  {% assign breadcrumbs = page.url | remove:'/index.html' | split: '/' %}
+
+  <li>
+    <a class="breadcrumbs__link" href="{{ site.baseurl }}/">Home</a>
+  </li>
+
+  {% for crumb in breadcrumbs offset: 1 %}
+    <li>/</li>
+
+    {% if forloop.last %}
+      <li>
+        {{ page.title }}
+      </li>
+    {% else %}
+      <li>
+        {% assign crumb_limit = forloop.index | plus: 1 %}
+
+        <a class="breadcrumbs__link" href="{{ site.baseurl }}{% for crumb in breadcrumbs limit: crumb_limit %}{{ crumb | remove: '.html' | append: '/' }}{% endfor %}">
+          {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}
+        </a>
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
diff --git a/src/_layouts/page.html b/src/_layouts/page.html
@@ -3,7 +3,7 @@
 ---
 
 <article class="page">
-  {% include breadcrumb.html %}
+  {% include components/breadcrumbs.html %}
 
   <div class="page__body">
     {%- if page.title -%}
diff --git a/src/_sass/components/_breadcrumbs.scss b/src/_sass/components/_breadcrumbs.scss
@@ -0,0 +1,13 @@
+.breadcrumbs {
+  font-size: 14px;
+  color: color(gray);
+
+  &__link {
+    color: color(gray-dark);
+
+    &:hover {
+      color: color(primary);
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
@@ -52,6 +52,7 @@
 @import "components/list-steps";
 @import "components/input";
 @import "components/field";
+@import "components/breadcrumbs";
 @import "components/highlight";
 
 // Pages
