Refactor Blog Includes

_includes/blog/index.html

@@ -1,76 +1,9 @@
 <div class="card-group mt-2">
 
   {% for post in paginator.posts %}
-
-    {%- comment -%} Default Styles {%- endcomment -%}
-    {%- assign card_style = '' -%}
-    {%- assign text_style = 'text-dark' -%}
-    {%- assign badge_style = 'badge-dark' -%}
-
-    {%- comment -%} Update Styles {%- endcomment -%}
-    {%- if post.style == 'fill' -%}
-      {%- assign card_style = post.color | prepend: 'bg-' -%}
-      {%- if post.color != 'light' -%}
-        {%- assign text_style = 'text-white' -%}
-        {%- assign badge_style = 'badge-light text-' -%}
-        {%- assign badge_style = badge_style | append: post.color -%}
-      {%- endif -%}
-    {%- else -%}
-      {%- assign card_style = post.color | prepend: 'border border-' -%}
-      {%- if post.color -%}
-        {%- assign badge_style =  post.color | prepend: 'badge-' -%}
-      {%- endif -%}
-    {%- endif -%}
-
-    {%- comment -%} Determine Post URL {%- endcomment -%}
-    {%- if post.external_url -%}
-      {%- assign post_url = post.external_url -%}
-    {%- else -%}
-      {%- assign post_url = post.url | relative_url -%}
-    {%- endif -%}
-
-    <div class="col-lg-6 my-3 wow animated fadeIn" data-wow-delay=".15s">
-      <a href="{{ post_url }}" class="post card {{ card_style }}">
-        <div class="card-body {{ text_style }}">
-          <h3 class="card-title">{{ post.title }}</h3>
-          <p class="card-text">
-            {% for tag in post.tags %}
-              <span class="badge {{ badge_style }}">{{ tag }}</span>
-            {% endfor %}
-          </p>
-          <p class="card-text">
-            {%- if post.description -%}
-              {{ post.description }}
-            {%- else -%}
-              {{ post.content | truncatewords: 25, "<small><i>  read more...</i></small>" }}
-            {%- endif -%}
-          </p>
-        </div>
-        <div class="card-footer {{ text_style }}">
-          {{ post.date | date_to_long_string }}
-        </div>
-      </a>
-    </div>
-
+    {% include blog/post-card.html %}
   {% endfor %}
 
-  <!-- Pagination links -->
-	<div class="mx-auto my-3">
-
-		{%- if paginator.previous_page -%}
-			<a href="{{ paginator.previous_page_path | relative_url }}" class="badge badge-primary"><</a>
-		{%- else -%}
-			<span class="badge badge-light text-muted"><</span>
-		{%- endif -%}
-
-		<small class="mx-2"> Page <b>{{ paginator.page }}</b> of {{ paginator.total_pages }} </small>
-
-		{%- if paginator.next_page -%}
-			<a href="{{ paginator.next_page_path | relative_url }}" class="badge badge-primary">></a>
-		{%- else -%}
-			<span class="badge badge-light text-muted">></span>
-		{%- endif -%}
-
-  </div>
+	{% include blog/pagination.html %}
 
 </div>

_includes/blog/pagination.html

@@ -0,0 +1,17 @@
+<div class="mx-auto my-3">
+
+  {%- if paginator.previous_page -%}
+    <a href="{{ paginator.previous_page_path | relative_url }}" class="badge badge-primary"><</a>
+  {%- else -%}
+    <span class="badge badge-light text-muted"><</span>
+  {%- endif -%}
+
+  <small class="mx-2"> Page <b>{{ paginator.page }}</b> of {{ paginator.total_pages }} </small>
+
+  {%- if paginator.next_page -%}
+    <a href="{{ paginator.next_page_path | relative_url }}" class="badge badge-primary">></a>
+  {%- else -%}
+    <span class="badge badge-light text-muted">></span>
+  {%- endif -%}
+
+</div>

_includes/blog/post-card.html

@@ -0,0 +1,49 @@
+{%- comment -%} Default Styles {%- endcomment -%}
+{%- assign card_style  = '' -%}
+{%- assign text_style  = 'text-dark' -%}
+{%- assign badge_style = 'badge-dark' -%}
+
+{%- comment -%} Update Styles {%- endcomment -%}
+{%- if post.style == 'fill' -%}
+  {%- assign card_style = post.color | prepend: 'bg-' -%}
+  {%- if post.color != 'light' -%}
+    {%- assign text_style  = 'text-white' -%}
+    {%- assign badge_style = 'badge-light text-' -%}
+    {%- assign badge_style = badge_style | append: post.color -%}
+  {%- endif -%}
+{%- else -%}
+  {%- assign card_style = post.color | prepend: 'border border-' -%}
+  {%- if post.color -%}
+    {%- assign badge_style =  post.color | prepend: 'badge-' -%}
+  {%- endif -%}
+{%- endif -%}
+
+{%- comment -%} Determine Post URL {%- endcomment -%}
+{%- if post.external_url -%}
+  {%- assign post_url = post.external_url -%}
+{%- else -%}
+  {%- assign post_url = post.url | relative_url -%}
+{%- endif -%}
+
+<div class="col-lg-6 my-3 wow animated fadeIn" data-wow-delay=".15s">
+  <a href="{{ post_url }}" class="post card {{ card_style }}">
+    <div class="card-body {{ text_style }}">
+      <h3 class="card-title">{{ post.title }}</h3>
+      <p class="card-text">
+        {% for tag in post.tags %}
+        <span class="badge {{ badge_style }}">{{ tag }}</span>
+        {% endfor %}
+      </p>
+      <p class="card-text">
+        {%- if post.description -%}
+        {{ post.description }}
+        {%- else -%}
+        {{ post.content | truncatewords: 25, "<small><i>  read more...</i></small>" }}
+        {%- endif -%}
+      </p>
+    </div>
+    <div class="card-footer {{ text_style }}">
+      {{ post.date | date_to_long_string }}
+    </div>
+  </a>
+</div>

_includes/projects/index.html

@@ -36,7 +36,7 @@
   {% for project in site.projects %}
 
     {%- assign project_type  = "local" -%}
-    {%- assign project_id    =  project.name | slugify -%}
+    {%- assign project_id    = project.name | slugify -%}
     {%- assign project_img   = project.image -%}
     {%- assign project_name  = project.name -%}
     {%- assign project_desc  = project.description -%}