Merge branch 'develop'

components/relative-time.vue

@@ -10,7 +10,7 @@ import parseGithubDate from '~/helpers/parse-github-date'
 export default {
     props: {
         timestamp: {
-            type: String,
+            type: Number,
             required: true
         }
     },

components/search.vue

@@ -76,7 +76,7 @@
                         style="transition-property: border;"
                     >
                         <template v-if="seenItems[app.slug] === false && hasStartedAnyQuery === false">
-                            {{ app.section.icon.length !== 0 ? `${app.section.icon} ${app.name}` : app.name }}
+                            {{ getAppCategory(app).icon ? `${getAppCategory(app).icon} ${app.name}` : app.name }}
                             <div class="text-sm leading-5 font-bold">
                                 {{ app.text }}
                             </div>
@@ -89,7 +89,7 @@
                                 </div>
                             </client-only>
 
-                            {{ app.section.icon.length !== 0 ? `${app.section.icon} ${app.name}` : app.name }}
+                            {{ getAppCategory(app).icon ? `${getAppCategory(app).icon} ${app.name}` : app.name }}
                             <div class="text-sm leading-5 font-bold">
                                 {{ app.text }}
                             </div>
@@ -163,19 +163,13 @@
 <script>
 import scrollIntoView from 'scroll-into-view-if-needed'
 
+import { getAppCategory } from '~/helpers/categories.js'
 // import appList from '~/static/app-list.json'
 
 // import EmailSubscribe from '~/components/email-subscribe.vue'
 // import RelativeTime from '~/components/relative-time.vue'
 import ListSummary from '~/components/list-summary.vue'
 
-// import overlayStore from './mixins/store'
-// import modalRouter from '~/components/modals/mixins/router'
-// import Card from '~/components/cards/Default.vue'
-// import CardsRow from '~/components/cards/Row.vue'
-// import ComingSoonImage from '~/components/partials/ComingSoonImage.vue'
-// import InfoCircle from '~/assets/svg/info-circle.svg?inline'
-// import PlayCircle from '~/assets/svg/play-circle.svg?inline'
 
 export default {
     components: {
@@ -246,21 +240,22 @@ export default {
             // results: [],
             titleStartsWithResults: [],
             titleContainsResults: [],
-            sectionContainsResults: [],
+            categoryContainsResults: [],
             statusResults: [],
             // store: overlayStore.state
         }
     },
     computed: {
+        initialList () {
+            return this.initialLimit !== null ? this.appList.slice(0, this.initialLimit) : this.appList
+        },
         results () {
-            if (!this.hasSearchInputText) {
+            if (!this.hasSearchInputText) return this.initialList
-                return this.initialLimit !== null ? this.appList.slice(0, this.initialLimit) : this.appList
-            }
 
             return [
                 ...this.titleStartsWithResults,
                 ...this.titleContainsResults,
-                ...this.sectionContainsResults,
+                ...this.categoryContainsResults,
                 ...this.statusResults
             ]
         },
@@ -308,14 +303,20 @@ export default {
         })
 
         // Start observing all search rows
-        this.appList.forEach(app => {
+        this.initialList.forEach(app => {
-            // console.log('this.$refs[`${app.slug}-row`]', this.$refs[`${app.slug}-row`][0])
+            if (this.$refs.hasOwnProperty(`${app.slug}-row`) === false) {
+                console.log('App Row not found', app)
+                return
+            }
+
+            // console.log('this.$refs[`${app.slug}-row`]', this.$refs[`${app.slug}-row`])
             this.observer.observe(this.$refs[`${app.slug}-row`][0])
         })
 
-        console.log('appList', this.appList.length)
+        console.log('this.initialList', this.initialList.length)
     },
     methods: {
+        getAppCategory,
         // Search priorities
         titleStartsWith (query, app) {
             const matches = app.name.toLowerCase().startsWith(query)
@@ -331,10 +332,10 @@ export default {
             }
             return matches
         },
-        sectionContains (query, app) {
+        categoryContains (query, app) {
-            const matches = app.section.label.toLowerCase().includes(query)
+            const matches = getAppCategory(app).label.toLowerCase().includes(query)
             if (matches) {
-                this.sectionContainsResults.push(app)
+                this.categoryContainsResults.push(app)
             }
             return matches
         },
@@ -389,7 +390,7 @@ export default {
             // Clear any results from before
             this.titleStartsWithResults = []
             this.titleContainsResults = []
-            this.sectionContainsResults = []
+            this.categoryContainsResults = []
             this.statusResults = []
 
 
@@ -412,7 +413,7 @@ export default {
                 const matchers = [
                     this.titleStartsWith,
                     this.titleContains,
-                    this.sectionContains,
+                    this.categoryContains,
                     this.statusIs
                 ]
 

helpers/build-app-list.js

@@ -128,8 +128,8 @@ export default async function () {
 
     const appList = []
 
-    let sectionSlug = 'start'
+    let categorySlug = 'start'
-    let sectionTitle = 'Start'
+    let categoryTitle = 'Start'
     let isHeading = false
     let isParagraph = false
 
@@ -143,13 +143,13 @@ export default async function () {
 
 
         if (isHeading && token.type === 'inline') {
-            sectionTitle = token.content
+            categoryTitle = token.content
-            sectionSlug = slugify(token.content, {
+            categorySlug = slugify(token.content, {
                 lower: true,
                 strict: true
             })
 
-            // appList[sectionSlug] = []
+            // appList[categorySlug] = []
         }
 
 
@@ -188,21 +188,19 @@ export default async function () {
                 name,
                 status,
                 lastUpdated,
-                url,
+                // url,
                 text,
                 slug: appSlug,
                 endpoint,
-                section: {
+                category: {
-                    label: sectionTitle,
+                    slug: categorySlug
-                    slug: sectionSlug,
-                    icon: ''
                 },
-                content: token.content,
+                // content: token.content,
                 relatedLinks
             })
         }
 
-        // appList[sectionSlug]
+        // appList[categorySlug]
 
 
         // console.log('token', token)

helpers/build-game-list.js

@@ -119,14 +119,12 @@ export default async function () {
         gameList.push({
             name: game.Games,
             status,
-            url: `https://rawg.io/search?query=${encodeURIComponent(game.Games)}`,
+            // url: `https://rawg.io/search?query=${encodeURIComponent(game.Games)}`,
             text: getStatusText(game),
             slug,
             endpoint: `/game/${slug}`,
-            section: {
+            category: {
-                label: 'Games',
+                slug: 'games'
-                slug: 'games',
-                icon: '🎮'
             },
             content: '',
             relatedLinks: [

helpers/build-homebrew-list.js

@@ -145,14 +145,12 @@ export default async function () {
         formulaeList.push({
             name: formulae.name,
             status: parseStatus(formulae),
-            url: `https://formulae.brew.sh/formula/${formulae.name}`,
+            // url: `https://formulae.brew.sh/formula/${formulae.name}`,
             text: getStatusText(formulae),
             slug,
             endpoint: `/formula/${slug}`,
-            section: {
+            category: {
-                label: 'Homebrew',
+                slug: 'homebrew'
-                slug: 'homebrew',
-                icon: '🍺'
             },
             content: formulae.comments,
             relatedLinks: [

helpers/categories.js

@@ -0,0 +1,93 @@
+
+// Contains all types of properies to keep data consistent
+export const categoryTemplate = {
+    label: null,
+    pluralLabel: null,
+    itemSuffixLabel: null,
+    icon: null,
+    requestLinks: null
+}
+
+export const categories = {
+
+    // App lists
+    'developer-tools': {
+        ...categoryTemplate,
+        label: 'Developer Tools',
+        pluralLabel: 'Developer Tools',
+        slug: 'developer-tools',
+    },
+    'productivity-tools': {
+        ...categoryTemplate,
+        label: 'Productivity Tools',
+        pluralLabel: 'Productivity Tools',
+        slug: 'developer-tools',
+    },
+    'video-and-motion-tools': {
+        ...categoryTemplate,
+        label: 'Video and Motion Tools',
+        pluralLabel: 'Video and Motion Tools',
+        slug: 'video-and-motion-tools',
+    },
+    'social-and-communication': {
+        ...categoryTemplate,
+        label: 'Social and Communication',
+        pluralLabel: 'Social and Communication Apps',
+        slug: 'social-and-communication',
+    },
+    'entertainment-and-media-apps': {
+        ...categoryTemplate,
+        label: 'Entertainment and Media Apps',
+        pluralLabel: 'Entertainment and Media Apps',
+        slug: 'entertainment-and-media-apps',
+    },
+    'music-and-audio-tools': {
+        ...categoryTemplate,
+        label: 'Music and Audio Tools',
+        pluralLabel: 'Music and Audio Tools',
+        slug: 'music-and-audio-tools',
+    },
+    'photo-and-graphic-tools': {
+        ...categoryTemplate,
+        label: 'Photo and Graphic Tools',
+        pluralLabel: 'Photo and Graphic Tools',
+        slug: 'photo-and-graphic-tools',
+    },
+    'science-and-research-software': {
+        ...categoryTemplate,
+        label: 'Science and Research Software',
+        pluralLabel: 'Science and Research Software',
+        slug: 'science-and-research-software',
+    },
+    '3d-and-architecture': {
+        ...categoryTemplate,
+        label: '3D and Architecture',
+        pluralLabel: '3D and Architecture Applications',
+        slug: '3d-and-architecture',
+    },
+
+    // Special Lists
+    'games': {
+        ...categoryTemplate,
+        label: 'Games',
+        pluralLabel: 'Games',
+        slug: 'games',
+        icon: '🎮'
+    },
+    'homebrew': {
+        ...categoryTemplate,
+        label: 'Homebrew',
+        pluralLabel: 'Homebrew Formulae',
+        itemSuffixLabel: 'via Homebrew',
+        slug: 'homebrew',
+        icon: '🍺'
+    },
+}
+
+
+export function getAppCategory (app) {
+    if (typeof app.category === 'undefined') {
+        console.log('app', app)
+    }
+    return categories[app.category.slug]
+}

nuxt.config.js

@@ -6,6 +6,8 @@ import buildAppList from './helpers/build-app-list.js'
 import buildGamesList from './helpers/build-game-list.js'
 import buildHomebrewList from './helpers/build-homebrew-list.js'
 
+import { categories } from './helpers/categories.js'
+
 
 const listsOptions = [
     {
@@ -96,26 +98,19 @@ export default {
                 .then(( lists ) => {
                     // console.log('appList', appList)
 
-                    const sectionList = []
-
                     const [
                         appRoutes,
                         gameRoutes,
                         homebrewRoutes
                     ] = lists.map((list, listI) => {
                         return list.map( app => {
-                            // Find and store all sections
-                            if (sectionList.includes(app.section.slug) == false) {
-                                sectionList.push(app.section.slug)
-                            }
-
                             return app.endpoint
                         })
                     })
 
                     // console.log('homebrewRoutes', homebrewRoutes)
 
-                    const sectionRoutes = sectionList.map(slug => ({
+                    const categoryRoutes = Object.keys(categories).map( slug => ({
                         route: '/kind/' + slug,
                         // payload: appList
                     }))
@@ -124,7 +119,7 @@ export default {
                         ...appRoutes,
                         ...gameRoutes,
                         ...homebrewRoutes,
-                        ...sectionRoutes
+                        ...categoryRoutes
                     ]
                 })
         }

pages/categories.vue

@@ -7,22 +7,24 @@
 
             <div class="line-separator border-white border-t-2 mb-12" />
 
+            <!-- categoryList: {{ categoryList }} -->
+
             <ul class="categories-list space-y-3">
                 <li
-                    v-for="(section, i) in sectionList"
+                    v-for="(category, i) in categoryList"
-                    :key="`${section.slug}-${i}`"
+                    :key="`${category.slug}-${i}`"
-                    :ref="`${section.slug}-row`"
+                    :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>{{ category.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">{{ category.appNames }}</div>
                         </div>
                         <div>➔</div>
                     </a>
@@ -48,28 +50,38 @@ 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 = {}
+        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)) {
+            if (categoryList.hasOwnProperty(app.category.slug)) {
-                sectionList[app.section.slug].appNames.push(app.name)
+                categoryList[app.category.slug].appNamesList.push(app.name)
 
                 return
             }
 
-            sectionList[app.section.slug] = {
+            categoryList[app.category.slug] = {
-                ...app.section,
+                ...categories[app.category.slug],
-                appNames: [ app.name ]
+                appNamesList: [ app.name ]
             }
         })
 
+        // 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: {
@@ -80,8 +92,8 @@ export default {
         return {}
     },
     // computed: {
-    //     sectionList () {
+    //     categoryList () {
-    //         return sectionList
+    //         return categoryList
     //     }
     // },
     head() {

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
+                {{ category.pluralLabel || category.label }} that are reported to support Apple Silicon
             </h1>
+
             <h2
                 v-if="supportedAppList.length !== 0"
                 class="subtitle md:text-xl font-light text-center"
@@ -12,7 +13,7 @@
             </h2>
 
             <Search
-                :app-list="sectionAppList"
+                :app-list="categoryAppList"
                 :quick-buttons="[]"
                 @update:query="query = $event"
             />
@@ -43,6 +44,8 @@ import LinkButton from '~/components/link-button.vue'
 
 import { byTimeThenNull } from '~/helpers/sort-list.js'
 
+import { categories, getAppCategory } 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'
@@ -71,15 +74,13 @@ export default {
         }
     },
     computed: {
-        section () {
+        category () {
-            return allList.find(app => {
+            return categories[this.slug]
-                return app.section.slug === this.slug
-            }).section
         },
-        sectionAppList () {
+        categoryAppList () {
 
             const filteredList = allList.filter(app => {
-                return app.section.slug === this.slug
+                return app.category.slug === this.slug
             })
 
             // const sortedList = list.sort(byTimeThenNull)
@@ -87,14 +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 () {
-            if (!this.section.label.includes('Tools')) return `List of ${this.section.label} Apps that work on Apple Silicon?`
+            return `List of ${this.category.pluralLabel || this.category.label} that work on Apple Silicon?`
-
-            return `List of ${this.section.label} that work on Apple Silicon?`
         }
     },
     head() {