diff --git a/.vscode/settings.json b/.vscode/settings.json index 27f795d..f489718 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,5 @@ { - "prettier.documentSelectors": [ - "**/*.svelte" - ], + "prettier.documentSelectors": ["**/*.svelte"], "tailwindCSS.classAttributes": [ "class", "accent", @@ -108,4 +106,4 @@ "width", "zIndex" ] -} \ No newline at end of file +} diff --git a/lessons/lesson-1.json b/lessons/lesson-1.json index 1f84171..023356c 100644 --- a/lessons/lesson-1.json +++ b/lessons/lesson-1.json @@ -1,22 +1,22 @@ { - "id": 1, - "title": "Lesson 1", - "description": "Use basic phrases, talk about food and drink", - "content": [ - { - "type": "match", - "options": { - "man": "misier", - "woman": "madam", - "bread": "dipain", - "girl": "tifi" - } - }, - { - "type": "multipleChoice", - "question": "How do you say 'girl'?", - "answer": "tifi", - "options": ["tifi", "diri", "misier"] - } - ] -} \ No newline at end of file + "id": 1, + "title": "Lesson 1", + "description": "Use basic phrases, talk about food and drink", + "content": [ + { + "type": "match", + "options": { + "man": "misier", + "woman": "madam", + "bread": "dipain", + "girl": "tifi" + } + }, + { + "type": "multipleChoice", + "question": "How do you say 'girl'?", + "answer": "tifi", + "options": ["tifi", "diri", "misier"] + } + ] +} diff --git a/lessons/lesson-2.json b/lessons/lesson-2.json index b2617f0..43cb875 100644 --- a/lessons/lesson-2.json +++ b/lessons/lesson-2.json @@ -1,20 +1,20 @@ { - "id": 2, - "title": "Lesson 2", - "description": "Greet people, use affirmative phrases", - "content": [ - { - "type": "fillBlank", - "question": ["Mo", "Jean"], - "answer": "apel", - "options": ["dipain", "bwar", "apel"], - "translation": "I'm called Jean" - }, - { - "type": "multipleChoice", - "question": "How do you say 'rice'?", - "answer": "diri", - "options": ["tifi", "diri", "misier"] - } - ] -} \ No newline at end of file + "id": 2, + "title": "Lesson 2", + "description": "Greet people, use affirmative phrases", + "content": [ + { + "type": "fillBlank", + "question": ["Mo", "Jean"], + "answer": "apel", + "options": ["dipain", "bwar", "apel"], + "translation": "I'm called Jean" + }, + { + "type": "multipleChoice", + "question": "How do you say 'rice'?", + "answer": "diri", + "options": ["tifi", "diri", "misier"] + } + ] +} diff --git a/lessons/lesson-3.json b/lessons/lesson-3.json index 3964639..3e84672 100644 --- a/lessons/lesson-3.json +++ b/lessons/lesson-3.json @@ -1,20 +1,20 @@ { - "id": 3, - "title": "Lesson 3", - "description": "Say what you don't do, use articles", - "content": [ - { - "type": "fillBlank", - "question": ["Mo", "koné"], - "answer": "pa", - "options": ["pa", "bwar", "delo"], - "translation": "I don't know" - }, - { - "type": "translate", - "question": "A boy", - "answer": "Ene garson", - "options": ["tifi", "Ene", "pa", "garson"] - } - ] -} \ No newline at end of file + "id": 3, + "title": "Lesson 3", + "description": "Say what you don't do, use articles", + "content": [ + { + "type": "fillBlank", + "question": ["Mo", "koné"], + "answer": "pa", + "options": ["pa", "bwar", "delo"], + "translation": "I don't know" + }, + { + "type": "translate", + "question": "A boy", + "answer": "Ene garson", + "options": ["tifi", "Ene", "pa", "garson"] + } + ] +} diff --git a/lessons/lesson-4.json b/lessons/lesson-4.json index 716e5ac..261602e 100644 --- a/lessons/lesson-4.json +++ b/lessons/lesson-4.json @@ -1,20 +1,20 @@ { - "id": 4, - "title": "Lesson 4", - "description": "Discuss food and drink, talk about animals", - "content": [ - { - "type": "fillBlank", - "question": ["Mo", "delo"], - "answer": "bwar", - "options": ["dipain", "bwar", "apel"], - "translation": "I drink water" - }, - { - "type": "multipleChoice", - "question": "How do you say 'rice'?", - "answer": "diri", - "options": ["tifi", "diri", "misier"] - } - ] -} \ No newline at end of file + "id": 4, + "title": "Lesson 4", + "description": "Discuss food and drink, talk about animals", + "content": [ + { + "type": "fillBlank", + "question": ["Mo", "delo"], + "answer": "bwar", + "options": ["dipain", "bwar", "apel"], + "translation": "I drink water" + }, + { + "type": "multipleChoice", + "question": "How do you say 'rice'?", + "answer": "diri", + "options": ["tifi", "diri", "misier"] + } + ] +} diff --git a/src/app.postcss b/src/app.postcss index 7c10188..e0c544a 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -8,4 +8,4 @@ body { font-family: 'Quicksand'; src: url('/fonts/Quicksand.ttf'); font-display: swap; -} \ No newline at end of file +} diff --git a/src/lib/components/HeaderLead.svelte b/src/lib/components/HeaderLead.svelte index e35ad89..18d3622 100644 --- a/src/lib/components/HeaderLead.svelte +++ b/src/lib/components/HeaderLead.svelte @@ -1,22 +1,22 @@
- - Kreolingo -
\ No newline at end of file + + Kreolingo + diff --git a/src/lib/components/HeaderTrail.svelte b/src/lib/components/HeaderTrail.svelte index de18dec..557baac 100644 --- a/src/lib/components/HeaderTrail.svelte +++ b/src/lib/components/HeaderTrail.svelte @@ -1,9 +1,4 @@ - - About - + About \ No newline at end of file + diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index d0fb8e3..c903ec7 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -1,31 +1,31 @@

Lessons


- -

Created by Laurie Lim Sam

-
\ No newline at end of file + +

+ Created by Laurie Lim Sam +

+ diff --git a/src/lib/data/lessons.ts b/src/lib/data/lessons.ts index 1320176..fa199ef 100644 --- a/src/lib/data/lessons.ts +++ b/src/lib/data/lessons.ts @@ -1,33 +1,33 @@ -import fs from "fs"; -import path from "path"; -const lessonsDirectory = path.join(process.cwd(), 'lessons') +import fs from 'fs'; +import path from 'path'; +const lessonsDirectory = path.join(process.cwd(), 'lessons'); export function getAllLessons() { - const fileNames = fs.readdirSync(lessonsDirectory); - const allLessonsData = fileNames.map((fileName: string) => { - // Remove ".json" from file name to get id - const slug = fileName.replace(/\.json$/, ''); + const fileNames = fs.readdirSync(lessonsDirectory); + const allLessonsData = fileNames.map((fileName: string) => { + // Remove ".json" from file name to get id + const slug = fileName.replace(/\.json$/, ''); - const lesson = getLessonBySlug(slug); + const lesson = getLessonBySlug(slug); - return { - slug, - ...lesson, - } - }) - return allLessonsData; + return { + slug, + ...lesson + }; + }); + return allLessonsData; } export function getLessonBySlug(slug: string) { - // Read file content - const fileName = `${slug}.json` - const fullPath = path.join(lessonsDirectory, fileName) - try { - if (fs.existsSync(fullPath)) { - const fileContents = fs.readFileSync(fullPath, 'utf8') - return JSON.parse(fileContents); - } - } catch(err) { - return null - } -} \ No newline at end of file + // Read file content + const fileName = `${slug}.json`; + const fullPath = path.join(lessonsDirectory, fileName); + try { + if (fs.existsSync(fullPath)) { + const fileContents = fs.readFileSync(fullPath, 'utf8'); + return JSON.parse(fileContents); + } + } catch (err) { + return null; + } +} diff --git a/src/lib/exercises/FillBlank.svelte b/src/lib/exercises/FillBlank.svelte index 4ef62de..6ec1e80 100644 --- a/src/lib/exercises/FillBlank.svelte +++ b/src/lib/exercises/FillBlank.svelte @@ -1,57 +1,55 @@

- {question[0]} - - {#if selected} - {selected} - {/if} - - {question[1]} + {question[0]} + + {#if selected} + {selected} + {/if} + + {question[1]}

-
- {#each options as option} - - {/each} -
- +
+ {#each options as option} + + {/each} +
+
- - diff --git a/src/lib/exercises/Match.svelte b/src/lib/exercises/Match.svelte index a4e5d37..7a2e4cc 100644 --- a/src/lib/exercises/Match.svelte +++ b/src/lib/exercises/Match.svelte @@ -1,79 +1,87 @@
-
- {#each keys as key} - - {/each} -
-
- {#each values as value} - - {/each} -
+
+ {#each keys as key} + + {/each} +
+
+ {#each values as value} + + {/each} +
- -
\ No newline at end of file + + diff --git a/src/lib/exercises/MultipleChoice.svelte b/src/lib/exercises/MultipleChoice.svelte index 0d67f37..1770911 100644 --- a/src/lib/exercises/MultipleChoice.svelte +++ b/src/lib/exercises/MultipleChoice.svelte @@ -1,47 +1,44 @@ -

{question} -

+

{question}

-
- {#each options as option} - - {/each} -
- -
\ No newline at end of file +
+ {#each options as option} + + {/each} +
+ + diff --git a/src/lib/exercises/Translate.svelte b/src/lib/exercises/Translate.svelte index b7ba9e6..3d12294 100644 --- a/src/lib/exercises/Translate.svelte +++ b/src/lib/exercises/Translate.svelte @@ -1,77 +1,96 @@

{question}

-
- {#each selected as word} - - {word} - - {/each} -
+
+ {#each selected as word} + + {word} + + {/each} +
-
- {#each options as option} - - {/each} -
- +
+ {#each options as option} + + {/each} +
+
diff --git a/src/lib/utils/helpers.ts b/src/lib/utils/helpers.ts index 8b356ce..0f3d195 100644 --- a/src/lib/utils/helpers.ts +++ b/src/lib/utils/helpers.ts @@ -1,16 +1,15 @@ - export const randomize = (array: Array) => { - let currentIndex = array.length, randomIndex; - // While there remain elements to shuffle. + let currentIndex = array.length, + randomIndex; + // While there remain elements to shuffle. - while (currentIndex != 0) { - // Pick a remaining element. - randomIndex = Math.floor(Math.random() * currentIndex); - currentIndex--; + while (currentIndex != 0) { + // Pick a remaining element. + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; - // And swap it with the current element. - [array[currentIndex], array[randomIndex]] = [ - array[randomIndex], array[currentIndex]]; - } - return array; -} \ No newline at end of file + // And swap it with the current element. + [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; + } + return array; +}; diff --git a/src/params/lesson.js b/src/params/lesson.js index 0eca8b3..dedd037 100644 --- a/src/params/lesson.js +++ b/src/params/lesson.js @@ -1,4 +1,4 @@ /** @type {import('@sveltejs/kit').ParamMatcher} */ export function match(param) { - return /^lesson-\d+$/.test(param); -} \ No newline at end of file + return /^lesson-\d+$/.test(param); +} diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index e8b3ce9..860a887 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -1,16 +1,17 @@

Oops! Page not found!

-

It looks like you're trying to access a page that has been deleted or never even existed.

- - Back to home - +

+ It looks like you're trying to access a page that has been deleted or never even existed. +

+ Back to home
+ \ No newline at end of file + .text { + @apply mt-4 text-xl leading-relaxed; + } + diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js index 697c327..141719f 100644 --- a/src/routes/+layout.server.js +++ b/src/routes/+layout.server.js @@ -2,7 +2,7 @@ import { getAllLessons } from '$lib/data/lessons'; /** @type {import('./$types').LayoutServerLoad} */ export async function load() { - return { - lessons: await getAllLessons(), - }; -} \ No newline at end of file + return { + lessons: await getAllLessons() + }; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 290564f..4cb4898 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,26 +1,26 @@ - @@ -46,7 +46,7 @@ - + diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js index 2066116..cb0d51b 100644 --- a/src/routes/+page.server.js +++ b/src/routes/+page.server.js @@ -1,8 +1,8 @@ -import { getAllLessons } from '$lib/data/lessons' +import { getAllLessons } from '$lib/data/lessons'; /** @type {import('./$types').PageServerLoad} */ export async function load() { - return { - lessons: getAllLessons(), - } -} \ No newline at end of file + return { + lessons: getAllLessons() + }; +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 6268551..fa9d738 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,15 +1,14 @@

Welcome to Kreolingo

- A Duolingo ripoff to help you learn Mauritian Creole. - I made this application to help my partner learn my mother tongue, maybe it - can help you too. + A Duolingo ripoff to help you learn Mauritian Creole. I made this application to help my + partner learn my mother tongue, maybe it can help you too.

{#each data.lessons as lesson} diff --git a/src/routes/[slug=lesson]/+error.svelte b/src/routes/[slug=lesson]/+error.svelte index 9698497..a2c3cde 100644 --- a/src/routes/[slug=lesson]/+error.svelte +++ b/src/routes/[slug=lesson]/+error.svelte @@ -1,18 +1,19 @@

{$page.error.message}

-

You've either reached the end or you tried to access a lesson that does not exist.

-

This is a work in progress so there will be more lessons in the future.

-

Meanwhile, go back and practice previous lessons to solidify your learnings.

- - Back to home - +

+ You've either reached the end or you tried to access a lesson that does not exist. +

+

This is a work in progress so there will be more lessons in the future.

+

Meanwhile, go back and practice previous lessons to solidify your learnings.

+ Back to home
+ \ No newline at end of file + .text { + @apply mt-4 text-xl leading-relaxed; + } + diff --git a/src/routes/[slug=lesson]/+page.server.js b/src/routes/[slug=lesson]/+page.server.js index ba28478..ef6b74d 100644 --- a/src/routes/[slug=lesson]/+page.server.js +++ b/src/routes/[slug=lesson]/+page.server.js @@ -1,19 +1,19 @@ -import { getLessonBySlug } from '$lib/data/lessons' -import { error } from '@sveltejs/kit' +import { getLessonBySlug } from '$lib/data/lessons'; +import { error } from '@sveltejs/kit'; /** @type {import('./$types').PageServerLoad} */ export async function load({ params }) { - const { slug } = params + const { slug } = params; - // get post with metadata - const lesson = getLessonBySlug(slug) + // get post with metadata + const lesson = getLessonBySlug(slug); - if (!lesson) { - throw error(404, 'This lesson does not exist.') - } + if (!lesson) { + throw error(404, 'This lesson does not exist.'); + } - return { - ...lesson, - lock: true, - } -} \ No newline at end of file + return { + ...lesson, + lock: true + }; +} diff --git a/src/routes/[slug=lesson]/+page.svelte b/src/routes/[slug=lesson]/+page.svelte index 90e222b..4e8dfe6 100644 --- a/src/routes/[slug=lesson]/+page.svelte +++ b/src/routes/[slug=lesson]/+page.svelte @@ -10,52 +10,51 @@ const options = { fillBlank: { component: FillBlank, - header: "Select the missing word", + header: 'Select the missing word' }, match: { component: Match, - header: "Tap the matching pairs", + header: 'Tap the matching pairs' }, - multipleChoice: { + multipleChoice: { component: MultipleChoice, - header: "Select the correct option", + header: 'Select the correct option' }, translate: { component: Translate, - header: "Translate this sentence", - }, - } + header: 'Translate this sentence' + } + }; const unlockNext = (event) => { const t = { background: `variant-filled-${event.detail.status}`, - message: event.detail.message, + message: event.detail.message }; toastStore.trigger(t); lockedState = false; - } + }; - const onNexthandler = () => lockedState = true; + const onNexthandler = () => (lockedState = true); /** @type {HTMLDivElement} */ let container; const onCompleteHandler = () => { const modal = { - type: "confirm", - title: "Congratulations!", + type: 'confirm', + title: 'Congratulations!', body: `You have completed ${data.title.toLowerCase()}. Click on continue to go to the next lesson.`, image: 'https://i.imgur.com/WOgTG96.gif', response: () => { container.scrollIntoView(); - goto(`/lesson-${data.id + 1}`) - }, + goto(`/lesson-${data.id + 1}`); + } }; modalStore.trigger(modal); - } - + }; - export let data; + export let data; $: exercises = randomize(data.content); $: lockedState = data.lock; @@ -64,20 +63,20 @@

{data.title}

{data.description}

- {#key exercises } - + {#key exercises} + {#each exercises as exercise} {options[exercise.type].header} + /> {/each} {/key} - +
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 12b7d39..552c6a6 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,12 +1,20 @@
-

About Kreolingo

-

- Inspired by the renowned language-learning platform Duolingo, Kreolingo is a user-friendly web app designed to help people learn Mauritian Creole. -

-

- Kreolingo was born out of love and a desire to connect. I wanted to help my partner learn my mother tongue. I believe that learning each other's languages can create a profound bond, and I want to make that possible for everyone. -

-

- Whether you are a fellow Mauritian or a curious learner from afar, I invite you to contribute – be it by adding lessons, improving the app, or just sharing your ideas. -

-
\ No newline at end of file +

About Kreolingo

+

+ Inspired by the renowned language-learning platform Duolingo, Kreolingo is a user-friendly web app designed to help people learn Mauritian Creole. +

+

+ Kreolingo was born out of love and a desire to connect. I wanted to help my partner learn my + mother tongue. I believe that learning each other's languages can create a profound bond, and I + want to make that possible for everyone. +

+

+ Whether you are a fellow Mauritian or a curious learner from afar, I invite you to contribute – be it by adding lessons, improving the app, or just sharing your ideas. +

+
diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 2fc6955..2377eb3 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,13 +1,16 @@ -import { join } from 'path' -import forms from '@tailwindcss/forms' -import skeleton from '@skeletonlabs/skeleton/tailwind/skeleton.cjs' +import { join } from 'path'; +import forms from '@tailwindcss/forms'; +import skeleton from '@skeletonlabs/skeleton/tailwind/skeleton.cjs'; /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: 'class', - content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')], + content: [ + './src/**/*.{html,js,svelte,ts}', + join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}') + ], theme: { - extend: {}, + extend: {} }, - plugins: [forms,...skeleton()], -} + plugins: [forms, ...skeleton()] +};