feat: add share via WebShare API

app.config.ts

@@ -32,7 +32,7 @@ export default defineAppConfig({
       interaction: 'icon-park-solid:click',
       encryption: 'carbon:encryption',
       vibration: 'ph:vibrate',
-      share: 'ph-share-network-fill',
+      share: 'ph:share-network',
       fullscreen: 'ph:arrows-out-simple',
       eyedropper: 'ph:eyedropper-sample-duotone',
       pwa: 'logos:pwa',

components/ThemeSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="flex-center lt-md:(w-8 h-8) footer-link "
+    class="flex-center lt-md:(w-8 h-8) footer-item "
     @click="onClick(); useTrackEvent('click: Theme switcher');"
   >
     <ClientOnly>

components/api/Status.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  status?: WebAPIStatus
+  status?: WebAPIStatusInfo
 }>()
 </script>
 

components/api/grid/Grid.vue

@@ -11,8 +11,8 @@
 
 <script setup lang="ts">
 defineProps<{
-  apis: WebAPI[]
+  apis: WebApi[]
 }>()
 
-const webApiStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('webApiStatuses')
+const webApiStatuses: Ref<WebApiStatuses> = useState('webApiStatuses')
 </script>

components/api/grid/GridItem.vue

@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 const props = defineProps<{
-  api: WebAPI
+  api: WebApi
   available?: boolean
 }>()
 

components/api/list/List.vue

@@ -11,8 +11,8 @@
 
 <script setup lang="ts">
 defineProps<{
-  apis: WebAPI[]
+  apis: WebApi[]
 }>()
 
-const webApiStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('webApiStatuses')
+const webApiStatuses: Ref<WebApiStatuses> = useState('webApiStatuses')
 </script>

components/api/list/ListItem.vue

@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 const props = defineProps<{
-  api: WebAPI
+  api: WebApi
   available?: boolean
 }>()
 

components/api/property/Indicators.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  api: WebAPI
+  api: WebApi
 }>()
 </script>
 

components/api/source/Source.vue

@@ -3,7 +3,7 @@ import ApiSourceChrome from '~/components/api/source/Chrome.vue'
 import ApiSourceMDN from '~/components/api/source/MDN.vue'
 
 const props = defineProps<{
-  api: WebAPI
+  api: WebApi
 }>()
 
 const sourceComponent = computed(() => {

components/app/Footer.vue

@@ -1,36 +1,45 @@
+<script setup lang="ts">
+const webApiStatuses: Ref<WebApiStatuses> = useState('webApiStatuses')
+
+const shareAvailable = computed(() => !!webApiStatuses.value?.['web-share-api'])
+</script>
+
 <template>
-  <div class="flex justify-between text-sm text-dim px-3 md:px-4 h-12 box-border" border="t-solid t-1 base">
-    <span class="flex-1 flex items-center">
-      <ThemeSelector />
-      <NuxtLink
-        :to="$config.public.repoUrl"
-        class="footer-link flex-center lt-md:(w-8 h-8) ml-3 md:ml-4"
-        title="Contribute on GitHub"
-        target="_blank"
-      >
-        <Icon name="github" size="1.25rem" />
-        <span class="ml-1.5 lt-md:hidden">Contribute</span>
-      </NuxtLink>
-      <NuxtLink
-        :to="`mailto:${$config.public.feedbackEmail}`"
-        class="footer-link flex-center lt-md:(w-8 h-8) ml-3 md:ml-4"
-        title="Send feedback via email"
-        target="_blank"
-      >
-        <Icon name="email" size="1.25rem" />
-        <span class="ml-1.5 lt-md:hidden">Feedback</span>
-      </NuxtLink>
-      <NuxtLink
-        to="/info"
-        title="Legend and information about WebAPI check"
-        class="footer-link flex-center lt-md:(w-8 h-8) ml-3 md:ml-4"
-      >
-        <Icon name="info" size="1.25rem" />
-        <span class="ml-1.5 lt-md:hidden">Info</span>
-      </NuxtLink>
-    </span>
+  <div class="flex justify-between items-center text-sm text-dim px-3 md:px-4 h-12 box-border" border="t-solid t-1 base">
+    <ThemeSelector />
+    <NuxtLink
+      :to="$config.public.repoUrl"
+      class="footer-item"
+      title="Contribute on GitHub"
+      target="_blank"
+    >
+      <Icon name="github" />
+      <span>Contribute</span>
+    </NuxtLink>
+    <NuxtLink
+      :to="`mailto:${$config.public.feedbackEmail}`"
+      class="footer-item"
+      title="Send feedback via email"
+      target="_blank"
+    >
+      <Icon name="email" />
+      <span>Feedback</span>
+    </NuxtLink>
+    <div v-if="shareAvailable" class="footer-item">
+      <Icon name="share" />
+      <span>Share</span>
+    </div>
+    <NuxtLink
+      to="/info"
+      title="Legend and information about WebAPI check"
+      class="footer-item"
+    >
+      <Icon name="info" />
+      <span>Info</span>
+    </NuxtLink>
+    <span flex-1 lt-md:hidden />
     <span class="flex items-center">
-      <span>by</span>
+      <span lt-md:hidden>by</span>
       <Icon name="logos:twitter" class="ml-1 mr-1" />
       <NuxtLink
         :to="$config.public.twitterProfile"
@@ -82,3 +91,15 @@
     </span>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.footer-item {
+  @apply flex-center lt-md:(w-8 h-8) md:not-first:ml-8;
+  .icon {
+    @apply text-1.25rem;
+  }
+  span {
+    @apply ml-1.5 lt-md:hidden;
+  }
+}
+</style>

composables/webapis.ts

@@ -3,7 +3,7 @@
  * Note that it has to return a ref, otherwise the ShallowRef components break.
  */
 export const useWebApiList = () => {
-  const list = Object.keys(webApiData).reduce((list: WebAPI[], apiKey: string) => {
+  const list = Object.keys(webApiData).reduce((list: WebApi[], apiKey: string) => {
     list.push({
       id: apiKey,
       ...webApiData[apiKey],
@@ -17,7 +17,7 @@ export const useWebApiList = () => {
 /**
  * Note: this probably needs some refactoring.
  */
-export const useWebApiStatus = (api: WebAPI, available?: boolean) => {
+export const useWebApiStatus = (api: WebApi, available?: boolean) => {
   return computed(() => {
     if (available) {
       if (api.experimental) {
@@ -50,9 +50,9 @@ export const useWebApiStatus = (api: WebAPI, available?: boolean) => {
  * @param webApis: list of WebAPIs to test, defaults to all.
  * @param force: by default WebAPIs that have been checked already are skipped, unless this flag is set to true.
  */
-export const useTestWebApis = (webApis?: WebAPI[], force = false) => {
+export const useTestWebApis = (webApis?: WebApi[], force = false) => {
   if (navigator) {
-    const webApiStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('webApiStatuses', () => ({}))
+    const webApiStatuses: Ref<WebApiStatuses> = useState('webApiStatuses', () => ({}))
     webApis = webApis || useWebApiList().value
     webApis.forEach((webApi) => {
       if (force || !webApiStatuses.value[webApi.id]) {

pages/apis/[id].vue

@@ -7,11 +7,11 @@ definePageMeta({
 
 const route = useRoute()
 
-const webAPIStatuses: Ref<{ [key: keyof typeof webApiData]: boolean }> = useState('webApiStatuses', () => ({}))
+const webApiStatuses: Ref<WebApiStatuses> = 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 available = computed(() => webApiStatuses.value[webApiId.value])
 
 useSeoMeta({
   title: () => webApi.value.name,

pages/index.vue

@@ -62,7 +62,7 @@ const webApiStatuses = useState('webApiStatuses', (): { [key: keyof typeof webAp
 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)
+    ? fuse.value.search(debouncedSearchTerm.value).map((result: Fuse.FuseResult<WebApi>) => result.item)
     : webApiList
 })
 const supportedAPICount = computed(() => filteredAPIs.value.filter(api => !!webApiStatuses.value[api.id]).length)

types/webapis.d.ts

@@ -1,4 +1,4 @@
-declare interface WebAPI {
+declare interface WebApi {
   id: string, // also used as slug.
   name: string,
   path?: string,
@@ -23,7 +23,11 @@ declare interface WebAPI {
   detail?: any,
 }
 
-declare interface WebAPIStatus {
+declare interface WebApiStatuses {
+  [key: keyof typeof webApiData]: boolean
+}
+
+declare interface WebAPIStatusInfo {
   name: string,
   icon: string,
   label: string,

unocss.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
     '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',
+    'footer-item': 'text-base hover:(text-zinc-800 dark:text-white) cursor-pointer',
     'code-inline': 'font-mono px-1.5 py-0.5 bg-zinc-100 dark:bg-zinc-800 rounded',
   },
   presets: [

utils/webapis.ts

@@ -5,7 +5,7 @@ import DetailNetworkConnectionAPI from '~/components/detail/NetworkConnectionAPI
 import DetailVisualViewport from '~/components/detail/VisualViewport.vue'
 import DetailWebCryptoAPI from '~/components/detail/WebCryptoAPI.vue'
 
-export function defaultWebApiCheck(api: WebAPI) {
+export function defaultWebApiCheck(api: WebApi) {
   if (api.path) {
     const partials = api.path.split('.')
     const path = partials[0] === 'window' ? partials.slice(1).join('.') : api.path
@@ -14,7 +14,7 @@ export function defaultWebApiCheck(api: WebAPI) {
   return false
 }
 
-export const webApiData: { [slug: string]: Omit<WebAPI, 'id'> } = {
+export const webApiData: { [slug: string]: Omit<WebApi, 'id'> } = {
   'accelerometer': {
     name: 'Accelerometer',
     url: 'https://developer.mozilla.org/en-US/docs/Web/API/Accelerometer',