feat(devices): publish sourced 2026 Mac catalog

Author: ThatGuySam

components/search-stork.vue

@@ -71,7 +71,7 @@
 
             <!-- hasStartedAnyQuery: {{ hasStartedAnyQuery }} -->
 
-            <template v-if="chunkedListings.length === 0">
+            <template v-if="chunkedListings.length === 0 && hasStartedAnyQuery">
                 <div
                     class="text-center py-4"
                 >
@@ -111,6 +111,11 @@
                     />
                 </div>
             </template>
+            <template v-else-if="chunkedListings.length === 0">
+                <div class="text-center text-sm text-gray-400 py-8">
+                    Start typing an app name or choose a status filter to search the compatibility database.
+                </div>
+            </template>
 
             <ul
                 v-for="(listingsChunk, chunkIndex) in chunkedListings"

data/apple-silicon-devices.json

@@ -0,0 +1,23 @@
+function escapeXml ( value ) {
+    return value
+        .replaceAll( '&', '&' )
+        .replaceAll( '<', '&lt;' )
+        .replaceAll( '>', '&gt;' )
+        .replaceAll( '"', '&quot;' )
+        .replaceAll( '\'', '&apos;' )
+}
+
+const deviceUrlPattern = /<url>(?:(?!<\/url>)[\s\S])*?<loc>[^<]*\/device\/[^<]*<\/loc>(?:(?!<\/url>)[\s\S])*?<\/url>/gu
+
+export function replaceDeviceUrlsInSitemap ( sitemapXml, deviceUrls ) {
+    if ( !sitemapXml.includes( '</urlset>' ) ) {
+        throw new Error( 'Cannot update device URLs in a sitemap without a urlset root' )
+    }
+
+    const withoutExistingDevices = sitemapXml.replace( deviceUrlPattern, '' )
+    const deviceEntries = deviceUrls
+        .map( url => `<url><loc>${ escapeXml( url ) }</loc></url>` )
+        .join( '' )
+
+    return withoutExistingDevices.replace( '</urlset>', `${ deviceEntries }</urlset>` )
+}

helpers/api/sitemap/devices.js

@@ -1,5 +1,4 @@
-import { makeSlug } from './slug.js'
-import { getJson } from './http.js'
+import { getListedDeviceListings } from './device-catalog.js'
 
 export function getDeviceEndpoint ( slug ) {
     return `/device/${ slug }`
@@ -8,22 +7,8 @@ export function getDeviceEndpoint ( slug ) {
 
 
 export default async function () {
-
-    const devicesJsonUrl = `${process.env.VFUNCTIONS_URL}/api/devices`
-
-    const rawDeviceList = await getJson( devicesJsonUrl )
-        .catch(function (error) {
-            // handle error
-            console.warn('Error fetching device list', error)
-        })
-
-    return rawDeviceList.filter( device => ( device.enabled !== 'no' ) ).map( device => {
-        const slug = makeSlug( device.name )
-
-        return {
-            ...device,
-            slug,
-            endpoint: getDeviceEndpoint( slug ),
-        }
-    })
+    return getListedDeviceListings().map( device => ({
+        ...device,
+        endpoint: getDeviceEndpoint( device.slug ),
+    }))
 }

helpers/build-device-list.js

@@ -238,7 +238,7 @@ function mapMetaTag ( tag ) {
 
 function mapLinkTag ( tag ) {
     return [
-        `type-${tag.type}`,
+        `link-${ tag.rel || 'unknown' }-${ tag.type || 'none' }-${ tag.href || 'none' }`,
         makeTag(tag, 'link')
     ]
 }
@@ -347,6 +347,10 @@ export class PageHead {
 
         const linkTags = {
             ...this.defaultLinkTags,
+            ...Object.fromEntries( [{
+                rel: 'canonical',
+                href: this.pageUrlString
+            }].map( mapLinkTag ) ),
             ...Object.fromEntries( this.link.map( mapLinkTag ) )
         }
 

helpers/config-node.js

@@ -0,0 +1,13 @@
+import deviceCatalogText from '~/data/apple-silicon-devices.json?raw'
+
+export const deviceCatalog = JSON.parse( deviceCatalogText )
+
+export const deviceListings = deviceCatalog.devices
+
+export function getListedDeviceListings () {
+    return deviceListings.filter( device => device.listed )
+}
+
+export function getDeviceListingBySlug ( slug ) {
+    return deviceListings.find( device => device.slug === slug ) || null
+}

helpers/device-catalog.js

@@ -1,12 +1,10 @@
 import videoListingsText from '~/static/api/youtube-video-listings.json?raw'
 
-import { deviceListingFallbacks } from './device-list-fallbacks.js'
+import { getDeviceListingBySlug } from './device-catalog.js'
 
 const parsedVideoListings = JSON.parse( videoListingsText )
 
-export function getDeviceListingBySlug ( slug ) {
-    return deviceListingFallbacks.find( device => device.slug === slug ) || null
-}
+export { getDeviceListingBySlug }
 
 export async function getVideoListingBySlug ( slug ) {
     return parsedVideoListings[slug] || null

helpers/device-list-fallbacks.js

@@ -6,6 +6,8 @@ import {
     sitemapIndexFileName,
 } from '~/helpers/constants.js'
 
+import { getListedDeviceListings } from '~/helpers/device-catalog.js'
+import { replaceDeviceUrlsInSitemap } from '~/helpers/api/sitemap/devices.js'
 import { parseSitemapXml } from '~/helpers/api/sitemap/parse.js'
 import { getText } from '~/helpers/http.js'
 
@@ -25,6 +27,8 @@ import { getText } from '~/helpers/http.js'
     const urlEntries = parseSitemapXml( sitemapIndexXML )
 
 
+    const downloadedSitemapPaths = []
+
     // Fetch each sitemap
     for ( const entry of urlEntries ) {
 
@@ -48,6 +52,21 @@ import { getText } from '~/helpers/http.js'
 
         // Save file
         await fs.writeFile( sitemapIndexFilePath, sitemapXML )
+        downloadedSitemapPaths.push( sitemapIndexFilePath )
+    }
+
+    const deviceUrls = getListedDeviceListings().map( device => {
+        return new URL( device.endpoint, process.env.PUBLIC_URL ).href
+    } )
+
+    for ( const [ index, sitemapPath ] of downloadedSitemapPaths.entries() ) {
+        const sitemapXml = await fs.readFile( sitemapPath, 'utf8' )
+        const updatedSitemapXml = replaceDeviceUrlsInSitemap(
+            sitemapXml,
+            index === 0 ? deviceUrls : []
+        )
+
+        await fs.writeFile( sitemapPath, updatedSitemapXml )
     }
 
 

helpers/site-listings.js

@@ -14,7 +14,7 @@ const routeGroups = {
     '/app/spotify',
     '/formula/bash',
     '/kind/developer-tools',
-    '/device/2023-m3-imac',
+    '/device/2026-macbook-air-13-inch-m5',
     '/app/expressvpn/benchmarks'
   ],
   video: [