Rename sections to categories

This commit is contained in:
Sam Carlton 2020-11-28 15:16:56 -06:00
parent e578118bab
commit fd63c02e2a
8 changed files with 56 additions and 58 deletions

View file

@ -240,7 +240,7 @@ export default {
// results: [],
titleStartsWithResults: [],
titleContainsResults: [],
sectionContainsResults: [],
categoryContainsResults: [],
statusResults: [],
// store: overlayStore.state
}
@ -254,7 +254,7 @@ export default {
return [
...this.titleStartsWithResults,
...this.titleContainsResults,
...this.sectionContainsResults,
...this.categoryContainsResults,
...this.statusResults
]
},
@ -326,10 +326,10 @@ export default {
}
return matches
},
sectionContains (query, app) {
categoryContains (query, app) {
const matches = getAppCategory(app).label.toLowerCase().includes(query)
if (matches) {
this.sectionContainsResults.push(app)
this.categoryContainsResults.push(app)
}
return matches
},
@ -384,7 +384,7 @@ export default {
// Clear any results from before
this.titleStartsWithResults = []
this.titleContainsResults = []
this.sectionContainsResults = []
this.categoryContainsResults = []
this.statusResults = []
@ -407,7 +407,7 @@ export default {
const matchers = [
this.titleStartsWith,
this.titleContains,
this.sectionContains,
this.categoryContains,
this.statusIs
]

View file

@ -128,8 +128,8 @@ export default async function () {
const appList = []
let sectionSlug = 'start'
let sectionTitle = 'Start'
let categorySlug = '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
sectionSlug = slugify(token.content, {
categoryTitle = token.content
categorySlug = slugify(token.content, {
lower: true,
strict: true
})
// appList[sectionSlug] = []
// appList[categorySlug] = []
}
@ -192,15 +192,15 @@ export default async function () {
text,
slug: appSlug,
endpoint,
section: {
slug: sectionSlug
category: {
slug: categorySlug
},
content: token.content,
relatedLinks
})
}
// appList[sectionSlug]
// appList[categorySlug]
// console.log('token', token)

View file

@ -123,7 +123,7 @@ export default async function () {
text: getStatusText(game),
slug,
endpoint: `/game/${slug}`,
section: {
category: {
slug: 'games'
},
content: '',

View file

@ -149,7 +149,7 @@ export default async function () {
text: getStatusText(formulae),
slug,
endpoint: `/formula/${slug}`,
section: {
category: {
slug: 'homebrew'
},
content: formulae.comments,

View file

@ -86,5 +86,8 @@ export const categories = {
export function getAppCategory (app) {
return categories[app.section.slug]
if (typeof app.category === 'undefined') {
console.log('app', app)
}
return categories[app.category.slug]
}

View file

@ -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
]
})
}

View file

@ -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() {

View file

@ -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() {