mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Merge remote-tracking branch 'origin/feat/observing'
This commit is contained in:
Sam Carlton
commit
7aba28f393
4 changed files with 173 additions and 103 deletions
|
|
@ -6,10 +6,10 @@
|
|||
isOpen ? 'bg-blur' : ''
|
||||
]"
|
||||
>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 lg:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="-ml-2 mr-2 flex items-center md:hidden">
|
||||
<div class="-ml-2 mr-2 flex items-center lg:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
:aria-expanded="isOpen ? 'true' : 'false'"
|
||||
|
|
@ -45,10 +45,10 @@
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex items-center text-4xl md:text-5xl py-3">
|
||||
<div class="flex-shrink-0 flex items-center text-4xl lg:text-5xl py-3">
|
||||
<div>🦾</div>
|
||||
</div>
|
||||
<div class="hidden md:ml-6 md:flex md:items-center space-x-4">
|
||||
<div class="hidden lg:ml-6 lg:flex lg:items-center space-x-4">
|
||||
<a
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
|
|
@ -104,11 +104,11 @@
|
|||
-->
|
||||
<div
|
||||
:class="[
|
||||
'md:hidden',
|
||||
'lg:hidden',
|
||||
isOpen ? 'block' : 'hidden'
|
||||
]"
|
||||
>
|
||||
<div class="px-2 pt-2 pb-3 sm:px-3">
|
||||
<div class="px-2 pt-2 pb-3 lg:px-3">
|
||||
<a
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
|
|
|
|||
|
|
@ -25,105 +25,124 @@
|
|||
</div>
|
||||
<div
|
||||
ref="search-container"
|
||||
class="search-container relative w-full"
|
||||
class="search-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark my-8 px-5"
|
||||
>
|
||||
<div class="search-wrapper flex justify-center">
|
||||
<div class="search-scroller w-full relative">
|
||||
|
||||
<div class="search-results py-8">
|
||||
<svg style="display: none;">
|
||||
<defs>
|
||||
<path
|
||||
id="chevron-right"
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<svg style="display: none;">
|
||||
<defs>
|
||||
<path
|
||||
id="chevron-right"
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
<!-- seenItems: {{ seenItems }} -->
|
||||
|
||||
<ul class="results-container rounded-lg border border-gray-700 divide-y divide-gray-700 bg-gradient-to-br from-darker to-dark neumorphic-shadow-outer px-5">
|
||||
<li
|
||||
v-if="results.length === 0"
|
||||
class="text-center py-4"
|
||||
>
|
||||
No apps found
|
||||
</li>
|
||||
<li
|
||||
v-for="(app, i) in results"
|
||||
:key="`${app.slug}-${i}`"
|
||||
class="relative"
|
||||
>
|
||||
<a
|
||||
:href="app.endpoint"
|
||||
class="flex items-center hover:neumorphic-shadow hover:bg-gradient-to-br from-darkest to-dark focus:outline-none focus:bg-gray-50 transition duration-300 ease-in-out rounded-lg -mx-5 px-4 py-4 sm:px-6"
|
||||
>
|
||||
<div class="flex-shrink-0 h-12 w-12 rounded-full flex items-center justify-center bg-darker">
|
||||
{{ app.name.charAt(0) }}
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 px-4 md:mr-48 space-y-2">
|
||||
<div class="text-sm leading-5 font-light truncate">
|
||||
<span v-if="app.endpoint.includes('/game/')">
|
||||
🕹
|
||||
</span>
|
||||
{{ app.name }}
|
||||
</div>
|
||||
<div class="flex items-center text-sm leading-5 text-gray-500 overflow-hidden">
|
||||
{{ app.text }}
|
||||
</div>
|
||||
<!-- app.lastUpdated: {{ app.lastUpdated }} -->
|
||||
<client-only
|
||||
v-if="app.lastUpdated"
|
||||
placeholder="Loading..."
|
||||
>
|
||||
<small class="text-xs opacity-50">
|
||||
<RelativeTime :timestamp="app.lastUpdated.timestamp" />
|
||||
</small>
|
||||
</client-only>
|
||||
</div>
|
||||
<svg
|
||||
class="h-5 w-5 text-gray-400"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<use href="#chevron-right" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<client-only>
|
||||
<div
|
||||
class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none"
|
||||
>
|
||||
|
||||
<div class="search-item-options-container h-full flex justify-center md:justify-end items-center py-4 md:px-12">
|
||||
|
||||
<div
|
||||
v-if="!app.endpoint.includes('/game/')"
|
||||
class="subscribe space-y-6 sm:space-x-6"
|
||||
>
|
||||
<EmailSubscribe
|
||||
:app-name="app.name"
|
||||
:input-class-groups="{
|
||||
shadow: 'hover:neumorphic-shadow',
|
||||
bg: '',
|
||||
focus: 'bg-transparent neumorphic-shadow pl-8',
|
||||
blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
|
||||
}"
|
||||
class="pointer-events-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</client-only>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="chunkedResults.length === 0"
|
||||
class="text-center py-4"
|
||||
>
|
||||
No apps found
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-for="(results, i) in chunkedResults"
|
||||
:key="`results-chunk-${i}`"
|
||||
class="results-container divide-y divide-gray-700"
|
||||
>
|
||||
<li
|
||||
v-for="(app, i) in results"
|
||||
:key="`${app.slug}-${i}`"
|
||||
:ref="`${app.slug}-row`"
|
||||
:data-app-slug="app.slug"
|
||||
class="relative"
|
||||
>
|
||||
<a
|
||||
:href="app.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-6 "
|
||||
style="transition-property: border;"
|
||||
>
|
||||
<template v-if="!seenItems[app.slug]">
|
||||
{{ app.endpoint.includes('/game/') ? `🕹${app.name}` : app.name }}
|
||||
<div class="text-sm leading-5 font-bold">
|
||||
{{ app.text }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<client-only>
|
||||
<div class="absolute hidden left-0 h-12 w-12 rounded-full md:flex items-center justify-center bg-darker">
|
||||
{{ app.name.charAt(0) }}
|
||||
</div>
|
||||
</client-only>
|
||||
|
||||
{{ app.endpoint.includes('/game/') ? `🕹${app.name}` : app.name }}
|
||||
<div class="text-sm leading-5 font-bold">
|
||||
{{ app.text }}
|
||||
</div>
|
||||
<!-- app.lastUpdated: {{ app.lastUpdated }} -->
|
||||
<client-only v-if="app.lastUpdated">
|
||||
<small
|
||||
class="text-xs opacity-50"
|
||||
>
|
||||
<RelativeTime
|
||||
:timestamp="app.lastUpdated.timestamp"
|
||||
class="text-xs opacity-50"
|
||||
/>
|
||||
</small>
|
||||
<small
|
||||
slot="placeholder"
|
||||
class="text-xs opacity-50"
|
||||
>
|
||||
⏳
|
||||
</small>
|
||||
</client-only>
|
||||
|
||||
<client-only>
|
||||
<svg
|
||||
class="absolute right-0 h-5 w-5 text-gray-400"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<use href="#chevron-right" />
|
||||
</svg>
|
||||
</client-only>
|
||||
</template>
|
||||
|
||||
</a>
|
||||
|
||||
<client-only v-if="seenItems[app.slug]">
|
||||
<div
|
||||
class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none"
|
||||
>
|
||||
|
||||
<div class="search-item-options-container h-full flex justify-center md:justify-end items-center pb-4 md:py-4 md:px-12">
|
||||
|
||||
<div
|
||||
v-if="!app.endpoint.includes('/game/')"
|
||||
class="subscribe space-y-6 sm:space-x-6"
|
||||
>
|
||||
<EmailSubscribe
|
||||
:app-name="app.name"
|
||||
:input-class-groups="{
|
||||
shadow: 'hover:neumorphic-shadow',
|
||||
bg: '',
|
||||
focus: 'bg-transparent neumorphic-shadow pl-8',
|
||||
blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
|
||||
}"
|
||||
class="pointer-events-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</client-only>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -200,6 +219,10 @@ export default {
|
|||
return {
|
||||
// appList,
|
||||
query: '',
|
||||
observer: null,
|
||||
seenItems: Object.fromEntries(this.appList.map(app => {
|
||||
return [app.slug, false]
|
||||
})),
|
||||
// results: [],
|
||||
titleStartsWithResults: [],
|
||||
titleContainsResults: [],
|
||||
|
|
@ -219,10 +242,28 @@ export default {
|
|||
...this.statusResults
|
||||
]
|
||||
},
|
||||
// Chunk results to avoid having a parent node with more than 60 child nodes.
|
||||
chunkedResults () {
|
||||
|
||||
const results = [
|
||||
...this.results
|
||||
]
|
||||
|
||||
const size = 25
|
||||
const chunks = []
|
||||
|
||||
while (results.length > 0)
|
||||
chunks.push(results.splice(0, size))
|
||||
|
||||
return chunks
|
||||
},
|
||||
hasSearchInputText () {
|
||||
return this.query.length > 0
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.observer.disconnect()
|
||||
},
|
||||
// watch: {
|
||||
// 'store.mode': function (newMode) {
|
||||
// // If we're showing the search
|
||||
|
|
@ -236,8 +277,20 @@ export default {
|
|||
// }
|
||||
// }
|
||||
// },
|
||||
// mounted () {
|
||||
// },
|
||||
mounted () {
|
||||
// console.log(this.$el)
|
||||
|
||||
this.observer = new IntersectionObserver(this.onElementObserved, {
|
||||
// root: this.$el,
|
||||
threshold: 1.0,
|
||||
})
|
||||
|
||||
// Start observing all search rows
|
||||
this.appList.forEach(app => {
|
||||
// console.log('this.$refs[`${app.slug}-row`]', this.$refs[`${app.slug}-row`][0])
|
||||
this.observer.observe(this.$refs[`${app.slug}-row`][0])
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// Search priorities
|
||||
titleStartsWith (query, app) {
|
||||
|
|
@ -293,6 +346,21 @@ export default {
|
|||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
onElementObserved(entries) {
|
||||
entries.forEach(({ target, isIntersecting }) => {
|
||||
if (!isIntersecting) {
|
||||
return
|
||||
}
|
||||
|
||||
this.observer.unobserve(target)
|
||||
|
||||
// console.log('Observed target', target)
|
||||
|
||||
const appSlug = target.getAttribute('data-app-slug')
|
||||
|
||||
this.seenItems[appSlug] = true
|
||||
});
|
||||
},
|
||||
queryResults (rawQuery) {
|
||||
// Clear any results from before
|
||||
this.titleStartsWithResults = []
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ export default async function () {
|
|||
// console.log('commits', commits)
|
||||
|
||||
// Save commits to file just in case
|
||||
await fs.writeFile('./commits-data.json', JSON.stringify(commits))
|
||||
// await fs.writeFile('./commits-data.json', JSON.stringify(commits))
|
||||
|
||||
|
||||
// Parse markdown
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@ const storeAppList = async function (builder) {
|
|||
// console.log('builder.nuxt.options', builder.nuxt.options)
|
||||
await fs.writeFile(appListPath, JSON.stringify(appList))
|
||||
await fs.writeFile(gamesListPath, JSON.stringify(gamesList))
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue