arthur/spanish-learner
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/spanish-learner.git synced 2026-01-14 12:14:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Working

Browse Source
This commit is contained in:
Arthur Danjou
2024-07-30 21:00:50 +02:00
parent 5092005816
commit 78f572d099
13 changed files with 1204 additions and 2808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app.config.ts
View File

@@ -1,6 +0,0 @@
export default defineAppConfig({
ui: {
primary: 'lime',
gray: 'neutral',
},
})

13
app/app.config.ts
View File

@@ -1,9 +1,16 @@
export default defineAppConfig({
ui: {
gray: 'neutral',
primary: 'gray',
icons: {
dynamic: true,
primary: 'red',
container: {
constrained: 'max-w-xl',
padding: 'px-4 sm:px-6 lg:px-8 py-4',
},
divider: {
base: 'flex border-gray-700',
},
},
icon: {
collections: ['heroicons', 'ph'],
},
})

104
app/app.vue
View File

@@ -1,36 +1,104 @@
<script lang="ts" setup>
import { ModalColumns, ModalRows, VerbColumns, VerbRows } from '~~/types'
useHead({
link: [{ rel: 'icon', type: 'image/png', href: '/favicon.ico' }],
title: 'Spanish Learning Process • By Arthur Danjou',
})
const { data: verb, refresh: refreshVerb } = await useAsyncData('verb', async () => $fetch('/api/verb'))
const { data: word, refresh: refreshWord } = await useAsyncData('word', async () => $fetch('/api/word'))
const revealedVerb = ref(false)
async function revealVerb() {
revealedVerb.value = false
await refreshVerb()
}
const revealedWord = ref(false)
async function revealWord() {
revealedWord.value = false
await refreshWord()
}
</script>
<template>
<div>
<NuxtLoadingIndicator color="#808080" />
<NuxtLoadingIndicator />
<UContainer>
<NuxtPage />
<div class="bg-neutral-800 rounded-lg max-h-[96vh] h-[96vh] overflow-scroll">
<div v-if="verb" class="space-y-4 h-1/2 w-2/3 mx-auto flex flex-col justify-center">
<div class="flex gap-2 items-end">
<h3 class="text-xl text-neutral-500">
Verbos:
</h3>
<h1 class="text-3xl font-bold">
{{ verb.verb }}
</h1>
</div>
<div class="flex gap-2 items-end">
<h3 class="text-xl text-neutral-500">
Typo:
</h3>
<h1 class="text-3xl font-bold">
{{ verb.type }}
</h1>
</div>
<div class="flex gap-2 items-end cursor-pointer" @click.prevent="revealedVerb = true">
<h3 class="text-xl text-neutral-500">
Traducion:
</h3>
<h1 class="text-3xl font-bold" :class="revealedVerb ? '' : 'bg-black text-black'">
{{ verb.translation }}
</h1>
</div>
<UButton
color="blue"
variant="solid"
label="Refresh"
:block="true"
@click.prevent="revealVerb()"
/>
</div>
<UDivider class="mt-8 mb-4" label="Palabras" />
<div v-if="word" class="space-y-4 h-1/2 w-2/3 mx-auto flex flex-col justify-center">
<div class="flex gap-2 items-end">
<h3 class="text-xl text-neutral-500">
Palabra:
</h3>
<h1 class="text-3xl font-bold">
{{ word.word }}
</h1>
</div>
<div class="flex gap-2 items-end">
<h3 class="text-xl text-neutral-500">
Tradución:
</h3>
<h1 class="text-3xl font-bold">
{{ word.translation }}
</h1>
</div>
<UButton
color="red"
variant="solid"
label="Refresh"
:block="true"
@click.prevent="revealWord()"
/>
</div>
<UDivider class="mt-8 mb-4" label="Ser, Estar, Tener, Haber" />
<UTable :columns="ModalColumns" :rows="ModalRows" />
<UDivider class="mt-8 mb-4" label="Terminaisons" />
<UTable :columns="VerbColumns" :rows="VerbRows" />
</div>
</UContainer>
</div>
<NuxtPage />
</template>
<style>
body {
font-family: 'DM Sans', sans-serif;
@apply h-full w-full text-neutral-700 dark:text-neutral-300;
}
.page-enter-active,
.page-leave-active {
transition: all 0.2s;
}
.page-leave-to {
opacity: 0;
transform: translateY(-5px);
}
.page-enter-from {
opacity: 0;
transform: translateY(5px);
@apply h-full w-full text-neutral-300;
}
</style>

13
app/pages/index.vue
View File

@@ -1,13 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>
<h1>Home</h1>
</div>
</template>
<style scoped>
</style>

27
nuxt.config.ts
View File

@@ -1,25 +1,12 @@
export default defineNuxtConfig({
future: { compatibilityVersion: 4 },
// Nuxt App
app: {
pageTransition: { name: 'page', mode: 'out-in' },
head: {
templateParams: {
separator: '•',
},
},
},
// Nuxt Modules
modules: [
'@nuxthub/core',
'@nuxt/ui',
'@nuxt/content',
'@vueuse/nuxt',
'@nuxtjs/google-fonts',
'@nuxthq/studio',
'@nuxt/image',
],
// Nuxt Hub
@@ -29,17 +16,10 @@ export default defineNuxtConfig({
analytics: true,
},
// Nuxt Content
content: {
highlight: {
theme: 'github-dark',
},
},
// Nuxt Color Mode
colorMode: {
preference: 'system',
fallback: 'light',
preference: 'dark',
fallback: 'dark',
},
// Nuxt Devtools
@@ -52,7 +32,6 @@ export default defineNuxtConfig({
googleFonts: {
display: 'swap',
families: {
'Inter': [400, 500, 600, 700, 800, 900],
'DM Sans': [400, 500, 600, 700, 800, 900],
},
},
@@ -64,5 +43,5 @@ export default defineNuxtConfig({
},
},
compatibilityDate: '2024-07-23',
compatibilityDate: '2024-07-08',
})

11
package.json
View File

@@ -1,5 +1,5 @@
{
"name": "nuxt-starter",
"name": "spanish-learner",
"type": "module",
"private": true,
"packageManager": "pnpm@9.5.0",
@@ -15,13 +15,10 @@
},
"dependencies": {
"@iconify/json": "^2.2.230",
"@nuxt/content": "^2.13.2",
"@nuxt/image": "^1.7.0",
"@nuxt/ui": "^2.17.0",
"@nuxthq/studio": "^2.0.3",
"@nuxthub/core": "^0.7.1",
"@nuxtjs/google-fonts": "^3.2.0",
"drizzle-orm": "^0.32.1",
"drizzle-orm": "^0.31.4",
"h3-zod": "^0.5.3",
"nuxt": "^3.12.4",
"zod": "^3.23.8"
@@ -30,10 +27,10 @@
"@antfu/eslint-config": "^2.23.2",
"@nuxt/devtools": "^1.3.9",
"@nuxt/ui": "^2.17.0",
"@types/node": "^20.14.11",
"@types/node": "^20.14.12",
"@vueuse/core": "^10.11.0",
"@vueuse/nuxt": "^10.11.0",
"drizzle-kit": "^0.23.0",
"drizzle-kit": "^0.22.8",
"eslint": "^9.7.0",
"typescript": "^5.5.4",
"vue-tsc": "^2.0.28",

3709
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

3
server/api/test.ts
View File

@@ -1,3 +0,0 @@
export default defineEventHandler(() => {
return { hello: 'API' }
})

4
server/api/verb.get.ts Normal file
View File

@@ -0,0 +1,4 @@
export default defineEventHandler(async () => {
const verbs = await useDB().query.verbs.findMany()
return verbs[Math.floor(Math.random() * verbs.length)]
})

4
server/api/word.get.ts Normal file
View File

@@ -0,0 +1,4 @@
export default defineEventHandler(async () => {
const words = await useDB().query.words.findMany()
return words[Math.floor(Math.random() * words.length)]
})

2
server/database/migrations/meta/0001_snapshot.json
View File

@@ -105,4 +105,4 @@
"internal": {
"indexes": {}
}
}
}

2
server/database/migrations/meta/_journal.json
View File

@@ -17,4 +17,4 @@
"breakpoints": true
}
]
}
}

114
types/index.ts
View File

@@ -0,0 +1,114 @@
export const VerbRows = [
{
person: 'yo',
er: 'o',
ir: 'o',
ar: 'o',
},
{
person: 'tu',
er: 'es',
ir: 'es',
ar: 'as',
},
{
person: 'el/ella/usted',
er: 'e',
ir: 'e',
ar: 'a',
},
{
person: 'nosotros/nosotras',
er: 'emos',
ir: 'imos',
ar: 'amos',
},
{
person: 'vosotros/vosotras',
er: 'éis',
ir: 'ís',
ar: 'áis',
},
{
person: 'ellos/ellas/ustedes',
er: 'en',
ir: 'en',
ar: 'an',
},
]
export const VerbColumns = [
{
key: 'person',
},
{
key: 'er',
label: '-ER',
},
{
key: 'ir',
label: '-IR',
},
{
key: 'ar',
label: '-AR',
},
]
export const ModalColumns = [
{
key: 'ser',
label: 'Ser',
},
{
key: 'estar',
label: 'Estar',
},
{
key: 'tener',
label: 'Tener',
},
{
key: 'haber',
label: 'Haber',
},
]
export const ModalRows = [
{
ser: 'soy',
estar: 'estoy',
tener: 'tengo',
haber: 'he',
},
{
ser: 'eres',
estar: 'estás',
tener: 'tienes',
haber: 'has',
},
{
ser: 'es',
estar: 'está',
tener: 'tiene',
haber: 'ha',
},
{
ser: 'somos',
estar: 'estamos',
tener: 'tenemos',
haber: 'hemos',
},
{
ser: 'sois',
estar: 'estáis',
tener: 'tenéis',
haber: 'habéis',
},
{
ser: 'son',
estar: 'están',
tener: 'tienen',
haber: 'han',
},
]