ryujinx-archive/Ryujinx-Website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move social part of the navbar to GraphQL

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

27
content/ui/navbar/social.json Normal file
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"
}
]

23
gridsome.server.js
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)
}
}) })
} }

73
src/layouts/Default.vue
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;

23
src/pages/Index.vue
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">