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 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) {
api.chainWebpack((config, { isServer }) => {
if (isServer) {
@ -13,15 +24,7 @@ module.exports = function (api) {
})
api.loadSource(async actions => {
const teamList = JSON.parse(fs.readFileSync("./content/team.json"))
const teamCollection = actions.addCollection({
typeName: 'Team'
})
for (const teamMember of teamList) {
teamMember.description = teamMember.description | ""
teamCollection.addNode(teamMember)
}
addJSONCollection(actions, "Team", "./content/team.json")
addJSONCollection(actions, "SocialNavbarElements", "./content/ui/navbar/social.json")
})
}

73
src/layouts/Default.vue
View file

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

23
src/pages/Index.vue
View file

@ -52,7 +52,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<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-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Where can I grab it?</div>
@ -67,7 +67,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<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-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">How can I contribute?</div>
@ -80,7 +80,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<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-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Gaming?</div>
@ -100,9 +100,9 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<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="ryu_blue--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 mr-4">fab fa-windows</v-icon>
<v-icon x-large class="--text text--lighten-2 mr-4">fab fa-apple</v-icon>
<v-icon x-large class="--text text--lighten-2">fab fa-linux</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Platforms</div>
@ -115,7 +115,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<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-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Discord</div>
@ -129,7 +129,7 @@
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<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-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Why the name?</div>
@ -154,7 +154,7 @@
<v-flex xs12>
<v-card class="elevation-0 transparent">
<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-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Our Team</div>
@ -162,11 +162,6 @@
</v-card>
</v-flex>
</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-flex xs12 sm4 md2 v-for="member in $page.teams.edges" :key="member.node.id">
<v-card class="elevation-0 transparent">