update

package.json

@@ -25,17 +25,17 @@
     "build": "astro build --config ./source/astro.mjs"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/mdx": "4.0.0-beta.2",
-    "@astrojs/node": "^8.3.4",
+    "@astrojs/node": "9.0.0-beta.2",
-    "@astrojs/vue": "^4.5.2",
+    "@astrojs/vue": "5.0.0-beta.0",
     "@iconoir/vue": "^7.9.0",
     "@nurodev/astro-bun": "^1.1.5",
-    "astro": "^5.0.0-beta.5",
+    "astro": "5.0.0-beta.5",
     "astro-i18next": "^1.0.0-beta.21",
     "astro-theme-toggle": "^0.3.5",
     "astro-tooltips": "^0.6.2"
   },
   "devDependencies": {
-    "sass": "^1.80.3"
+    "sass": "^1.80.4"
   }
 }

source/src/components/global/SearchMenu.astro

@@ -1,13 +1,13 @@
 ---
 // Properties
-const {Type} = Astro.props
+const {Type, QueryText} = Astro.props
 
 // Highlight Type
 ---
 
 <div class="search-menu">
-    <a id="search-type-item-web" href="#">Web</a>
+    <a id="search-type-item-web" href={'/web?=' + QueryText}>Web</a>
-    <a class="disabled-items" id="search-type-item-images" href="#">Images</a>
+    <a id="search-type-item-images" href={'/images?=' + QueryText}>Images</a>
     <a class="disabled-items" id="search-type-item-videos" href="#">Videos</a>
     <a class="disabled-items" id="search-type-item-news" href="#">News</a>
     <a class="disabled-items" id="search-type-item-map" href="#">Map</a>
@@ -37,15 +37,15 @@ const {Type} = Astro.props
 { 
   ()=> {
     if (Type === "Web") {
-        return <style>#search-type-item-web {background: var(--box-background); border-color: #ddd;} </style>
+      return <style>#search-type-item-web {     background: var(--box-background); border-color: #ddd;    } </style>
     } else if (Type === "Images") {
-        return <style>#search-type-item-images {background: var(--box-background); border-color: #ddd;} </style>
+      return <style>#search-type-item-images {  background: var(--box-background); border-color: #ddd;    } </style>
     } else if (Type === "Videos") {
-        return <style>#search-type-item-videos {background: var(--box-background); border-color: #ddd;} </style>
+      return <style>#search-type-item-videos {  background: var(--box-background); border-color: #ddd;    } </style>
     } else if (Type === "News") {
-        return <style>#search-type-item-news {background: var(--box-background); border-color: #ddd;} </style>
+      return <style>#search-type-item-news {    background: var(--box-background); border-color: #ddd;    } </style>
     } else if (Type === "Map") {
-        return <style>#search-type-item-map {background: var(--box-background); border-color: #ddd;} </style>
+      return <style>#search-type-item-map {     background: var(--box-background); border-color: #ddd;    } </style>
-      }
     }
   }
+}

source/src/layouts/Search.astro

@@ -10,7 +10,7 @@ import SearchMenu from "@components/global/SearchMenu.astro"
 ---
 
 <Base Title={Title} QueryText={QueryText}>
-    <SearchMenu Type={Type}/>
+    <SearchMenu Type={Type} QueryText={QueryText}/>
     <div class="search-results">
         <div class="search-results-start">
             <slot name="search"/>

source/src/pages/images.astro

@@ -0,0 +1,89 @@
+---
+// Layout
+import Search from "@layouts/Search.astro";
+
+// Configuration
+import {
+  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";
+
+// Fetch
+/// Get Query
+const QueryString = Astro.url.href.split("images?=").pop() // Get user's search query from URL
+const QueryText = `${QueryString}`.replaceAll("%20", " ") // Replace "%20" with a space
+
+/// Get Results
+const Query = await fetch(DEFAULT_API + "/api/v1/images?s=" + QueryString).then((response) => response.json()); // Response
+
+/// Pages
+const NextPage = Astro.url.href.split("?page=").pop() // Get user's search query from URL
+---
+
+<Search QueryText={QueryText} Type="Images">
+    <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>
+    </slot>
+    <slot slot="rich-panel">
+        <a style="font-size: 12px;" href={DEFAULT_API + "/api/v1/images?s=" + QueryString} target="_blank">JSON Response</a>
+    </slot>
+</Search>
+
+<style lang="scss">
+@keyframes wave-lines {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+@keyframes wave-squares {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+.small-grid-related {
+    display: flex;
+    flex-wrap: wrap;
+}
+.fade-up {
+  mask-image: linear-gradient(white, transparent);
+}
+.related-sk {
+    box-shadow: 0px 4px 10px 0px #0000000a;
+    background: linear-gradient(to right,rgba(164, 164, 164, 0.2) 8%,rgba(241, 238, 238, 0.3) 18%,rgba(155, 155, 155, 0.2) 33%);
+    background-size: 150px 1px;
+    animation: wave-lines 10s infinite ease-out;
+    padding: 12px 64px;
+    margin-bottom: 6px;
+    margin-right: 6px;
+}
+
+.search-web-with-images {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat( 4, minmax(100px, 1fr));
+  margin-bottom: 12px;
+  img {
+    width: 182px;
+    height: 90px;
+    object-fit: cover;
+    border-radius: 6px;
+    border: 2px rgb(80, 80, 80) solid;
+  }
+}
+</style>

source/src/pages/web.astro

@@ -36,7 +36,6 @@ if (Query.related[0] === undefined) {
 } else {
   var ShowRelated = true
 }
-console.log(NextPage)
 ---
 
 <Search QueryText={QueryText} Type="Web">