From 1112eae03d3aaf69d51d9bfbf567dcc1a56349b1 Mon Sep 17 00:00:00 2001
From: Anna <a.rcottrill521@gmail.com>
Date: Mon, 26 Aug 2024 09:40:50 -0400
Subject: [PATCH] Create next and previous buttons below the articles (#629)

* Create next and previous buttons below the articles.

* Create next and previous buttons below the articles.

* Update formatting

Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro>

* Update style and add canonical meta tags for prev and next

---------

Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro>
Co-authored-by: Emi <2206700+coppolaemilio@users.noreply.github.com>
---
 _layouts/article.html | 56 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/_layouts/article.html b/_layouts/article.html
index 1ff0429b41..3400c7568d 100644
--- a/_layouts/article.html
+++ b/_layouts/article.html
@@ -154,10 +154,50 @@ layout: default
 			max-width: 100%;
 		}
 	}
+
+	/* Blog previous and next links */
+	.blog-navigation {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		padding-top: 30px;
+	}
+
+	.blog-navigation .next {
+		text-align: right;
+	}
+
+	@media (max-width: 900px) {
+		.blog-navigation {
+			grid-template-columns: 1fr;
+			gap: 20px;
+			border-top: 1px solid var(--code-background-color);
+		}
+		.blog-navigation .next {
+			text-align: left;
+		}
+	}
+
+	.blog-navigation span {
+		opacity: 0.6;
+		font-weight: 700;
+		margin-bottom: 5px;
+		display: block;
+	}
+
+	.blog-navigation a {
+		display: inline-block;
+		text-decoration: none;
+		color: inherit;
+		opacity: 0.6;
+		transition: opacity 0.2s;
+	}
+
+	.blog-navigation a:hover {
+		opacity: 1;
+	}
 </style>
 
 <link rel="stylesheet" href="/assets/css/highlight.obsidian.min.css">
-
 <div class="container">
 	<article class="padded">
 		<div class="content article-container">
@@ -208,6 +248,20 @@ layout: default
 			</div>
 		</div>
 	</article>
+	<div class="blog-navigation">
+		{% if page.previous.url %}
+		<div class="previous">
+			<span>Previous</span>
+			<a rel="prev" href="{{page.previous.url}}">{{page.previous.title}}</a>
+		</div>
+		{% endif %}
+		{% if page.next.url %}
+		<div class="next">
+			<span>Next</span>
+			<a rel="next" href="{{page.next.url}}">{{page.next.title}}</a>
+		</div>
+		{% endif %}
+	</div>
 </div>
 
 <link rel="stylesheet" href="/assets/css/anchor-link.css?1">