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

Add skeleton animation, adjust query text, and use default API link from ENV

Browse source
This commit is contained in:
Korbs 2024-10-23 14:00:21 -04:00
parent 8d9683b17d
commit df07435874
1 changed files with 62 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,30 +2,85 @@
// Layout // Layout
import Search from "@layouts/Search.astro"; import Search from "@layouts/Search.astro";
// Configuration
import {
DEFAULT_API
} from "@utils/GetConfig"
// Components // Components
import WebLink from "@components/search/WebLink.astro";
import RelatedSearches from "@components/search/RelatedSearches.astro"; import RelatedSearches from "@components/search/RelatedSearches.astro";
import WebLink from "@components/search/WebLink.astro";
import WebLinkSkeleton from "@components/search/WebLinkSkeleton.astro";
// Fetch // Fetch
const QueryText = Astro.url.href.split("web?=").pop() const QueryString = Astro.url.href.split("web?=").pop() // Get user's search query from URL
const Query = await fetch("https://4get.sudovanilla.org" + "/api/v1/web?s=" + QueryText).then((response) => response.json()); 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
--- ---
<Search Query={QueryText} Type="Web"> <Search QueryText={QueryText} Type="Web">
<slot slot="search"> <slot slot="search">
{Query.web.map((query) => ( {Query.web.map((query) => (
<WebLink <WebLink
server:defer
Title={query.title} Title={query.title}
Description={query.description} Description={query.description}
Link={query.url} Link={query.url}
/> >
<WebLinkSkeleton slot="fallback"/>
</WebLink>
))} ))}
</slot> </slot>
<slot slot="rich-panel"> <slot slot="rich-panel">
<RelatedSearches> <RelatedSearches server:defer>
{Query.related.map((related) => ( {Query.related.map((related) => (
<a href={'/web?=' + related}>{related}</a> <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> </RelatedSearches>
<a style="font-size: 12px;" href={DEFAULT_API + "/api/v1/web?s=" + QueryString} target="_blank">JSON Response</a>
</slot> </slot>
</Search> </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;
}
</style>