update

2024-10-28 15:05:53 -04:00 · 2024-10-28 15:05:53 -04:00 · b471decdec
commit b471decdec
parent 74558ad500
6 changed files with 111 additions and 23 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -25,17 +25,17 @@
    "build": "astro build --config ./source/astro.mjs"
  },
  "dependencies": {
-    "@astrojs/mdx": "^3.1.8",
-    "@astrojs/node": "^8.3.4",
-    "@astrojs/vue": "^4.5.2",
+    "@astrojs/mdx": "4.0.0-beta.2",
+    "@astrojs/node": "9.0.0-beta.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"
  }
 }
--- a/source/src/components/global/SearchMenu.astro
+++ b/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 class="disabled-items" id="search-type-item-images" href="#">Images</a>
+    <a id="search-type-item-web" href={'/web?=' + QueryText}>Web</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>
@ -35,17 +35,17 @@ const {Type} = Astro.props
 </style>

 { 
-    ()=> {
-      if (Type === "Web") {
-        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>
-      } else if (Type === "Videos") {
-        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>
-      } else if (Type === "Map") {
-        return <style>#search-type-item-map {background: var(--box-background); border-color: #ddd;} </style>
-      }
+  ()=> {
+    if (Type === "Web") {
+      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>
+    } else if (Type === "Videos") {
+      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>
+    } else if (Type === "Map") {
+      return <style>#search-type-item-map {     background: var(--box-background); border-color: #ddd;    } </style>
    }
-  }
+  }
+}
--- a/source/src/layouts/Search.astro
+++ b/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"/>
--- a/source/src/pages/images.astro
+++ b/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>
--- a/source/src/pages/web.astro
+++ b/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">