From 6ba793c675b92bb89afa7811b62f34dec7c15d37 Mon Sep 17 00:00:00 2001
From: umaranis <mail@umaranis.com>
Date: Sat, 6 Apr 2024 13:54:47 +1100
Subject: [PATCH] build: sveltekit - fix image path and config

---
 demos/sveltekit/src/global.css   | 194 ++++++++++++++++---------------
 demos/sveltekit/svelte.config.js |  17 +--
 2 files changed, 110 insertions(+), 101 deletions(-)

diff --git a/demos/sveltekit/src/global.css b/demos/sveltekit/src/global.css
index 995a4e3b..1f8a5266 100644
--- a/demos/sveltekit/src/global.css
+++ b/demos/sveltekit/src/global.css
@@ -10,7 +10,11 @@
 
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular',
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    '.SFNSText-Regular',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -229,19 +233,19 @@ pre::-webkit-scrollbar-thumb {
 }
 
 #options-button::after {
-  background-image: url(images/icons/gear.svg);
+  background-image: url(/images/icons/gear.svg);
 }
 
 #test-recorder-button::after {
-  background-image: url(images/icons/journal-code.svg);
+  background-image: url(/images/icons/journal-code.svg);
 }
 
 #paste-log-button::after {
-  background-image: url(images/icons/clipboard.svg);
+  background-image: url(/images/icons/clipboard.svg);
 }
 
 #docs-button::after {
-  background-image: url(images/icons/file-earmark-text.svg);
+  background-image: url(/images/icons/file-earmark-text.svg);
 }
 
 #test-recorder-button-snapshot {
@@ -249,15 +253,15 @@ pre::-webkit-scrollbar-thumb {
 }
 
 #test-recorder-button-snapshot::after {
-  background-image: url(images/icons/camera.svg);
+  background-image: url(/images/icons/camera.svg);
 }
 
 #test-recorder-button-copy::after {
-  background-image: url(images/icons/clipboard.svg);
+  background-image: url(/images/icons/clipboard.svg);
 }
 
 #test-recorder-button-download::after {
-  background-image: url(images/icons/download.svg);
+  background-image: url(/images/icons/download.svg);
 }
 
 .typeahead-popover {
@@ -369,188 +373,188 @@ pre::-webkit-scrollbar-thumb {
 }
 
 i.palette {
-  background-image: url(images/icons/palette.svg);
+  background-image: url(/images/icons/palette.svg);
 }
 
 i.bucket {
-  background-image: url(images/icons/paint-bucket.svg);
+  background-image: url(/images/icons/paint-bucket.svg);
 }
 
 i.bold {
-  background-image: url(images/icons/type-bold.svg);
+  background-image: url(/images/icons/type-bold.svg);
 }
 
 i.italic {
-  background-image: url(images/icons/type-italic.svg);
+  background-image: url(/images/icons/type-italic.svg);
 }
 
 i.clear {
-  background-image: url(images/icons/trash.svg);
+  background-image: url(/images/icons/trash.svg);
 }
 
 i.code {
-  background-image: url(images/icons/code.svg);
+  background-image: url(/images/icons/code.svg);
 }
 
 i.underline {
-  background-image: url(images/icons/type-underline.svg);
+  background-image: url(/images/icons/type-underline.svg);
 }
 
 i.strikethrough {
-  background-image: url(images/icons/type-strikethrough.svg);
+  background-image: url(/images/icons/type-strikethrough.svg);
 }
 
 i.subscript {
-  background-image: url(images/icons/type-subscript.svg);
+  background-image: url(/images/icons/type-subscript.svg);
 }
 
 i.superscript {
-  background-image: url(images/icons/type-superscript.svg);
+  background-image: url(/images/icons/type-superscript.svg);
 }
 
 i.link {
-  background-image: url(images/icons/link.svg);
+  background-image: url(/images/icons/link.svg);
 }
 
 i.horizontal-rule {
-  background-image: url(images/icons/horizontal-rule.svg);
+  background-image: url(/images/icons/horizontal-rule.svg);
 }
 
 .icon.plus {
-  background-image: url(images/icons/plus.svg);
+  background-image: url(/images/icons/plus.svg);
 }
 
 .icon.caret-right {
-  background-image: url(images/icons/caret-right-fill.svg);
+  background-image: url(/images/icons/caret-right-fill.svg);
 }
 
 .icon.dropdown-more {
-  background-image: url(images/icons/dropdown-more.svg);
+  background-image: url(/images/icons/dropdown-more.svg);
 }
 
 .icon.font-color {
-  background-image: url(images/icons/font-color.svg);
+  background-image: url(/images/icons/font-color.svg);
 }
 
 .icon.font-family {
-  background-image: url(images/icons/font-family.svg);
+  background-image: url(/images/icons/font-family.svg);
 }
 
 .icon.bg-color {
-  background-image: url(images/icons/bg-color.svg);
+  background-image: url(/images/icons/bg-color.svg);
 }
 
 i.image {
-  background-image: url(images/icons/file-image.svg);
+  background-image: url(/images/icons/file-image.svg);
 }
 
 i.table {
-  background-image: url(images/icons/table.svg);
+  background-image: url(/images/icons/table.svg);
 }
 
 i.close {
-  background-image: url(images/icons/close.svg);
+  background-image: url(/images/icons/close.svg);
 }
 
 i.figma {
-  background-image: url(images/icons/figma.svg);
+  background-image: url(/images/icons/figma.svg);
 }
 
 i.poll {
-  background-image: url(images/icons/card-checklist.svg);
+  background-image: url(/images/icons/card-checklist.svg);
 }
 
 i.tweet {
-  background-image: url(images/icons/tweet.svg);
+  background-image: url(/images/icons/tweet.svg);
 }
 
 i.youtube {
-  background-image: url(images/icons/youtube.svg);
+  background-image: url(/images/icons/youtube.svg);
 }
 
 .icon.left-align,
 i.left-align {
-  background-image: url(images/icons/text-left.svg);
+  background-image: url(/images/icons/text-left.svg);
 }
 
 i.center-align {
-  background-image: url(images/icons/text-center.svg);
+  background-image: url(/images/icons/text-center.svg);
 }
 
 i.right-align {
-  background-image: url(images/icons/text-right.svg);
+  background-image: url(/images/icons/text-right.svg);
 }
 
 i.justify-align {
-  background-image: url(images/icons/justify.svg);
+  background-image: url(/images/icons/justify.svg);
 }
 
 i.indent {
-  background-image: url(images/icons/indent.svg);
+  background-image: url(/images/icons/indent.svg);
 }
 
 i.markdown {
-  background-image: url(images/icons/markdown.svg);
+  background-image: url(/images/icons/markdown.svg);
 }
 
 i.outdent {
-  background-image: url(images/icons/outdent.svg);
+  background-image: url(/images/icons/outdent.svg);
 }
 
 i.undo {
-  background-image: url(images/icons/arrow-counterclockwise.svg);
+  background-image: url(/images/icons/arrow-counterclockwise.svg);
 }
 
 i.redo {
-  background-image: url(images/icons/arrow-clockwise.svg);
+  background-image: url(/images/icons/arrow-clockwise.svg);
 }
 
 i.sticky {
-  background-image: url(images/icons/sticky.svg);
+  background-image: url(/images/icons/sticky.svg);
 }
 
 i.mic {
-  background-image: url(images/icons/mic.svg);
+  background-image: url(/images/icons/mic.svg);
 }
 
 i.import {
-  background-image: url(images/icons/upload.svg);
+  background-image: url(/images/icons/upload.svg);
 }
 
 i.export {
-  background-image: url(images/icons/download.svg);
+  background-image: url(/images/icons/download.svg);
 }
 
 i.diagram-2 {
-  background-image: url(images/icons/diagram-2.svg);
+  background-image: url(/images/icons/diagram-2.svg);
 }
 
 i.user {
-  background-image: url(images/icons/user.svg);
+  background-image: url(/images/icons/user.svg);
 }
 
 i.equation {
-  background-image: url(images/icons/plus-slash-minus.svg);
+  background-image: url(/images/icons/plus-slash-minus.svg);
 }
 
 i.gif {
-  background-image: url(images/icons/filetype-gif.svg);
+  background-image: url(/images/icons/filetype-gif.svg);
 }
 
 i.copy {
-  background-image: url(images/icons/copy.svg);
+  background-image: url(/images/icons/copy.svg);
 }
 
 i.success {
-  background-image: url(images/icons/success.svg);
+  background-image: url(/images/icons/success.svg);
 }
 
 i.prettier {
-  background-image: url(images/icons/prettier.svg);
+  background-image: url(/images/icons/prettier.svg);
 }
 
 i.prettier-error {
-  background-image: url(images/icons/prettier-error.svg);
+  background-image: url(/images/icons/prettier-error.svg);
 }
 
 .link-editor .button.active,
@@ -595,7 +599,7 @@ i.prettier-error {
 }
 
 .link-editor div.link-edit {
-  background-image: url(images/icons/pencil-fill.svg);
+  background-image: url(/images/icons/pencil-fill.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
@@ -609,7 +613,7 @@ i.prettier-error {
 }
 
 .link-editor div.link-cancel {
-  background-image: url(images/icons/close.svg);
+  background-image: url(/images/icons/close.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
@@ -624,7 +628,7 @@ i.prettier-error {
 }
 
 .link-editor div.link-confirm {
-  background-image: url(images/icons/success-alt.svg);
+  background-image: url(/images/icons/success-alt.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
@@ -717,31 +721,31 @@ i.prettier-error {
 }
 
 #block-controls span.block-type.paragraph {
-  background-image: url(images/icons/text-paragraph.svg);
+  background-image: url(/images/icons/text-paragraph.svg);
 }
 
 #block-controls span.block-type.h1 {
-  background-image: url(images/icons/type-h1.svg);
+  background-image: url(/images/icons/type-h1.svg);
 }
 
 #block-controls span.block-type.h2 {
-  background-image: url(images/icons/type-h2.svg);
+  background-image: url(/images/icons/type-h2.svg);
 }
 
 #block-controls span.block-type.quote {
-  background-image: url(images/icons/chat-square-quote.svg);
+  background-image: url(/images/icons/chat-square-quote.svg);
 }
 
 #block-controls span.block-type.ul {
-  background-image: url(images/icons/list-ul.svg);
+  background-image: url(/images/icons/list-ul.svg);
 }
 
 #block-controls span.block-type.ol {
-  background-image: url(images/icons/list-ol.svg);
+  background-image: url(/images/icons/list-ol.svg);
 }
 
 #block-controls span.block-type.code {
-  background-image: url(images/icons/code.svg);
+  background-image: url(/images/icons/code.svg);
 }
 
 .characters-limit {
@@ -762,7 +766,9 @@ i.prettier-error {
   z-index: 10;
   display: block;
   position: fixed;
-  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   border-radius: 8px;
   min-height: 40px;
@@ -851,54 +857,54 @@ i.prettier-error {
 }
 
 .icon.paragraph {
-  background-image: url(images/icons/text-paragraph.svg);
+  background-image: url(/images/icons/text-paragraph.svg);
 }
 
 .icon.h1 {
-  background-image: url(images/icons/type-h1.svg);
+  background-image: url(/images/icons/type-h1.svg);
 }
 
 .icon.h2 {
-  background-image: url(images/icons/type-h2.svg);
+  background-image: url(/images/icons/type-h2.svg);
 }
 
 .icon.h3 {
-  background-image: url(images/icons/type-h3.svg);
+  background-image: url(/images/icons/type-h3.svg);
 }
 
 .icon.h4 {
-  background-image: url(images/icons/type-h4.svg);
+  background-image: url(/images/icons/type-h4.svg);
 }
 
 .icon.h5 {
-  background-image: url(images/icons/type-h5.svg);
+  background-image: url(/images/icons/type-h5.svg);
 }
 
 .icon.h6 {
-  background-image: url(images/icons/type-h6.svg);
+  background-image: url(/images/icons/type-h6.svg);
 }
 
 .icon.bullet-list,
 .icon.bullet {
-  background-image: url(images/icons/list-ul.svg);
+  background-image: url(/images/icons/list-ul.svg);
 }
 
 .icon.check-list,
 .icon.check {
-  background-image: url(images/icons/square-check.svg);
+  background-image: url(/images/icons/square-check.svg);
 }
 
 .icon.numbered-list,
 .icon.number {
-  background-image: url(images/icons/list-ol.svg);
+  background-image: url(/images/icons/list-ol.svg);
 }
 
 .icon.quote {
-  background-image: url(images/icons/chat-square-quote.svg);
+  background-image: url(/images/icons/chat-square-quote.svg);
 }
 
 .icon.code {
-  background-image: url(images/icons/code.svg);
+  background-image: url(/images/icons/code.svg);
 }
 
 .switches {
@@ -1135,19 +1141,19 @@ i.prettier-error {
 }
 
 .emoji.happysmile {
-  background-image: url(images/emoji/1F642.png);
+  background-image: url(/images/emoji/1F642.png);
 }
 
 .emoji.veryhappysmile {
-  background-image: url(images/emoji/1F600.png);
+  background-image: url(/images/emoji/1F600.png);
 }
 
 .emoji.unhappysmile {
-  background-image: url(images/emoji/1F641.png);
+  background-image: url(/images/emoji/1F641.png);
 }
 
 .emoji.heart {
-  background-image: url(images/emoji/2764.png);
+  background-image: url(/images/emoji/2764.png);
 }
 
 .keyword {
@@ -1170,51 +1176,51 @@ i.prettier-error {
 }
 
 .actions i.indent {
-  background-image: url(images/icons/indent.svg);
+  background-image: url(/images/icons/indent.svg);
 }
 
 .actions i.outdent {
-  background-image: url(images/icons/outdent.svg);
+  background-image: url(/images/icons/outdent.svg);
 }
 
 .actions i.lock {
-  background-image: url(images/icons/lock-fill.svg);
+  background-image: url(/images/icons/lock-fill.svg);
 }
 
 .actions i.image {
-  background-image: url(images/icons/file-image.svg);
+  background-image: url(/images/icons/file-image.svg);
 }
 
 .actions i.table {
-  background-image: url(images/icons/table.svg);
+  background-image: url(/images/icons/table.svg);
 }
 
 .actions i.unlock {
-  background-image: url(images/icons/lock.svg);
+  background-image: url(/images/icons/lock.svg);
 }
 
 .actions i.left-align {
-  background-image: url(images/icons/text-left.svg);
+  background-image: url(/images/icons/text-left.svg);
 }
 
 .actions i.center-align {
-  background-image: url(images/icons/text-center.svg);
+  background-image: url(/images/icons/text-center.svg);
 }
 
 .actions i.right-align {
-  background-image: url(images/icons/text-right.svg);
+  background-image: url(/images/icons/text-right.svg);
 }
 
 .actions i.justify-align {
-  background-image: url(images/icons/justify.svg);
+  background-image: url(/images/icons/justify.svg);
 }
 
 .actions i.disconnect {
-  background-image: url(images/icons/plug.svg);
+  background-image: url(/images/icons/plug.svg);
 }
 
 .actions i.connect {
-  background-image: url(images/icons/plug-fill.svg);
+  background-image: url(/images/icons/plug-fill.svg);
 }
 
 table.disable-selection {
@@ -1260,7 +1266,7 @@ i.chevron-down {
   display: inline-block;
   height: 8px;
   width: 8px;
-  background-image: url(images/icons/chevron-down.svg);
+  background-image: url(/images/icons/chevron-down.svg);
 }
 
 .action-button {
diff --git a/demos/sveltekit/svelte.config.js b/demos/sveltekit/svelte.config.js
index 892f0c46..8da138ff 100644
--- a/demos/sveltekit/svelte.config.js
+++ b/demos/sveltekit/svelte.config.js
@@ -1,15 +1,18 @@
 import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess';
+import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
-	preprocess: preprocess(),
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
 
-	kit: {
-		adapter: adapter()
-	}
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
 };
 
 export default config;