Korbs/Zarro
Korbs/Zarro
1
Fork 0
Code Issues Pull requests Activity

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

Browse source
This commit is contained in:
Korbs 2024-10-23 16:48:08 -04:00
parent 327eba48c1
commit 441d9ac4cc
1 changed files with 72 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
source/src/pages/web.astro
View file

@ -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>