move social part of the navbar to GraphQL

Also fix an error caused by last commit and tweak icon colors.
This commit is contained in:
Thog 2020-02-08 00:03:10 +01:00
parent 3e37b94485
commit cf97ff4384
4 changed files with 72 additions and 74 deletions

View file

@ -0,0 +1,27 @@
[
{
"title": "Patreon",
"color": "red",
"href": "https://patreon.com/Ryujinx",
"icon": "fa-patreon"
},
{
"title": "GitHub",
"color": "green",
"href": "https://github.com/Ryujinx/Ryujinx",
"icon": "fa-github"
},
{
"title": "Twitter",
"color": "blue",
"href": "https://twitter.com/RyujinxEmu",
"icon": "fa-twitter"
},
{
"title": "Discord",
"color": "#7289DA",
"href": "https://discord.gg/VkQYXAZ",
"icon": "fa-discord"
}
]

View file

@ -1,6 +1,17 @@
const nodeExternals = require('webpack-node-externals') const nodeExternals = require('webpack-node-externals')
const fs = require('fs') const fs = require('fs')
function addJSONCollection(actions,typeName, path) {
const list = JSON.parse(fs.readFileSync(path));
const collection = actions.addCollection({
typeName: typeName
})
for (const element of list) {
collection.addNode(element)
}
}
module.exports = function (api) { module.exports = function (api) {
api.chainWebpack((config, { isServer }) => { api.chainWebpack((config, { isServer }) => {
if (isServer) { if (isServer) {
@ -13,15 +24,7 @@ module.exports = function (api) {
}) })
api.loadSource(async actions => { api.loadSource(async actions => {
const teamList = JSON.parse(fs.readFileSync("./content/team.json")) addJSONCollection(actions, "Team", "./content/team.json")
const teamCollection = actions.addCollection({ addJSONCollection(actions, "SocialNavbarElements", "./content/ui/navbar/social.json")
typeName: 'Team'
})
for (const teamMember of teamList) {
teamMember.description = teamMember.description | ""
teamCollection.addNode(teamMember)
}
}) })
} }

View file

@ -29,17 +29,8 @@
<v-icon>fas fa-gamepad</v-icon> <v-icon>fas fa-gamepad</v-icon>
</v-btn> </v-btn>
<v-btn flat color="red" href="https://patreon.com/Ryujinx"> <v-btn flat v-for="element in $static.socialNavbarElements.edges" :key="element.node.id" :color="element.node.color" :href="element.node.href">
<v-icon>fab fa-patreon</v-icon> <v-icon>fab {{ element.node.icon }}</v-icon>
</v-btn>
<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx">
<v-icon>fab fa-github</v-icon>
</v-btn>
<v-btn flat color="blue" href="https://twitter.com/RyujinxEmu">
<v-icon>fab fa-twitter</v-icon>
</v-btn>
<v-btn flat color="#7289DA" href="https://discord.gg/VkQYXAZ">
<v-icon>fab fa-discord</v-icon>
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
<v-toolbar-items class="hidden-md-and-down"> <v-toolbar-items class="hidden-md-and-down">
@ -54,17 +45,8 @@
target="_blank" target="_blank"
>Compatibility</v-btn> >Compatibility</v-btn>
<v-btn flat color="red" href="https://patreon.com/Ryujinx"> <v-btn flat v-for="element in $static.socialNavbarElements.edges" :key="element.node.id" :color="element.node.color" :href="element.node.href">
<v-icon>fab fa-patreon</v-icon> <v-icon>fab {{ element.node.icon }}</v-icon>
</v-btn>
<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx">
<v-icon>fab fa-github</v-icon>
</v-btn>
<v-btn flat color="blue" href="https://twitter.com/RyujinxEmu">
<v-icon>fab fa-twitter</v-icon>
</v-btn>
<v-btn flat color="#7289DA" href="https://discord.gg/VkQYXAZ">
<v-icon>fab fa-discord</v-icon>
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
<v-toolbar-items class="ml-0 mr-2"> <v-toolbar-items class="ml-0 mr-2">
@ -125,36 +107,11 @@
<v-divider></v-divider> <v-divider></v-divider>
<!-- Patreon --> <v-list-tile v-for="element in $static.socialNavbarElements.edges" :key="element.node.id" :color="element.node.color" :href="element.node.href">
<v-list-tile color="red" href="https://patreon.com/Ryujinx">
<v-list-tile-action> <v-list-tile-action>
<v-icon color="red">fab fa-patreon</v-icon> <v-icon :color="element.node.color">fab {{ element.node.icon }}</v-icon>
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-title>Patreon</v-list-tile-title> <v-list-tile-title>{{element.node.title}}</v-list-tile-title>
</v-list-tile>
<!-- GitHub -->
<v-list-tile color="green" href="https://github.com/Ryujinx/Ryujinx">
<v-list-tile-action>
<v-icon color="green">fab fa-github</v-icon>
</v-list-tile-action>
<v-list-tile-title>GitHub</v-list-tile-title>
</v-list-tile>
<!-- YouTube -->
<v-list-tile color="blue" href="https://twitter.com/RyujinxEmu">
<v-list-tile-action>
<v-icon color="blue">fab fa-twitter</v-icon>
</v-list-tile-action>
<v-list-tile-title>Twitter</v-list-tile-title>
</v-list-tile>
<!-- Discord -->
<v-list-tile color="#7289DA" href="https://discord.gg/VkQYXAZ">
<v-list-tile-action>
<v-icon>fab fa-discord</v-icon>
</v-list-tile-action>
<v-list-tile-title>Discord</v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
@ -178,6 +135,22 @@ query {
} }
</static-query> </static-query>
<static-query>
query {
socialNavbarElements: allSocialNavbarElements(order: ASC) {
edges {
node {
title
color
href
icon
}
}
}
}
</static-query>
<style scoped> <style scoped>
.btn { .btn {
min-width: 0; min-width: 0;

View file

@ -52,7 +52,7 @@
<v-flex xs12 md4> <v-flex xs12 md4>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-github</v-icon> <v-icon x-large class="--text text--lighten-2">fab fa-github</v-icon>
</v-card-text> </v-card-text>
<v-card-title primary-title class="layout justify-center"> <v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Where can I grab it?</div> <div class="display-1 text-xs-center">Where can I grab it?</div>
@ -67,7 +67,7 @@
<v-flex xs12 md4> <v-flex xs12 md4>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-code</v-icon> <v-icon x-large class="--text text--lighten-2">fas fa-code</v-icon>
</v-card-text> </v-card-text>
<v-card-title primary-title class="layout justify-center"> <v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">How can I contribute?</div> <div class="display-1 text-xs-center">How can I contribute?</div>
@ -80,7 +80,7 @@
<v-flex xs12 md4> <v-flex xs12 md4>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-gamepad</v-icon> <v-icon x-large class="--text text--lighten-2">fas fa-gamepad</v-icon>
</v-card-text> </v-card-text>
<v-card-title primary-title class="layout justify-center"> <v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Gaming?</div> <div class="display-1 text-xs-center">Gaming?</div>
@ -100,9 +100,9 @@
<v-flex xs12 md4> <v-flex xs12 md4>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-windows</v-icon> <v-icon x-large class="--text text--lighten-2 mr-4">fab fa-windows</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-apple</v-icon> <v-icon x-large class="--text text--lighten-2 mr-4">fab fa-apple</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-linux</v-icon> <v-icon x-large class="--text text--lighten-2">fab fa-linux</v-icon>
</v-card-text> </v-card-text>
<v-card-title primary-title class="layout justify-center"> <v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Platforms</div> <div class="display-1 text-xs-center">Platforms</div>
@ -115,7 +115,7 @@
<v-flex xs12 md4> <v-flex xs12 md4>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-discord</v-icon> <v-icon x-large class="--text text--lighten-2">fab fa-discord</v-icon>
</v-card-text> </v-card-text>
<v-card-title primary-title class="layout justify-center"> <v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Discord</div> <div class="display-1 text-xs-center">Discord</div>
@ -129,7 +129,7 @@
<v-flex xs12 md4> <v-flex xs12 md4>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-nintendo-switch</v-icon> <v-icon x-large class="--text text--lighten-2">fab fa-nintendo-switch</v-icon>
</v-card-text> </v-card-text>
<v-card-title primary-title class="layout justify-center"> <v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Why the name?</div> <div class="display-1 text-xs-center">Why the name?</div>
@ -154,7 +154,7 @@
<v-flex xs12> <v-flex xs12>
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center"> <v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-users</v-icon> <v-icon x-large class="--text text--lighten-2">fas fa-users</v-icon>
</v-card-text> </v-card-text>
<v-card-title primary-title class="layout justify-center"> <v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Our Team</div> <div class="display-1 text-xs-center">Our Team</div>
@ -162,11 +162,6 @@
</v-card> </v-card>
</v-flex> </v-flex>
</v-layout> </v-layout>
<v-layout v-if="loading" row wrap align-center justify-center>
<v-flex xs12 class="text-xs-center">
<v-progress-circular :size="100" indeterminate color="primary"></v-progress-circular>
</v-flex>
</v-layout>
<v-layout row wrap align-start justify-center> <v-layout row wrap align-start justify-center>
<v-flex xs12 sm4 md2 v-for="member in $page.teams.edges" :key="member.node.id"> <v-flex xs12 sm4 md2 v-for="member in $page.teams.edges" :key="member.node.id">
<v-card class="elevation-0 transparent"> <v-card class="elevation-0 transparent">