From 80e2c41f04b38f5d4d7740522854cebb94912817 Mon Sep 17 00:00:00 2001
From: Kyle Gordy <kyletgordy@gmail.com>
Date: Thu, 5 Dec 2019 10:59:28 -0500
Subject: [PATCH] Make scroll to posts id a global site variable, apply id to
 featured hero / pagination

---
 _config.yml                             | 1 +
 _includes/featured-post-hero.html       | 2 +-
 _includes/pagination.html               | 8 ++++----
 assets/_sass/component/_pagination.scss | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/_config.yml b/_config.yml
index 106da7c..42b1cbe 100644
--- a/_config.yml
+++ b/_config.yml
@@ -32,6 +32,7 @@ permalink: "/blog/:year/:title:output_ext"
 date_format: "%B %-d, %Y"
 paginate: 12
 paginate_path: "/blog/page:num/"
+post-id: "#posts"
 
 # Build settings
 plugins:
diff --git a/_includes/featured-post-hero.html b/_includes/featured-post-hero.html
index f09234d..a97f173 100644
--- a/_includes/featured-post-hero.html
+++ b/_includes/featured-post-hero.html
@@ -69,7 +69,7 @@
 
                 <!-- All posts button (if not on a blog page already) -->
                 {% unless page.url contains "blog" %}
-                <a href="{% link blog/index.html %}#all-posts" class="mt-4 btn btn-primary btn-icon-right">
+                <a href="{% link blog/index.html %}{{ site.post-id }}" class="mt-4 btn btn-primary btn-icon-right">
                     All Posts
                     <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
                 </a>
diff --git a/_includes/pagination.html b/_includes/pagination.html
index 5d32203..342027e 100644
--- a/_includes/pagination.html
+++ b/_includes/pagination.html
@@ -5,7 +5,7 @@
         <!-- Previous arrow -->
         {% if paginator.previous_page %}
         <li class="pagination__item">
-            <a class="older-posts" href="{{ paginator.previous_page_path | relative_url }}">
+            <a class="pagination__link" href="{{ paginator.previous_page_path | relative_url }}{{ site.post-id }}">
                <span class="visually-hidden">Previous Page</span>
                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-left' | relative_url }}"></use></svg>
             </a>
@@ -24,13 +24,13 @@
 
             <!-- Page 1 -->
             {% if page == 1 %}
-            <a class="pagination__link {{ class }}"  href="{{ paginator.previous_page_path | relative_url }}" {{ aria }}>
+            <a class="pagination__link {{ class }}"  href="{{ paginator.previous_page_path | relative_url }}{{ site.post-id }}" {{ aria }}>
                 <span class="visually-hidden">Page </span>{{ page }}
             </a>
 
             <!-- Page 2, 3, 4, etc -->
             {% else %}
-            <a class="pagination__link {{ class }}" href="{{ site.paginate_path | relative_url | replace: ':num', page }}" {{ aria }}>
+            <a class="pagination__link {{ class }}" href="{{ site.paginate_path | relative_url | replace: ':num', page }}{{ site.post-id }}" {{ aria }}>
                 <span class="visually-hidden">Page </span>{{ page }}
             </a>
 
@@ -41,7 +41,7 @@
         <!-- Next arrow -->
         {% if paginator.next_page %}
         <li class="pagination__item">
-            <a class="older-posts" href="{{ paginator.next_page_path | relative_url }}">
+            <a class="pagination__link" href="{{ paginator.next_page_path | relative_url }}{{ site.post-id }}">
                <span class="visually-hidden">Next Page</span>
                <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#arrow-right' | relative_url }}"></use></svg>
             </a>
diff --git a/assets/_sass/component/_pagination.scss b/assets/_sass/component/_pagination.scss
index 57005fe..2b19ccb 100644
--- a/assets/_sass/component/_pagination.scss
+++ b/assets/_sass/component/_pagination.scss
@@ -10,7 +10,7 @@
     margin: rem-calc(0 5px 5px 0);
 }
 
-.pagination a {
+.pagination__link {
     display: inline-block;
     padding: rem-calc(4px);
     min-width: rem-calc(36px);