List app categories from single file

pages/categories.vue

@@ -7,6 +7,8 @@
 
             <div class="line-separator border-white border-t-2 mb-12" />
 
+            <!-- sectionList: {{ sectionList }} -->
+
             <ul class="categories-list space-y-3">
                 <li
                     v-for="(section, i) in sectionList"
@@ -22,7 +24,7 @@
                     >
                         <div class="font-hairline">
                             <div>{{ section.label }}</div>
-                            <div class="text-xs opacity-75 mb-3">{{ section.appNames.slice(0, 25).join(', ') }}, etc...</div>
+                            <div class="text-xs opacity-75 mb-3">{{ section.appNames }}</div>
                         </div>
                         <div>➔</div>
                     </a>
@@ -48,6 +50,7 @@ export default {
         // const { default: gamelist } = await import('~/static/game-list.json')
 
         const { allList } = await import('~/helpers/get-list.js')
+        const { categories } = await import('~/helpers/categories.js')
 
         const sectionList = {}
 
@@ -57,17 +60,26 @@ export default {
             // console.log('app.section.slug', app.section.slug)
 
             if (sectionList.hasOwnProperty(app.section.slug)) {
-                sectionList[app.section.slug].appNames.push(app.name)
+                sectionList[app.section.slug].appNamesList.push(app.name)
 
                 return
             }
 
             sectionList[app.section.slug] = {
-                ...app.section,
-                appNames: [ app.name ]
+                ...categories[app.section.slug],
+                appNamesList: [ app.name ]
             }
         })
 
+        // Add App Names Text into sectionList
+        Object.keys(sectionList).map(function(key, index) {
+            const section = sectionList[key]
+            sectionList[key] = {
+                ...section,
+                appNames: section.appNamesList.slice(0, 25).join(', ') + ', etc...'
+            }
+        });
+
         return {
             sectionList
         }

pages/kind/_slug.vue

@@ -2,8 +2,9 @@
     <section class="container py-24">
         <div class="flex flex-col items-center">
             <h1 class="title text-3xl md:text-5xl font-hairline leading-tight text-center pb-4">
-                {{ section.label }} that are reported to support Apple Silicon
+                {{ section.pluralLabel || section.label }} that are reported to support Apple Silicon
             </h1>
+
             <h2
                 v-if="supportedAppList.length !== 0"
                 class="subtitle md:text-xl font-light text-center"
@@ -43,6 +44,8 @@ import LinkButton from '~/components/link-button.vue'
 
 import { byTimeThenNull } from '~/helpers/sort-list.js'
 
+import { categories } from '~/helpers/categories.js'
+
 import appList from '~/static/app-list.json'
 import gamelist from '~/static/game-list.json'
 import homebrewList from '~/static/homebrew-list.json'
@@ -72,9 +75,7 @@ export default {
     },
     computed: {
         section () {
-            return allList.find(app => {
-                return app.section.slug === this.slug
-            }).section
+            return categories[this.slug]
         },
         sectionAppList () {
 
@@ -92,9 +93,7 @@ export default {
             }).map(app => app.name)
         },
         title () {
-            if (!this.section.label.includes('Tools')) return `List of ${this.section.label} Apps that work on Apple Silicon?`
-
-            return `List of ${this.section.label} that work on Apple Silicon?`
+            return `List of ${this.section.pluralLabel || this.section.label} that work on Apple Silicon?`
         }
     },
     head() {