From f7f8cda2a566a9e86206f1f5103bd3ff3d17e2d2 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 16:06:45 +0200 Subject: [PATCH 01/18] Add @ alias --- jsconfig.json | 7 +++++++ vite.config.js | 6 ++++++ 2 files changed, 13 insertions(+) create mode 100644 jsconfig.json diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..e8b3494 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./src/*"] + } + } +} \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index bbcf80c..29e5c33 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,13 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import path from 'path'; // https://vite.dev/config/ export default defineConfig({ plugins: [vue()], + resolve: { + alias: { + '@': path.resolve(__dirname, './src') + } + } }) From 2ed25157e3e4a1eda0ffdeabde08b03013764679 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 16:07:21 +0200 Subject: [PATCH 02/18] Rename startpage route to startPage --- src/router/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 74cc205..dfe3a49 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -16,12 +16,12 @@ limitations under the License. import { createRouter, createWebHistory } from 'vue-router' -import SearchView from '../views/SearchView.vue' +import SearchView from '../views/SearchView.vue'; const routes = [ { path: '/', - name: 'search', + name: 'startPage', component: SearchView } ] From 24926b73128ac02bfe6e243a81a282a8d04e778e Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 16:09:51 +0200 Subject: [PATCH 03/18] Add search results view --- src/features/search/views/SearchResultsView.vue | 2 ++ src/router/index.js | 6 ++++++ 2 files changed, 8 insertions(+) create mode 100644 src/features/search/views/SearchResultsView.vue diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue new file mode 100644 index 0000000..ba53413 --- /dev/null +++ b/src/features/search/views/SearchResultsView.vue @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index dfe3a49..3b656e5 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -17,12 +17,18 @@ limitations under the License. import { createRouter, createWebHistory } from 'vue-router' import SearchView from '../views/SearchView.vue'; +import SearchResultsView from '@/features/search/views/SearchResultsView.vue'; const routes = [ { path: '/', name: 'startPage', component: SearchView + }, + { + path: '/search', + name: 'searchResults', + component: SearchResultsView } ] From 8cdf16f1445eee6390172f1d9feaf041499e8433 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 16:40:48 +0200 Subject: [PATCH 04/18] Add search results route --- src/features/search/views/SearchResultsView.vue | 4 ++++ src/router/index.js | 9 ++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue index ba53413..441b739 100644 --- a/src/features/search/views/SearchResultsView.vue +++ b/src/features/search/views/SearchResultsView.vue @@ -1,2 +1,6 @@ + + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 3b656e5..c21b25d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { createRouter, createWebHistory } from 'vue-router' +import { createRouter, createWebHistory } from 'vue-router'; import SearchView from '../views/SearchView.vue'; import SearchResultsView from '@/features/search/views/SearchResultsView.vue'; @@ -28,9 +28,12 @@ const routes = [ { path: '/search', name: 'searchResults', - component: SearchResultsView + component: SearchResultsView, + props: route => ({ + searchQuery: route.query.q + }) } -] +]; const router = createRouter({ history: createWebHistory(), From 8f48f3dcb54f279ebf97e237ace1163d273a9064 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 16:50:29 +0200 Subject: [PATCH 05/18] Add page title router hook --- src/router/index.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index c21b25d..5ba9189 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -31,13 +31,30 @@ const routes = [ component: SearchResultsView, props: route => ({ searchQuery: route.query.q - }) + }), + meta: { + title: (route) => route.query.q + } } ]; const router = createRouter({ history: createWebHistory(), routes -}) +}); -export default router \ No newline at end of file +// set page title +router.afterEach(to => { + const title = + typeof to.meta.title === 'function' + ? to.meta.title(to) + : to.meta.title; + + if (title) { + document.title = `${title} - Seekra`; + } else { + document.title = 'Seekra'; + }; +}); + +export default router; \ No newline at end of file From 679adb4cf98ba2a1579360400df06993c02b4686 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 16:52:25 +0200 Subject: [PATCH 06/18] Use class instead of ID for the search form --- src/views/SearchView.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue index 73d4aa0..7a67037 100644 --- a/src/views/SearchView.vue +++ b/src/views/SearchView.vue @@ -26,7 +26,7 @@ import Searchbar from '../features/search/components/Searchbar.vue' -
+ @@ -56,7 +56,7 @@ import Searchbar from '../features/search/components/Searchbar.vue' font-size: small; } -#search-form { +.search-form { width: 70%; max-width: 624px; } From 399d7caabc2da81935b7848aaa48d9f429a3a024 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 17:11:35 +0200 Subject: [PATCH 07/18] Add search query model --- src/features/search/components/Searchbar.vue | 12 +++++++++++- src/views/SearchView.vue | 8 ++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue index 4017338..4fb1ee9 100644 --- a/src/features/search/components/Searchbar.vue +++ b/src/features/search/components/Searchbar.vue @@ -14,9 +14,19 @@ See the License for the specific language governing permissions and limitations under the License. --> + + diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue index 7a67037..31ac2d8 100644 --- a/src/views/SearchView.vue +++ b/src/views/SearchView.vue @@ -15,7 +15,11 @@ limitations under the License. --> From 9f60c23c6040807a6ac2cff651e19f711f462b07 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 17:22:11 +0200 Subject: [PATCH 08/18] Add search submit callback --- src/views/SearchView.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue index 31ac2d8..bbfb02d 100644 --- a/src/views/SearchView.vue +++ b/src/views/SearchView.vue @@ -18,8 +18,18 @@ limitations under the License. import Searchbar from '../features/search/components/Searchbar.vue'; import { ref } from 'vue'; +import { useRouter } from 'vue-router'; + +const router = useRouter(); const searchQuery = ref(''); + +const submitSearch = function () { + router.push({ + name: 'searchResults', + query: { q: searchQuery.value } + }) +}; From 1097694a8ef37d23a4a8697424d7f64a1780bb0a Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Sun, 10 May 2026 17:27:57 +0200 Subject: [PATCH 09/18] Add router link to the startpage in the navbar --- src/features/nav/components/Navbar.vue | 4 +++- src/styles/common.css | 8 ++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue index d15a230..8ecdd2a 100644 --- a/src/features/nav/components/Navbar.vue +++ b/src/features/nav/components/Navbar.vue @@ -16,7 +16,9 @@ limitations under the License. + + \ No newline at end of file From c5af7366a9ee7a55681f9c89609051e9154c73e6 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Mon, 11 May 2026 00:06:45 +0200 Subject: [PATCH 14/18] Update search bar width at the start page --- src/views/SearchView.vue | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue index 0b5c58c..e1fba20 100644 --- a/src/views/SearchView.vue +++ b/src/views/SearchView.vue @@ -39,7 +39,7 @@ const submitSearch = function () {
- +
@@ -80,4 +80,10 @@ const submitSearch = function () { width: 70%; max-width: 624px; } + +@media (max-width: 67.5rem) { + .search-container { + width: 100%; + } +} \ No newline at end of file From 4d5ddfd7ea8d909f64895894b9961046d57151f3 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Mon, 11 May 2026 00:10:49 +0200 Subject: [PATCH 15/18] Add search results error message --- .../search/views/SearchResultsView.vue | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue index def2f44..3218b6a 100644 --- a/src/features/search/views/SearchResultsView.vue +++ b/src/features/search/views/SearchResultsView.vue @@ -9,6 +9,15 @@ searchQueryModel.value = props.searchQuery; \ No newline at end of file From 587a97fa03f6328e081be37aa2f897804222acc6 Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Mon, 11 May 2026 00:11:04 +0200 Subject: [PATCH 16/18] Add search results error message animation --- src/features/search/views/SearchResultsView.vue | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue index 3218b6a..e3f3282 100644 --- a/src/features/search/views/SearchResultsView.vue +++ b/src/features/search/views/SearchResultsView.vue @@ -52,6 +52,7 @@ searchQueryModel.value = props.searchQuery; border-radius: 28px; text-align: center; background-color: #f7f7f7; + animation: fade-in 0.8s ease-out; height: var(--error-message-height); display: flex; justify-content: center; @@ -67,4 +68,18 @@ searchQueryModel.value = props.searchQuery; width: 100%; } } + +@keyframes fade-in { + 0% { + opacity: 0; + } + 10% { + opacity: 0; + transform: scale(1.02); + } + 100% { + opacity: 100; + transform: scale(1); + } +} \ No newline at end of file From 49d4401d000631b80e1c19e72f72ca4ccd0fb36c Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Mon, 11 May 2026 00:12:27 +0200 Subject: [PATCH 17/18] Add search results error message outline --- src/features/search/views/SearchResultsView.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue index e3f3282..b97736e 100644 --- a/src/features/search/views/SearchResultsView.vue +++ b/src/features/search/views/SearchResultsView.vue @@ -57,6 +57,7 @@ searchQueryModel.value = props.searchQuery; display: flex; justify-content: center; flex-direction: column; + outline: 1px solid #dadada; } @media (max-width: 48rem) { From c1f10998484304cc8e9bd6ecad9ef191cdcaf2de Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Mon, 11 May 2026 18:41:25 +0200 Subject: [PATCH 18/18] Use CSS variables --- src/features/search/components/Searchbar.vue | 2 +- src/features/search/views/SearchResultsView.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue index 366c6b3..8955b17 100644 --- a/src/features/search/components/Searchbar.vue +++ b/src/features/search/components/Searchbar.vue @@ -78,7 +78,7 @@ const submitSearch = function () { border: none; padding: var(--submit-button-padding-y) 20px; background: var(--primary-color); - color: white; + color: var(--white); cursor: pointer; white-space: nowrap; } diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue index b97736e..859f131 100644 --- a/src/features/search/views/SearchResultsView.vue +++ b/src/features/search/views/SearchResultsView.vue @@ -57,7 +57,7 @@ searchQueryModel.value = props.searchQuery; display: flex; justify-content: center; flex-direction: column; - outline: 1px solid #dadada; + outline: 1px solid var(--light-d-2); } @media (max-width: 48rem) {