update
This commit is contained in:
Korbs
parent
74558ad500
commit
b471decdec
6 changed files with 111 additions and 23 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
10
package.json
10
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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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"/>
|
||||
|
|
|
|||
89
source/src/pages/images.astro
Normal file
89
source/src/pages/images.astro
Normal file
|
|
@ -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>
|
||||
|
|
@ -36,7 +36,6 @@ if (Query.related[0] === undefined) {
|
|||
} else {
|
||||
var ShowRelated = true
|
||||
}
|
||||
console.log(NextPage)
|
||||
---
|
||||
|
||||
<Search QueryText={QueryText} Type="Web">
|
||||
|
|
|
|||
Loading…
Reference in a new issue