refactor: use nuxthub blob utils for file uploads

Yizack · Oct 19, 2024 · de92d19 · de92d19
1 parent b0a0ee6
commit de92d19
Show file tree

Hide file tree

Showing 15 changed files with 852 additions and 621 deletions.
diff --git a/.config/nuxt.ts b/.config/nuxt.ts
@@ -179,7 +179,7 @@ export default defineNuxtConfig({
       preprocessorOptions: {
         scss: {
           api: "modern-compiler",
-          silenceDeprecations: ["mixed-decls", "color-functions"]
+          silenceDeprecations: ["mixed-decls", "color-functions", "import", "global-builtin"]
         }
       }
     }

diff --git a/app/components/bond/BondStories.vue b/app/components/bond/BondStories.vue
@@ -27,7 +27,10 @@ const imageRead = ref<string | ArrayBuffer>("");
 const showModal = ref(false);
 const fileChosen = ref(false);
 const file = ref<File>();
-const maxFileSize = computed(() => user.value.bond?.premium ? Quota.PREMIUM_IMAGE_FILESIZE : Quota.FREE_IMAGE_FILESIZE);
+const maxFileSize = computed(() => {
+  const size = user.value.bond?.premium ? Quota.PREMIUM_IMAGE_FILESIZE : Quota.FREE_IMAGE_FILESIZE;
+  return size.replace("MB", t("mb"));
+});
 
 const form = useFormState({
   id: 0 as number | undefined,
@@ -177,13 +180,13 @@ watch(() => props.marker, () => {
           <div class="overlay position-absolute bg-body-secondary w-100 h-100">
             <div class="d-flex flex-column justify-content-center align-items-center h-100">
               <Icon class="text-primary" name="solar:gallery-add-outline" size="2.5rem" />
-              <span>({{ t("max") }} {{ maxFileSize }}{{ t("mb") }})</span>
+              <span>({{ t("max") }} {{ maxFileSize }})</span>
               <small>{{ supported }}</small>
             </div>
           </div>
           <div v-if="!fileChosen && !form.id" class="d-flex flex-column justify-content-center align-items-center py-3">
             <Icon name="solar:gallery-add-outline" size="2.5rem" />
-            <span>({{ t("max") }} {{ maxFileSize }}{{ t("mb") }})</span>
+            <span>({{ t("max") }} {{ maxFileSize }})</span>
             <small>{{ supported }}</small>
           </div>
           <img v-else-if="form.id && !imageRead" class="img-fluid" :src="`${getStoryImage(form.hash!)}?updated=${form.updatedAt}`">

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -277,11 +277,11 @@ export default {
   subscription_description: "Premium features are available for your bond, ensuring they are accessible to both you and your partner.",
   free: "Free",
   free_markers_quota: "Limited to {{ quota }} markers",
-  free_image_upload_quota: "{{ quota }} MB per image upload",
+  free_image_upload_quota: "{{ quota }} per image upload",
   free_summary: "No yearly summary",
   premium: "Premium",
   premium_markers_quota: "Unlimited markers",
-  premium_image_upload_quota: "{{ quota }} MB per image upload",
+  premium_image_upload_quota: "{{ quota }} per image upload",
   premium_summary: "Yearly summary",
   share_public_map: "Share public map",
   current_plan: "Current plan",

diff --git a/app/utils/subscription.ts b/app/utils/subscription.ts
@@ -7,7 +7,7 @@ export const SUBSCRIPTION = {
         features: [
           { name: "share_public_map" },
           { name: "free_markers_quota", quota: Quota.FREE_MARKERS },
-          { name: "free_image_upload_quota", quota: Quota.FREE_IMAGE_FILESIZE },
+          { name: "free_image_upload_quota", quota: Quota.FREE_IMAGE_FILESIZE.replace("MB", t("mb")) },
           { name: "free_summary" },
           { name: "email_support" }
         ]
@@ -18,7 +18,7 @@ export const SUBSCRIPTION = {
         features: [
           { name: "share_public_map" },
           { name: "premium_markers_quota" },
-          { name: "premium_image_upload_quota", quota: Quota.PREMIUM_IMAGE_FILESIZE },
+          { name: "premium_image_upload_quota", quota: Quota.PREMIUM_IMAGE_FILESIZE.replace("MB", t("mb")) },
           { name: "premium_summary" },
           { name: "email_support" }
         ]

diff --git a/package.json b/package.json
@@ -32,43 +32,43 @@
     "test:types": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20241011.0",
+    "@cloudflare/workers-types": "^4.20241018.0",
     "@dargmuesli/nuxt-cookie-control": "^8.4.14",
     "@nuxt/eslint": "^0.6.0",
     "@nuxt/icon": "^1.5.6",
-    "@nuxthub/core": "^0.7.32",
+    "@nuxthub/core": "^0.7.34",
     "@nuxtjs/color-mode": "^3.5.1",
-    "@nuxtjs/sitemap": "^6.1.1",
+    "@nuxtjs/sitemap": "^6.1.2",
     "@nuxtjs/turnstile": "^0.9.10",
     "@paddle/paddle-js": "^1.2.3",
-    "@paddle/paddle-node-sdk": "^1.9.0",
+    "@paddle/paddle-node-sdk": "^1.9.1",
     "@types/bootstrap": "^5.2.10",
-    "@types/leaflet": "^1.9.12",
+    "@types/leaflet": "^1.9.13",
     "@vue-email/components": "^0.0.19",
     "@vue-email/render": "^0.0.9",
     "@vuepic/vue-datepicker": "^9.0.3",
     "@yeger/vue-masonry-wall": "^5.0.16",
     "bootstrap": "^5.3.3",
-    "drizzle-kit": "^0.26.1",
-    "drizzle-orm": "^0.35.0",
-    "eslint": "^9.12.0",
+    "drizzle-kit": "^0.26.2",
+    "drizzle-orm": "^0.35.2",
+    "eslint": "^9.13.0",
     "leaflet": "^1.9.4",
     "leaflet-geosearch": "^4.0.0",
     "nodemailer": "^6.9.15",
     "nuxt": "^3.13.2",
     "nuxt-auth-utils": "^0.4.4",
     "nuxt-twemoji": "3.6.2",
     "nuxt-webhook-validators": "^0.1.1",
-    "sass": "^1.79.5",
+    "sass": "^1.80.3",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "tsx": "^4.19.1",
     "typescript": "^5.6.3",
     "vitepress": "^1.4.1",
     "vue-draggable-next": "^2.2.1",
     "vue-tsc": "^2.1.6",
-    "wrangler": "^3.80.4",
+    "wrangler": "^3.81.0",
     "zod": "^3.23.8"
   },
-  "packageManager": "pnpm@9.12.1"
+  "packageManager": "pnpm@9.12.2"
 }