fix: load API on detail page

toniengelhardt · Feb 13, 2023 · 46241b9 · 46241b9
1 parent 0151c95
commit 46241b9
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 27 deletions.
diff --git a/composables/webapis.ts b/composables/webapis.ts
@@ -36,3 +36,21 @@ export const useWebApiStatus = (api: WebAPI, available?: boolean) => {
     return undefined
   })
 }
+
+export const useLoadWebApis = (webApis?: WebAPI[]) => {
+  if (navigator) {
+    const webApiStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('webApiStatuses', () => ({}))
+    webApis = webApis || useWebApiList().value
+    webApis.forEach((webApi) => {
+      if (!webApiStatuses.value[webApi.id]) {
+        const check = webApi.check || defaultWebApiCheck
+        if (check.constructor.name === 'AsyncFunction') {
+          (check(webApi) as Promise<boolean>)
+            .then((available: boolean) => webApiStatuses.value[webApi.id] = available)
+        } else {
+          webApiStatuses.value[webApi.id] = check(webApi) as boolean
+        }
+      }
+    })
+  }
+}
diff --git a/pages/apis/[id].vue b/pages/apis/[id].vue
@@ -13,6 +13,11 @@ const webApiId = computed(() => route.params.id.toString())
 const webApi = computed(() => ({ id: webApiId.value, ...webApiData[webApiId.value] }))
 const available = computed(() => webAPIStatuses.value[webApiId.value])
 
+useSeoMeta({
+  title: () => webApi.value.name,
+  description: () => `Details for "${webApi.value.name}". WebAPI device test for your current device, general information, and requirements.`,
+})
+
 const status = computed(() => {
   if (available) {
     if (webApi.value.experimental) {
@@ -37,13 +42,17 @@ const status = computed(() => {
   }
   return undefined
 })
+
+onMounted(() => useLoadWebApis([webApi.value]))
 </script>
 
 <template>
   <div>
     <NuxtLayout>
       <div max-w-screen-lg mx-auto px-4>
-        <h1>{{ webApi.name }}</h1>
+        <h1>
+          {{ webApi.name }}
+        </h1>
         <div class="status" :class="status?.name">
           <span class="status-icon">
             <Icon :name="status?.icon || ''" />
@@ -66,7 +75,9 @@ const status = computed(() => {
               Source
             </div>
             <div class="value">
-              <ApiSource :api="webApi" />
+              <ClientOnly>
+                <ApiSource :api="webApi" />
+              </ClientOnly>
             </div>
           </div>
           <div>

diff --git a/pages/index.vue b/pages/index.vue
@@ -35,7 +35,6 @@
 
 <script setup lang="ts">
 import Fuse from 'fuse.js'
-import * as shvl from 'shvl'
 
 const config = useRuntimeConfig()
 
@@ -69,28 +68,5 @@ const filteredAPIs = computed(() => {
 const supportedAPICount = computed(() => filteredAPIs.value.filter(api => !!webApiStatuses.value[api.id]).length)
 const totalAPICount = computed(() => webApiList.length)
 
-function defaultCheck(api: WebAPI) {
-  if (api.path) {
-    const partials = api.path.split('.')
-    const path = partials[0] === 'window' ? partials.slice(1).join('.') : api.path
-    return !!shvl.get(window, path, undefined)
-  }
-  return false
-}
-
-function loadAPIs() {
-  if (navigator && !Object.keys(webApiStatuses.value).length) {
-    webApiList.forEach((webApi) => {
-      const check = webApi.check || defaultCheck
-      if (check.constructor.name === 'AsyncFunction') {
-        (check(webApi) as Promise<boolean>)
-          .then((available: boolean) => webApiStatuses.value[webApi.id] = available)
-      } else {
-        webApiStatuses.value[webApi.id] = check(webApi) as boolean
-      }
-    })
-  }
-}
-
-onMounted(() => loadAPIs())
+onMounted(() => useLoadWebApis())
 </script>
diff --git a/utils/webapis.ts b/utils/webapis.ts
@@ -1,9 +1,19 @@
+import * as shvl from 'shvl'
 import DetailBatteryStatusAPI from '~/components/detail/BatteryStatusAPI.vue'
 import DetailGeolocationAPI from '~/components/detail/GeolocationAPI.vue'
 import DetailNetworkConnectionAPI from '~/components/detail/NetworkConnectionAPI.vue'
 import DetailVisualViewport from '~/components/detail/VisualViewport.vue'
 import DetailWebCryptoAPI from '~/components/detail/WebCryptoAPI.vue'
 
+export function defaultWebApiCheck(api: WebAPI) {
+  if (api.path) {
+    const partials = api.path.split('.')
+    const path = partials[0] === 'window' ? partials.slice(1).join('.') : api.path
+    return !!shvl.get(window, path, undefined)
+  }
+  return false
+}
+
 export const webApiData: { [slug: string]: Omit<WebAPI, 'id'> } = {
   'accelerometer': {
     name: 'Accelerometer',