Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Migrate to Vue.js #28

Merged
jakob.scheid merged 22 commits from feature/migrate-to-vue-js into main 2026-05-07 14:20:13 +02:00
Conversation 1 Commits 22 Files Changed 20
+3085 -144
20 changed files with 3085 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -0,0 +1,3 @@
.vscode/
node_modules/
dist/
NOTICE
+8
View File
@@ -0,0 +1,8 @@
Notice
This software is provided "as is", without warranty of any kind.
This software uses the Vue.js framework.
This software makes use of various open-source components.
See THIRD_PARTY_LICENSES for details.
THIRD_PARTY_LICENSES
+1447
View File
File diff suppressed because it is too large Load Diff
index.html
+12
View File
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Seekra</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package-lock.json
Generated
+1442
View File
File diff suppressed because it is too large Load Diff
package.json
+19
View File
@@ -0,0 +1,19 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.32",
"vue-router": "^5.0.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.6",
"vite": "^8.0.10"
}
}
public/.gitkeep
View File
src/App.vue
+11
View File
@@ -0,0 +1,11 @@
<script setup>
import Navbar from './features/nav/components/Navbar.vue';
</script>
<template>
<div class="content-background">
<Navbar />
<router-view />
</div>
</template>
src/assets/.gitkeep
View File
src/components/.gitkeep
View File
src/features/nav/components/Navbar.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<nav class="global-nav">
<span id="logo">Seekra</span>
<ul class="right-links">
</ul>
</nav>
</template>
<style scoped>
.global-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px;
}
.global-nav .right-links {
display: flex;
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.global-nav .right-links a {
text-decoration: none;
color: #000;
}
.global-nav .right-links a:hover{
text-decoration: underline;
}
</style>
src/static/css/main.css → src/features/search/components/Searchbar.vue
+8 -52
View File
@@ -1,57 +1,17 @@
body {
margin: 0;
min-height: 100vh;
background-color: #ffffff;
font-size: 16px;
}
.content-background {
background:
radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.55) 0%, transparent 75%),
linear-gradient(160deg, #c8d8f0, #7aa0d8, #5077C7, #dce8f8);
height: 300px;
display: flex;
flex-direction: column;
}
.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, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 6rem;
}
.slogan{
margin: 0;
font-size: small;
}
form {
display: flex;
justify-content: center;
margin-top: 60px;
width: 100%;
}
<template>
<div class="search-wrapper">
<input type="search" name="search" placeholder="Search..." required />
<button type="submit" class="search-button">Search</button>
</div>
</template>
<style scoped>
.search-wrapper {
--submit-button-padding-y: 8px;
--submit-button-content-height: 18px;
--padding: 4px;
display: flex;
align-items: center;
width: 80%;
border: 1.5px solid #ccc;
box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
@@ -82,8 +42,4 @@ form {
.search-button:hover {
background: #374FA5;
}
footer{
text-align: center;
margin-top: 20px;
}
</style>
src/index.html
-52
View File
@@ -1,52 +0,0 @@
<!DOCTYPE html>
<!--
Copyright 2026 Seekra
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.
-->
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The Seekra search engine">
<title>Seekra</title>
<link rel="stylesheet" href="static/css/main.css" />
<link rel="stylesheet" href="static/css/nav/navbar/navbar.css" />
</head>
<body>
<nav class="global-nav">
<span id="logo">Seekra</span>
<ul>
</ul>
</nav>
<div>
<header class="global-header">
<h1>Seekra</h1>
<span class="slogan">
Built to search.
</span>
</header>
<form id="search-form">
<div class="search-wrapper">
<input type="search" name="search" placeholder="Search..." required />
<button type="submit" class="search-button">Search</button>
</div>
</form>
</div>
<footer>
<p>&copy; 2026 Seekra.</p>
</footer>
</body>
</html>
src/main.js
+6
View File
@@ -0,0 +1,6 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './styles/common.css'
createApp(App).use(router).mount('#app')
src/router/index.js
+18
View File
@@ -0,0 +1,18 @@
import { createRouter, createWebHistory } from 'vue-router'
import SearchView from '../views/SearchView.vue'
const routes = [
{
path: '/',
name: 'search',
component: SearchView
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
src/static/css/nav/navbar/navbar.css
-40
View File
@@ -1,40 +0,0 @@
.global-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px;
}
.global-nav ul {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.global-nav ul a{
text-decoration: none;
color: black;
}
.global-nav ul a:hover{
text-decoration: underline;
}
.global-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
}
.nav-item a {
text-decoration: none;
color: black;
}
.nav-item a:hover {
text-decoration: underline;
}
src/styles/common.css
+8
View File
@@ -0,0 +1,8 @@
body {
margin: 0;
font-size: 16px;
}
#app {
min-height: 100vh;
}
src/styles/main.css
+10
View File
@@ -0,0 +1,10 @@
form {
display: flex;
justify-content: center;
margin-top: 60px;
}
footer{
text-align: center;
margin-top: 20px;
}
src/views/SearchView.vue
+53
View File
@@ -0,0 +1,53 @@
<script setup>
import Searchbar from '../features/search/components/Searchbar.vue'
</script>
<template>
<div class="main-content">
<header class="global-header">
<h1>Seekra</h1>
<span class="slogan">
Built to search.
</span>
</header>
<form id="search-form">
<Searchbar />
</form>
</div>
</template>
<style scoped>
.main-content {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 60px;
}
.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, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 6rem;
}
.slogan{
margin: 0;
font-size: small;
}
</style>
vite.config.js
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
})