Merge pull request #2 from neon-mmd/pagination-support-search-page

add previous and next button to navigate to different pages

public/static/pagination.js

@@ -0,0 +1,26 @@
+function navigate_forward() {
+    const url = new URL(window.location)
+    const searchParams = url.searchParams
+
+    let q = searchParams.get('q')
+    let page = searchParams.get('page')
+
+    if (page === null) {
+        page = 2
+        window.location = `${url.origin}${url.pathname}?q=${q}&page=${page}`
+    } else {
+        window.location = `${url.origin}${url.pathname}?q=${q}&page=${++page}`
+    }
+}
+
+function navigate_backward() {
+    const url = new URL(window.location)
+    const searchParams = url.searchParams
+
+    let q = searchParams.get('q')
+    let page = searchParams.get('page')
+
+    if (page !== null && page > 1) {
+        window.location = `${url.origin}${url.pathname}?q=${q}&page=${--page}`
+    }
+}

public/static/themes/simple.css

@@ -240,3 +240,23 @@ footer {
 .error_content p a:hover {
   color: var(--5);
 }
+
+.page_navigation {
+  padding: 0 0 2rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.page_navigation button {
+  background: var(--bg);
+  color: var(--fg);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  outline: none;
+  border: none;
+}
+
+.page_navigation button:active {
+  filter: brightness(1.2);
+}

public/templates/search.html

@@ -15,6 +15,11 @@
     </div>
     {{/each}}
   </div>
+  <div class="page_navigation">
+    <button type="button" onclick="navigate_backward()">&#8592; previous</button>
+    <button type="button" onclick="navigate_forward()">next &#8594;</button>
+  </div>
 </main>
 <script src="static/index.js"></script>
+<script src="static/pagination.js"></script>
 {{>footer}}