Fix kind sorting differently on client and build

components/search.vue

@@ -69,6 +69,7 @@
                     :data-app-slug="app.slug"
                     class="relative"
                 >
+                    <!-- app.endpoint: {{ app.endpoint }} -->
                     <a
                         :href="app.endpoint"
                         class="flex flex-col justify-center inset-x-0 hover:bg-darkest border-2 border-white border-opacity-0 hover:border-opacity-50 focus:outline-none focus:bg-gray-50 duration-300 ease-in-out rounded-lg space-y-2 -mx-5 pl-5 md:pl-20 pr-6 md:pr-64 py-6 "
@@ -79,6 +80,7 @@
                             <div class="text-sm leading-5 font-bold">
                                 {{ app.text }}
                             </div>
+                            <!-- app.endpoint: {{ app.endpoint }} -->
                         </template>
                         <template v-else>
                             <client-only>
@@ -118,6 +120,8 @@
                                     <use href="#chevron-right" />
                                 </svg>
                             </client-only>
+
+                            <!-- app.endpoint: {{ app.endpoint }} -->
                         </template>
 
                     </a>

helpers/sort-list.js

@@ -0,0 +1,21 @@
+export function byTimeThenNull (appA, appB) {
+    // console.log('appA.lastUpdated', appA.lastUpdated)
+
+    // equal items sort equally
+    if (appA.lastUpdated === appB.lastUpdated) {
+        return 0;
+    }
+    // nulls sort after anything else
+    else if (appA.lastUpdated === null) {
+        return 1;
+    }
+    else if (appB.lastUpdated === null) {
+        return -1;
+    }
+
+    return appB.lastUpdated.timestamp - appA.lastUpdated.timestamp
+}
+
+export default function (appList) {
+    return  appList.sort(byTimeThenNull)
+}

pages/index.vue

@@ -37,30 +37,14 @@
 import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
 
+import { byTimeThenNull } from '~/helpers/sort-list.js'
+
 import appList from '~/static/app-list.json'
 import gameList from '~/game-list.json'
 
 // console.log('appList.length', appList.length)
 // console.log('gameList.length', gameList.length)
 
-function byTimeThenNull (appA, appB) {
-    // console.log('appA.lastUpdated', appA.lastUpdated)
-
-    // equal items sort equally
-    if (appA.lastUpdated === appB.lastUpdated) {
-        return 0;
-    }
-    // nulls sort after anything else
-    else if (appA.lastUpdated === null) {
-        return 1;
-    }
-    else if (appB.lastUpdated === null) {
-        return -1;
-    }
-
-    return appB.lastUpdated.timestamp - appA.lastUpdated.timestamp
-}
-
 const sortedAppList = appList.sort(byTimeThenNull)
 
 const mergedList = [

pages/kind/_slug.vue

@@ -41,14 +41,16 @@
 import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
 
+import { byTimeThenNull } from '~/helpers/sort-list.js'
+
 import appList from '~/static/app-list.json'
 
 export default {
     async asyncData ({ params: { slug } }) {
-
+        // Maybe I could import() here to reduce client script size
         return {
             slug,
-            app: appList.find(app => (app.slug === slug))
+            // app: appList.find(app => (app.slug === slug))
         }
     },
     components: {
@@ -67,9 +69,14 @@ export default {
             }).section
         },
         sectionAppList () {
-            return appList.filter(app => {
+
+            const list = appList.filter(app => {
                 return app.section.slug === this.slug
             })
+
+            const sortedList  = list.sort(byTimeThenNull)
+
+            return sortedList
         },
         supportedAppList () {
             return this.sectionAppList.filter(app => {