Add Link Style

Reviewed-on: #45
Reviewed-by: Jakob Gregory

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package-lock.json

@@ -2060,6 +2060,7 @@
       "resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz",
       "integrity": "sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^4.2.0",
         "colorette": "^2.0.16",

src/App.vue

@@ -31,11 +31,10 @@ import Footer from './features/footer/components/Footer.vue';
 
 <style scoped>
 .main-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    gap: 60px;
+    --main-content-padding-x: 30px;
+    --main-content-padding-y: 40px;
+    padding: var(--main-content-padding-y) var(--main-content-padding-x);
+    width: calc(100% - var(--main-content-padding-x) * 2);
     flex-grow: 1;
 }
 </style>

src/features/nav/components/Navbar.vue

@@ -16,7 +16,9 @@ limitations under the License.
 
 <template>
     <nav class="global-nav">
-        <span id="logo">Seekra</span>
+        <RouterLink to="/" class="link button link">
+            <span id="logo">Seekra</span>
+        </RouterLink>
         <ul class="right-links">
         </ul>
     </nav>

src/features/search/components/Searchbar.vue

@@ -14,12 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+const searchQuery = defineModel();
+
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+const props = defineProps(['autoSubmit'])
+
+const submitSearch = function () {
+    if (props.autoSubmit !== undefined) {
+        router.push({
+            name: 'searchResults',
+            query: { q: searchQuery.value }
+        });
+    };
+}
+</script>
+
 <template>
-    <div class="search-wrapper">
-        <input type="search" name="search" placeholder="Search..." required />
-        <button type="submit" class="search-button">Search</button>
-    </div>
-</template>
+    <form @submit.prevent="submitSearch">
+        <div class="search-wrapper">
+            <input
+                v-model="searchQuery"
+                type="search"
+                placeholder="Search..."
+                required
+            />
+            <button type="submit" class="search-button">Search</button>
+        </div>
+    </form>
+    </template>
 
 <style scoped>
 .search-wrapper {
@@ -53,7 +78,7 @@ limitations under the License.
     border: none;
     padding: var(--submit-button-padding-y) 20px;
     background: var(--primary-color);
-    color: white;
+    color: var(--white);
     cursor: pointer;
     white-space: nowrap;
 }

src/features/search/views/SearchResultsView.vue

@@ -0,0 +1,86 @@
+<script setup>
+import Searchbar from '@/features/search/components/Searchbar.vue';
+
+const props = defineProps(['searchQuery']);
+
+const searchQueryModel = defineModel();
+searchQueryModel.value = props.searchQuery;
+</script>
+
+<template>
+    <Searchbar class="search-bar" v-model="searchQueryModel" auto-submit />
+
+    <div class="search-results-error-message-container">
+        <div class="search-results-error-message">
+            <p>Search is not available right now.</p>
+            <p>Please try again to another time.</p>
+        </div>
+    </div>
+    <div class="search-results-container">
+    </div>
+</template>
+
+<style scoped>
+.search-bar {
+    width: 50%;
+}
+
+@media (max-width: 67.5rem) {
+    .search-bar {
+        width: 100%;
+    }
+}
+
+.search-results-container {
+    margin-top: 56px;
+}
+
+.search-results-error-message-container {
+    --error-message-height: 100px;
+    --error-message-padding: 2em;
+    display: flex;
+    justify-content: center;
+    width: calc(100% - 2 * var(--main-content-padding-x));
+    position: absolute;
+    top: calc(50vh - 0.5 * var(--error-message-height) - var(--error-message-padding));
+}
+
+.search-results-error-message {
+    padding: var(--error-message-padding);
+    font-size: 18px;
+    box-shadow: 0px 0px 42px #cdcdcdb3;
+    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;
+    flex-direction: column;
+    outline: 1px solid var(--light-d-2);
+}
+
+@media (max-width: 48rem) {
+    .search-results-error-message-container {
+        --error-message-height: 150px;
+    }
+    .search-results-error-message {
+        padding: 1em;
+        width: 100%;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    10% {
+        opacity: 0;
+        transform: scale(1.02);
+    }
+    100% {
+        opacity: 100;
+        transform: scale(1);
+    }
+}
+</style>

src/router/index.js

@@ -1,24 +1,66 @@
-import { createRouter, createWebHistory } from 'vue-router'
+/*
+Copyright 2026 Seekra
 
-import SearchView from '../views/SearchView.vue'
-import NotFound from '../views/NotFound.vue'
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createRouter, createWebHistory } from 'vue-router';
+
+import SearchView from '../views/SearchView.vue';
+import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
+import NotFound from '../views/NotFound.vue';
 
 const routes = [
     {
         path: '/',
-        name: 'search',
+        name: 'startPage',
         component: SearchView
     },
+    {
+        path: '/search',
+        name: 'searchResults',
+        component: SearchResultsView,
+        props: route => ({
+            searchQuery: route.query.q
+        }),
+        meta: {
+            title: (route) => route.query.q
+        }
+    },
     {
         path: '/:pathMatch(.*)*',
         name: 'not-found',
         component: NotFound
     },
-]
+];
 
 const router = createRouter({ 
     history: createWebHistory(),
     routes
-})
+});
 
-export default router
+// 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;

src/styles/common.css

@@ -24,3 +24,11 @@ body {
     display: flex;
     flex-direction: column;
 }
+
+.link {
+    text-decoration: none;
+}
+
+.link:hover:not(.button-link) {
+    text-decoration: underline;
+}

src/views/NotFound.vue

@@ -1,12 +1,51 @@
 <template>
-    <header class="global-header">
-        <h1>Seekra</h1>
-        <span class="slogan">
-            ERROR: 404 Not Found
-        </span>
-    </header>
-    
-    <form id="search-form">
-        <Searchbar />
-    </form>
+    <div class="search-content">
+        <header class="global-header">
+            <h1>Seekra</h1>
+            <span class="error-message">
+                ERROR 404: Page Not Found
+            </span>
+        </header>
+        <RouterLink to="/" id="link">Back to Search</RouterLink>
+    </div>
 </template>
+
+<style scoped>
+.global-header {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 40px;
+}
+
+.global-header h1 {
+    display: inline-block;
+    margin: 0;
+    line-height: 1;
+    background: linear-gradient(
+        to right,
+        var(--primary-color-l-4),
+        var(--primary-color),
+        var(--primary-color-d-4)
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 6rem;
+}
+
+.error-message{
+    margin: 0;
+    font-weight: 600;
+    font-size: 2vw;
+}
+#link {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    padding: 10px 20px;
+    text-decoration: none;
+}
+</style>

src/views/SearchView.vue

@@ -15,23 +15,43 @@ limitations under the License.
 -->
 
 <script setup>
-import Searchbar from '../features/search/components/Searchbar.vue'
+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 () {
+
+};
 </script>
 
 <template>
-    <header class="global-header">
-        <h1>Seekra</h1>
-        <span class="slogan">
-            Built to search.
-        </span>
-    </header>
+    <div class="search-content">
+        <header class="global-header">
+            <h1>Seekra</h1>
+            <span class="slogan">
+                Built to search.
+            </span>
+        </header>
     
-    <form id="search-form">
-        <Searchbar />
-    </form>
+        <div class="search-container">
+            <Searchbar v-model="searchQuery" ref="searchbar" class="search-bar" auto-submit />
+        </div>
+    </div>
 </template>
 
 <style scoped>
+.search-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 60px;
+}
+
 .global-header {
     text-align: center;
     display: flex;
@@ -61,8 +81,14 @@ import Searchbar from '../features/search/components/Searchbar.vue'
     font-size: small;
 }
 
-#search-form {
+.search-container {
     width: 70%;
     max-width: 624px;
 }
+
+@media (max-width: 67.5rem) {
+    .search-container {
+        width: 100%;
+    }
+}
 </style>