Visual Fixes

[catuhana]

There's also a bug in Firefox on donate page. GitHub Sponsors are not loading because of CORS Preflight. The solution is adding the Access-Control-Request-Headers header to the request, but Axios header options are still broken and don't add the header properly to the request. I fixed it locally by using fetch API, but I'm in doubt if I should push it since the project's target Node version is 16, and fetch is experimental on that version and it will be different from all other request code blocks.

I am attaching the patch below. If you accept, I will add the change to the PR.

diff --git a/src/pages/donate.vue b/src/pages/donate.vue
index c22d659..05663af 100644
--- a/src/pages/donate.vue
+++ b/src/pages/donate.vue
@@ -57,9 +57,15 @@ export default Vue.extend({
   },
   fetchOnServer: false,
   async fetch() {
-    const { data } = await this.$axios.get(
-      "https://raw.githubusercontent.com/eggsy/.github/main/sponsors.json"
-    )
+    const response = await fetch(
+        "https://raw.githubusercontent.com/eggsy/.github/main/sponsors.json",
+        {
+          headers: {
+            "Access-Control-Request-Headers": "allow, content-type",
+          },
+        }
+      ),
+      data = await response.json()
 
     this.sponsors = data
   },

Changes

fix(CommandPalette.vue): scrollbar attributes not working on firefox

Before: After:

fix(donate.vue): align error and no sponsor texts

Before: After:

[netlify[bot]]

👷 Deploy request for eggsy-tailwind pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	352ac91cc6be92d4b6946c4549bb51e19a2c770a

[eggsy]

Looks great! Thanks. I will review it when I have time.

[catuhana]

It turns out we don't need to use the header mentioned above, it just works with fetch. Probably Node's fetch API (undici) handling CORS Preflight requests without any problem on Firefox, so I think something is wrong with @nuxtjs/axios.

The core of the Axios Nuxt module has not been updated for over a year and they recommend using Nuxt's $fetch API. Since this project is still in Nuxt 2, I guess the only way to fix this issue is to use Node's fetch API.

New patch:

diff --git a/src/pages/donate.vue b/src/pages/donate.vue
index c22d659..d19c920 100644
--- a/src/pages/donate.vue
+++ b/src/pages/donate.vue
@@ -57,9 +57,10 @@ export default Vue.extend({
   },
   fetchOnServer: false,
   async fetch() {
-    const { data } = await this.$axios.get(
-      "https://raw.githubusercontent.com/eggsy/.github/main/sponsors.json"
-    )
+    const response = await fetch(
+        "https://raw.githubusercontent.com/eggsy/.github/main/sponsors.json"
+      ),
+      data = await response.json()
 
     this.sponsors = data
   },