Fix new categories breaking site

helpers/build-app-list.js

@@ -270,6 +270,7 @@ export default async function () {
             }
 
             const category = {
+                label: categoryTitle,
                 slug: categorySlug
             }
 

helpers/categories.js

@@ -1,4 +1,13 @@
 // Universal JS imports only
+import slugify from 'slugify'
+
+
+export function makeCategorySlug ( categoryName ) {
+    return slugify(categoryName, {
+        lower: true,
+        strict: true
+    })
+}
 
 
 // Contains all types of properies to keep data consistent
@@ -139,5 +148,21 @@ export function getAppCategory (app) {
     if (typeof app.category === 'undefined') {
         console.log('app', app)
     }
+
+    // If this category is not defined yet
+    // then add it
+    if ( !categories.hasOwnProperty( app.category.slug ) ) {
+        // console.log('app', app)
+
+        const customCategory = {
+            id: null,
+            ...app.category,
+        }
+
+        categories[app.category.slug] = customCategory
+
+        console.log('Added new category', app.category.slug)
+    }
+
     return categories[app.category.slug]
 }

pages/categories.vue

@@ -73,6 +73,9 @@ export default {
             }
 
             categoryList[app.category.slug] = {
+                // Merg in category data from app
+                ...app.category,
+                // Merge in category data from category file
                 ...categories[app.category.slug],
                 appNamesList: [ app.name ]
             }
@@ -81,11 +84,14 @@ export default {
         // 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...'
             }
-        });
+        })
+
+        // console.log('categoryList', categoryList)
 
         return {
             categoryList

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">
-                {{ category.pluralLabel || category.label }} that are reported to support Apple Silicon
+                {{ pluralLabel }} that are reported to support Apple Silicon
             </h1>
 
             <h2
@@ -115,7 +115,25 @@ export default {
     },
     computed: {
         category () {
-            return categories[this.slug]
+            if ( categories.hasOwnProperty( this.slug ) ) {
+                return categories[this.slug]
+            }
+
+            // Try to find the category info within the passed apps
+            const appWithCategory = this.categoryAppList.find( app => {
+                return app.category.slug === this.slug
+            })
+
+            // console.log('appWithCategory', appWithCategory)
+
+            return appWithCategory.category
+        },
+        pluralLabel () {
+            if ( this.category.hasOwnProperty('pluralLabel') ) {
+                return this.category.pluralLabel
+            }
+
+            return this.category.label
         },
         supportedAppList () {
             return this.categoryAppList.filter(app => {
@@ -123,10 +141,10 @@ export default {
             }).map(app => app.name)
         },
         title () {
-            return `List of ${this.category.pluralLabel || this.category.label} that work on Apple Silicon?`
+            return `List of ${this.pluralLabel || this.category.label} that work on Apple Silicon?`
         },
         description () {
-            return `Check the the latest reported support status of ${this.category.pluralLabel || this.category.label} on Apple Silicon and Apple M1 Processors. `
+            return `Check the the latest reported support status of ${this.pluralLabel || this.category.label} on Apple Silicon and Apple M1 Processors. `
         },
     },
     head() {