diff --git a/assets/app.css b/assets/app.css
index 61c9bae..63f1884 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -250,3 +250,85 @@ progress[value]::-webkit-progress-value {
text-align: right;
display: block;
}
+
+.pagination {
+ display: flex;
+ flex-direction: column-reverse;
+ gap: 20px;
+ margin-top: 64px;
+}
+
+@media (min-width: 480px) {
+ .pagination {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.pagination .button {
+ display: flex;
+ padding: 20px;
+ border-radius: var(--rounded-sm);
+ border: 1px solid var(--neutral-gray-6);
+ background-color: var(--neutral-gray-5);
+ color: var(--neutral-gray-11);
+ text-align: center;
+ text-decoration: none;
+}
+
+.pagination .button:nth-child(1),
+.pagination .button:nth-child(2) {
+ flex-direction: column;
+ grid-template-columns: 1fr;
+ gap: 10px;
+}
+
+.pagination .button:nth-child(1) {
+ text-align: start;
+}
+
+.pagination .button:nth-child(2) {
+ flex-direction: column-reverse;
+ place-items: end;
+ text-align: end;
+}
+
+@media (min-width: 480px) {
+ .pagination .button:nth-child(1),
+ .pagination .button:nth-child(2) {
+ display: grid;
+ gap: 0;
+ padding: 10px;
+ place-items: center;
+ text-align: center;
+ }
+
+ .pagination .button:nth-child(1) {
+ grid-template-columns: fit-content(100%) 1fr;
+ }
+
+ .pagination .button:nth-child(2) {
+ grid-template-columns: 1fr fit-content(100%);
+ }
+}
+
+.pagination .button:hover {
+ background-color: var(--neutral-gray-6);
+}
+
+.pagination .category,
+.pagination .title {
+ margin: 0;
+}
+
+.pagination .category {
+ color: var(--violet-10);
+ font-size: 13px;
+ font-weight: 500;
+}
+
+.pagination .title {
+ color: var(--neutral-gray-11);
+ font-size: 14px;
+ font-weight: 600;
+}
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
index 087e397..4d9154e 100644
--- a/src/bootstrap.ts
+++ b/src/bootstrap.ts
@@ -80,6 +80,24 @@ edge.global('getSections', function (collection: Collection, entry: CollectionEn
.all()
})
+edge.global('getPagination', function (collection: Collection, entry: CollectionEntry) {
+ const entries = collection.all()
+ const currentIndex = entries.findIndex((item) => item.permalink === entry.permalink)
+
+ return {
+ previous: {
+ category: entries[currentIndex - 1]?.meta.category,
+ title: entries[currentIndex - 1]?.title,
+ url: entries[currentIndex - 1]?.permalink,
+ },
+ next: {
+ category: entries[currentIndex + 1]?.meta.category,
+ title: entries[currentIndex + 1]?.title,
+ url: entries[currentIndex + 1]?.permalink,
+ },
+ }
+})
+
/**
* Configuring rendering pipeline
*/
diff --git a/templates/docs.edge b/templates/docs.edge
index b7430c5..8497438 100644
--- a/templates/docs.edge
+++ b/templates/docs.edge
@@ -27,6 +27,7 @@
})
@!component('docs::doc_errors', { messages: file.messages })
@!component('dimer_contents', { nodes: file.ast.children, pipeline })~
+ @!component('partials/pagination', getPagination(collection, entry))
@end
@if(file.toc)
diff --git a/templates/partials/arrow.edge b/templates/partials/arrow.edge
new file mode 100644
index 0000000..d3a48ca
--- /dev/null
+++ b/templates/partials/arrow.edge
@@ -0,0 +1,7 @@
+
diff --git a/templates/partials/pagination.edge b/templates/partials/pagination.edge
new file mode 100644
index 0000000..2f37a29
--- /dev/null
+++ b/templates/partials/pagination.edge
@@ -0,0 +1,25 @@
+
+