Merge branch 'develop'

components/list-summary.vue

@@ -3,7 +3,7 @@
     <div class="list-summary space-y-2">
 
         <div>
-            Currently there are <strong>{{ total }} listed</strong>,
+            <strong>{{ total }} listed</strong>,
             <span>
                 <span
                     v-for="percentage in percentages"
@@ -34,13 +34,25 @@
 
 <script>
 
-import statuses from '~/helpers/statuses'
+import getListSummaryNumbers from '~/helpers/get-list-summary-numbers.js'
 
 export default {
     props: {
         appList: {
             type: Array,
-            required: true
+            default: null
+        },
+        customNumbers: {
+            type: Object,
+            default: () => {
+                return {
+                    total: null,
+                    nativePercent: null,
+                    rosettaPercent: null,
+                    unreportedPercent: null,
+                    unsupportedPercent: null
+                }
+            }
         }
     },
     data: function () {
@@ -53,7 +65,7 @@ export default {
     },
     computed: {
         total () {
-            return this.appList.length
+            return (this.customNumbers.total) ? this.customNumbers.total : this.appList.length
         },
         percentages () {
             return [
@@ -62,28 +74,28 @@ export default {
                     bgColor: 'bg-green-500',
                     emoji: '✅',
                     percent: this.nativePercent,
-                    verbiage: `are natively supported, `
+                    verbiage: `Native, `
                 },
                 {
                     textColor: 'text-green-200',
                     bgColor: 'bg-green-200',
                     emoji: '✳️',
                     percent: this.rosettaPercent,
-                    verbiage: `run via Rosetta 2, `
+                    verbiage: `Rosetta, `
                 },
                 {
                     textColor: 'text-orange-500',
                     bgColor: 'bg-orange-500',
                     emoji: '🔶',
                     percent: this.unreportedPercent,
-                    verbiage: `need more info, `
+                    verbiage: `need info, `
                 },
                 {
                     textColor: 'text-red',
                     bgColor: 'bg-red',
                     emoji: '🚫',
                     percent: this.unsupportedPercent,
-                    verbiage: `are not working. `
+                    verbiage: `unsupported. `
                 },
             ].filter( percentage => {
                 const isZero = (percentage.percent === 0)
@@ -104,34 +116,24 @@ export default {
     created () {
         // console.log('total apps ', this.total)
 
-        // Create a totals object to collect amounts
+        const hasCustomNumbers = Object.entries(this.customNumbers).some(([key, number]) => number !== null)
-        const totals = {}
 
-        // Get status slugs from statuses
+        if (hasCustomNumbers) {
-        Object.entries(statuses).forEach( ([_, statusSlug]) => {
-            totals[statusSlug] = 0
-        })
 
-        // Count uses of each status
+            this.nativePercent = this.customNumbers.nativePercent
-        this.appList.forEach( app => {
+            this.rosettaPercent = this.customNumbers.rosettaPercent
-            // console.log('app.status', app.status)
+            this.unreportedPercent = this.customNumbers.unreportedPercent
+            this.unsupportedPercent = this.customNumbers.unsupportedPercent
 
-            for (const statusKey in statuses) {
+            return
-                if (app.status === statuses[statusKey]) {
+        }
-                    totals[app.status]++
-                    break
-                }
-            }
 
-        })
+        const summaryNumbers = getListSummaryNumbers(this.appList)
 
-        // console.log('totals', totals)
+        this.nativePercent = summaryNumbers.nativePercent
-
+        this.rosettaPercent = summaryNumbers.rosettaPercent
-        this.nativePercent = Number((( totals['native'] / this.total ) * 100).toFixed(1))
+        this.unreportedPercent = summaryNumbers.unreportedPercent
-        this.rosettaPercent = Number((( totals['rosetta'] / this.total ) * 100).toFixed(1))
+        this.unsupportedPercent = summaryNumbers.unsupportedPercent
-        this.unreportedPercent = Number((( totals['unreported'] / this.total ) * 100).toFixed(1))
-
-        this.unsupportedPercent = Number((100 - (this.nativePercent + this.rosettaPercent + this.unreportedPercent)).toFixed(1))
 
         // console.log('this.nativePercent', this.nativePercent)
         // console.log('this.unsupportedPercent', this.unsupportedPercent)

components/search.vue

@@ -1,13 +1,16 @@
 <template>
     <div class="search w-full">
-        <div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
 
-            <ListSummary
+        <slot name="before-search">
-                :app-list="appList"
+            <div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
-                class="max-w-4xl"
-            />
 
-        </div>
+                <ListSummary
+                    :app-list="appList"
+                    class="max-w-4xl"
+                />
+
+            </div>
+        </slot>
 
         <div class="search-input relative">
             <input
@@ -75,7 +78,7 @@
                 >
                     <!-- app.endpoint: {{ app.endpoint }} -->
                     <a
-                        :href="app.endpoint"
+                        :href="getAppEndpoint(app)"
                         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 "
                         style="transition-property: border;"
                     >
@@ -168,6 +171,7 @@
 import scrollIntoView from 'scroll-into-view-if-needed'
 
 import { getAppCategory } from '~/helpers/categories.js'
+import { getAppEndpoint } from '~/helpers/app-derived.js'
 // import appList from '~/static/app-list.json'
 
 // import EmailSubscribe from '~/components/email-subscribe.vue'
@@ -320,6 +324,7 @@ export default {
     },
     methods: {
         getAppCategory,
+        getAppEndpoint,
         // Search priorities
         titleStartsWith (query, app) {
             const matches = app.name.toLowerCase().startsWith(query)

helpers/app-derived.js

@@ -0,0 +1,11 @@
+// App Data that is derived from other app data
+
+export function getAppEndpoint ( app ) {
+    // console.log('app', app)
+
+    if (app.category.slug === 'homebrew') return `/formula/${app.slug}`
+
+    if (app.category.slug === 'games') return `/game/${app.slug}`
+
+    return `/app/${app.slug}`
+}

helpers/build-app-list.js

@@ -6,6 +6,7 @@ import axios from 'axios'
 
 import statuses from './statuses'
 import parseGithubDate from './parse-github-date'
+import { getAppEndpoint } from './app-derived'
 
 
 const md = new MarkdownIt()
@@ -58,8 +59,10 @@ const lookForLastUpdated = function (app, commits) {
 
         // console.log('commit', commit)
 
+        const appEndpoint = getAppEndpoint(app)
+
         // $$ If message body contains endpoint
-        if (commit.messageBody.includes(app.endpoint)) {
+        if (commit.messageBody.includes(appEndpoint)) {
             // console.log('Found', app.name ,commit.committedDate)
             return commit.committedDate
         }
@@ -78,7 +81,7 @@ const lookForLastUpdated = function (app, commits) {
 
         // $$$ If commits comments contains endpoint
         for (const { node: comment } of commit.comments.edges) {
-            if (comment.body.includes(app.endpoint)) {
+            if (comment.body.includes(appEndpoint)) {
                 // console.log('Found', app.name ,commit.committedDate)
                 return commit.committedDate
             }
@@ -165,7 +168,12 @@ export default async function () {
                 strict: true
             })
 
-            const endpoint = `/app/${appSlug}`
+            const endpoint = getAppEndpoint({
+                category: {
+                    slug: null
+                },
+                slug: appSlug
+            })// `/app/${appSlug}`
 
             let status = 'unknown'
 
@@ -176,7 +184,11 @@ export default async function () {
                 }
             }
 
-            const lastUpdatedRaw = lookForLastUpdated({ name, endpoint }, commits)
+            const category = {
+                slug: categorySlug
+            }
+
+            const lastUpdatedRaw = lookForLastUpdated({ name, slug: appSlug, endpoint, category }, commits)
 
             const lastUpdated = (lastUpdatedRaw) ? {
                 raw: lastUpdatedRaw,
@@ -191,10 +203,8 @@ export default async function () {
                 // url,
                 text,
                 slug: appSlug,
-                endpoint,
+                // endpoint,
-                category: {
+                category,
-                    slug: categorySlug
-                },
                 // content: token.content,
                 relatedLinks
             })

helpers/build-game-list.js

@@ -4,6 +4,7 @@ import slugify from 'slugify'
 import axios from 'axios'
 
 // import { statuses } from './build-app-list'
+// import { getAppEndpoint } from './app-derived'
 
 
 // console.log('process.env.GAMES_SOURCE', process.env.GAMES_SOURCE)
@@ -129,16 +130,21 @@ export default async function () {
             continue
         }
 
+        const category = {
+            slug: 'games'
+        }
+
         gameList.push({
             name: game.Games,
             status,
             // url: `https://rawg.io/search?query=${encodeURIComponent(game.Games)}`,
             text: getStatusText(game),
             slug,
-            endpoint: `/game/${slug}`,
+            // endpoint: getAppEndpoint({
-            category: {
+            //     slug,
-                slug: 'games'
+            //     category
-            },
+            // }),//`/game/${slug}`,
+            category,
             content: '',
             // relatedLinks: [],
             reports: [

helpers/build-homebrew-list.js

@@ -1,7 +1,7 @@
 
 // import { promises as fs } from 'fs'
 // import MarkdownIt from 'markdown-it'
-import slugify from 'slugify'
+// import slugify from 'slugify'
 import axios from 'axios'
 
 // import statuses from './statuses'
@@ -10,6 +10,7 @@ import axios from 'axios'
 const marked = require('marked')
 const HTMLParser = require(`node-html-parser`)
 
+// import { getAppEndpoint } from './app-derived'
 
 
 const statusesTranslations = {
@@ -144,16 +145,21 @@ export default async function () {
         //     strict: true
         // })
 
+        const category = {
+            slug: 'homebrew'
+        }
+
         formulaeList.push({
             name: formulae.name,
             status: parseStatus(formulae),
             // url: `https://formulae.brew.sh/formula/${formulae.name}`,
             text: getStatusText(formulae),
             slug,
-            endpoint: `/formula/${slug}`,
+            // endpoint: getAppEndpoint({
-            category: {
+            //     slug,
-                slug: 'homebrew'
+            //     category
-            },
+            // }),//`/formula/${slug}`,
+            category,
             content: formulae.comments,
             relatedLinks: [
                 {

helpers/get-list-summary-numbers.js

@@ -0,0 +1,43 @@
+import statuses from '~/helpers/statuses'
+
+export default function ( appList ) {
+
+    const totalApps = appList.length
+
+    // Create a totals object to collect amounts
+    const totals = {}
+
+    // Get status slugs from statuses
+    Object.entries(statuses).forEach( ([_, statusSlug]) => {
+        totals[statusSlug] = 0
+    })
+
+    // Count uses of each status
+    appList.forEach( app => {
+        // console.log('app.status', app.status)
+
+        for (const statusKey in statuses) {
+            if (app.status === statuses[statusKey]) {
+                totals[app.status]++
+                break
+            }
+        }
+
+    })
+
+    // console.log('totals', totals)
+
+    const nativePercent = Number((( totals['native'] / totalApps ) * 100).toFixed(1))
+    const rosettaPercent = Number((( totals['rosetta'] / totalApps ) * 100).toFixed(1))
+    const unreportedPercent = Number((( totals['unreported'] / totalApps ) * 100).toFixed(1))
+
+    const unsupportedPercent = Number((100 - (nativePercent + rosettaPercent + unreportedPercent)).toFixed(1))
+
+    return {
+        total: totalApps,
+        nativePercent,
+        rosettaPercent,
+        unreportedPercent,
+        unsupportedPercent,
+    }
+}

helpers/get-list.js

@@ -4,9 +4,10 @@ import homebrewList from '~/static/homebrew-list.json'
 
 import { byTimeThenNull } from '~/helpers/sort-list.js'
 
+export const sortedAppList = appList.sort(byTimeThenNull)
 
 export const allList = [
-    ...appList.sort(byTimeThenNull),
+    ...sortedAppList,
     ...homebrewList,
     ...gameList,
 ]

nuxt.config.js

@@ -7,6 +7,7 @@ import buildGamesList from './helpers/build-game-list.js'
 import buildHomebrewList from './helpers/build-homebrew-list.js'
 
 import { categories } from './helpers/categories.js'
+import { getAppEndpoint } from './helpers/app-derived.js'
 
 
 const listsOptions = [
@@ -119,7 +120,7 @@ export default {
                         homebrewRoutes
                     ] = lists.map((list, listI) => {
                         return list.map( app => {
-                            return app.endpoint
+                            return getAppEndpoint(app)
                         })
                     })
 

pages/index.vue

@@ -12,8 +12,19 @@
                 :app-list="allList"
                 :quick-buttons="quickButtons"
                 :initial-limit="200"
-                @update:query="query = $event"
+                @update:query="onQueryUpdate"
-            />
+            >
+                <template v-slot:before-search>
+                    <div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
+
+                        <ListSummary
+                            :custom-numbers="customSummaryNumbers"
+                            class="max-w-4xl"
+                        />
+
+                    </div>
+                </template>
+            </Search>
 
             <div class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
                 <LinkButton
@@ -46,29 +57,50 @@
 </template>
 
 <script>
+import axios from 'axios'
+
+import getListSummaryNumbers from '~/helpers/get-list-summary-numbers.js'
+
 import Search from '~/components/search.vue'
 import LinkButton from '~/components/link-button.vue'
 import AllUpdatesSubscribe from '~/components/all-updates-subscribe.vue'
+import ListSummary from '~/components/list-summary.vue'
 
 export default {
     async asyncData () {
         // const { default: appList } = await import('~/static/app-list.json')
         // const { default: gamelist } = await import('~/static/game-list.json')
 
-        const { allList } = await import('~/helpers/get-list.js')
+        const { sortedAppList, allList } = await import('~/helpers/get-list.js')
+
+
 
         return {
-            allList
+            // Filter app list to leave out data not needed for search
+            initialAppList: sortedAppList.map( app => {
+                return {
+                    name: app.name,
+                    status: app.status,
+                    slug: app.slug,
+                    // endpoint: app.endpoint,
+                    text: app.text,
+                    lastUpdated: app.lastUpdated,
+                    category: app.category,
+                }
+            }),
+            customSummaryNumbers: getListSummaryNumbers(allList)
         }
     },
     components: {
         Search,
         LinkButton,
-        AllUpdatesSubscribe
+        AllUpdatesSubscribe,
+        ListSummary
     },
     data: function () {
         return {
             query: '',
+            fetchedAppList: [],
             quickButtons: [
                 {
                     label: '✅ Full Native Support',
@@ -112,6 +144,45 @@ export default {
                 },
             ]
         }
+    },
+    computed: {
+        allList () {
+            return [
+                ...this.initialAppList,
+                ...this.fetchedAppList
+            ]
+        }
+    },
+    methods: {
+        async onQueryUpdate ( $event ) {
+            // console.log('$event', $event)
+            this.query = $event
+
+            // If fetched lists have already been loaded in
+            // OR if there's no query
+            // then stop
+            if (this.fetchedAppList.length !== 0 || this.query.trim().length === 0) return
+
+            const fetchedListUrls = [
+                '/game-list.json',
+                '/homebrew-list.json'
+            ]
+
+            const fetchedLists = await Promise.all(fetchedListUrls.map( async listUrl => {
+                // Fetch List
+                const response = await axios.get(listUrl)
+                // Extract apps from response data
+                const fetchedApps = response.data
+
+                return fetchedApps
+            }))
+
+            // console.log('fetchedLists', fetchedLists)
+
+            this.fetchedAppList = fetchedLists.flat(1)
+
+            return
+        }
     }
 }
 </script>