Add sublinks, answer, images, and proxy images for now on

source/src/pages/web.astro

@@ -4,22 +4,43 @@ import Search from "@layouts/Search.astro";
 
 // Configuration
 import {
-  DEFAULT_API
+  DEFAULT_API,
+  DEFAULT_IMAGE_PROXY
 } from "@utils/GetConfig"
 
 // Components
+import Answer from "@components/search/Answer.astro";
 import RelatedSearches from "@components/search/RelatedSearches.astro";
 import WebLink from "@components/search/WebLink.astro";
 import WebLinkSkeleton from "@components/search/WebLinkSkeleton.astro";
+import { undefined } from "astro:schema";
 
 // Fetch
 const QueryString = Astro.url.href.split("web?=").pop() // Get user's search query from URL
 const QueryText = `${QueryString}`.replaceAll("%20", " ") // Replace "%20" with a space
 const Query = await fetch(DEFAULT_API + "/api/v1/web?s=" + QueryString).then((response) => response.json()); // Response
+
+// Toggle Functions
+if (Query.answer[0] === undefined) {
+  var ShowAnswer = false
+} else {
+  var ShowAnswer = true
+}
+if (Query.related[0] === undefined) {
+  var ShowRelated = false
+} else {
+  var ShowRelated = true
+}
+console.log(ShowRelated + '' + Query.related[0])
 ---
 
 <Search QueryText={QueryText} Type="Web">
     <slot slot="search">
+        <div class="search-web-with-images">
+          {Query.image.map((img) => (
+              <a href={DEFAULT_IMAGE_PROXY + '/' + img.source[0].url} target="_blank"><img style="opacity: 0; transition: 1s opacity;" src={DEFAULT_IMAGE_PROXY + '/' + img.source[0].url} onload="this.style.opacity = '1'"/></a>
+          ))}
+        </div>
         {Query.web.map((query) => (
             <WebLink
                 server:defer
@@ -28,24 +49,46 @@ const Query = await fetch(DEFAULT_API + "/api/v1/web?s=" + QueryString).then((re
                 Link={query.url}
             >
                 <WebLinkSkeleton slot="fallback"/>
+                <slot slot="sublinks">
+                  {query.sublink.map((link) => 
+                    <a href={link.url}>
+                      <p style="font-size: 18px; text-decoration: none;">{link.title}</p>
+                      <p style="font-size: 14px;">{link.url}</p>
+                    </a>
+                  )}
+                </slot>
             </WebLink>
         ))}
     </slot>
     <slot slot="rich-panel">
-        <RelatedSearches server:defer>
+        {ShowAnswer ?
-            {Query.related.map((related) => (
+          <Answer
-                <a href={'/web?=' + related}>{related}</a>
+            Image={Query.answer[0].thumb}
-            ))}
+            Link={Query.answer[0].url}
-            <slot slot="fallback">
+            Title={Query.answer[0].title}
-                <div class="fade-up small-grid-related">
+            Description={Query.answer[0].description[0].value}
-                    <a class="related-sk"></a>
+          ></Answer>
-                    <a class="related-sk"></a>
+          :
-                    <a class="related-sk"></a>
+          null
-                    <a class="related-sk"></a>
+        }
-                    <a class="related-sk"></a>
+        {ShowRelated ?
-                </div>
+          <RelatedSearches server:defer>
-            </slot>
+              {Query.related.map((related) => (
-        </RelatedSearches>
+                  <a href={'/web?=' + related}>{related}</a>
+              ))}
+              <slot slot="fallback">
+                  <div class="fade-up small-grid-related">
+                      <a class="related-sk"></a>
+                      <a class="related-sk"></a>
+                      <a class="related-sk"></a>
+                      <a class="related-sk"></a>
+                      <a class="related-sk"></a>
+                  </div>
+              </slot>
+          </RelatedSearches>
+          :
+          null
+        }
         <a style="font-size: 12px;" href={DEFAULT_API + "/api/v1/web?s=" + QueryString} target="_blank">JSON Response</a>
     </slot>
 </Search>
@@ -83,4 +126,18 @@ const Query = await fetch(DEFAULT_API + "/api/v1/web?s=" + QueryString).then((re
     margin-bottom: 6px;
     margin-right: 6px;
 }
+
+.search-web-with-images {
+  display: grid;
+  gap: 12px 0px;
+  grid-template-columns: repeat( 4, minmax(100px, 1fr));
+  margin-bottom: 12px;
+  img {
+    width: 182px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 6px;
+    border: 1px rgb(170,170,170) solid;
+  }
+}
 </style>