From 4524f98ec05423aa728d73a17118e0d2f94baafa Mon Sep 17 00:00:00 2001
From: Toni <2703233+toniengelhardt@users.noreply.github.com>
Date: Mon, 13 Feb 2023 20:35:10 +0000
Subject: [PATCH] feat: webapi detail pages

---
 components/api/Status.vue          |  46 +++++++++
 components/api/grid/Grid.vue       |   5 +-
 components/api/grid/GridItem.vue   |  10 +-
 components/api/list/List.vue       |   5 +-
 components/api/list/ListItem.vue   |   5 +-
 components/brand/Name.vue          |  10 +-
 composables/webapis.ts             |  38 +++++++
 pages/apis/[id].vue                | 160 +++++++++++++++++++++++++++++
 pages/index.vue                    |  34 +++---
 types/ui.d.ts                      |   1 +
 types/{index.d.ts => webapis.d.ts} |  11 +-
 unocss.config.ts                   |   4 +-
 utils/{apis.ts => webapis.ts}      | 132 ++++++++++++------------
 13 files changed, 355 insertions(+), 106 deletions(-)
 create mode 100644 components/api/Status.vue
 create mode 100644 composables/webapis.ts
 create mode 100644 pages/apis/[id].vue
 create mode 100644 types/ui.d.ts
 rename types/{index.d.ts => webapis.d.ts} (78%)
 rename utils/{apis.ts => webapis.ts} (91%)

diff --git a/components/api/Status.vue b/components/api/Status.vue
new file mode 100644
index 0000000..c7006f2
--- /dev/null
+++ b/components/api/Status.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineProps<{
+  status?: WebAPIStatus
+}>()
+</script>
+
+<template>
+  <div class="status" :class="status?.name">
+    <span class="status-icon">
+      <Icon :name="status?.icon || ''" />
+    </span>
+    <span class="status-label">
+      {{ status?.label }}
+    </span>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.status {
+  @apply flex items-center;
+  &.available {
+    .status-icon {
+      @apply text-lime-600 border-lime-600 dark:(text-lime-300 border-lime-300);
+    }
+  }
+  &.experimental {
+    .status-icon {
+      @apply text-purple-700 border-purple-700 dark:(text-purple-300 border-purple-300);
+    }
+  }
+  &.unavailable {
+    .status-icon {
+      @apply text-rose-500 border-rose-500;
+    }
+  }
+  .status-icon {
+    @apply flex justify-center items-center w-4 h-4 border-solid border-1 rounded-full box-border;
+    .icon {
+      @apply text-0.6rem;
+    }
+    .status-label {
+      @apply ml-1.5 text-xs;
+    }
+  }
+}
+</style>
diff --git a/components/api/grid/Grid.vue b/components/api/grid/Grid.vue
index 2f3d53a..198d62c 100644
--- a/components/api/grid/Grid.vue
+++ b/components/api/grid/Grid.vue
@@ -2,8 +2,9 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-1 p-1">
     <ApiGridItem
       v-for="api in apis"
-      :key="api.key"
+      :key="api.name"
       :api="api"
+      :available="webApiStatuses[api.id]"
     />
   </div>
 </template>
@@ -12,4 +13,6 @@
 defineProps<{
   apis: WebAPI[]
 }>()
+
+const webApiStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('webApiStatuses')
 </script>
diff --git a/components/api/grid/GridItem.vue b/components/api/grid/GridItem.vue
index 3295642..664aad6 100644
--- a/components/api/grid/GridItem.vue
+++ b/components/api/grid/GridItem.vue
@@ -1,8 +1,7 @@
 <template>
   <NuxtLink
-    :to="api.url"
+    :to="`/apis/${api.id}`"
     :title="`${api.name} documentation`"
-    target="_blank"
     class="grid-item" :class="itemClass"
     @click="useTrackEvent('click: API link', { props: { api: api.name } })"
   >
@@ -16,7 +15,7 @@
       {{ api.path || 'N/A' }}
     </div>
     <div class="flex-1 min-h-12">
-      <template v-if="api.available">
+      <template v-if="available">
         <component
           :is="api.detail"
           v-if="api.detail"
@@ -57,10 +56,11 @@
 <script setup lang="ts">
 const props = defineProps<{
   api: WebAPI
+  available?: boolean
 }>()
 
 const status = computed(() => {
-  if (props.api.available) {
+  if (props.available) {
     if (props.api.experimental) {
       return {
         name: 'experimental',
@@ -74,7 +74,7 @@ const status = computed(() => {
       label: 'Available',
     }
   }
-  if (props.api.available === false) {
+  if (props.available === false) {
     return {
       name: 'unavailable',
       icon: 'cross',
diff --git a/components/api/list/List.vue b/components/api/list/List.vue
index 819f460..e928fbf 100644
--- a/components/api/list/List.vue
+++ b/components/api/list/List.vue
@@ -2,8 +2,9 @@
   <div class="grid grid-cols-1 gap-0.5 p-0.5">
     <ApiListItem
       v-for="api in apis"
-      :key="api.key"
+      :key="api.name"
       :api="api"
+      :available="webApiStatuses[api.id]"
     />
   </div>
 </template>
@@ -12,4 +13,6 @@
 defineProps<{
   apis: WebAPI[]
 }>()
+
+const webApiStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('webApiStatuses')
 </script>
diff --git a/components/api/list/ListItem.vue b/components/api/list/ListItem.vue
index 769b58b..203d548 100644
--- a/components/api/list/ListItem.vue
+++ b/components/api/list/ListItem.vue
@@ -26,10 +26,11 @@
 <script setup lang="ts">
 const props = defineProps<{
   api: WebAPI
+  available?: boolean
 }>()
 
 const status = computed(() => {
-  if (props.api.available) {
+  if (props.available) {
     if (props.api.experimental) {
       return {
         name: 'experimental',
@@ -43,7 +44,7 @@ const status = computed(() => {
       label: 'Available',
     }
   }
-  if (props.api.available === false) {
+  if (props.available === false) {
     return {
       name: 'unavailable',
       icon: 'cross',
diff --git a/components/brand/Name.vue b/components/brand/Name.vue
index 3866321..86153da 100644
--- a/components/brand/Name.vue
+++ b/components/brand/Name.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="text-1.2rem font-bold text-zinc-500 dark:text-zinc-400">
-    <span class="text-base dark:text-white font-black">WebAPI</span> check
-  </div>
+  <NuxtLink
+    to="/"
+    title="Home"
+    text-1.2rem font-bold
+  >
+    <span class="text-base dark:text-white font-black">WebAPI</span> <span text-dim>check</span>
+  </NuxtLink>
 </template>
diff --git a/composables/webapis.ts b/composables/webapis.ts
new file mode 100644
index 0000000..81e2651
--- /dev/null
+++ b/composables/webapis.ts
@@ -0,0 +1,38 @@
+export const useWebApiList = () => {
+  const list = Object.keys(webApiData).reduce((list: WebAPI[], apiKey: string) => {
+    list.push({
+      id: apiKey,
+      ...webApiData[apiKey],
+    })
+    return list
+  }, [])
+  sortByField(list, 'name')
+  return ref(list)
+}
+
+export const useWebApiStatus = (api: WebAPI, available?: boolean) => {
+  return computed(() => {
+    if (available) {
+      if (api.experimental) {
+        return {
+          name: 'experimental',
+          icon: 'experimental',
+          label: 'Experimental',
+        }
+      }
+      return {
+        name: 'available',
+        icon: 'check',
+        label: 'Available',
+      }
+    }
+    if (available === false) {
+      return {
+        name: 'unavailable',
+        icon: 'cross',
+        label: 'Not available',
+      }
+    }
+    return undefined
+  })
+}
diff --git a/pages/apis/[id].vue b/pages/apis/[id].vue
new file mode 100644
index 0000000..319f2d7
--- /dev/null
+++ b/pages/apis/[id].vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+definePageMeta({
+  validate: ({ params }) => {
+    return Object.keys(webApiData).includes(params.id.toString())
+  },
+})
+
+const route = useRoute()
+
+const webAPIStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('WebAPIStatuses')
+
+const webApiId = computed(() => route.params.id.toString())
+const webApi = computed(() => ({ id: webApiId.value, ...webApiData[webApiId.value] }))
+const available = computed(() => webAPIStatuses.value[webApiId.value])
+
+const status = computed(() => {
+  if (available) {
+    if (webApi.value.experimental) {
+      return {
+        name: 'experimental',
+        icon: 'experimental',
+        label: 'Available on this device (experimental)',
+      }
+    }
+    return {
+      name: 'available',
+      icon: 'check',
+      label: 'Available on this device',
+    }
+  }
+  if (available === false) {
+    return {
+      name: 'unavailable',
+      icon: 'cross',
+      label: 'Not available on this device',
+    }
+  }
+  return undefined
+})
+</script>
+
+<template>
+  <div>
+    <NuxtLayout>
+      <div max-w-screen-lg mx-auto px-4>
+        <h1>{{ webApi.name }}</h1>
+        <div class="status" :class="status?.name">
+          <span class="status-icon">
+            <Icon :name="status?.icon || ''" />
+          </span>
+          <span class="status-label">
+            {{ status?.label }}
+          </span>
+        </div>
+        <div class="box" grid md:grid-cols-2 gap-4 mt-8>
+          <div>
+            <div class="label">
+              Property
+            </div>
+            <div class="value">
+              {{ webApi.path }}
+            </div>
+          </div>
+          <div>
+            <div class="label">
+              Source
+            </div>
+            <div class="value">
+              <ApiSource :api="webApi" />
+            </div>
+          </div>
+          <div>
+            <div class="label">
+              Documentation
+            </div>
+            <div inline-flex items-center>
+              <NuxtLink
+                :to="webApi.path"
+                :title="`Documentation for ${webApi.name}`"
+                target="_blank"
+                btn-xs btn-outline
+              >
+                OPEN <Icon name="external" class="ml-0.5" />
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+        <div mt-8>
+          <div v-if="webApi.experimental" class="panel">
+            <div flex items-center>
+              <Icon name="experimental" mr-1.5 text-faint size="1.25rem" /> Experimental
+            </div>
+          </div>
+          <div v-if="webApi.availableInWebWorkers" class="panel">
+            <div flex items-center>
+              <Icon name="webworker" mr-1.5 text-faint size="1.25rem" /> Available in Web Workers
+            </div>
+          </div>
+          <div v-if="webApi.userInteractionRequired" class="panel">
+            <div flex items-center>
+              <Icon name="interaction" mr-1.5 text-faint size="1.25rem" /> User interaction required
+            </div>
+          </div>
+          <div v-if="webApi.permissionsRequired" class="panel">
+            <div flex items-center>
+              <Icon name="permission" mr-1.5 text-faint size="1.25rem" /> Permission/s required
+            </div>
+          </div>
+          <div v-if="webApi.secureContextRequired" class="panel">
+            <div flex items-center>
+              <Icon name="secure" mr-1.5 text-faint size="1.25rem" /> Secure context required
+            </div>
+          </div>
+        </div>
+      </div>
+    </NuxtLayout>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+h1 {
+  @apply my-8;
+}
+.status {
+  @apply flex items-center;
+  &.available {
+    .status-icon {
+      @apply text-lime-600 border-lime-600 dark:(text-lime-300 border-lime-300);
+    }
+  }
+  &.experimental {
+    .status-icon {
+      @apply text-purple-700 border-purple-700 dark:(text-purple-300 border-purple-300);
+    }
+  }
+  &.unavailable {
+    .status-icon {
+      @apply text-rose-500 border-rose-500;
+    }
+  }
+  .status-icon {
+    @apply flex justify-center items-center w-6 h-6 border-solid border-1 rounded-full box-border;
+  }
+  .status-label {
+    @apply ml-2.5;
+  }
+}
+.box {
+  @apply p-4 border-solid border-1 border-base rounded;
+}
+.panel {
+  @apply p-4 bg-surface not-first:mt-4 rounded;
+}
+.label {
+  @apply mb-1.5 text-sm text-dim font-bold;
+}
+.value {
+  @apply flex items-center h-5;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 909a0e3..c6cec42 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -36,8 +36,6 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
 import * as shvl from 'shvl'
-import { apiData } from '~/utils/apis'
-import { sortByField } from '~/utils/sorting'
 
 const config = useRuntimeConfig()
 
@@ -59,24 +57,17 @@ const searchOptions = {
   threshold: 0.3,
 }
 
-const apis = ref(apiData)
+const webApiList = useWebApiList().value
+const webApiStatuses = useState('webApiStatuses', (): { [key: keyof typeof webApiData]: boolean } => ({}))
 
-const sortedAPIs = computed(() => {
-  const apiList = Object.keys(apis.value).reduce((list: WebAPI[], apiKey: string) => {
-    list.push(apis.value[apiKey])
-    return list
-  }, [])
-  sortByField(apiList, 'name')
-  return apiList
-})
-const fuse = computed(() => new Fuse(sortedAPIs.value, searchOptions))
+const fuse = computed(() => new Fuse(webApiList, searchOptions))
 const filteredAPIs = computed(() => {
   return debouncedSearchTerm.value
     ? fuse.value.search(debouncedSearchTerm.value).map((result: Fuse.FuseResult<WebAPI>) => result.item)
-    : sortedAPIs.value
+    : webApiList
 })
-const supportedAPICount = computed(() => filteredAPIs.value.filter(api => api.available).length)
-const totalAPICount = computed(() => sortedAPIs.value.length)
+const supportedAPICount = computed(() => filteredAPIs.value.filter(api => !!webApiStatuses.value[api.id]).length)
+const totalAPICount = computed(() => webApiList.length)
 
 function defaultCheck(api: WebAPI) {
   if (api.path) {
@@ -88,15 +79,14 @@ function defaultCheck(api: WebAPI) {
 }
 
 function loadAPIs() {
-  if (navigator) {
-    Object.keys(apis.value).forEach((apiKey) => {
-      const api = apis.value[apiKey]
-      const check = api.check || defaultCheck
+  if (navigator && !Object.keys(webApiStatuses.value).length) {
+    webApiList.forEach((webApi) => {
+      const check = webApi.check || defaultCheck
       if (check.constructor.name === 'AsyncFunction') {
-        (check(api) as Promise<boolean>)
-          .then((available: boolean) => apis.value[apiKey].available = available)
+        (check(webApi) as Promise<boolean>)
+          .then((available: boolean) => webApiStatuses.value[webApi.id] = available)
       } else {
-        apis.value[apiKey].available = check(api) as boolean
+        webApiStatuses.value[webApi.id] = check(webApi) as boolean
       }
     })
   }
diff --git a/types/ui.d.ts b/types/ui.d.ts
new file mode 100644
index 0000000..f559e67
--- /dev/null
+++ b/types/ui.d.ts
@@ -0,0 +1 @@
+declare type DisplayMode = 'rows' | 'grid'
diff --git a/types/index.d.ts b/types/webapis.d.ts
similarity index 78%
rename from types/index.d.ts
rename to types/webapis.d.ts
index f4e2cf7..c6bd137 100644
--- a/types/index.d.ts
+++ b/types/webapis.d.ts
@@ -1,9 +1,8 @@
 declare interface WebAPI {
-  key?: string,
+  id: string, // also used as slug.
   name: string,
   path?: string,
   url: string,
-  available?: boolean,
   source?: string,
   experimental?: boolean,
   userInteractionRequired?: boolean,
@@ -24,6 +23,8 @@ declare interface WebAPI {
   detail?: any,
 }
 
-declare type WebAPIData = { [key: string]: WebAPI }
-
-declare type DisplayMode = 'rows' | 'grid'
+declare interface WebAPIStatus {
+  name: string,
+  icon: string,
+  label: string,
+}
diff --git a/unocss.config.ts b/unocss.config.ts
index 3524104..49907d8 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -13,6 +13,8 @@ export default defineConfig({
     'flex-center': 'flex justify-center items-center',
     'bg-base': 'bg-white dark:bg-zinc-900',
     'bg-surface': 'bg-zinc-100 dark:bg-zinc-800',
+    'bg-element': 'bg-zinc-200 dark:bg-zinc-700',
+    'bg-element-active': 'bg-zinc-300 dark:bg-zinc-600',
     'text-base': 'text-black dark:text-zinc-200',
     'text-dim': 'text-zinc-500 dark:text-zinc-400',
     'text-faint': 'text-zinc-400 dark:text-zinc-500',
@@ -21,7 +23,7 @@ export default defineConfig({
     'btn-xs': 'btn py-1 px-2 text-xs rounded',
     'btn-sm': 'btn py-1.5 px-3 text-sm',
     'btn-default': 'btn text-zinc-100 bg-zinc-800 hover:(text-white bg-zinc-900) dark:(bg-white text-zinc-900 hover:text-black)',
-    'btn-base': 'btn dark:bg-zinc-900',
+    'btn-subtle': 'btn bg-element hover:bg-element-active',
     'btn-outline': 'btn bg-transparent border-solid border-2 border-zinc-200 hover:border-zinc-300 dark:(bg-transparent border-zinc-700 hover:border-zinc-600)',
     'link': 'inline-block font-semibold underline decoration-1 underline-offset-2 decoration-sky-500 dark:decoration-sky-400',
     'footer-link': 'text-base hover:(text-zinc-800 dark:text-white) cursor-pointer',
diff --git a/utils/apis.ts b/utils/webapis.ts
similarity index 91%
rename from utils/apis.ts
rename to utils/webapis.ts
index 83703ab..e1b7c5b 100644
--- a/utils/apis.ts
+++ b/utils/webapis.ts
@@ -4,8 +4,8 @@ import DetailNetworkConnectionAPI from '~/components/detail/NetworkConnectionAPI
 import DetailVisualViewport from '~/components/detail/VisualViewport.vue'
 import DetailWebCryptoAPI from '~/components/detail/WebCryptoAPI.vue'
 
-export const apiData: WebAPIData = {
-  accelerometer: {
+export const webApiData: { [slug: string]: Omit<WebAPI, 'id'> } = {
+  'accelerometer': {
     name: 'Accelerometer',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Accelerometer',
     path: 'window.Accelerometer',
@@ -13,7 +13,7 @@ export const apiData: WebAPIData = {
     secureContextRequired: true,
     experimental: true,
   },
-  ambientLightSensor: {
+  'ambient-light-sensor': {
     name: 'Ambient Light Sensor',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/AmbientLightSensor',
     path: 'window.AmbientLightSensor',
@@ -21,14 +21,14 @@ export const apiData: WebAPIData = {
     secureContextRequired: true,
     experimental: true,
   },
-  barcodeDetectionAPI: {
+  'barcode-detection-api': {
     name: 'Barcode Detection API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector',
     path: 'window.BarcodeDetector',
     secureContextRequired: true,
     experimental: true,
   },
-  batteryStatusAPI: {
+  'battery-status-api': {
     name: 'Battery Status API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API',
     path: 'navigator.battery',
@@ -46,7 +46,7 @@ export const apiData: WebAPIData = {
       }
     },
   },
-  bluetoothAPI: {
+  'bluetooth-api': {
     name: 'Bluetooth API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API',
     path: 'navigator.bluetooth',
@@ -55,26 +55,26 @@ export const apiData: WebAPIData = {
     secureContextRequired: true,
     experimental: true,
   },
-  broadcastChannelAPI: {
+  'broadcast-channel-api': {
     name: 'Broadcast Channel API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API',
     path: 'window.BroadcastChannel',
     availableInWebWorkers: true,
   },
-  clipboardAPI: {
+  'clipboard-api': {
     name: 'Clipboard API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API',
     path: 'navigator.clipboard',
     secureContextRequired: true,
   },
-  contactPickerAPI: {
+  'contact-picker-api': {
     name: 'Contact Picker API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API',
     path: 'navigator.contacts',
     secureContextRequired: true,
     experimental: true,
   },
-  contentIndexAPI: {
+  'content-index-api': {
     name: 'Content Index API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API',
     experimental: true,
@@ -91,14 +91,14 @@ export const apiData: WebAPIData = {
       }
     },
   },
-  cookieStoreAPI: {
+  'cookie-store-api': {
     name: 'Cookie Store API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API',
     path: 'window.CookieStore',
     secureContextRequired: true,
     experimental: true,
   },
-  digitalGoodsAPI: {
+  'digital-goods-api': {
     name: 'Digital Goods API',
     url: 'https://developer.chrome.com/docs/android/trusted-web-activity/receive-payments-play-billing/',
     path: 'navigator.digitalGoods',
@@ -113,7 +113,7 @@ export const apiData: WebAPIData = {
       },
     ],
   },
-  eyeDropperAPI: {
+  'eyedropper-api': {
     name: 'EyeDropper API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API',
     path: 'window.EyeDropper',
@@ -131,18 +131,18 @@ export const apiData: WebAPIData = {
       },
     },
   },
-  fileAPI: {
+  'file-api': {
     name: 'File API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/File_API',
     path: 'window.File',
   },
-  fileSystemAccessAPI: {
+  'file-system-access-api': {
     name: 'File System Access API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API',
     path: 'window.FileSystemHandle',
     secureContextRequired: true,
   },
-  fullscreenAPI: {
+  'fullscreen-api': {
     name: 'Fullscreen API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API',
     path: 'document.fullscreen',
@@ -165,13 +165,13 @@ export const apiData: WebAPIData = {
     },
   },
   // G
-  gamepadAPI: {
+  'gamepad-api': {
     name: 'Gamepad API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API',
     path: 'window.Gamepad',
     secureContextRequired: true,
   },
-  geolocationAPI: {
+  'geolocation-api': {
     name: 'Geolocation API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API',
     path: 'navigator.geolocation',
@@ -180,14 +180,14 @@ export const apiData: WebAPIData = {
     secureContextRequired: true,
     detail: shallowRef(DetailGeolocationAPI),
   },
-  gravitySensor: {
+  'gravity-sensor': {
     name: 'Gravity Sensor',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/GravitySensor',
     path: 'window.GravitySensor',
     permissionsRequired: true,
     secureContextRequired: true,
   },
-  gyroscope: {
+  'gyroscope': {
     name: 'Gyroscope',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope',
     path: 'window.Gyroscope',
@@ -195,12 +195,12 @@ export const apiData: WebAPIData = {
     secureContextRequired: true,
   },
   // H
-  historyAPI: {
+  'history-api': {
     name: 'History API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/History_API',
     path: 'window.history',
   },
-  htmlSanitizer: {
+  'html-sanitizer': {
     name: 'HTML Sanitizer API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API',
     path: 'window.Sanitizer',
@@ -208,37 +208,37 @@ export const apiData: WebAPIData = {
     experimental: true,
   },
   // I
-  imageCaptureAPI: {
+  'image-capture-api': {
     name: 'Image Capture API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Image_Capture_API',
     path: 'window.ImageCapture',
     experimental: true,
   },
-  indexedDBAPI: {
+  'indexed-db-api': {
     name: 'IndexedDB API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API',
     path: 'window.indexedDB',
     availableInWebWorkers: true,
   },
-  intersectionObserverAPI: {
+  'intersection-observer-api': {
     name: 'Intersection Observer API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API',
     path: 'window.IntersectionObserver',
   },
   // L
-  largestContentFullPaintAPI: {
+  'largest-content-full-paint-api': {
     name: 'Largest Contentful Paint API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint',
     path: 'window.LargestContentfulPaint',
     experimental: true,
   },
-  layoutInstabilityAPI: {
+  'layout-instability-api': {
     name: 'Layout Instability API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Layout_Instability_API',
     path: 'window.LayoutShift',
     experimental: true,
   },
-  linearAccelerationSensor: {
+  'linear-acceleration-sensor': {
     name: 'Linear Acceleration Sensor',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/LinearAccelerationSensor',
     path: 'window.LinearAccelerationSensor',
@@ -246,7 +246,7 @@ export const apiData: WebAPIData = {
     secureContextRequired: true,
   },
   // M
-  magnetometer: {
+  'magnetometer': {
     name: 'Magnetometer',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Magnetometer',
     path: 'window.Magnetometer',
@@ -255,7 +255,7 @@ export const apiData: WebAPIData = {
     experimental: true,
   },
   // N
-  networkConnectionAPI: {
+  'network-connection-api': {
     name: 'Network Connection API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API',
     path: 'navigator.connection',
@@ -263,7 +263,7 @@ export const apiData: WebAPIData = {
     experimental: true,
     detail: shallowRef(DetailNetworkConnectionAPI),
   },
-  notificationsAPI: {
+  'notifications-api': {
     name: 'Notifications API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API',
     path: 'window.Notification',
@@ -271,7 +271,7 @@ export const apiData: WebAPIData = {
     availableInWebWorkers: true,
   },
   // O
-  orientationSensor: {
+  'orientation-sensor': {
     name: 'Orientation Sensor',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/OrientationSensor',
     path: 'window.OrientationSensor',
@@ -298,38 +298,38 @@ export const apiData: WebAPIData = {
     // }
   },
   // P
-  paymentRequestAPI: {
+  'payment-request-api': {
     name: 'Payment Request API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API',
     path: 'window.PaymentRequest',
     secureContextRequired: true,
   },
-  performanceAPI: {
+  'performance-api': {
     name: 'Performance API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Performance_API',
     path: 'window.performance',
   },
-  performanceTimelineAPI: {
+  'performance-timeline-api': {
     name: 'Performance Timeline API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Performance_Timeline',
     path: 'window.performance',
     availableInWebWorkers: true,
     check: () => window?.performance?.getEntries !== undefined,
   },
-  permissionsAPI: {
+  'permissions-api': {
     name: 'Permissions API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API',
     path: 'navigator.permissions',
     availableInWebWorkers: true,
   },
-  pictureInPicture: {
+  'picture-in-picture': {
     name: 'Picture-in-Picture API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API',
     path: 'window.PictureInPictureWindow',
     check: () => !!document?.pictureInPictureEnabled,
   },
   // R
-  reportingAPI: {
+  'reporting-api': {
     name: 'Reporting API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API',
     path: 'window.ReportingObserver',
@@ -348,25 +348,25 @@ export const apiData: WebAPIData = {
   //     }
   //   }
   // },
-  screenOrientationAPI: {
+  'screen-orientation-api': {
     name: 'Screen Orientation API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API',
     path: 'screen.orientation',
     value: () => window?.screen?.orientation?.type,
   },
-  screenWakeLockAPI: {
+  'screen-wakelock-api': {
     name: 'Screen Wake Lock API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API',
     path: 'navigator.wakeLock',
     secureContextRequired: true,
     experimental: true,
   },
-  selectionAPI: {
+  'selection-api': {
     name: 'Selection API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Selection_API',
     path: 'window.Selection',
   },
-  storage: {
+  'storage': {
     name: 'Storage',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Storage_API',
     path: 'navigator.storage',
@@ -374,13 +374,13 @@ export const apiData: WebAPIData = {
     availableInWebWorkers: true,
   },
   // T [complete]
-  touch: {
+  'touch': {
     name: 'Touch Events',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Touch_events',
     path: 'window.Touch',
   },
   // V [complete]
-  vibrationAPI: {
+  'vibration-api': {
     name: 'Vibration API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API',
     path: 'navigator.vibrate',
@@ -390,43 +390,43 @@ export const apiData: WebAPIData = {
       func: () => { window?.navigator?.vibrate(200) },
     },
   },
-  virtualKeyboardAPI: {
+  'virtual-keyboard-api': {
     name: 'Virtual Keyboard API',
     url: 'https://developer.chrome.com/docs/web-platform/virtual-keyboard/',
     path: 'navigator.virtualKeyboard',
     source: 'chrome',
     secureContextRequired: true,
   },
-  visualViewport: {
+  'visual-viewport': {
     name: 'Visual Viewport',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API',
     path: 'window.visualViewport',
     detail: shallowRef(DetailVisualViewport),
   },
   // W [complete]
-  webAnimationsAPI: {
+  'web-animations-api': {
     name: 'Web Animations API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API',
     path: 'window.Animation',
   },
-  webAudioAPI: {
+  'web-audio-api': {
     name: 'Web Audio API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API',
     path: 'window.AudioContext',
     check: () => window?.AudioContext !== undefined || (window as any)?.webkitAudioContext !== undefined,
   },
-  webAuthenticationAPI: {
+  'web-authentication-api': {
     name: 'Web Authentication API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API',
     path: 'navigator.credentials',
     secureContextRequired: true,
   },
-  webCodecsAPI: {
+  'web-codecs-api': {
     name: 'WebCodecs API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API',
     check: () => (window as any)?.AudioDecoder !== undefined && (window as any)?.VideoDecoder !== undefined,
   },
-  webCryptoAPI: {
+  'web-crypto-api': {
     name: 'Web Crypto API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API',
     path: 'window.crypto',
@@ -434,7 +434,7 @@ export const apiData: WebAPIData = {
     availableInWebWorkers: true,
     detail: shallowRef(DetailWebCryptoAPI),
   },
-  webGL: {
+  'webgl': {
     name: 'WebGL',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API',
     path: 'window.WebGLRenderingContext',
@@ -448,7 +448,7 @@ export const apiData: WebAPIData = {
       }
     },
   },
-  webGPU: {
+  'webgpu': {
     name: 'WebGPU',
     url: 'https://developer.chrome.com/en/docs/web-platform/webgpu',
     path: 'navigator.gpu',
@@ -462,24 +462,24 @@ export const apiData: WebAPIData = {
       url: 'https://chromestatus.com/feature/6213121689518080',
     }],
   },
-  webHIDAPI: {
+  'webhid-api': {
     name: 'WebHID API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API',
     path: 'navigator.hid',
     experimental: true,
   },
-  webMIDIAPI: {
+  'web-midi-api': {
     name: 'Web MIDI API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API',
     path: 'navigator.requestMIDIAccess',
     secureContextRequired: true,
   },
-  webRTCAPI: {
+  'webrtc-api': {
     name: 'WebRTC API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API',
     path: 'window.RTCPeerConnection',
   },
-  webShareAPI: {
+  'web-share-api': {
     name: 'Web Share API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API',
     path: 'navigator.canShare',
@@ -498,12 +498,12 @@ export const apiData: WebAPIData = {
       },
     },
   },
-  webSocketsAPI: {
+  'web-sockets-api': {
     name: 'WebSocket API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API',
     path: 'window.WebSocket',
   },
-  webSpeechAPI: {
+  'web-speech-api': {
     name: 'Web Speech API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API',
     path: 'window.webSpeech',
@@ -515,43 +515,43 @@ export const apiData: WebAPIData = {
       }
     },
   },
-  webStorageAPI: {
+  'web-storage-api': {
     name: 'Web Storage API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API',
     path: 'window.Storage',
   },
-  webUSBAPI: {
+  'web-usb-api': {
     name: 'Web USB API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API',
     path: 'navigator.usb',
     experimental: true,
     secureContextRequired: true,
   },
-  webVTT: {
+  'webvtt': {
     name: 'WebVTT API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API',
     check: () => window?.VTTCue !== undefined && window?.VTTRegion !== undefined,
   },
-  webWorkersAPI: {
+  'web-workers-api': {
     name: 'Web Workers API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers',
     path: 'window.Worker',
   },
-  webXRDeviceAPI: {
+  'webxr-device-api': {
     name: 'WebXR Device API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API',
     path: 'navigator.xr',
     experimental: true,
     secureContextRequired: true,
   },
-  windowControlsOverlayAPI: {
+  'window-controls-overlay-api': {
     name: 'Window Controls Overlay API',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API',
     path: 'navigator.windowControlsOverlay',
     experimental: true,
   },
   // X [complete]
-  xmlHttpRequest: {
+  'xml-http-request': {
     name: 'XMMLHttpRequest',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest',
     path: 'window.XMLHttpRequest',