The-Homebrew-Cloud/Ryujinx-Website
2
0
Fork 0
mirror of https://github.com/Ryujinx/Ryujinx-Website.git synced 2024-09-21 02:29:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

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": { "dependencies": {
"gridsome": "^0.7.0", "gridsome": "^0.7.0",
"vuetify": "^1.0.0" "vuetify": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"@gridsome/plugin-sitemap": "^0.2.3", "@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", "gridsome-plugin-robots-txt": "^1.0.2",
"webpack-node-externals": "^1.7.2" "webpack-node-externals": "^1.7.2"
} }

114
src/layouts/Default.vue
View File

@ -1,29 +1,29 @@
<template> <template>
<v-app :dark="dark"> <v-app>
<!-- IMPORTANT: KEEP THIS HERE--> <!-- IMPORTANT: KEEP THIS HERE-->
<SEO/> <SEO/>
<v-toolbar fixed app> <v-app-bar app>
<v-toolbar-side-icon class="hidden-md-and-up mr-0" @click="drawer = !drawer"></v-toolbar-side-icon> <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"> <v-avatar size="32px" tile class="ml-3 mr-1">
<g-image src="~/assets/logo.png" alt="Ryujinx" width="32"/> <g-image src="~/assets/logo.png" alt="Ryujinx" width="32"/>
</v-avatar> </v-avatar>
<v-toolbar-title v-text="title" class="ml-2"></v-toolbar-title> <v-toolbar-title v-text="title" class="ml-2"></v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down hidden-lg-and-up"> <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-icon>fas fa-home</v-icon>
</v-btn> </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-icon>fas fa-newspaper</v-icon>
</v-btn> </v-btn>
<v-btn flat exact to="/download"> <v-btn text exact to="/download">
<v-icon>fas fa-download</v-icon> <v-icon>fas fa-download</v-icon>
</v-btn> </v-btn>
<v-btn flat exact to="/contribute"> <v-btn text exact to="/contribute">
<v-icon>fas fa-code</v-icon> <v-icon>fas fa-code</v-icon>
</v-btn> </v-btn>
<v-btn <v-btn
flat text
exact exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues" href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
rel="noopener" rel="noopener"
@ -32,106 +32,106 @@
<v-icon>fas fa-gamepad</v-icon> <v-icon>fas fa-gamepad</v-icon>
</v-btn> </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-icon>fab {{ element.node.icon }}</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">
<v-btn flat exact to="/">Home</v-btn> <v-btn text exact to="/">Home</v-btn>
<v-btn flat href="https://blog.ryujinx.org/">Blog</v-btn> <v-btn text href="https://blog.ryujinx.org/">Blog</v-btn>
<v-btn flat exact to="/download">Download</v-btn> <v-btn text exact to="/download">Download</v-btn>
<v-btn flat exact to="/contribute">Contribute</v-btn> <v-btn text exact to="/contribute">Contribute</v-btn>
<v-btn <v-btn
flat text
exact exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues" href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
rel="noopener" rel="noopener"
target="_blank" target="_blank"
>Compatibility</v-btn> >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-icon>fab {{ element.node.icon }}</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">
<v-btn flat @click.stop="toggleDarkMode()"> <v-btn text @click.stop="toggleDarkMode()">
<v-icon v-if="dark">fas fa-sun</v-icon> <v-icon v-if="$vuetify.theme.dark">fas fa-sun</v-icon>
<v-icon v-else>fas fa-moon</v-icon> <v-icon v-else>fas fa-moon</v-icon>
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </v-app-bar>
<v-content> <v-content>
<slot /> <slot />
</v-content> </v-content>
<v-navigation-drawer temporary v-model="drawer" fixed> <v-navigation-drawer temporary v-model="drawer" fixed>
<v-list> <v-list>
<!-- Index --> <!-- Index -->
<v-list-tile exact to="/"> <v-list-item exact to="/">
<v-list-tile-action> <v-list-item-action>
<v-icon>fas fa-home</v-icon> <v-icon>fas fa-home</v-icon>
</v-list-tile-action> </v-list-item-action>
<v-list-tile-title>Home</v-list-tile-title> <v-list-item-title>Home</v-list-item-title>
</v-list-tile> </v-list-item>
<!-- News --> <!-- News -->
<v-list-tile href="https://blog.ryujinx.org/"> <v-list-item href="https://blog.ryujinx.org/">
<v-list-tile-action> <v-list-item-action>
<v-icon>fas fa-newspaper</v-icon> <v-icon>fas fa-newspaper</v-icon>
</v-list-tile-action> </v-list-item-action>
<v-list-tile-title>Blog</v-list-tile-title> <v-list-item-title>Blog</v-list-item-title>
</v-list-tile> </v-list-item>
<!-- Download --> <!-- Download -->
<v-list-tile exact to="/download"> <v-list-item exact to="/download">
<v-list-tile-action> <v-list-item-action>
<v-icon>fas fa-download</v-icon> <v-icon>fas fa-download</v-icon>
</v-list-tile-action> </v-list-item-action>
<v-list-tile-title>Download</v-list-tile-title> <v-list-item-title>Download</v-list-item-title>
</v-list-tile> </v-list-item>
<!-- Contribute --> <!-- Contribute -->
<v-list-tile exact to="/contribute"> <v-list-item exact to="/contribute">
<v-list-tile-action> <v-list-item-action>
<v-icon>fas fa-code</v-icon> <v-icon>fas fa-code</v-icon>
</v-list-tile-action> </v-list-item-action>
<v-list-tile-title>Contribute</v-list-tile-title> <v-list-item-title>Contribute</v-list-item-title>
</v-list-tile> </v-list-item>
<!-- Game Compatibility --> <!-- Game Compatibility -->
<v-list-tile <v-list-item
exact exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues" href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
rel="noopener" rel="noopener"
target="_blank" target="_blank"
> >
<v-list-tile-action> <v-list-item-action>
<v-icon>fas fa-gamepad</v-icon> <v-icon>fas fa-gamepad</v-icon>
</v-list-tile-action> </v-list-item-action>
<v-list-tile-title>Game Compatibility</v-list-tile-title> <v-list-item-title>Game Compatibility</v-list-item-title>
</v-list-tile> </v-list-item>
<v-divider></v-divider> <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-item 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-action>
<v-icon :color="element.node.color">fab {{ element.node.icon }}</v-icon> <v-icon :color="element.node.color">fab {{ element.node.icon }}</v-icon>
</v-list-tile-action> </v-list-item-action>
<v-list-tile-title>{{element.node.title}}</v-list-tile-title> <v-list-item-title>{{element.node.title}}</v-list-item-title>
</v-list-tile> </v-list-item>
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
<v-footer class="text-xs-center"> <v-footer class="text-center">
<v-flex class="text-xs-left"> <v-col class="text-left">
<v-card-text class="py-2 text-center"> <v-card-text class="py-2 text-center">
Website designed by Website designed by
<a rel="noopener" target="_blank" href="https://twitter.com/Lordmau5">Lordmau5</a> <a rel="noopener" target="_blank" href="https://twitter.com/Lordmau5">Lordmau5</a>
</v-card-text> </v-card-text>
</v-flex> </v-col>
<v-flex class="text-xs-right"> <v-col class="text-right">
<v-card-text class="py-2 text-center"> <v-card-text class="py-2 text-center">
{{this.$static.metadata.siteAuthor}} © {{ new Date().getFullYear() }} {{this.$static.metadata.siteAuthor}} © {{ new Date().getFullYear() }}
</v-card-text> </v-card-text>
</v-flex> </v-col>
</v-footer> </v-footer>
</v-app> </v-app>
</template> </template>
@ -171,15 +171,17 @@ export default {
data() { data() {
return { return {
title: "Ryujinx - Nintendo Switch Emulator", title: "Ryujinx - Nintendo Switch Emulator",
dark: process.isClient && localStorage.dark_mode === "true",
drawer: false, drawer: false,
}; };
}, },
methods: { methods: {
toggleDarkMode() { toggleDarkMode() {
this.dark = !this.dark; this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
localStorage.dark_mode = this.dark; localStorage.dark_mode = this.$vuetify.theme.dark;
} }
},
beforeMount() {
this.$vuetify.theme.dark = localStorage.dark_mode === "true"
} }
}; };
</script> </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 DefaultLayout from '~/layouts/Default.vue'
import SEO from '~/components/SEO.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 // First inject custom CSS needed
head.link.push({ head.link.push({
rel: 'stylesheet', 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 // Remove the generator tag
@ -27,15 +27,28 @@ export default function (Vue, { appOptions, router, head }) {
const opts = { const opts = {
theme: { theme: {
ryu_blue: '#00C4E1', themes: {
ryu_orange: '#FF5E5B' light: {
} ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B',
},
dark: {
ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B',
}
}
},
icons: {
iconfont: 'fa',
},
} //opts includes, vuetify themes, icons, etc. } //opts includes, vuetify themes, icons, etc.
Vue.use(Vuetify, opts) Vue.use(Vuetify)
appOptions.vuetify = new Vuetify(opts);
// Disable production tip // Disable production tip
Vue.config.productionTip = false; //Vue.config.productionTip = false;
// Set default layout as a global component // Set default layout as a global component
Vue.component('Layout', DefaultLayout) Vue.component('Layout', DefaultLayout)

40
src/pages/Build.vue
View File

@ -2,15 +2,15 @@
<Layout> <Layout>
<div> <div>
<section> <section>
<v-layout column wrap class="my-5" align-center> <v-row class="my-5" align="center">
<v-container grid-list-xl fluid> <v-container fluid>
<v-layout row wrap align-start justify-center> <v-row align="start" justify="center">
<v-flex xs12 md6> <v-col cols="12" md="6">
<div class="text-xs-center"> <div class="text-center">
<p class="display-1">Building Ryujinx:</p> <p class="display-1">Building Ryujinx:</p>
<span class="subheading"> <span class="subheading">
<v-layout row wrap align-start justify-center> <v-row align="start" justify="center">
<v-flex xs12> <v-col cols="12">
<p class="mt-4 title">Step one:</p> <p class="mt-4 title">Step one:</p>
<p> <p>
Download NET Core Download NET Core
@ -20,20 +20,20 @@
target="_blank" target="_blank"
>here</a>. Then install the SDK. >here</a>. Then install the SDK.
</p> </p>
</v-flex> </v-col>
<v-flex xs12 md6> <v-col cols="12" md="6">
<p class="mt-4 title">Step two (Variant one):</p> <p class="mt-4 title">Step two (Variant one):</p>
<p> <p>
After the installation of the Net Core SDK is done; go ahead and copy the Clone link from GitHub from 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.) <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. You can Git Clone the repo by using the GitBash, or you may use the second variant.
</p> </p>
</v-flex> </v-col>
<v-flex xs12 md6> <v-col cols="12" md="6">
<p class="mt-4 title">Step two (Variant two):</p> <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> <p>Download the ZIP Tarball. Then extract it to a directory of your choice.</p>
</v-flex> </v-col>
<v-flex xs12> <v-col cols="12">
<p class="mt-4 title">Step three:</p> <p class="mt-4 title">Step three:</p>
<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, 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>. <code>dotnet publish -c Release -r win10-x64</code>.
The build directory is "root/bin/release/etc/etc." The build directory is "root/bin/release/etc/etc."
</p> </p>
</v-flex> </v-col>
<v-flex xs12> <v-col cols="12">
<p class="mt-4 title">Step four:</p> <p class="mt-4 title">Step four:</p>
<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. 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. Do keep in mind, that emulation is finicky, and will most likely crash at some point.
</p> </p>
</v-flex> </v-col>
</v-layout> </v-row>
</span> </span>
</div> </div>
</v-flex> </v-col>
</v-layout> </v-row>
</v-container> </v-container>
</v-layout> </v-row>
</section> </section>
</div> </div>
</Layout> </Layout>

64
src/pages/Contribute.vue
View File

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

196
src/pages/Download.vue
View File

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

151
src/pages/Index.vue
View File

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