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

source/src/components/search/Answer.astro

@@ -0,0 +1,50 @@
+---
+// Properties
+const { Image, Link, Title, Description, Table, Sublinks } = Astro.props;
+
+// Configuration
+import {DEFAULT_IMAGE_PROXY} from "@utils/GetConfig"
+
+// Toggle Functions
+if (Image === null) {
+    var UseImage = false
+} else {
+    var UseImage = true
+}
+---
+
+<div class="answer-panel">
+    <h2>{Title}</h2>
+    <a href={Link}>{Link}</a>
+    
+    <p>{UseImage ? <img src={DEFAULT_IMAGE_PROXY + '/' + Image} style="opacity: 0; transition: 1s opacity;" onload="this.style.opacity = '1'" /> : null} {Description}</p>
+    <slot name="table" />
+    <slot name="sublinks" />
+</div>
+
+<style lang="scss">
+.answer-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    background: white;
+    border-radius: 6px;
+    padding: 12px;
+    * {
+        margin: 0px;
+    }
+    img {
+        border-radius: 6px;
+        border: 2px rgb(170, 170, 170) solid;
+        float: right;
+        width: 44%;
+        margin: 0px 0px 16px 16px;
+    }
+    a {
+        font-size: 12px;
+    }
+    p {
+        font-size: 16px;
+    }
+}
+</style>

source/src/components/search/WebLink.astro

@@ -3,7 +3,7 @@
 const {
     Title,
     Description,
-    Link
+    Link,
 } = Astro.props
 ---
 
@@ -13,9 +13,12 @@ const {
         <p><u>{Link}</u></p>
     </a>
     <p>{Description}</p>
+    <div class="search-result-web-sublinks">
+        <slot name="sublinks"/>
+    </div>
 </div>
 
-<style lang="scss">
+<style lang="scss" is:global>
 .search-result-web {
     display: flex;
     flex-direction: column;
@@ -25,6 +28,11 @@ const {
     border-radius: 6px;
     padding: 6px 12px;
     box-shadow: 0px 4px 10px 0px #0000000a;
+    transition: 0.3s box-shadow;
+    &:hover {
+        box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.04);
+        transition: 0.3s box-shadow;
+    }
     * {
         margin: 0px;
     }
@@ -43,5 +51,14 @@ const {
             color: rgb(82, 82, 82);
         }
     }
+    .search-result-web-sublinks {
+        display: grid;
+        gap: 6px 12px;
+        grid-template-columns: auto auto;
+        a {
+            font-size: 18px;
+            color: black;
+        }
+    }
 }
 </style>

source/src/layouts/Search.astro

@@ -25,7 +25,7 @@ import SearchMenu from "@components/global/SearchMenu.astro"
 .search-results {
     margin-top: 16px;
     display: grid;
-    grid-template-columns: 70% 30%;
+    grid-template-columns: 64% 34%;
     gap: 24px;
 }
 </style>

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>
-            {Query.related.map((related) => (
-                <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>
+        {ShowAnswer ?
+          <Answer
+            Image={Query.answer[0].thumb}
+            Link={Query.answer[0].url}
+            Title={Query.answer[0].title}
+            Description={Query.answer[0].description[0].value}
+          ></Answer>
+          :
+          null
+        }
+        {ShowRelated ?
+          <RelatedSearches server:defer>
+              {Query.related.map((related) => (
+                  <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>