Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Restructure results to matching against listings

Browse source
This commit is contained in:
Sam Carlton 2022-05-20 14:20:17 -05:00
parent a7e30e4a99
commit af853f93cd
1 changed files with 35 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

77
components/search-stork.vue
View file

@ -66,48 +66,43 @@
<!-- hasStartedAnyQuery: {{ hasStartedAnyQuery }} --> <!-- hasStartedAnyQuery: {{ hasStartedAnyQuery }} -->
<div <div
v-if="chunkedResults.length === 0" v-if="chunkedListings.length === 0"
class="text-center py-4" class="text-center py-4"
> >
No apps found No apps found
</div> </div>
<ul <ul
v-for="(results, i) in chunkedResults" v-for="(listings, i) in chunkedListings"
:key="`results-chunk-${i}`" :key="`listings-chunk-${i}`"
class="results-container divide-y divide-gray-700" class="listings-container divide-y divide-gray-700"
> >
<li <li
v-for="(result, i) in results" v-for="(listing, i) in listings"
:key="`${result.listing.slug}-${i}`" :key="`${ listing.slug }-${i}`"
:ref="`${result.listing.slug}-row`" :ref="`${ listing.slug }-row`"
:data-app-slug="result.listing.slug" :data-app-slug="listing.slug"
class="relative" class="relative"
> >
<!-- app.endpoint: {{ app.endpoint }} --> <!-- app.endpoint: {{ app.endpoint }} -->
<a <a
:href="result.listing.endpoint" :href="listing.endpoint"
class="flex flex-col justify-center inset-x-0 hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-y-2 -mx-5 pl-5 md:pl-20 pr-6 md:pr-64 py-5" class="flex flex-col justify-center inset-x-0 hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-y-2 -mx-5 pl-5 md:pl-20 pr-6 md:pr-64 py-5"
style="transition-property: border;" style="transition-property: border;"
> >
<div class="absolute hidden left-0 h-12 w-12 rounded-full md:flex items-center justify-center bg-darker"> <div class="absolute hidden left-0 h-12 w-12 rounded-full md:flex items-center justify-center bg-darker">
{{ getIconForListing( result.listing ) }} {{ getIconForListing( listing ) }}
</div> </div>
<div <div
v-if="getAppCategory(result.listing).icon" v-html="makeHighlightedResultTitle( listing.storkResult )"
v-html="`${ makeHighlightedResultTitle( result ) }`"
/>
<div
v-else
v-html="makeHighlightedResultTitle( result )"
/> />
<div class="text-xs leading-5 font-light"> <div class="text-xs leading-5 font-light">
<div <div
v-for="(excerpt, i) in result.excerpts" v-for="(excerpt, i) in listing.storkResult.excerpts"
:key="`excerpt-${i}`" :key="`excerpt-${i}`"
class="result-excerpt space-y-3" class="result-excerpt space-y-3"
> >
@ -119,13 +114,13 @@
/> />
</div> </div>
</div> </div>
<!-- result.listing.lastUpdated: {{ result.listing.lastUpdated }} --> <!-- listing.lastUpdated: {{ listing.lastUpdated }} -->
<template v-if="result.listing.lastUpdated"> <template v-if="listing.lastUpdated">
<small <small
class="text-xs opacity-50" class="text-xs opacity-50"
> >
<RelativeTime <RelativeTime
:timestamp="result.listing.lastUpdated.timestamp" :timestamp="listing.lastUpdated.timestamp"
class="text-xs opacity-50" class="text-xs opacity-50"
/> />
</small> </small>
@ -137,7 +132,7 @@
</small> </small>
</template> </template>
<!-- result.listing.endpoint: {{ result.listing.endpoint }} --> <!-- listing.endpoint: {{ listing.endpoint }} -->
</a> </a>
@ -149,8 +144,8 @@
<div class="search-item-options-container h-full flex justify-center md:justify-end items-center pb-4 md:py-4 md:px-4"> <div class="search-item-options-container h-full flex justify-center md:justify-end items-center pb-4 md:py-4 md:px-4">
<LinkButton <LinkButton
v-for="link in getSearchLinks(result.listing)" v-for="link in getSearchLinks( listing )"
:key="`${result.listing.slug}-${link.label.toLowerCase()}`" :key="`${ listing.slug }-${ link.label.toLowerCase() }`"
:href="link.href" :href="link.href"
:class="[ :class="[
'px-3 py-2 rounded-md text-sm pointer-events-auto focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out', 'px-3 py-2 rounded-md text-sm pointer-events-auto focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
@ -170,7 +165,7 @@
</LinkButton> </LinkButton>
<LinkButton <LinkButton
:href="result.listing.endpoint" :href="listing.endpoint"
:class="[ :class="[
'px-3 py-2 rounded-md text-sm pointer-events-auto focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out', 'px-3 py-2 rounded-md text-sm pointer-events-auto focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
'text-gray-300 hover:bg-darker hover:neumorphic-shadow' 'text-gray-300 hover:bg-darker hover:neumorphic-shadow'
@ -268,30 +263,30 @@ export default {
return { return {
query: '', query: '',
hasStartedAnyQuery: false, hasStartedAnyQuery: false,
storkResults: [], listingsResults: []
} }
}, },
computed: { computed: {
initialList () { initialList () {
return this.initialLimit !== null ? this.appList.slice(0, this.initialLimit) : this.appList return this.initialLimit !== null ? this.appList.slice(0, this.initialLimit) : this.appList
}, },
results () { listings () {
if (!this.hasSearchInputText) return this.initialList if (!this.hasSearchInputText) return this.initialList
return this.storkResults return this.listingsResults
}, },
// Chunk results to avoid having a parent node with more than 60 child nodes. // Chunk results to avoid having a parent node with more than 60 child nodes.
chunkedResults () { chunkedListings () {
const results = [ const listings = [
...this.results ...this.listings
] ]
const size = 25 const size = 25
const chunks = [] const chunks = []
while (results.length > 0) while (listings.length > 0)
chunks.push(results.splice(0, size)) chunks.push(listings.splice(0, size))
return chunks return chunks
}, },
@ -455,17 +450,15 @@ export default {
console.log('storkQuery', storkQuery) console.log('storkQuery', storkQuery)
this.storkResults = storkQuery.results.map( result => { this.listingsResults = storkQuery.results.map( result => {
return { return {
...result, name: result.entry.title,
listing: { endpoint: result.entry.url,
name: result.entry.title, slug: '',
endpoint: result.entry.url, category: {
slug: '', slug: 'uncategorized'
category: { },
slug: 'uncategorized' storkResult: result
}
}
} }
}) })