You've already forked AstralRinth
forked from didirus/AstralRinth
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:
115
theseus_gui/src/store/instances.js
Normal file
115
theseus_gui/src/store/instances.js
Normal 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]
|
||||
},
|
||||
},
|
||||
})
|
||||
35
theseus_gui/src/store/news.js
Normal file
35
theseus_gui/src/store/news.js
Normal 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]
|
||||
},
|
||||
},
|
||||
})
|
||||
116
theseus_gui/src/store/search.js
Normal file
116
theseus_gui/src/store/search.js
Normal 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
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -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 }
|
||||
|
||||
10
theseus_gui/src/store/theme.js
Normal file
10
theseus_gui/src/store/theme.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useTheming = defineStore('themeStore', {
|
||||
state: () => ({ darkTheme: true }),
|
||||
actions: {
|
||||
toggleTheme() {
|
||||
this.darkTheme = !this.darkTheme
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user