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

@@ -1,20 +1,25 @@
 {{>header this.style}}
 <main class="results">
-    {{>search_bar}}
-    <div class="results_aggregated">
-        {{#each results}}
-        <div class="result">
-            <h1><a href="{{this.visitingUrl}}">{{{this.title}}}</a></h1>
-            <small>{{this.url}}</small>
-            <p>{{{this.description}}}</p>
-            <div class="upstream_engines">
-                {{#each engine}}
-                <span>{{this}}</span>
-                {{/each}}
-            </div>
-        </div>
+  {{>search_bar}}
+  <div class="results_aggregated">
+    {{#each results}}
+    <div class="result">
+      <h1><a href="{{this.visitingUrl}}">{{{this.title}}}</a></h1>
+      <small>{{this.url}}</small>
+      <p>{{{this.description}}}</p>
+      <div class="upstream_engines">
+        {{#each engine}}
+        <span>{{this}}</span>
         {{/each}}
+      </div>
     </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}}