Starts adding search pages to launcher. (#49)

* launcher base gui initial

* Bootstraps router, Omorphia, and prettier.

* Adds pages. Adds Vuex. SideBar nav contains user section and pages section.

* Adds Instance markup. Instances added to Home page.

* Adds News to home page.

* Adds settings to nav. Other touches.

* Polishing initial base GUI.

* Moves some styling to assets. Changes px values to rem.

* Removes pointless border-radius CSS.

* Implements Omorphia vars.

* Adds trending mods section.

* Updates home page.

* Swaps Vuex implementation for Pinia.

* Fixes invalid CSS on instance list item hover.

* Adds @ path resolve for imports.

* First pass on search page.

* Fix some styling of row display

* Cleaning up styles and markup.

* Fixes overall layout issues.

* Cleans up more styling. Modifies AppBar coloring.

* Allows pagination arrows to conditionally appear in RowDisplay.

* Adds paging behavior in RowDisplay.

* Updates nav and settings button styling.

* Brings in Knossos style for trending mods. Polishes News CSS.

* Updates Omorphia. Starts addressing PR comments.

* Addresses some more PR comments.

* Changes side navigation styling. Active route class implemented.

* Combines trending and popular row.

* Makes images more realistic. Adds CTA to instances.

* Converts all instances to card style. Converts more styles to rem.

* Moves Navigation and UserSection into App.vue

* Adds Modrinth favicon.

* Cleans up branch after merge.

* Removes unused styling.

* Adds transition to news card.

* Adds ofetch. Separates stores. More logic moved to instance store. Browse hits API.

* Modifies Browse instance styling. Moves Browse results out of Instance.vue.

* First pass on filtering.

* Points search at prod API.

* Updates Omorphia package. Adds index sorting.

* Fills out search functionality.

* Renames state files. Moves SearchPanel into Browse. Fixes checkbox styling.

* Changes how facets are composed. Dynamically sets loaders and categories.

* Moves search state to searchStore. Cleans up some code.

* Ups h2 font-size. Wraps search panel in Card.

* Cleans up branch after merge. Fixes some Browse styling.

* Search store produces query string. API call made in Browse.

* Changes filter-panel styling.

* Uses client and server icons directly. Removes dead code from search store.

* Clear button disabled on initial state. Accesses store directly, removes some dead code. Fixes search panel styling.

* Generates proj tags in Browse. Removes getter in search store.

* Removes unnecessary code.

* Reworks facet management. Fixes some styling.

* Relabels Tauri calls in tags.js. Attempts to call helper in Browse.

* fixed win10 stack overflow

* cargo fmt

* Makes computed value. Gets tags from Tauri. Overrides Omorphia style. Fixes dropdown width.

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Co-authored-by: Wyatt Verchere <wverchere@gmail.com>
This commit is contained in:
Zach Baird
2023-04-05 10:18:04 -04:00
committed by GitHub
parent b0c830119b
commit 8169d3ad49
17 changed files with 915 additions and 281 deletions

View File

@@ -0,0 +1,115 @@
import { defineStore } from 'pinia'
export const useInstances = defineStore('instanceStore', {
state: () => ({
instances: [],
}),
actions: {
fetchInstances() {
// Fetch from Tauri backend. We will repurpose this to get current instances, news, and popular packs. This action is distinct from the search action
const instances = [
{
id: 1,
name: 'Fabulously Optimized',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.18.1',
downloads: 10,
trending: true,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 2,
name: 'New Caves',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.18 ',
downloads: 8,
trending: true,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 3,
name: 'All the Mods 6',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.16.5',
downloads: 4,
trending: true,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 4,
name: 'Bees',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 5,
name: 'SkyFactory 4',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.12.2',
downloads: 1000,
trending: false,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 6,
name: 'RLCraft',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.12.2',
downloads: 10000,
trending: false,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 7,
name: 'Regrowth',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.7.10',
downloads: 1000,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 8,
name: 'Birds',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://avatars.githubusercontent.com/u/83074853?v=4',
},
{
id: 9,
name: 'Dogs',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 10,
name: 'Cats',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 11,
name: 'Rabbits',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
]
this.instances = [...instances]
},
},
})

View File

@@ -0,0 +1,35 @@
import { defineStore } from 'pinia'
export const useNews = defineStore('newsStore', {
state: () => ({ news: [] }),
actions: {
fetchNews() {
// Fetch from backend.
const news = [
{
id: 1,
headline: 'Caves & Cliffs Update: Part II Dev Q&A',
blurb: 'Your questions, answered!',
source: 'From Minecraft.Net',
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 2,
headline: 'Project of the WeeK: Gobblygook',
blurb: 'Your questions, answered!',
source: 'Modrinth Blog',
img: 'https://avatars.githubusercontent.com/t/3923733?s=280&v=4',
},
{
id: 3,
headline: 'Oreo makes a launcher',
blurb: 'What did it take?',
source: 'Modrinth Blog',
img: 'https://avatars.githubusercontent.com/u/30800863?v=4',
},
]
this.news = [...news]
},
},
})

View File

@@ -0,0 +1,116 @@
import { defineStore } from 'pinia'
export const useSearch = defineStore('searchStore', {
state: () => ({
searchResults: [],
searchInput: '',
totalHits: 0,
currentPage: 1,
pageCount: 1,
offset: 0,
filter: 'Relevance',
facets: [],
orFacets: [],
environments: {
client: false,
server: false,
},
activeVersions: [],
openSource: false,
limit: 20,
}),
actions: {
getQueryString() {
let andFacets = ['project_type:modpack']
// Iterate through possible andFacets
this.facets.forEach((facet) => {
andFacets.push(facet)
})
// Add open source to andFacets if enabled
if (this.openSource) andFacets.push('open_source:true')
// Create andFacet string
let formattedAndFacets = ''
andFacets.forEach((f) => (formattedAndFacets += `["${f}"],`))
formattedAndFacets = formattedAndFacets.slice(0, formattedAndFacets.length - 1)
formattedAndFacets += ''
// If orFacets are present, start building formatted orFacet filter
let formattedOrFacets = ''
if (this.orFacets.length > 0 || this.activeVersions.length > 0) {
formattedOrFacets += '['
// Aggregate normal orFacets
this.orFacets.forEach((orF) => (formattedOrFacets += `"${orF}",`))
// Add version list to orFacets
if (this.activeVersions.length > 0)
this.activeVersions.forEach((ver) => (formattedOrFacets += `"versions:${ver}",`))
// Add environments to orFacets if enabled
if (this.environments.client)
formattedOrFacets += '"client_side:optional","client_side:required,"'
if (this.environments.server)
formattedOrFacets += '"server_side:optional","server_side:required,"'
formattedOrFacets = formattedOrFacets.slice(0, formattedOrFacets.length - 1)
formattedOrFacets += ']'
}
// Aggregate facet query string
const facets = `&facets=[${formattedAndFacets}${
formattedOrFacets.length > 0 ? `,${formattedOrFacets}` : ''
}]`
// Configure results sorting
let indexSort
switch (this.filter) {
case 'Download count':
indexSort = 'downloads'
break
case 'Follow count':
indexSort = 'follows'
break
case 'Recently published':
indexSort = 'newest'
break
case 'Recently updated':
indexSort = 'updated'
break
default:
indexSort = 'relevance'
}
return `?query=${this.searchInput || ''}&limit=${this.limit}&offset=${this.offset || 0}${
facets || ''
}&index=${indexSort}`
},
setSearchResults(response) {
this.searchResults = [...response.hits]
this.totalHits = response.total_hits
this.offset = response.offset
this.pageCount = Math.ceil(this.totalHits / this.limit)
},
toggleCategory(cat) {
this.categories[cat] = !this.categories[cat]
},
toggleLoader(loader) {
this.loaders[loader] = !this.loaders[loader]
},
toggleEnv(env) {
this.environments[env] = !this.environments[env]
},
setVersions(versions) {
this.activeVersions = versions
},
resetFilters() {
this.facets = []
this.orFacets = []
Object.keys(this.environments).forEach((env) => {
this.environments[env] = false
})
this.activeVersions = []
this.openSource = false
},
},
})

View File

@@ -1,156 +1,6 @@
import { defineStore } from 'pinia'
import { useInstances } from './instances'
import { useSearch } from './search'
import { useTheming } from './theme'
import { useNews } from './news'
export const useTheming = defineStore('theme', {
state: () => ({ darkTheme: true }),
actions: {
toggleTheme() {
this.darkTheme = !this.darkTheme
},
},
})
export const useInstances = defineStore('instances', {
state: () => ({ instances: [] }),
actions: {
fetchInstances() {
// Fetch from backend.
const instances = [
{
id: 1,
name: 'Fabulously Optimized',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.18.1',
downloads: 10,
trending: true,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 2,
name: 'New Caves',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.18 ',
downloads: 8,
trending: true,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 3,
name: 'All the Mods 6',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.16.5',
downloads: 4,
trending: true,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 4,
name: 'Bees',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 5,
name: 'SkyFactory 4',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.12.2',
downloads: 1000,
trending: false,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 6,
name: 'RLCraft',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.12.2',
downloads: 10000,
trending: false,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 7,
name: 'Regrowth',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.7.10',
downloads: 1000,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 8,
name: 'Birds',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://avatars.githubusercontent.com/u/83074853?v=4',
},
{
id: 9,
name: 'Dogs',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg',
},
{
id: 10,
name: 'Cats',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://cdn.modrinth.com/data/ssUbhMkL/icon.png',
},
{
id: 11,
name: 'Rabbits',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
version: '1.15.2',
downloads: 9,
trending: false,
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
]
this.instances = [...instances]
},
},
})
export const useNews = defineStore('news', {
state: () => ({ news: [] }),
actions: {
fetchNews() {
// Fetch from backend.
const news = [
{
id: 1,
headline: 'Caves & Cliffs Update: Part II Dev Q&A',
blurb: 'Your questions, answered!',
source: 'From Minecraft.Net',
img: 'https://avatars1.githubusercontent.com/u/6166773?v=4',
},
{
id: 2,
headline: 'Project of the WeeK: Gobblygook',
blurb: 'Your questions, answered!',
source: 'Modrinth Blog',
img: 'https://avatars.githubusercontent.com/t/3923733?s=280&v=4',
},
{
id: 3,
headline: 'Oreo makes a launcher',
blurb: 'What did it take?',
source: 'Modrinth Blog',
img: 'https://avatars.githubusercontent.com/u/30800863?v=4',
},
]
this.news = [...news]
},
},
})
export { useInstances, useSearch, useTheming, useNews }

View File

@@ -0,0 +1,10 @@
import { defineStore } from 'pinia'
export const useTheming = defineStore('themeStore', {
state: () => ({ darkTheme: true }),
actions: {
toggleTheme() {
this.darkTheme = !this.darkTheme
},
},
})