Migrate to Skeleton 2.0

data/quizzes/question_1_10.md

@@ -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

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",
+			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-1.8.0.tgz",
+			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.0.0.tgz",
-			"integrity": "sha512-dO4ukU34MGUY1yA1Gln+YUFEEew25AHm6GMpbzCOX8p8b9NmVBWiSuF3me9jnbrV15TGJxmUGzdiRN/70b4KIg==",
+			"integrity": "sha512-8SaDK3kEUU57cSb/5a984EbINgnOPzShlkwPkduAhqc71SEqhRvx+RlLEpe1174NAYi00oi//LguIAYuVrSfBA==",
 			"dev": true,
 			"dependencies": {
-				"esm-env": "1.0.0",
+				"esm-env": "1.0.0"
-				"svelte": "3.58.0"
+			},
+			"peerDependencies": {
+				"svelte": "^3.56.0 || ^4.0.0"
 			}
 		},
-		"node_modules/@skeletonlabs/skeleton/node_modules/svelte": {
+		"node_modules/@skeletonlabs/tw-plugin": {
-			"version": "3.58.0",
+			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.58.0.tgz",
+			"resolved": "https://registry.npmjs.org/@skeletonlabs/tw-plugin/-/tw-plugin-0.1.0.tgz",
-			"integrity": "sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==",
+			"integrity": "sha512-ufnm4FS+s/khuho4yJ/uqfW91u2YXnH3E5N541MtX9XjmoimQzYIcxWyTIuX9AM/brIPP6M6l0et3nRx17CRoQ==",
 			"dev": true,
-			"engines": {
+			"peerDependencies": {
-				"node": ">= 8"
+				"tailwindcss": ">=3.0.0"
 			}
 		},
 		"node_modules/@sveltejs/adapter-auto": {
@@ -791,9 +795,9 @@
 			"dev": true
 		},
 		"node_modules/@types/node": {
-			"version": "20.3.2",
+			"version": "20.5.9",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
-			"integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==",
+			"integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
 			"dev": true
 		},
 		"node_modules/@types/pug": {
@@ -4337,23 +4341,21 @@
 			"dev": true
 		},
 		"@skeletonlabs/skeleton": {
-			"version": "1.8.0",
+			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-1.8.0.tgz",
+			"resolved": "https://registry.npmjs.org/@skeletonlabs/skeleton/-/skeleton-2.0.0.tgz",
-			"integrity": "sha512-dO4ukU34MGUY1yA1Gln+YUFEEew25AHm6GMpbzCOX8p8b9NmVBWiSuF3me9jnbrV15TGJxmUGzdiRN/70b4KIg==",
+			"integrity": "sha512-8SaDK3kEUU57cSb/5a984EbINgnOPzShlkwPkduAhqc71SEqhRvx+RlLEpe1174NAYi00oi//LguIAYuVrSfBA==",
 			"dev": true,
 			"requires": {
-				"esm-env": "1.0.0",
+				"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
-				}
 			}
 		},
+		"@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",
+			"version": "20.5.9",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
-			"integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==",
+			"integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
 			"dev": true
 		},
 		"@types/pug": {

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",

frontend/package.json.md5

@@ -1 +1 @@
-eea8ec923b0db2baba8a6a71055188e7
+f664f5ec1c0767f24447a20e228a8bb5

frontend/src/app.postcss

@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 /*place global styles here */
 html,
 body {

frontend/src/lib/components/QuizCard.svelte

@@ -4,6 +4,8 @@
  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)
+	     if (content != "") {
-	     await UpdateQuiz(clientQuiz, quiz.id)
+		 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)
+     const modal: ModalSettings = {
-     } catch (error) {
+	 type: 'confirm',
-	 console.log("An error occurred:", error)
+	 // 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;

frontend/src/routes/+layout.svelte

@@ -1,18 +1,17 @@
 <script lang='ts'>
- // The ordering of these imports is critical to your app working properly
- import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
- // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
- import '@skeletonlabs/skeleton/styles/skeleton.css';
  // Most of your app wide CSS should be put in this file
  import '../app.postcss';
  import { AppShell, AppBar, AppRail, AppRailTile, AppRailAnchor } from '@skeletonlabs/skeleton';
- 
+ import { initializeStores } from '@skeletonlabs/skeleton';
+ import { Modal } from '@skeletonlabs/skeleton';
  
  let currentTile;
 
- 
+ initializeStores();
 </script>
 
+<Modal/>
+
 <!-- App Shell -->
 <AppShell>
     <svelte:fragment slot="header">

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)

frontend/tailwind.config.cjs

@@ -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()],
-}

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;