feat: add pagination to doc (#155)

* feat: add edge global `getPagination` to get pagination inside pages

* feat: add pagination component to docs.edge

* style: update pagination style

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;
+}

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
  */

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)

templates/partials/arrow.edge

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  @if (direction === 'left')
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+  @else
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+  @endif
+</svg>

templates/partials/pagination.edge

@@ -0,0 +1,25 @@
+<hr />
+<div class="pagination">
+  @if (previous.url)
+    <a href="{{ previous.url }}" class="button">
+      @!component('partials/arrow', { direction: 'left' })
+      <div>
+        <p class="category">{{ previous.category }}</p>
+        <p class="title">{{ previous.title }}</p>
+      </div>
+    </a>
+  @else
+    <div></div>
+  @endif
+  @if (next.url)
+    <a href="{{ next.url }}" class="button">
+      <div>
+        <p class="category">{{ next.category }}</p>
+        <p class="title">{{ next.title }}</p>
+      </div>
+      @!component('partials/arrow')
+    </a>
+  @else
+    <div></div>
+  @endif
+</div>