From c41234bdf9e3d8e6295fd03619bc6eae7b2ede51 Mon Sep 17 00:00:00 2001 From: andrea Date: Thu, 7 Sep 2023 09:51:36 +0200 Subject: [PATCH] Migrate to Skeleton 2.0 --- data/quizzes/question_1_10.md | 6 -- frontend/package-lock.json | 64 +++++++++++---------- frontend/package.json | 4 +- frontend/package.json.md5 | 2 +- frontend/src/app.postcss | 5 ++ frontend/src/lib/components/QuizCard.svelte | 40 ++++++++++--- frontend/src/routes/+layout.svelte | 11 ++-- frontend/src/routes/+page.svelte | 3 +- frontend/tailwind.config.cjs | 14 ----- frontend/tailwind.config.ts | 31 ++++++++++ 10 files changed, 110 insertions(+), 70 deletions(-) delete mode 100644 data/quizzes/question_1_10.md delete mode 100644 frontend/tailwind.config.cjs create mode 100644 frontend/tailwind.config.ts diff --git a/data/quizzes/question_1_10.md b/data/quizzes/question_1_10.md deleted file mode 100644 index 560a245..0000000 --- a/data/quizzes/question_1_10.md +++ /dev/null @@ -1,6 +0,0 @@ -Se in un circuito sono presenti una ddp pari a 20 V e una corrente pari a 2 A - -* La resistenza complessiva del circuito è pari a 10 ohm -* La resistenza complessiva del circuito è pari a 1 ohm -* La resistenza complessiva del circuito è pari a 10 A (Ampere) -* La resistenza complessiva del circuito è pari a 5 V diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3e19ddd..cea8511 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,12 +10,14 @@ "devDependencies": { "@floating-ui/dom": "^1.4.2", "@playwright/test": "^1.28.1", - "@skeletonlabs/skeleton": "^1.8.0", + "@skeletonlabs/skeleton": "^2.0.0", + "@skeletonlabs/tw-plugin": "^0.1.0", "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-static": "^2.0.2", "@sveltejs/kit": "^1.5.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", + "@types/node": "^20.5.9", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", "autoprefixer": "^10.4.14", @@ -627,22 +629,24 @@ "dev": true }, "node_modules/@skeletonlabs/skeleton": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-1.8.0.tgz", - "integrity": "sha512-dO4ukU34MGUY1yA1Gln+YUFEEew25AHm6GMpbzCOX8p8b9NmVBWiSuF3me9jnbrV15TGJxmUGzdiRN/70b4KIg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.0.0.tgz", + "integrity": "sha512-8SaDK3kEUU57cSb/5a984EbINgnOPzShlkwPkduAhqc71SEqhRvx+RlLEpe1174NAYi00oi//LguIAYuVrSfBA==", "dev": true, "dependencies": { - "esm-env": "1.0.0", - "svelte": "3.58.0" + "esm-env": "1.0.0" + }, + "peerDependencies": { + "svelte": "^3.56.0 || ^4.0.0" } }, - "node_modules/@skeletonlabs/skeleton/node_modules/svelte": { - "version": "3.58.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz", - "integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==", + "node_modules/@skeletonlabs/tw-plugin": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.1.0.tgz", + "integrity": "sha512-ufnm4FS+s/khuho4yJ/uqfW91u2YXnH3E5N541MtX9XjmoimQzYIcxWyTIuX9AM/brIPP6M6l0et3nRx17CRoQ==", "dev": true, - "engines": { - "node": ">= 8" + "peerDependencies": { + "tailwindcss": ">=3.0.0" } }, "node_modules/@sveltejs/adapter-auto": { @@ -791,9 +795,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.3.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz", - "integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==", + "version": "20.5.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz", + "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==", "dev": true }, "node_modules/@types/pug": { @@ -4337,23 +4341,21 @@ "dev": true }, "@skeletonlabs/skeleton": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-1.8.0.tgz", - "integrity": "sha512-dO4ukU34MGUY1yA1Gln+YUFEEew25AHm6GMpbzCOX8p8b9NmVBWiSuF3me9jnbrV15TGJxmUGzdiRN/70b4KIg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.0.0.tgz", + "integrity": "sha512-8SaDK3kEUU57cSb/5a984EbINgnOPzShlkwPkduAhqc71SEqhRvx+RlLEpe1174NAYi00oi//LguIAYuVrSfBA==", "dev": true, "requires": { - "esm-env": "1.0.0", - "svelte": "3.58.0" - }, - "dependencies": { - "svelte": { - "version": "3.58.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz", - "integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==", - "dev": true - } + "esm-env": "1.0.0" } }, + "@skeletonlabs/tw-plugin": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.1.0.tgz", + "integrity": "sha512-ufnm4FS+s/khuho4yJ/uqfW91u2YXnH3E5N541MtX9XjmoimQzYIcxWyTIuX9AM/brIPP6M6l0et3nRx17CRoQ==", + "dev": true, + "requires": {} + }, "@sveltejs/adapter-auto": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz", @@ -4463,9 +4465,9 @@ "dev": true }, "@types/node": { - "version": "20.3.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz", - "integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==", + "version": "20.5.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz", + "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==", "dev": true }, "@types/pug": { diff --git a/frontend/package.json b/frontend/package.json index d67d2f5..e795358 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,12 +16,14 @@ "devDependencies": { "@floating-ui/dom": "^1.4.2", "@playwright/test": "^1.28.1", - "@skeletonlabs/skeleton": "^1.8.0", + "@skeletonlabs/skeleton": "^2.0.0", + "@skeletonlabs/tw-plugin": "^0.1.0", "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-static": "^2.0.2", "@sveltejs/kit": "^1.5.0", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", + "@types/node": "^20.5.9", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", "autoprefixer": "^10.4.14", diff --git a/frontend/package.json.md5 b/frontend/package.json.md5 index e853c53..3da2afb 100755 --- a/frontend/package.json.md5 +++ b/frontend/package.json.md5 @@ -1 +1 @@ -eea8ec923b0db2baba8a6a71055188e7 \ No newline at end of file +f664f5ec1c0767f24447a20e228a8bb5 \ No newline at end of file diff --git a/frontend/src/app.postcss b/frontend/src/app.postcss index ce15868..7000124 100644 --- a/frontend/src/app.postcss +++ b/frontend/src/app.postcss @@ -1,3 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +@tailwind variants; + /*place global styles here */ html, body { diff --git a/frontend/src/lib/components/QuizCard.svelte b/frontend/src/lib/components/QuizCard.svelte index ab87361..604896c 100644 --- a/frontend/src/lib/components/QuizCard.svelte +++ b/frontend/src/lib/components/QuizCard.svelte @@ -4,7 +4,9 @@ import { tick } from 'svelte'; import EditIcon from '$lib/svg/EditIcon.svelte' import DeleteIcon from '$lib/svg/DeleteIcon.svelte' - + import { getModalStore } from '@skeletonlabs/skeleton'; + import type { ModalSettings } from '@skeletonlabs/skeleton'; + export let quiz:models.Quiz @@ -12,12 +14,16 @@ let content: string; let textarea: HTMLTextAreaElement; + const modalStore = getModalStore(); + async function handleKeyDown(event) { if (event.key === 'Escape') { editing = false; try { - const clientQuiz: client.Quiz = await QuizFromMarkdown(content) - await UpdateQuiz(clientQuiz, quiz.id) + if (content != "") { + const clientQuiz: client.Quiz = await QuizFromMarkdown(content) + await UpdateQuiz(clientQuiz, quiz.id) + } } catch (error) { console.log("An error occurred:", error) } @@ -36,12 +42,28 @@ } async function handleDelete() { - try { - await DeleteQuiz(quiz.id) - } catch (error) { - console.log("An error occurred:", error) - } - } + + const modal: ModalSettings = { + type: 'confirm', + // Data + title: 'Please Confirm', + body: 'Are you sure you wish to proceed?', + // TRUE if confirm pressed, FALSE if cancel pressed + response: async (r: boolean) => { + if (r) { + try { + await DeleteQuiz(quiz.id) + content = "" + } catch (error) { + console.log("An error occurred:", error) + } + } else { + } + } + }; + + modalStore.trigger(modal); +} function handleBlur() { editing = false; diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 6a27883..a026360 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -1,18 +1,17 @@ + + diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index f477814..4dbb33e 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -22,9 +22,8 @@ }) async function handleKeyDown(event: any) { - if (event.key === 'Escape') { + if (event.key === 'Escape' && creatingNewQuiz) { creatingNewQuiz = false; - try { const clientQuiz: client.Quiz = await QuizFromMarkdown(newQuizContent) await CreateQuiz(clientQuiz) diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs deleted file mode 100644 index 1a3894d..0000000 --- a/frontend/tailwind.config.cjs +++ /dev/null @@ -1,14 +0,0 @@ -import { join } from 'path' -import forms from '@tailwindcss/forms' -import typography from '@tailwindcss/typography' -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}')], - theme: { - extend: {}, - }, - plugins: [forms,typography,...skeleton()], -} diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts new file mode 100644 index 0000000..4b1fe50 --- /dev/null +++ b/frontend/tailwind.config.ts @@ -0,0 +1,31 @@ +import { join } from 'path'; +import type { Config } from 'tailwindcss'; + +// 1. Import the Skeleton plugin +import { skeleton } from '@skeletonlabs/tw-plugin'; + +const config = { + // 2. Opt for dark mode to be handled via the class method + darkMode: 'class', + content: [ + './src/**/*.{html,js,svelte,ts}', + // 3. Append the path to the Skeleton package + join(require.resolve( + '@skeletonlabs/skeleton'), + '../**/*.{html,js,svelte,ts}' + ) + ], + theme: { + extend: {}, + }, + plugins: [ + skeleton({ + themes: { + // Register each theme within this array: + preset: ["skeleton", "modern", "crimson"] + } + }) + ] +} satisfies Config; + +export default config;