Rename sections to categories

pages/categories.vue

@@ -7,24 +7,24 @@
 
             <div class="line-separator border-white border-t-2 mb-12" />
 
-            <!-- sectionList: {{ sectionList }} -->
+            <!-- categoryList: {{ categoryList }} -->
 
             <ul class="categories-list space-y-3">
                 <li
-                    v-for="(section, i) in sectionList"
-                    :key="`${section.slug}-${i}`"
-                    :ref="`${section.slug}-row`"
+                    v-for="(category, i) in categoryList"
+                    :key="`${category.slug}-${i}`"
+                    :ref="`${category.slug}-row`"
                     class="relative"
                 >
-                    <!-- section.endpoint: {{ section.endpoint }} -->
+                    <!-- category.endpoint: {{ category.endpoint }} -->
                     <a
-                        :href="`/kind/${section.slug}`"
+                        :href="`/kind/${category.slug}`"
                         class="flex justify-start items-center inset-x-0 text-3xl md:text-4xl 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-x-3 -mx-5 px-5 md:pr-64 py-3"
                         style="transition-property: border;"
                     >
                         <div class="font-hairline">
-                            <div>{{ section.label }}</div>
-                            <div class="text-xs opacity-75 mb-3">{{ section.appNames }}</div>
+                            <div>{{ category.label }}</div>
+                            <div class="text-xs opacity-75 mb-3">{{ category.appNames }}</div>
                         </div>
                         <div>➔</div>
                     </a>
@@ -52,36 +52,36 @@ export default {
         const { allList } = await import('~/helpers/get-list.js')
         const { categories } = await import('~/helpers/categories.js')
 
-        const sectionList = {}
+        const categoryList = {}
 
         allList.forEach( app => {
-            // Find and store all sections
+            // Find and store all categorys
 
-            // console.log('app.section.slug', app.section.slug)
+            // console.log('app.category.slug', app.category.slug)
 
-            if (sectionList.hasOwnProperty(app.section.slug)) {
-                sectionList[app.section.slug].appNamesList.push(app.name)
+            if (categoryList.hasOwnProperty(app.category.slug)) {
+                categoryList[app.category.slug].appNamesList.push(app.name)
 
                 return
             }
 
-            sectionList[app.section.slug] = {
-                ...categories[app.section.slug],
+            categoryList[app.category.slug] = {
+                ...categories[app.category.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...'
+        // Add App Names Text into categoryList
+        Object.keys(categoryList).map(function(key, index) {
+            const category = categoryList[key]
+            categoryList[key] = {
+                ...category,
+                appNames: category.appNamesList.slice(0, 25).join(', ') + ', etc...'
             }
         });
 
         return {
-            sectionList
+            categoryList
         }
     },
     components: {
@@ -92,8 +92,8 @@ export default {
         return {}
     },
     // computed: {
-    //     sectionList () {
-    //         return sectionList
+    //     categoryList () {
+    //         return categoryList
     //     }
     // },
     head() {

pages/kind/_slug.vue

@@ -2,7 +2,7 @@
     <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.pluralLabel || section.label }} that are reported to support Apple Silicon
+                {{ category.pluralLabel || category.label }} that are reported to support Apple Silicon
             </h1>
 
             <h2
@@ -13,7 +13,7 @@
             </h2>
 
             <Search
-                :app-list="sectionAppList"
+                :app-list="categoryAppList"
                 :quick-buttons="[]"
                 @update:query="query = $event"
             />
@@ -44,7 +44,7 @@ import LinkButton from '~/components/link-button.vue'
 
 import { byTimeThenNull } from '~/helpers/sort-list.js'
 
-import { categories } from '~/helpers/categories.js'
+import { categories, getAppCategory } from '~/helpers/categories.js'
 
 import appList from '~/static/app-list.json'
 import gamelist from '~/static/game-list.json'
@@ -74,13 +74,13 @@ export default {
         }
     },
     computed: {
-        section () {
+        category () {
             return categories[this.slug]
         },
-        sectionAppList () {
+        categoryAppList () {
 
             const filteredList = allList.filter(app => {
-                return app.section.slug === this.slug
+                return app.category.slug === this.slug
             })
 
             // const sortedList = list.sort(byTimeThenNull)
@@ -88,12 +88,12 @@ export default {
             return filteredList
         },
         supportedAppList () {
-            return this.sectionAppList.filter(app => {
+            return this.categoryAppList.filter(app => {
                 return app.status.includes('yes')
             }).map(app => app.name)
         },
         title () {
-            return `List of ${this.section.pluralLabel || this.section.label} that work on Apple Silicon?`
+            return `List of ${this.category.pluralLabel || this.category.label} that work on Apple Silicon?`
         }
     },
     head() {