dwv21w43b

public/assets/css/search.css

@@ -103,6 +103,35 @@ header h1 {
     word-break: break-word;
 }
 
+/* -- Results > Types -- */
+
+.card.error {
+    gap: unset;
+}
+
+.card.error p > a {
+    background-color: rgba(var(--palette-contrast),.1);
+}
+
+.resultsFooter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.resultsFooter svg {
+    width: 41px;
+    height: 40px;
+}
+
+.resultsFooter svg polygon {
+    fill: none;
+    stroke: var(--swatch-contrast);
+    stroke-width: 1px;
+}
+
+/* ---- */
+
 .button {
     padding: var(--padding);
     text-align: center;
@@ -136,6 +165,13 @@ header h1 {
         color: var(--swatch-contrast);
         cursor: pointer;
     }
+
+    /* ---- */
+
+    .resultsFooter svg:hover polygon {
+        fill: var(--swatch-contrast);
+        cursor: pointer;
+    }
 }
 
 @media (pointer: fine) {

src/search/Search.php

@@ -7,22 +7,38 @@
 		public function __construct() {
 			$this->query = $query;
 
-			switch($_SERVER["HTTP_CONTENT_TYPE"]) {
+			$mime_type = $_SERVER["HTTP_CONTENT_TYPE"] ? $_SERVER["HTTP_CONTENT_TYPE"] : $_GET["f"];
+			switch($mime_type) {
+				case "html":
 				case "text/html": 
 					$this->get_html(); 
 					break;
 
 				default:
+				case "json":
 				case "application/json":
 					$this->get_json();
 					break;
 			}
 		}
 
+		private function get_html_template($name) {
+			$path = dirname(__FILE__,1)."/templates/${name}.html";
+			if(!is_file($path)) {
+				return $this->get_html_template("card_error_display");
+			}
+			$html = Import::file($path);
+			return $html;
+		}
+
 		private function get_html() {
-			header("Content-Type: text/html");
+			$results = [
-			$template = Import::file("templates/default.html");
+				$this->get_html_template("card_default"),
-			echo $template;
+				$this->get_html_template("defaults"),
+				$this->get_html_template("card_default"),
+				$this->get_html_template("result_about")
+			];
+			echo implode("",$results);
 		}
 
 		private function get_json() {

src/search/templates/card_default.html

@@ -0,0 +1,8 @@
+<div class="card">
+	<div>
+		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 0 1 5.75 0h14.5a.75.75 0 0 1 .75.75v20.5a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h5.25v-4H6A1.5 1.5 0 0 0 4.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 0 1-.6 1.374A3.25 3.25 0 0 1 3 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z" fill="currentColor"/><path d="M7 18.25a.25.25 0 0 1 .25-.25h5a.25.25 0 0 1 .25.25v5.01a.25.25 0 0 1-.397.201l-2.206-1.604a.25.25 0 0 0-.294 0L7.397 23.46a.25.25 0 0 1-.397-.2v-5.01z" fill="currentColor"/></svg>
+		<p>%s</p>
+	</div>
+	<p>%s</p>
+	<p href="%s" class="button">read more</p>
+</div>

src/search/templates/card_error_display.html

@@ -0,0 +1,4 @@
+<div class="card error">
+	<p><strong>There was a problem displaying this result</strong></p>
+	<p>This is a problem on my side, sorry about that</p>
+</div>

src/search/templates/default.html

@@ -4,5 +4,5 @@
 		<p>%s</p>
 	</div>
 	<p>%s</p>
-	<p class="button">read more</p>
+	<p href="%s" class="button">read more</p>
 </div>

src/search/templates/result_about.html

@@ -0,0 +1,5 @@
+<div class="resultsFooter">
+	<svg id="previous"><polygon points="40,10 0,20 40,30"/></svg>
+	<p>showing %s/%s results (query took %s seconds)</p>
+	<svg id="next"><polygon points="0,10 40,20 0,30"/></svg>
+</div>