init

2026-02-21 08:05:33 -05:00
parent bba007f1dc
commit 9531953b48
114 changed files with 872 additions and 0 deletions
--- a/frontend/.editorconfig
+++ b/frontend/.editorconfig
@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "unicorn", "oxc", "vue"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,44 @@
+# .
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,30 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+import pluginOxlint from 'eslint-plugin-oxlint'
+import skipFormatting from 'eslint-config-prettier/flat'
+
+export default defineConfig([
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{vue,js,mjs,jsx}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+
+  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
+
+  skipFormatting,
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "linguamate",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "reinstall": "rm -rf node_modules/ package-lock.json && npm install",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "@mdi/font": "^7.4.47",
+    "axios": "^1.13.5",
+    "pinia": "^3.0.4",
+    "primeflex": "^4.0.0",
+    "vue": "^3.5.27",
+    "vue-router": "^5.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.42.0",
+    "eslint-plugin-vue": "~10.7.0",
+    "globals": "^17.3.0",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.42.0",
+    "prettier": "3.8.1",
+    "sass-embedded": "^1.97.3",
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-vue-devtools": "^8.0.5"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,9 @@
+
+<template>
+  <TheMenu />
+  <RouterView />
+</template>
+
+<script setup>
+import TheMenu from '@/components/app/TheMenu.vue'
+</script>
--- a/frontend/src/components/app/TheMenu.vue
+++ b/frontend/src/components/app/TheMenu.vue
@@ -0,0 +1,62 @@
+<template>
+  <Menubar :model="items" class="px-8">
+
+    <!-- Menu links -->
+    <template #item="{ item, props, hasSubmenu }">
+      <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+        <a :href="href" v-bind="props.action" @click="navigate">
+          <span :class="item.icon" />
+          <span>{{ item.label }}</span>
+        </a>
+      </router-link>
+      <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+        <i :class="item.icon" />
+        <span>{{ item.label }}</span>
+        <span v-if="hasSubmenu" class="mdi mdi-chevron-down" />
+      </a>
+    </template>
+
+    <!-- User profile icon -->
+    <template #end>
+      <i class="mdi mdi-account-outline" />
+    </template>
+  </Menubar>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'mdi mdi-home-outline',
+        route: '/'
+    },
+    {
+        label: 'Tools',
+        icon: 'mdi mdi-wrench-outline',
+        route: '/toolkit'
+    },
+    {
+        label: 'Learn',
+        icon: 'mdi mdi-lightbulb-outline',
+        items: [
+            {
+                label: 'Pronunciation',
+                icon: 'mdi mdi-waveform',
+                route: '/speak'
+            },
+            {
+                label: 'Anki Decks',
+                icon: 'mdi mdi-card-multiple-outline',
+                route: '/decks'
+            },
+            {
+                label: 'Self Testing',
+                icon: 'mdi mdi-send-variant-outline',
+                route: '/test'
+            }
+        ]
+    }
+]);
+</script>
--- a/frontend/src/components/decks/CardEdit.vue
+++ b/frontend/src/components/decks/CardEdit.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="grid border-round border-1 border-solid border-700">
+    <div class="col-6">
+      <InputText v-model="model.question" />
+      <br />
+      <InputText v-model="model.answer" />
+    </div>
+    <div class="col-6 flex overflow-x-auto gap-2 p-2">
+      <div v-if="photos.length === 0" @click="searchPhotos">
+        <i class="mdi mdi-image-search-outline" />
+      </div>
+      <img v-for="photo of photos" :key="photo.id" :src="photo.url" class="border-round mr-2 flex-shrink-0" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+// comment-search-outline
+
+import { ref, defineModel } from 'vue'
+import api from '@/js/api'
+
+const photos = ref([])
+
+const model = defineModel()
+
+async function searchPhotos() {
+  let { photos: apiPhotos, ratelimit } = await api.photosearch(model.value.question, model.value.answer)
+  photos.value = apiPhotos;
+}
+</script>
+
+<style scoped>
+img {
+  border: 1px solid gray;
+  height: 100px;
+  width: 100px;
+}
+</style>
--- a/frontend/src/components/decks/PhotoSearch.vue
+++ b/frontend/src/components/decks/PhotoSearch.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="flex">
+      <IconField>
+        <InputText v-model="search" placeholder="Search Pexels" />
+        <InputIcon class="mdi mdi-magnify" />
+      </IconField>
+    </div>
+    <div class="mt-4">
+      <CardEdit
+        v-for="(card, index) of cards"
+        :key="card.id"
+        v-model="cards[index]"
+        class="mb-4"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import api from '@/js/api'
+
+import CardEdit from '@/components/decks/CardEdit.vue';
+
+let i = 0
+const cards = ref([
+  {
+    id: i++,
+    question: 'Cheese',
+    answer: 'Le Fromage'
+  },
+  {
+    id: i++,
+    question: 'Bread',
+    answer: 'Le pain'
+  },
+  {
+    id: i++,
+    question: 'Carrot',
+    answer: 'La carotte'
+  },
+  {
+    id: i++,
+    question: 'Egg',
+    answer: 'L\'œuf'
+  },
+  {
+    id: i++,
+    question: 'Frog',
+    answer: 'La grenouille'
+  }
+])
+</script>
--- a/frontend/src/js/api.js
+++ b/frontend/src/js/api.js
@@ -0,0 +1,20 @@
+import axios from 'axios'
+const client = axios.create({
+  baseURL: 'http://localhost:3000',
+  json: true
+})
+
+async function photosearch(...queries) {
+  let resp = await axios.get('http://localhost:3000/search/photos/', {
+    params: { queries },
+    paramsSerializer: {
+      indexes: true, // use brackets with indexes
+    }
+  })
+  console.log(resp.data.ratelimit)
+  return resp.data
+}
+
+export default {
+  photosearch
+}
--- a/frontend/src/js/utils.js
+++ b/frontend/src/js/utils.js
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,29 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+import PrimeVue from 'primevue/config';
+
+// style
+import Aura from '@primeuix/themes/aura';
+import './style.scss';
+import 'primeflex/primeflex.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(PrimeVue, {
+    // https://primevue.org/theming/styled/
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            // darkModeSelector: 'system',
+            cssLayer: false
+        }
+    }
+ })
+
+app.mount('#app')
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from '../views/Home.vue'
+import Decks from '../views/Decks.vue'
+import Pronunciation from '../views/Pronunciation.vue'
+import Test from '../views/Test.vue'
+import Toolkit from '../views/Toolkit.vue'
+
+const router = createRouter({
+  // https://router.vuejs.org/guide/
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', component: Home },
+    { path: '/toolkit', component: Toolkit },
+    { path: '/speak', component: Pronunciation },
+    { path: '/decks', component: Decks },
+    { path: '/test', component: Test },
+  ],
+})
+
+export default router
--- a/frontend/src/stores/counter.js
+++ b/frontend/src/stores/counter.js
@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -0,0 +1,5 @@
+@import '@mdi/font/css/materialdesignicons.min.css';
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
--- a/frontend/src/views/Decks.vue
+++ b/frontend/src/views/Decks.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <p class="bg-gray-800 px-2 py-3 border-round text-center">
+        Anki Decks
+    </p>
+    <PhotoSearch />
+  </div>
+</template>
+
+<script setup>
+import PhotoSearch from '@/components/decks/PhotoSearch.vue'
+</script>
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -0,0 +1,5 @@
+<template>
+    <p class="bg-gray-800 px-2 py-3 border-round text-center">
+        Home
+    </p>
+</template>
--- a/frontend/src/views/Pronunciation.vue
+++ b/frontend/src/views/Pronunciation.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="bg-gray-800 px-2 py-3 border-round text-center">
+      Pronunciation
+  </p>
+</template>
--- a/frontend/src/views/Test.vue
+++ b/frontend/src/views/Test.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="bg-gray-800 px-2 py-3 border-round text-center">
+      Tests
+  </p>
+</template>
--- a/frontend/src/views/Toolkit.vue
+++ b/frontend/src/views/Toolkit.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="bg-gray-800 px-2 py-3 border-round text-center">
+      Tools
+  </p>
+</template>
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,22 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+import Components from 'unplugin-vue-components/vite';
+import { PrimeVueResolver } from 'unplugin-vue-components/resolvers';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+    Components({ resolvers: [PrimeVueResolver()], }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})