From a3be80627c3392d73eec0913f1c3dca20b14c5ab Mon Sep 17 00:00:00 2001 From: neil Date: Wed, 21 Dec 2022 15:21:38 +0800 Subject: [PATCH 01/10] #36 initialize search --- .../gui/src/components/NavBar/NavBar.svelte | 3 ++- modules/gui/src/libs/stores.ts | 20 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/modules/gui/src/components/NavBar/NavBar.svelte b/modules/gui/src/components/NavBar/NavBar.svelte index 7a3d3ed..d50a78b 100644 --- a/modules/gui/src/components/NavBar/NavBar.svelte +++ b/modules/gui/src/components/NavBar/NavBar.svelte @@ -2,6 +2,7 @@ import { page } from '$app/stores'; import { open } from '@tauri-apps/api/shell'; import { appWindow } from '@tauri-apps/api/window'; + import { searchStore } from '$libs/stores'; import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte'; import Button from '@tea/ui/Button/Button.svelte'; @@ -63,7 +64,7 @@ }); const onSearch = (term: string) => { - console.log('navbar search:', term); + searchStore.search(term); }; diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts index 60dbe7b..c267b52 100644 --- a/modules/gui/src/libs/stores.ts +++ b/modules/gui/src/libs/stores.ts @@ -60,3 +60,23 @@ function initPackagesReviewStore() { } export const packagesReviewStore = initPackagesReviewStore(); + +function initSearchStore() { + const { subscribe, set } = writable(''); + // TODO: + // add fuse.js index here: packages, articles/posts, etc + // define fuse.js shape { tags:[], desc:string, title: string, thumb_image_url: string } + // should use algolia if user is somehow online + + let term = ''; + + subscribe((v) => (term = v)); + + return { + term, + subscribe, + search: (term: string) => set(term) + }; +} + +export const searchStore = initSearchStore(); From e7f6c217195e78c26887a57b8c7dce526346be4a Mon Sep 17 00:00:00 2001 From: neil Date: Wed, 21 Dec 2022 15:58:37 +0800 Subject: [PATCH 02/10] #36 show results in popup --- .../SearchResults/SearchResults.svelte | 48 +++++++++++++++++++ modules/gui/src/routes/+layout.svelte | 2 + 2 files changed, 50 insertions(+) create mode 100644 modules/gui/src/components/SearchResults/SearchResults.svelte diff --git a/modules/gui/src/components/SearchResults/SearchResults.svelte b/modules/gui/src/components/SearchResults/SearchResults.svelte new file mode 100644 index 0000000..128c2d8 --- /dev/null +++ b/modules/gui/src/components/SearchResults/SearchResults.svelte @@ -0,0 +1,48 @@ + + +
+
+
+ Showing search results for `{term}` +
+ + + + + +
+
+ + diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte index 9ebd22d..0afed1e 100644 --- a/modules/gui/src/routes/+layout.svelte +++ b/modules/gui/src/routes/+layout.svelte @@ -6,6 +6,7 @@ import FooterLinks from '$components/FooterLinks/FooterLinks.svelte'; import { backLink as backLinkStore } from '$libs/stores'; + import SearchResults from '$components/SearchResults/SearchResults.svelte'; let view: HTMLElement; @@ -36,6 +37,7 @@
+ From 765a6f28511698d4a1b27727848f04066bb37281 Mon Sep 17 00:00:00 2001 From: neil Date: Thu, 22 Dec 2022 09:45:08 +0800 Subject: [PATCH 03/10] #99 fix tag/version dl link --- .github/notify-slack.js | 2 +- .github/workflows/release.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/notify-slack.js b/.github/notify-slack.js index d25c54c..0b96f7b 100755 --- a/.github/notify-slack.js +++ b/.github/notify-slack.js @@ -8,7 +8,7 @@ async function main() { type: 'section', text: { type: 'mrkdwn', - text: `NEW BUILD FOR ${process.env.PLATFORM} <${process.env.DOWNLOAD_URL}|download ${process.env.VERSION ? ('v'+process.env.VERSION) : ''}>` + text: `NEW BUILD FOR ${process.env.PLATFORM} <${process.env.DOWNLOAD_URL}|download ${process.env.VERSION || ''}>` } } ] diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 300b644..a530515 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -87,4 +87,4 @@ jobs: SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} PLATFORM: ${{ matrix.platform }} VERSION: ${{steps.tag.outputs.tag}} - DOWNLOAD_URL: http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/release/tea_${{ steps.date.outputs.unix_seconds }}.${{ matrix.platform == 'ubuntu-latest' && 'deb' || 'dmg'}} + DOWNLOAD_URL: http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/release/tea_gui_${{steps.tag.outputs.tag}}.${{matrix.platform}}..${{ matrix.platform == 'ubuntu-latest' && 'deb' || 'dmg'}} From edeb8a8cc85f8bbb5d99c72098cd4ab51d44907a Mon Sep 17 00:00:00 2001 From: neil Date: Thu, 22 Dec 2022 09:50:26 +0800 Subject: [PATCH 04/10] #99 fix dl link --- .github/workflows/release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index a530515..3180c21 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -87,4 +87,4 @@ jobs: SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} PLATFORM: ${{ matrix.platform }} VERSION: ${{steps.tag.outputs.tag}} - DOWNLOAD_URL: http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/release/tea_gui_${{steps.tag.outputs.tag}}.${{matrix.platform}}..${{ matrix.platform == 'ubuntu-latest' && 'deb' || 'dmg'}} + DOWNLOAD_URL: http://preview.gui.tea.xyz.s3-website-us-east-1.amazonaws.com/release/tea_gui_${{steps.tag.outputs.tag}}.${{matrix.platform}}.${{ matrix.platform == 'ubuntu-latest' && 'deb' || 'dmg'}} From e5c359db8ad5103c07138af527242c201da757b6 Mon Sep 17 00:00:00 2001 From: neil Date: Thu, 22 Dec 2022 11:25:59 +0800 Subject: [PATCH 05/10] #36 optimize packages search strategy --- .../SearchPackages/SearchPackages.svelte | 35 +++-------------- modules/gui/src/libs/stores.ts | 39 +++++++++++++++++++ 2 files changed, 45 insertions(+), 29 deletions(-) diff --git a/modules/gui/src/components/SearchPackages/SearchPackages.svelte b/modules/gui/src/components/SearchPackages/SearchPackages.svelte index 7b1cbca..f18230b 100644 --- a/modules/gui/src/components/SearchPackages/SearchPackages.svelte +++ b/modules/gui/src/components/SearchPackages/SearchPackages.svelte @@ -1,21 +1,16 @@
diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts index c267b52..b2480c7 100644 --- a/modules/gui/src/libs/stores.ts +++ b/modules/gui/src/libs/stores.ts @@ -1,4 +1,6 @@ import { writable } from 'svelte/store'; +import Fuse from 'fuse.js'; + import type { Package, Review } from '@tea/ui/types'; import type { GUIPackage } from '$libs/types'; // TODO: figure out a better structure for managing states maybe turn them into models? @@ -17,6 +19,41 @@ export const initializePackages = async () => { packages.set(newPackages); }; +function initPackagesStore() { + let initialized = false; + const { subscribe, set } = writable([]); + let packages: GUIPackage[] = []; + let packagesIndex: Fuse; + + if (!initialized) { + initialized = true; + getPackages().then((pkgs) => { + set(pkgs); + packagesIndex = new Fuse(pkgs, { + keys: ['name', 'full_name', 'desc'] + }); + }); + } + + subscribe((v) => packages.push(...v)); + + return { + packages, + subscribe, + search: async (term: string, limit: number = 5): Promise => { + if (!term) return []; + // TODO: if online, use algolia else use Fuse + + const res = packagesIndex.search(term, { limit }); + const matchingPackages: GUIPackage[] = res.map((v) => v.item); + + return matchingPackages; + } + }; +} + +export const packagesStore = initPackagesStore(); + export const initializeFeaturedPackages = async () => { console.log('initialzie featured packages'); const packages = await getFeaturedPackages(); @@ -68,6 +105,8 @@ function initSearchStore() { // define fuse.js shape { tags:[], desc:string, title: string, thumb_image_url: string } // should use algolia if user is somehow online + // use packagesStore here + let term = ''; subscribe((v) => (term = v)); From 9e43eba0924808abf24cda2240c17fdf956658a1 Mon Sep 17 00:00:00 2001 From: neil Date: Thu, 22 Dec 2022 11:32:58 +0800 Subject: [PATCH 06/10] lint --- modules/gui/src/components/NavBar/NavBar.svelte | 5 ----- .../gui/src/components/ProfileBanner/ProfileBanner.svelte | 4 ++-- .../gui/src/components/SearchResults/SearchResults.svelte | 1 - modules/gui/src/libs/stores.ts | 6 +++--- 4 files changed, 5 insertions(+), 11 deletions(-) diff --git a/modules/gui/src/components/NavBar/NavBar.svelte b/modules/gui/src/components/NavBar/NavBar.svelte index d50a78b..8c483e8 100644 --- a/modules/gui/src/components/NavBar/NavBar.svelte +++ b/modules/gui/src/components/NavBar/NavBar.svelte @@ -1,6 +1,5 @@ diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts index b2480c7..2f37a49 100644 --- a/modules/gui/src/libs/stores.ts +++ b/modules/gui/src/libs/stores.ts @@ -22,7 +22,7 @@ export const initializePackages = async () => { function initPackagesStore() { let initialized = false; const { subscribe, set } = writable([]); - let packages: GUIPackage[] = []; + const packages: GUIPackage[] = []; let packagesIndex: Fuse; if (!initialized) { @@ -40,8 +40,8 @@ function initPackagesStore() { return { packages, subscribe, - search: async (term: string, limit: number = 5): Promise => { - if (!term) return []; + search: async (term: string, limit = 5): Promise => { + if (!term || !packagesIndex) return []; // TODO: if online, use algolia else use Fuse const res = packagesIndex.search(term, { limit }); From 363e8150bc548e87e1820343e116fbfdbb85fb44 Mon Sep 17 00:00:00 2001 From: neil Date: Thu, 22 Dec 2022 12:23:13 +0800 Subject: [PATCH 07/10] #36 search for package --- .../SearchResults/SearchResults.svelte | 57 ++++++++++++++++++- modules/gui/src/libs/api/tauri.ts | 3 +- modules/gui/src/libs/stores.ts | 22 +++---- 3 files changed, 68 insertions(+), 14 deletions(-) diff --git a/modules/gui/src/components/SearchResults/SearchResults.svelte b/modules/gui/src/components/SearchResults/SearchResults.svelte index 2679358..ba2bda0 100644 --- a/modules/gui/src/components/SearchResults/SearchResults.svelte +++ b/modules/gui/src/components/SearchResults/SearchResults.svelte @@ -1,7 +1,28 @@
@@ -10,10 +31,41 @@ Showing search results for `{term}` - + +
+ Top Package Results ({packagesFound.length}) +
+
    + {#if packagesFound.length > 0} + {#each packagesFound as pkg} +
    + { + try { + pkg.state = PackageStates.INSTALLING; + await installPackage(pkg.full_name); + pkg.state = PackageStates.INSTALLED; + } catch (error) { + console.error(error); + } + }} + /> +
    + {/each} + {:else} + {#each Array(12) as _} +
    + +
    + {/each} + {/if} +
@@ -39,6 +91,7 @@ section > div { height: 0%; transition: height 0.6s ease-in-out; + overflow-y: scroll; } section.show > div { diff --git a/modules/gui/src/libs/api/tauri.ts b/modules/gui/src/libs/api/tauri.ts index 3747ae1..6ab1193 100644 --- a/modules/gui/src/libs/api/tauri.ts +++ b/modules/gui/src/libs/api/tauri.ts @@ -26,7 +26,8 @@ async function get(path: string, query?: { [key: string]: string }) { const uri = join(base, path); const { data } = await client.get(uri.toString(), { headers: { - Authorization: 'public' // TODO: figure out why req w/o Authorization does not work + Authorization: 'public', // TODO: figure out why req w/o Authorization does not work + 'cache-control': 'no-cache' }, query: query || {} }); diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts index 2f37a49..d767ba8 100644 --- a/modules/gui/src/libs/stores.ts +++ b/modules/gui/src/libs/stores.ts @@ -9,16 +9,8 @@ import { getPackages, getFeaturedPackages, getPackageReviews } from '@api'; export const backLink = writable('/'); -export const packages = writable([]); - export const featuredPackages = writable([]); -export const initializePackages = async () => { - console.log('initialize packages'); - const newPackages = await getPackages(); - packages.set(newPackages); -}; - function initPackagesStore() { let initialized = false; const { subscribe, set } = writable([]); @@ -46,7 +38,6 @@ function initPackagesStore() { const res = packagesIndex.search(term, { limit }); const matchingPackages: GUIPackage[] = res.map((v) => v.item); - return matchingPackages; } }; @@ -100,21 +91,30 @@ export const packagesReviewStore = initPackagesReviewStore(); function initSearchStore() { const { subscribe, set } = writable(''); + const packagesSearch = writable([]); + // TODO: // add fuse.js index here: packages, articles/posts, etc // define fuse.js shape { tags:[], desc:string, title: string, thumb_image_url: string } // should use algolia if user is somehow online - // use packagesStore here + const packagesFound: GUIPackage[] = []; let term = ''; subscribe((v) => (term = v)); + packagesSearch.subscribe((v) => packagesFound.push(...v)); return { term, + packagesSearch, + packagesFound, subscribe, - search: (term: string) => set(term) + search: async (term: string) => { + const resultPkgs = await packagesStore.search(term, 5); + packagesSearch.set(resultPkgs); + set(term); + } }; } From ed9dcb87a8900219b8d4d073a3c29d010bd5795a Mon Sep 17 00:00:00 2001 From: neil Date: Thu, 22 Dec 2022 12:28:51 +0800 Subject: [PATCH 08/10] replace packages store --- .../src/components/InstalledPackages/InstalledPackages.svelte | 2 +- modules/gui/src/routes/packages/[slug]/+page.svelte | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte b/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte index 76a8393..691df16 100644 --- a/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte +++ b/modules/gui/src/components/InstalledPackages/InstalledPackages.svelte @@ -3,7 +3,7 @@ import type { GUIPackage } from '$libs/types'; import { PackageStates } from '$libs/types'; import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte'; - import { packages as packagesStore } from '$libs/stores'; + import { packagesStore } from '$libs/stores'; import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte'; import Preloader from '@tea/ui/Preloader/Preloader.svelte'; let packages: GUIPackage[] = []; diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte index 710c62e..d6bc051 100644 --- a/modules/gui/src/routes/packages/[slug]/+page.svelte +++ b/modules/gui/src/routes/packages/[slug]/+page.svelte @@ -9,7 +9,7 @@ /** @type {import('./$types').PageData} */ export let data; - import { packages, featuredPackages } from '$libs/stores'; + import { packagesStore, featuredPackages } from '$libs/stores'; import type { Package } from '@tea/ui/types'; @@ -30,7 +30,7 @@ // } }; - packages.subscribe(setPkg); + packagesStore.subscribe(setPkg); featuredPackages.subscribe(setPkg); From b04975861e1c04e41bfcdd9aae27297a845a9539 Mon Sep 17 00:00:00 2001 From: neil Date: Thu, 22 Dec 2022 12:56:41 +0800 Subject: [PATCH 09/10] #36 posts search --- .../SearchResults/SearchResults.svelte | 45 ++++++++++++++++++- modules/gui/src/libs/api/tauri.ts | 4 +- modules/gui/src/libs/stores.ts | 41 +++++++++++++++-- 3 files changed, 83 insertions(+), 7 deletions(-) diff --git a/modules/gui/src/components/SearchResults/SearchResults.svelte b/modules/gui/src/components/SearchResults/SearchResults.svelte index ba2bda0..412ed6f 100644 --- a/modules/gui/src/components/SearchResults/SearchResults.svelte +++ b/modules/gui/src/components/SearchResults/SearchResults.svelte @@ -4,16 +4,37 @@ import Preloader from '@tea/ui/Preloader/Preloader.svelte'; import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte'; import { PackageStates } from '$libs/types'; + import Posts from '@tea/ui/Posts/Posts.svelte'; import { installPackage } from '@api'; + import type { AirtablePost } from '@tea/ui/types'; let term: string; let packagesFound: GUIPackage[] = []; + + let articles: AirtablePost[] = []; // news, blogs, etc + let workshops: AirtablePost[] = []; // workshops, course + searchStore.subscribe((v) => { term = v; }); searchStore.packagesSearch.subscribe((pkgs) => { packagesFound = pkgs; }); + searchStore.postsSearch.subscribe((posts) => { + let partialArticles: AirtablePost[] = []; + let partialWorkshops: AirtablePost[] = []; + for (let post of posts) { + if (post.tags.includes('news')) { + partialArticles.push(post); + } + if (post.tags.includes('course') || post.tags.includes('featured_course')) { + partialWorkshops.push(post); + } + } + + articles = partialArticles; + workshops = partialWorkshops; + }); const getCTALabel = (state: PackageStates): string => { return { @@ -32,8 +53,8 @@ - - + +
Top Package Results ({packagesFound.length}) @@ -66,6 +87,26 @@ {/each} {/if} +
+ Top Article Results ({articles.length}) +
+ {#if articles.length} + + {:else} +
+ +
+ {/if} +
+ Top Workshop Results ({workshops.length}) +
+ {#if workshops.length} + + {:else} +
+ +
+ {/if} diff --git a/modules/gui/src/libs/api/tauri.ts b/modules/gui/src/libs/api/tauri.ts index 6ab1193..af8e6d3 100644 --- a/modules/gui/src/libs/api/tauri.ts +++ b/modules/gui/src/libs/api/tauri.ts @@ -152,9 +152,9 @@ export async function getTopPackages(): Promise { return packages; } -export async function getAllPosts(tag: string): Promise { +export async function getAllPosts(tag?: string): Promise { // add filter here someday: tag = news | course - const posts = await get('posts', { tag }); + const posts = await get('posts', tag ? { tag } : {}); return posts; } diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts index d767ba8..3589f80 100644 --- a/modules/gui/src/libs/stores.ts +++ b/modules/gui/src/libs/stores.ts @@ -1,11 +1,11 @@ import { writable } from 'svelte/store'; import Fuse from 'fuse.js'; -import type { Package, Review } from '@tea/ui/types'; +import type { Package, Review, AirtablePost } from '@tea/ui/types'; import type { GUIPackage } from '$libs/types'; // TODO: figure out a better structure for managing states maybe turn them into models? -import { getPackages, getFeaturedPackages, getPackageReviews } from '@api'; +import { getPackages, getFeaturedPackages, getPackageReviews, getAllPosts } from '@api'; export const backLink = writable('/'); @@ -89,9 +89,39 @@ function initPackagesReviewStore() { export const packagesReviewStore = initPackagesReviewStore(); +function initPosts() { + let initialized = false; + const { subscribe, set } = writable([]); + const posts: AirtablePost[] = []; + let postsIndex: Fuse; + + if (!initialized) { + initialized = true; + getAllPosts().then(set); + } + + subscribe((v) => { + posts.push(...v); + postsIndex = new Fuse(posts, { + keys: ['title', 'sub_title', 'short_description', 'tags'] + }); + }); + + return { + subscribe, + search: async (term: string, limit = 10) => { + const res = postsIndex.search(term, { limit }); + const matchingPosts: AirtablePost[] = res.map((v) => v.item); + return matchingPosts; + } + }; +} +export const postsStore = initPosts(); + function initSearchStore() { const { subscribe, set } = writable(''); const packagesSearch = writable([]); + const postsSearch = writable([]); // TODO: // add fuse.js index here: packages, articles/posts, etc @@ -108,11 +138,16 @@ function initSearchStore() { return { term, packagesSearch, + postsSearch, packagesFound, subscribe, search: async (term: string) => { - const resultPkgs = await packagesStore.search(term, 5); + const [resultPkgs, resultPosts] = await Promise.all([ + packagesStore.search(term, 5), + postsStore.search(term, 10) + ]); packagesSearch.set(resultPkgs); + postsSearch.set(resultPosts); set(term); } }; From 363670a4313e9f5e056ba1d87c4160880271fdab Mon Sep 17 00:00:00 2001 From: neil Date: Fri, 23 Dec 2022 10:31:36 +0800 Subject: [PATCH 10/10] #36 close popup via x or click outside --- .../SearchPopupResults.svelte} | 45 +++++++++++++------ modules/gui/src/libs/stores.ts | 26 ++++++++--- modules/gui/src/routes/+layout.svelte | 27 +++++------ 3 files changed, 62 insertions(+), 36 deletions(-) rename modules/gui/src/components/{SearchResults/SearchResults.svelte => SearchPopupResults/SearchPopupResults.svelte} (79%) diff --git a/modules/gui/src/components/SearchResults/SearchResults.svelte b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte similarity index 79% rename from modules/gui/src/components/SearchResults/SearchResults.svelte rename to modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte index 412ed6f..2444caa 100644 --- a/modules/gui/src/components/SearchResults/SearchResults.svelte +++ b/modules/gui/src/components/SearchPopupResults/SearchPopupResults.svelte @@ -9,16 +9,16 @@ import { installPackage } from '@api'; import type { AirtablePost } from '@tea/ui/types'; let term: string; - let packagesFound: GUIPackage[] = []; - + let packages: GUIPackage[] = []; let articles: AirtablePost[] = []; // news, blogs, etc let workshops: AirtablePost[] = []; // workshops, course + let loading = true; searchStore.subscribe((v) => { term = v; }); searchStore.packagesSearch.subscribe((pkgs) => { - packagesFound = pkgs; + packages = pkgs; }); searchStore.postsSearch.subscribe((posts) => { let partialArticles: AirtablePost[] = []; @@ -36,6 +36,8 @@ workshops = partialWorkshops; }); + searchStore.searching.subscribe((v) => (loading = v)); + const getCTALabel = (state: PackageStates): string => { return { [PackageStates.AVAILABLE]: 'INSTALL', @@ -44,24 +46,32 @@ [PackageStates.UNINSTALLED]: 'RE-INSTALL' }[state]; }; + + const onClose = () => { + term = ''; + };
-
-
- Showing search results for `{term}` + +
+
+
+
Showing search results for `{term}`
+ +
- +
- Top Package Results ({packagesFound.length}) + Top Package Results ({packages.length})
    - {#if packagesFound.length > 0} - {#each packagesFound as pkg} + {#if packages.length > 0} + {#each packages as pkg}
    {/each} - {:else} + {:else if loading} {#each Array(12) as _}
    @@ -92,7 +102,7 @@
{#if articles.length} - {:else} + {:else if loading}
@@ -102,7 +112,7 @@
{#if workshops.length} - {:else} + {:else if loading}
@@ -122,14 +132,23 @@ opacity: 0%; overflow: hidden; height: 0px; + z-index: 10; } + section > figure { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } section.show { opacity: 100%; height: 100%; } section > div { + position: relative; height: 0%; transition: height 0.6s ease-in-out; overflow-y: scroll; diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts index 3589f80..8abb466 100644 --- a/modules/gui/src/libs/stores.ts +++ b/modules/gui/src/libs/stores.ts @@ -119,6 +119,7 @@ function initPosts() { export const postsStore = initPosts(); function initSearchStore() { + const searching = writable(false); const { subscribe, set } = writable(''); const packagesSearch = writable([]); const postsSearch = writable([]); @@ -137,18 +138,29 @@ function initSearchStore() { return { term, + searching, packagesSearch, postsSearch, packagesFound, subscribe, search: async (term: string) => { - const [resultPkgs, resultPosts] = await Promise.all([ - packagesStore.search(term, 5), - postsStore.search(term, 10) - ]); - packagesSearch.set(resultPkgs); - postsSearch.set(resultPosts); - set(term); + searching.set(true); + try { + if (term) { + const [resultPkgs, resultPosts] = await Promise.all([ + packagesStore.search(term, 5), + postsStore.search(term, 10) + ]); + packagesSearch.set(resultPkgs); + postsSearch.set(resultPosts); + } else { + packagesSearch.set([]); + postsSearch.set([]); + } + set(term); + } finally { + searching.set(false); + } } }; } diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte index 0afed1e..fa7a693 100644 --- a/modules/gui/src/routes/+layout.svelte +++ b/modules/gui/src/routes/+layout.svelte @@ -6,7 +6,7 @@ import FooterLinks from '$components/FooterLinks/FooterLinks.svelte'; import { backLink as backLinkStore } from '$libs/stores'; - import SearchResults from '$components/SearchResults/SearchResults.svelte'; + import SearchPopupResults from '$components/SearchPopupResults/SearchPopupResults.svelte'; let view: HTMLElement; @@ -37,7 +37,7 @@
- + @@ -58,15 +58,17 @@ overflow-y: scroll; } + figure { + z-index: 0; + position: fixed; + top: 220px; + left: 240px; + right: 0px; + bottom: 0px; + background-image: url('/images/gui-background-grid.svg'); + } @media screen and (min-width: 1440px) { figure { - position: fixed; - z-index: 0; - top: 220px; - left: 240px; - right: 0px; - bottom: 0px; - background-image: url('/images/gui-background-grid.svg'); background-size: cover; background-repeat: repeat-y; } @@ -76,13 +78,6 @@ } @media screen and (max-width: 1440px) { figure { - position: fixed; - z-index: 0; - top: 220px; - left: 240px; - right: 0px; - bottom: 0px; - background-image: url('/images/gui-background-grid.svg'); background-size: contain; background-repeat: repeat; }