add browser detection plugin and disable Glow in Firefox

.docs/components/landing/Glow.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 
+const { isFirefox } = useUserAgent()
+
 const props = defineProps({
   width: {
     type: String,
@@ -59,10 +61,16 @@ const props = defineProps({
     default: 'color'
   }
 })
+
+const show = ref(false)
+
+onMounted(() => {
+  show.value = isFirefox.value ? false : true
+})
 </script>
 
 <template>
-  <div class="glow" :class="{noise}">
+  <div v-if="show" class="glow" :class="{noise}">
     <svg v-if="noise">
       <filter id="f">
         <feTurbulence type="fractalNoise" baseFrequency="7.5" />

.docs/tokens.config.ts

@@ -18,7 +18,7 @@ export default defineTheme({
         wrapper: {
           backgroundImage: {
             initial: 'linear-gradient(180deg, rgba({temp.color.gray.100}, 0.3), rgba({temp.color.gray.100}, 0.6))',
-            dark: 'linear-gradient(180deg, rgba({temp.color.gray.900}, 0.3), rgba({temp.color.gray.900}, 0.6))',
+            dark: 'linear-gradient(180deg, rgba({temp.color.gray.800}, 0.3), rgba({temp.color.gray.900}, 0.6))',
           }
         }
       }

composables/useUserAgent.ts

@@ -0,0 +1,5 @@
+export const useUserAgent = () => {
+  const { $userAgent } = useNuxtApp()
+
+  return $userAgent
+}

plugins/user-agent.ts

@@ -0,0 +1,31 @@
+export default defineNuxtPlugin(() => {
+  const isMobile = ref(false)
+  const isSafari = ref(false)
+  const isFirefox = ref(false)
+  const isChrome = ref(false)
+  const isEdge = ref(false)
+
+  const refresh = () => {
+    const ua = navigator.userAgent
+
+    isMobile.value = /iPhone|iPad|iPod|Android/i.test(ua)
+    isFirefox.value = /Firefox/i.test(ua)
+    isChrome.value = /Chrome/i.test(ua) && !/Edg/i.test(ua)
+    isSafari.value = /Safari/i.test(ua) && !/Chrome/i.test(ua)
+    isEdge.value = /Edg/i.test(ua)
+  }
+
+  if (process.client) { refresh() }
+
+  return {
+    provide: {
+      userAgent: {
+        isMobile,
+        isSafari,
+        isFirefox,
+        isChrome,
+        isEdge
+      }
+    }
+  }
+})