diff --git a/package.json b/package.json
index ce74cccce89bab28d5a8800e32e26e1d2bafa456..87735d37638cf9f8b3da2898d0e030b0c84bebe5 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,8 @@
},
"dependencies": {
"@primevue/themes": "^4.0.4",
- "@supabase/supabase-js": "^2.45.1",
"@vueuse/core": "^10.11.0",
"@vueuse/integrations": "^10.11.0",
- "cropperjs": "^1.6.2",
"pinia": "^2.1.7",
"primeicons": "^7.0.0",
"primevue": "^4.0.4",
diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index 505547e067476dd811d6a43b440d96c9f5317671..ee3f498f9554ad856ce59d89bb4a298257ef5d0e 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -1,3 +1,104 @@
+:root {
+ --gray-100: #f3f4f6;
+ --gray-200: #e5e7eb;
+ --gray-300: #d1d5db;
+ --gray-400: #9ca3af;
+ --gray-500: #6b7280;
+ --gray-600: #4b5563;
+ --gray-700: #374151;
+ --gray-800: #1f2937;
+ --gray-900: #111827;
+ --red-100: #fee2e2;
+ --red-200: #fecaca;
+ --red-300: #fca5a5;
+ --red-400: #f87171;
+ --red-500: #ef4444;
+ --red-600: #dc2626;
+ --red-700: #b91c1c;
+ --red-800: #991b1b;
+ --red-900: #7f1d1d;
+ --orange-100: #ffedd5;
+ --orange-200: #fed7aa;
+ --orange-300: #fdba74;
+ --orange-400: #fb923c;
+ --orange-500: #f97316;
+ --orange-600: #ea580c;
+ --orange-700: #c2410c;
+ --orange-800: #9a3412;
+ --orange-900: #7c2d12;
+ --yellow-100: #fef9c3;
+ --yellow-200: #fef08a;
+ --yellow-300: #fde047;
+ --yellow-400: #facc15;
+ --yellow-500: #eab308;
+ --yellow-600: #ca8a04;
+ --yellow-700: #a16207;
+ --yellow-800: #854d0e;
+ --yellow-900: #713f12;
+ --green-100: #dcfce7;
+ --green-200: #bbf7d0;
+ --green-300: #86efac;
+ --green-400: #4ade80;
+ --green-500: #22c55e;
+ --green-600: #16a34a;
+ --green-700: #15803d;
+ --green-800: #166534;
+ --green-900: #14532d;
+ --sky-100: #e0f2fe;
+ --sky-200: #bae6fd;
+ --sky-300: #7dd3fc;
+ --sky-400: #38bdf8;
+ --sky-500: #0ea5e9;
+ --sky-600: #0284c7;
+ --sky-700: #0369a1;
+ --sky-800: #075985;
+ --sky-900: #0c4a6e;
+ --blue-100: #dbeafe;
+ --blue-200: #bfdbfe;
+ --blue-300: #93c5fd;
+ --blue-400: #60a5fa;
+ --blue-500: #3b82f6;
+ --blue-600: #2563eb;
+ --blue-700: #1d4ed8;
+ --blue-800: #1e40af;
+ --blue-900: #1e3a8a;
+ --indigo-100: #e0e7ff;
+ --indigo-200: #c7d2fe;
+ --indigo-300: #a5b4fc;
+ --indigo-400: #818cf8;
+ --indigo-500: #6366f1;
+ --indigo-600: #4f46e5;
+ --indigo-700: #4338ca;
+ --indigo-800: #3730a3;
+ --indigo-900: #312e81;
+ --purple-100: #f3e8ff;
+ --purple-200: #e9d5ff;
+ --purple-300: #d8b4fe;
+ --purple-400: #c084fc;
+ --purple-500: #a855f7;
+ --purple-600: #9333ea;
+ --purple-700: #7e22ce;
+ --purple-800: #6b21a8;
+ --purple-900: #581c87;
+ --fuchsia-100: #fae8ff;
+ --fuchsia-200: #f5d0fe;
+ --fuchsia-300: #f0abfc;
+ --fuchsia-400: #e879f9;
+ --fuchsia-500: #d946ef;
+ --fuchsia-600: #c026d3;
+ --fuchsia-700: #a21caf;
+ --fuchsia-800: #86198f;
+ --fuchsia-900: #701a75;
+ --pink-100: #fce7f3;
+ --pink-200: #fbcfe8;
+ --pink-300: #f9a8d4;
+ --pink-400: #f472b6;
+ --pink-500: #ec4899;
+ --pink-600: #db2777;
+ --pink-700: #be185d;
+ --pink-800: #9d174d;
+ --pink-900: #831843;
+}
body {
min-height: 100vh;
}
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 15d92a748f0101b770179f62d89866a103defc33..58ba27209b0d4aff358b07550d64c499121fd94f 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -12,17 +12,29 @@ const { open: uploadFile, onChange } = useFileDialog({
const addImage = async (files: FileList) => {
let image = new Image();
const imageUuid = uuidv4();
- const file = files[0];
- const reader = new FileReader();
- reader.readAsDataURL(file);
- reader.addEventListener('load', () => {
- image.src = String(reader.result);
- });
- image.onload = () => {
+ // const file = files[0];
+ // const reader = new FileReader();
+ // reader.readAsDataURL(file);
+ // const file = new FormData();
+ if (!files[0]) return;
+ // const mediaSource = new MediaSource();
+ // const url =
+ const url = URL.createObjectURL(files[0]);
+ image.src = url;
+ // file.set('file', files[0]);
+ // reader.addEventListener('load', () => {
+ // image.src = String(reader.result);
+ // });
+ image.onload = async () => {
+ console.log('url: ', url);
+ const response = await fetch(url);
+ const blob = await response.blob();
+ console.log('blob: ', blob);
emit('addEntity', {
entity_type: 'image',
entity_uuid: imageUuid,
- image_url: image.src,
+ // image_url: image.src,
+ image_url: blob,
entity_position: 'left',
entity_title_position: 'center',
image_width: image.width,
diff --git a/src/modules/CropImageModal.vue b/src/modules/CropImageModal.vue
index 44fd014cfd533b0ef35454cc598a8c60a73c7e2c..81a1def77526283511a0d18a3d8eb07162079920 100644
--- a/src/modules/CropImageModal.vue
+++ b/src/modules/CropImageModal.vue
@@ -90,7 +90,6 @@ function submitForm() {