⬆️ Updated SvelteKit

frontend/package.json

@@ -21,7 +21,7 @@
 		"@sentry/browser": "^7.5.1",
 		"@sentry/tracing": "^7.5.1",
 		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/adapter-node": "1.0.0-next.78",
+		"@sveltejs/adapter-node": "^1.0.0-next.83",
 		"@sveltejs/kit": "next",
 		"@tailwindcss/typography": "^0.5.3",
 		"@types/cookie": "^0.5.1",
@@ -54,6 +54,7 @@
 		"mapbox-gl": "^2.9.1",
 		"plausible-tracker": "^0.3.8",
 		"postcss": "^8.4.14",
+		"postcss-import": "^14.1.0",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
@@ -70,7 +71,7 @@
 		"tslib": "^2.4.0",
 		"typescript": "~4.7.4",
 		"ua-parser-js": "^1.0.2",
-		"vite": "^2.9.14",
+		"vite": "3",
 		"vite-plugin-iso-import": "^0.1.3",
 		"yup": "^0.32.11"
 	},

frontend/postcss.config.cjs

@@ -7,11 +7,13 @@
 const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
+const postcss_import = require('postcss-import');
 
 const config = {
 	plugins: [
 		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
 		tailwindcss(),
+		postcss_import(),
 		//But others, like autoprefixer, need to run after,
 		autoprefixer,
 		cssnano({ preset: 'default' })

frontend/src/app.css

@@ -3,12 +3,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-
+@import 'tippy.js/animations/perspective-subtle.css';
+@import 'tippy.js/dist/tippy.css';
 /* Write your global styles here, in PostCSS syntax */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-/*@fontsource/marck-script;*/
 
 .marck-script {
 	font-family: 'Marck Script';

frontend/src/lib/editor/card.svelte

@@ -12,8 +12,6 @@
 	import Spinner from '../Spinner.svelte';
 	import { mint } from '$lib/hashcash';
 	import { createTippy } from 'svelte-tippy';
-	import 'tippy.js/animations/perspective-subtle.css';
-	import 'tippy.js/dist/tippy.css';
 	import { getLocalization } from '$lib/i18n';
 
 	const { t } = getLocalization();

frontend/src/lib/editor/sidebar.svelte

@@ -9,8 +9,6 @@
 	import { reach } from 'yup';
 	import { ABCDQuestionSchema, dataSchema } from '../yupSchemas';
 	import { createTippy } from 'svelte-tippy';
-	import 'tippy.js/animations/perspective-subtle.css';
-	import 'tippy.js/dist/tippy.css';
 
 	export let data: EditorData;
 	export let selected_question = -1;

frontend/src/lib/navbar.svelte

@@ -8,8 +8,6 @@
 	import { getLocalization } from '$lib/i18n';
 	import { signedIn, pathname } from '$lib/stores';
 	import { createTippy } from 'svelte-tippy';
-	import 'tippy.js/animations/perspective-subtle.css';
-	import 'tippy.js/dist/tippy.css';
 	import { browser } from '$app/env';
 
 	const tippy = createTippy({
@@ -21,12 +19,8 @@
 	const { t } = getLocalization();
 
 	let openMenu = true;
-	let closeMenu = false;
-	let menuItems = false;
 	const toggleMenu = () => {
 		openMenu = !openMenu;
-		closeMenu = !closeMenu;
-		menuItems = !menuItems;
 	};
 	let darkMode = false;
 	if (browser) {
@@ -82,7 +76,7 @@
 		<button
 			class="hidden"
 			id="close-menu"
-			class:hidden={!closeMenu}
+			class:hidden={openMenu}
 			on:click={toggleMenu}
 			aria-label="Close navbar"
 		>
@@ -104,11 +98,7 @@
 		</button>
 	</section>
 
-	<ul
+	<ul id="menu-items" class="lg:flex w-full flex-col lg:flex-row lg:pl-6" class:hidden={openMenu}>
-		id="menu-items"
-		class="lg:flex w-full flex-col lg:flex-row lg:pl-6"
-		class:hidden={!menuItems}
-	>
 		{#if $signedIn}
 			<li class="py-2">
 				<a

frontend/src/lib/view_quiz/imported_or_not.svelte

@@ -5,8 +5,6 @@
   -->
 <script lang="ts">
 	import { createTippy } from 'svelte-tippy';
-	import 'tippy.js/animations/perspective-subtle.css';
-	import 'tippy.js/dist/tippy.css';
 
 	export let imported: boolean | undefined;
 	const tippy = createTippy({

frontend/src/routes/account/register.svelte

@@ -21,7 +21,6 @@
 	import { validateSchema } from '@felte/validator-yup';
 	import { navbarVisible } from '$lib/stores';
 	import Footer from '$lib/footer.svelte';
-	import 'tippy.js/dist/tippy.css';
 
 	const { t } = getLocalization();
 	import reporter from '@felte/reporter-tippy';

frontend/src/routes/view/[quiz_id].svelte

@@ -31,8 +31,6 @@
 	import { getLocalization } from '$lib/i18n';
 	import CollapsSection from '$lib/collapsible.svelte';
 	import { createTippy } from 'svelte-tippy';
-	import 'tippy.js/animations/perspective-subtle.css';
-	import 'tippy.js/dist/tippy.css';
 	import ImportedOrNot from '$lib/view_quiz/imported_or_not.svelte';
 
 	const tippy = createTippy({

frontend/vite.config.js

@@ -3,8 +3,14 @@ import { sveltekit } from '@sveltejs/kit/vite';
 /** @type {import('vite').UserConfig} */
 const config = {
 	plugins: [sveltekit()],
+	server: {
+		port: 3000
+	},
+	preview: {
+		port: 3000
+	},
 	optimizeDeps: {
-		include: ['swiper']
+		include: ['swiper', 'tippy.js']
 	},
 	build: {
 		sourcemap: true