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

Migrate to Vuetify 2.0.0

Browse source
This commit is contained in:
Thog 2020-02-10 15:59:13 +01:00
parent aa5d3b7002
commit da7f8c46a6
8 changed files with 349 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
.eslintrc.js Normal file
View file

@ -0,0 +1,28 @@
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue",
'vuetify'
],
"rules": {
'vuetify/no-deprecated-classes': 'error',
'vuetify/grid-unknown-attributes': 'error',
'vuetify/no-legacy-grid': 'error',
}
};

5
package.json
View file

@ -10,10 +10,13 @@
},
"dependencies": {
"gridsome": "^0.7.0",
"vuetify": "^1.0.0"
"vuetify": "^2.0.0"
},
"devDependencies": {
"@gridsome/plugin-sitemap": "^0.2.3",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.1.2",
"eslint-plugin-vuetify": "^1.0.0-beta.5",
"gridsome-plugin-robots-txt": "^1.0.2",
"webpack-node-externals": "^1.7.2"
}

114
src/layouts/Default.vue
View file

@ -1,29 +1,29 @@
<template>
<v-app :dark="dark">
<v-app>
<!-- IMPORTANT: KEEP THIS HERE-->
<SEO/>
<v-toolbar fixed app>
<v-toolbar-side-icon class="hidden-md-and-up mr-0" @click="drawer = !drawer"></v-toolbar-side-icon>
<v-app-bar app>
<v-app-bar-nav-icon class="hidden-md-and-up mr-0" @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-avatar size="32px" tile class="ml-3 mr-1">
<g-image src="~/assets/logo.png" alt="Ryujinx" width="32"/>
</v-avatar>
<v-toolbar-title v-text="title" class="ml-2"></v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down hidden-lg-and-up">
<v-btn flat exact to="/">
<v-btn text exact to="/">
<v-icon>fas fa-home</v-icon>
</v-btn>
<v-btn flat href="https://blog.ryujinx.org/">
<v-btn text href="https://blog.ryujinx.org/">
<v-icon>fas fa-newspaper</v-icon>
</v-btn>
<v-btn flat exact to="/download">
<v-btn text exact to="/download">
<v-icon>fas fa-download</v-icon>
</v-btn>
<v-btn flat exact to="/contribute">
<v-btn text exact to="/contribute">
<v-icon>fas fa-code</v-icon>
</v-btn>
<v-btn
flat
text
exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
rel="noopener"
@ -32,106 +32,106 @@
<v-icon>fas fa-gamepad</v-icon>
</v-btn>
<v-btn flat v-for="element in $static.socialNavbarElements.edges" :key="element.node.id" :color="element.node.color" :href="element.node.href">
<v-btn text 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">
<v-btn flat exact to="/">Home</v-btn>
<v-btn flat href="https://blog.ryujinx.org/">Blog</v-btn>
<v-btn flat exact to="/download">Download</v-btn>
<v-btn flat exact to="/contribute">Contribute</v-btn>
<v-btn text exact to="/">Home</v-btn>
<v-btn text href="https://blog.ryujinx.org/">Blog</v-btn>
<v-btn text exact to="/download">Download</v-btn>
<v-btn text exact to="/contribute">Contribute</v-btn>
<v-btn
flat
text
exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
rel="noopener"
target="_blank"
>Compatibility</v-btn>
<v-btn flat v-for="element in $static.socialNavbarElements.edges" :key="element.node.id" :color="element.node.color" :href="element.node.href">
<v-btn text 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">
<v-btn flat @click.stop="toggleDarkMode()">
<v-icon v-if="dark">fas fa-sun</v-icon>
<v-btn text @click.stop="toggleDarkMode()">
<v-icon v-if="$vuetify.theme.dark">fas fa-sun</v-icon>
<v-icon v-else>fas fa-moon</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
</v-app-bar>
<v-content>
<slot />
</v-content>
<v-navigation-drawer temporary v-model="drawer" fixed>
<v-list>
<!-- Index -->
<v-list-tile exact to="/">
<v-list-tile-action>
<v-list-item exact to="/">
<v-list-item-action>
<v-icon>fas fa-home</v-icon>
</v-list-tile-action>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile>
</v-list-item-action>
<v-list-item-title>Home</v-list-item-title>
</v-list-item>
<!-- News -->
<v-list-tile href="https://blog.ryujinx.org/">
<v-list-tile-action>
<v-list-item href="https://blog.ryujinx.org/">
<v-list-item-action>
<v-icon>fas fa-newspaper</v-icon>
</v-list-tile-action>
<v-list-tile-title>Blog</v-list-tile-title>
</v-list-tile>
</v-list-item-action>
<v-list-item-title>Blog</v-list-item-title>
</v-list-item>
<!-- Download -->
<v-list-tile exact to="/download">
<v-list-tile-action>
<v-list-item exact to="/download">
<v-list-item-action>
<v-icon>fas fa-download</v-icon>
</v-list-tile-action>
<v-list-tile-title>Download</v-list-tile-title>
</v-list-tile>
</v-list-item-action>
<v-list-item-title>Download</v-list-item-title>
</v-list-item>
<!-- Contribute -->
<v-list-tile exact to="/contribute">
<v-list-tile-action>
<v-list-item exact to="/contribute">
<v-list-item-action>
<v-icon>fas fa-code</v-icon>
</v-list-tile-action>
<v-list-tile-title>Contribute</v-list-tile-title>
</v-list-tile>
</v-list-item-action>
<v-list-item-title>Contribute</v-list-item-title>
</v-list-item>
<!-- Game Compatibility -->
<v-list-tile
<v-list-item
exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
rel="noopener"
target="_blank"
>
<v-list-tile-action>
<v-list-item-action>
<v-icon>fas fa-gamepad</v-icon>
</v-list-tile-action>
<v-list-tile-title>Game Compatibility</v-list-tile-title>
</v-list-tile>
</v-list-item-action>
<v-list-item-title>Game Compatibility</v-list-item-title>
</v-list-item>
<v-divider></v-divider>
<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-list-item v-for="element in $static.socialNavbarElements.edges" :key="element.node.id" :color="element.node.color" :href="element.node.href">
<v-list-item-action>
<v-icon :color="element.node.color">fab {{ element.node.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>{{element.node.title}}</v-list-tile-title>
</v-list-tile>
</v-list-item-action>
<v-list-item-title>{{element.node.title}}</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-footer class="text-xs-center">
<v-flex class="text-xs-left">
<v-footer class="text-center">
<v-col class="text-left">
<v-card-text class="py-2 text-center">
Website designed by
<a rel="noopener" target="_blank" href="https://twitter.com/Lordmau5">Lordmau5</a>
</v-card-text>
</v-flex>
<v-flex class="text-xs-right">
</v-col>
<v-col class="text-right">
<v-card-text class="py-2 text-center">
{{this.$static.metadata.siteAuthor}} © {{ new Date().getFullYear() }}
</v-card-text>
</v-flex>
</v-col>
</v-footer>
</v-app>
</template>
@ -171,15 +171,17 @@ export default {
data() {
return {
title: "Ryujinx - Nintendo Switch Emulator",
dark: process.isClient && localStorage.dark_mode === "true",
drawer: false,
};
},
methods: {
toggleDarkMode() {
this.dark = !this.dark;
localStorage.dark_mode = this.dark;
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
localStorage.dark_mode = this.$vuetify.theme.dark;
}
},
beforeMount() {
this.$vuetify.theme.dark = localStorage.dark_mode === "true"
}
};
</script>

27
src/main.js
View file

@ -4,11 +4,11 @@ import '~/external/fontawesome/css/fontawesome-all.css'
import DefaultLayout from '~/layouts/Default.vue'
import SEO from '~/components/SEO.vue'
export default function (Vue, { appOptions, router, head }) {
export default function (Vue, { appOptions, head }) {
// First inject custom CSS needed
head.link.push({
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons&display=swap'
href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap'
})
// Remove the generator tag
@ -27,15 +27,28 @@ export default function (Vue, { appOptions, router, head }) {
const opts = {
theme: {
ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B'
}
themes: {
light: {
ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B',
},
dark: {
ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B',
}
}
},
icons: {
iconfont: 'fa',
},
} //opts includes, vuetify themes, icons, etc.
Vue.use(Vuetify, opts)
Vue.use(Vuetify)
appOptions.vuetify = new Vuetify(opts);
// Disable production tip
Vue.config.productionTip = false;
//Vue.config.productionTip = false;
// Set default layout as a global component
Vue.component('Layout', DefaultLayout)

40
src/pages/Build.vue
View file

@ -2,15 +2,15 @@
<Layout>
<div>
<section>
<v-layout column wrap class="my-5" align-center>
<v-container grid-list-xl fluid>
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<div class="text-xs-center">
<v-row class="my-5" align="center">
<v-container fluid>
<v-row align="start" justify="center">
<v-col cols="12" md="6">
<div class="text-center">
<p class="display-1">Building Ryujinx:</p>
<span class="subheading">
<v-layout row wrap align-start justify-center>
<v-flex xs12>
<v-row align="start" justify="center">
<v-col cols="12">
<p class="mt-4 title">Step one:</p>
<p>
Download NET Core
@ -20,20 +20,20 @@
target="_blank"
>here</a>. Then install the SDK.
</p>
</v-flex>
<v-flex xs12 md6>
</v-col>
<v-col cols="12" md="6">
<p class="mt-4 title">Step two (Variant one):</p>
<p>
After the installation of the Net Core SDK is done; go ahead and copy the Clone link from GitHub from
<a href="https://github.com/Ryujinx/Ryujinx" rel="noopener" target="_blank">here</a> (via Clone or Download --> Copy HTTPS Link. Or you can download the ZIP tarball.)
You can Git Clone the repo by using the GitBash, or you may use the second variant.
</p>
</v-flex>
<v-flex xs12 md6>
</v-col>
<v-col cols="12" md="6">
<p class="mt-4 title">Step two (Variant two):</p>
<p>Download the ZIP Tarball. Then extract it to a directory of your choice.</p>
</v-flex>
<v-flex xs12>
</v-col>
<v-col cols="12">
<p class="mt-4 title">Step three:</p>
<p>
Build the App using a Command prompt in the ROOT directory. You can quickly access it by Holding shift in explorer (in the Ryujinx directory) then right clicking,
@ -41,21 +41,21 @@
<code>dotnet publish -c Release -r win10-x64</code>.
The build directory is "root/bin/release/etc/etc."
</p>
</v-flex>
<v-flex xs12>
</v-col>
<v-col cols="12">
<p class="mt-4 title">Step four:</p>
<p>
In order to run a game or homebrew; simply drag the file onto the Executable. The app will launch, and the homebrew/game will begin emulation.
Do keep in mind, that emulation is finicky, and will most likely crash at some point.
</p>
</v-flex>
</v-layout>
</v-col>
</v-row>
</span>
</div>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-layout>
</v-row>
</section>
</div>
</Layout>

64
src/pages/Contribute.vue
View file

@ -2,42 +2,42 @@
<Layout>
<div>
<section>
<v-layout column wrap class="my-5" align-center>
<v-container grid-list-xl fluid>
<v-layout row wrap align-start justify-center>
<v-flex xs12 md8>
<div class="text-xs-center">
<v-row class="my-5" align="center">
<v-container fluid>
<v-row align="start" justify="center">
<v-col cols="12" md="8">
<div class="text-center">
<p class="display-1">How may I contribute?</p>
<span class="subheading">
<v-layout row wrap align-start justify-center class="hidden-sm-and-down">
<v-flex xs12 md6>
<v-row align="start" justify="center" class="hidden-sm-and-down">
<v-col cols="12" md="6">
<p class="headline mt-4">Helping With Development</p>
</v-flex>
<v-flex xs12 md6>
</v-col>
<v-col cols="12" md="6">
<p class="headline mt-4">Helping With Donations</p>
</v-flex>
</v-layout>
</v-col>
</v-row>
<v-layout row wrap align-center justify-center class="hidden-sm-and-down">
<v-flex xs12 md6>
<v-row align="center" justify="center" class="hidden-sm-and-down">
<v-col cols="12" md="6">
<p class="mt-2">
You may contribute if you have experience in C#, Switch Homebrew, image design, Discord management, etc.
It doesn't matter what you're good at. If you have any skills that you think would be useful in the development,
please do contact us through our Discord.
</p>
</v-flex>
<v-flex xs12 md6>
</v-col>
<v-col cols="12" md="6">
<p class="mt-2">
If you can't help out with development experience, there's other ways to support.
Whilst monetary donations are by no means required, we do appreciate them.
They'll go towards necessary equipment and the likes.
In return, there's some rewards that you as a supporter will get (for example access to a patreon-only text channel on our Discord).
</p>
</v-flex>
</v-layout>
</v-col>
</v-row>
<v-layout row wrap align-start justify-center class="hidden-sm-and-down">
<v-flex xs12 md6>
<v-row align="start" justify="center" class="hidden-sm-and-down">
<v-col cols="12" md="6">
<v-btn
href="https://discord.gg/VkQYXAZ"
rel="noopener"
@ -48,8 +48,8 @@
>
<v-icon left>fab fa-discord</v-icon>Join our Discord!
</v-btn>
</v-flex>
<v-flex xs12 md6>
</v-col>
<v-col cols="12" md="6">
<v-btn
href="https://patreon.com/Ryujinx"
rel="noopener"
@ -60,11 +60,11 @@
>
<v-icon left>fab fa-patreon</v-icon>Become a patron!
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
<v-layout row wrap align-start justify-center class="hidden-md-and-up">
<v-flex xs12 md6>
<v-row align="start" justify="center" class="hidden-md-and-up">
<v-col cols="12" md="6">
<p class="headline mt-4">Helping With Development</p>
<p class="mt-2">
You may contribute if you have experience in C#, Switch Homebrew, image design, Discord management, etc.
@ -82,8 +82,8 @@
>
<v-icon left>fab fa-discord</v-icon>Join our Discord!
</v-btn>
</v-flex>
<v-flex xs12 md6>
</v-col>
<v-col cols="12" md="6">
<p class="headline mt-4">Helping With Donations</p>
<p class="mt-2">
If you can't help out with development experience, there's other ways to support.
@ -102,8 +102,8 @@
>
<v-icon left>fab fa-patreon</v-icon>Become a patron!
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
<div fluid>
<iframe
@ -118,10 +118,10 @@
</div>
</span>
</div>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-layout>
</v-row>
</section>
</div>
</Layout>

196
src/pages/Download.vue
View file

@ -2,68 +2,78 @@
<Layout>
<div>
<section>
<v-layout column wrap class="my-5" align-center>
<v-container grid-list-xl fluid>
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<div class="text-xs-center">
<v-row class="my-5" align="center">
<v-container fluid>
<v-row align="start" justify="center">
<v-col cols="12" md="6">
<div class="text-center">
<p class="display-1">Building Ryujinx and latest downloads</p>
<img class="text-xs-center" width="100%" src="@/assets/shell.png" alt="Shell" />
<img class="text-center" width="100%" src="@/assets/shell.png" alt="Shell" />
<span class="subheading">
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<v-row align="start" justify="center">
<v-col cols="12" md="6">
<p class="mt-4 title">Building methods</p>
<v-btn dark color="ryu_blue" to="/build">
<v-icon left>fas fa-code</v-icon>.NET Core
<v-btn dark class="mx-2" color="ryu_blue" to="/build">
<v-icon class="ml-n1 mr-2">fas fa-code</v-icon>.NET Core
</v-btn>
</v-flex>
<v-flex xs12 md6>
</v-col>
<v-col cols="12" md="6">
<p class="mt-4 title">Automatically compiled builds</p>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL}-win_x64.zip`"
>
<v-icon>fab fa-windows</v-icon>
</v-btn>
<span>{{ this.version }}</span>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
class="mx-2"
dark
color="ryu_orange"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL}-win_x64.zip`"
>
<v-icon class="mx-5">fab fa-windows</v-icon>
</v-btn>
</template>
<span>{{ version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL}-linux_x64.tar.gz`"
>
<v-icon>fab fa-linux</v-icon>
</v-btn>
<span>{{ this.version }}</span>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
class="mx-2"
dark
color="ryu_orange"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL}-linux_x64.tar.gz`"
>
<v-icon class="mx-5">fab fa-linux</v-icon>
</v-btn>
</template>
<span>{{ version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL}-osx_x64.zip`"
>
<v-icon>fab fa-apple</v-icon>
</v-btn>
<span>{{ this.version }}</span>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
class="mx-2"
dark
color="ryu_orange"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL}-osx_x64.zip`"
>
<v-icon class="mx-5">fab fa-apple</v-icon>
</v-btn>
</template>
<span>{{ version }}</span>
</v-tooltip>
<br />
<v-btn
flat
text
class="my-2"
target="_blank"
rel="noopener"
href="https://ci.appveyor.com/project/gdkchan/ryujinx"
@ -80,53 +90,62 @@
class="caption"
>(If you're not a developer, these builds aren't for you.)</span>
</p>
<div class="text-center">
<div v-if="showProfiledBuilds">
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL_profiled}-win_x64.zip`"
>
<v-icon>fab fa-windows</v-icon>
</v-btn>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
class="mx-2"
dark
color="ryu_blue"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL_profiled}-win_x64.zip`"
>
<v-icon class="mx-5">fab fa-windows</v-icon>
</v-btn>
</template>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL_profiled}-linux_x64.tar.gz`"
>
<v-icon>fab fa-linux</v-icon>
</v-btn>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
class="mx-2"
dark
color="ryu_blue"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL_profiled}-linux_x64.tar.gz`"
>
<v-icon class="mx-5">fab fa-linux</v-icon>
</v-btn>
</template>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL_profiled}-osx_x64.zip`"
>
<v-icon>fab fa-apple</v-icon>
</v-btn>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
class="mx-2"
dark
color="ryu_blue"
target="_blank"
rel="noopener"
:loading="isLoading"
:href="`${downloadURL_profiled}-osx_x64.zip`"
>
<v-icon class="mx-5">fab fa-apple</v-icon>
</v-btn>
</template>
<span>{{ this.version }}</span>
</v-tooltip>
</div>
<div v-else>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
@ -134,14 +153,15 @@
@click.stop="showProfiledBuilds = true"
>I know what I'm doing</v-btn>
</div>
</v-flex>
</v-layout>
</div>
</v-col>
</v-row>
</span>
</div>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-layout>
</v-row>
</section>
</div>
</Layout>

151
src/pages/Index.vue
View file

@ -2,19 +2,22 @@
<Layout>
<div>
<section>
<v-parallax :src="require('@/assets/wallp.png')" height="600">
<v-layout column align-center justify-center class="text-xs-center">
<g-image src="~/assets/logo.png" alt="Ryujinx" class="mb-5" width="128"/>
<p class="display-1">A simple, experimental Nintendo Switch emulator.</p>
</v-layout>
<v-parallax :src="require('@/assets/wallp.png')" alt="Parallax wallpaper" height="600" fluid>
<v-row align="center"
justify="center">
<v-col class="text-center">
<g-image src="~/assets/logo.png" alt="Ryujinx" class="mb-5" width="128" height="128"/>
<p class="display-1">A simple, experimental Nintendo Switch emulator.</p>
</v-col>
</v-row>
</v-parallax>
</section>
<section>
<v-layout column wrap class="mt-5" align-center>
<v-container grid-list-xl fluid>
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<div class="text-xs-center">
<v-row class="mt-5" align="center">
<v-container fluid>
<v-row align="start" justify="center">
<v-col cols="12" md="6">
<div class="text-center">
<p class="display-1">What is Ryujinx?</p>
<span class="subheading">
<small>
@ -31,109 +34,113 @@
class="my-2"
>Ryujinx is available on GitHub and is licensed under the "MIT" license.</p>
<div class="text-center">
<v-btn
dark
class="ma-2"
color="ryu_blue"
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
>
<v-icon left>fas fa-gamepad</v-icon>Game compatibility list
<v-icon class="ml-n1 mr-2">fas fa-gamepad</v-icon> Game compatibility list
</v-btn>
<v-btn dark color="ryu_orange" to="/download">
<v-icon left>fas fa-download</v-icon>Download the latest build
<v-btn dark class="ma-2" color="ryu_orange" to="/download">
<v-icon class="ml-n1 mr-2">fas fa-download</v-icon> Download the latest build
</v-btn>
</div>
</span>
</div>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
<v-container grid-list-xl>
<v-layout row wrap align-start>
<v-flex xs12 md4>
<v-container>
<v-row align="start">
<v-col cols="12" md="4">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<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>
<div class="display-1 text-center">Where can I grab it?</div>
</v-card-title>
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
As of right now, the emulator has no stable builds;
although, you may follow the build guide by clicking the "Build" menu option above.
Or you may download the latest pre-compiled build (above).
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
</v-col>
<v-col cols="12" md="4">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<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>
<div class="display-1 text-center">How can I contribute?</div>
</v-card-title>
<v-card-text
class="text-xs-center"
class="text-center"
>Please visit the contributing tab for more information.</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
</v-col>
<v-col cols="12" md="4">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<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>
<div class="display-1 text-center">Gaming?</div>
</v-card-title>
<v-card-text
class="text-xs-center"
class="text-center"
>Ryujinx boots lots of games, but almost none are playable, and won't be for a while.</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-layout>
</v-row>
<v-parallax class="hidden-sm-and-down" :src="require('@/assets/wallp2.png')" height="200"></v-parallax>
<v-layout column wrap align-center>
<v-container grid-list-xl>
<v-layout row wrap align-start>
<v-flex xs12 md4>
<v-row align="center">
<v-container>
<v-row align="start">
<v-col cols="12" md="4">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<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>
<div class="display-1 text-center">Platforms</div>
</v-card-title>
<v-card-text
class="text-xs-center"
class="text-center"
>Ryujinx is currently available for Windows, Linux, and macOS.</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
</v-col>
<v-col cols="12" md="4">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<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>
<div class="display-1 text-center">Discord</div>
</v-card-title>
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
Join the Ryujinx Discord server; you can get help,
as well as converse with fellow users and developers.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
</v-col>
<v-col cols="12" md="4">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<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>
<div class="display-1 text-center">Why the name?</div>
</v-card-title>
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
The name Ryujinx is based on the name "Ryujin."
In other words, a name for a Mythical (Sea-God) Dragon.
More information can be found here.
@ -142,31 +149,31 @@
The NX part of the name is from the Codename of the Switch itself.
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-layout>
</v-row>
<v-parallax class="hidden-sm-and-down" :src="require('@/assets/wallp3.png')" height="200"></v-parallax>
<v-layout column wrap align-center>
<v-container grid-list-xl>
<v-layout row wrap align-start justify-center>
<v-flex xs12>
<v-row align="center">
<v-container>
<v-row align="start" justify="center">
<v-col cols="12">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<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>
<div class="display-1 text-center">Our Team</div>
</v-card-title>
</v-card>
</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-col>
</v-row>
<v-row align="start" justify="center">
<v-col cols="12" sm="4" md="2" v-for="member in $page.teams.edges" :key="member.node.id">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<v-avatar size="72">
<g-image alt="{{member.node.name}}'s avatar" :src="member.node.avatar" />
<g-image :alt="member.node.name" :src="member.node.avatar" />
</v-avatar>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
@ -175,19 +182,19 @@
:href="`https://github.com/${member.node.github}`"
rel="noopener"
target="_blank"
class="headline text-xs-center"
class="headline text-center"
>{{ member.node.name }}</a>
<p v-else class="headline text-xs-center">{{ member.name }}</p>
<p v-else class="headline text-center">{{ member.name }}</p>
</v-card-title>
<v-card-text class="text-xs-center">
<v-card-text class="text-center">
<p class="title">{{ member.node.title }}</p>
<em v-if="member.node.description">{{ member.node.description }}</em>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-layout>
</v-row>
</section>
</div>
</Layout>