mirror of
https://github.com/Ryujinx/Ryujinx-Website.git
synced 2024-09-21 02:29:52 +02:00
Migrate to Vuetify 2.0.0
This commit is contained in:
Thog
parent
aa5d3b7002
commit
da7f8c46a6
28
.eslintrc.js
Normal file
28
.eslintrc.js
Normal 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',
|
||||
}
|
||||
};
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
23
src/main.js
23
src/main.js
@ -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: {
|
||||
themes: {
|
||||
light: {
|
||||
ryu_blue: '#00C4E1',
|
||||
ryu_orange: '#FF5E5B'
|
||||
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)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -2,26 +2,28 @@
|
||||
<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>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
slot="activator"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
dark
|
||||
color="ryu_orange"
|
||||
target="_blank"
|
||||
@ -29,13 +31,16 @@
|
||||
:loading="isLoading"
|
||||
:href="`${downloadURL}-win_x64.zip`"
|
||||
>
|
||||
<v-icon>fab fa-windows</v-icon>
|
||||
<v-icon class="mx-5">fab fa-windows</v-icon>
|
||||
</v-btn>
|
||||
<span>{{ this.version }}</span>
|
||||
</template>
|
||||
<span>{{ version }}</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
slot="activator"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
dark
|
||||
color="ryu_orange"
|
||||
target="_blank"
|
||||
@ -43,13 +48,16 @@
|
||||
:loading="isLoading"
|
||||
:href="`${downloadURL}-linux_x64.tar.gz`"
|
||||
>
|
||||
<v-icon>fab fa-linux</v-icon>
|
||||
<v-icon class="mx-5">fab fa-linux</v-icon>
|
||||
</v-btn>
|
||||
<span>{{ this.version }}</span>
|
||||
</template>
|
||||
<span>{{ version }}</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
slot="activator"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
dark
|
||||
color="ryu_orange"
|
||||
target="_blank"
|
||||
@ -57,13 +65,15 @@
|
||||
:loading="isLoading"
|
||||
:href="`${downloadURL}-osx_x64.zip`"
|
||||
>
|
||||
<v-icon>fab fa-apple</v-icon>
|
||||
<v-icon class="mx-5">fab fa-apple</v-icon>
|
||||
</v-btn>
|
||||
<span>{{ this.version }}</span>
|
||||
</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,10 +90,13 @@
|
||||
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>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
slot="activator"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
dark
|
||||
color="ryu_blue"
|
||||
target="_blank"
|
||||
@ -91,13 +104,16 @@
|
||||
:loading="isLoading"
|
||||
:href="`${downloadURL_profiled}-win_x64.zip`"
|
||||
>
|
||||
<v-icon>fab fa-windows</v-icon>
|
||||
<v-icon class="mx-5">fab fa-windows</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{ this.version }}</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
slot="activator"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
dark
|
||||
color="ryu_blue"
|
||||
target="_blank"
|
||||
@ -105,13 +121,16 @@
|
||||
:loading="isLoading"
|
||||
:href="`${downloadURL_profiled}-linux_x64.tar.gz`"
|
||||
>
|
||||
<v-icon>fab fa-linux</v-icon>
|
||||
<v-icon class="mx-5">fab fa-linux</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{ this.version }}</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn
|
||||
slot="activator"
|
||||
v-on="on"
|
||||
class="mx-2"
|
||||
dark
|
||||
color="ryu_blue"
|
||||
target="_blank"
|
||||
@ -119,14 +138,14 @@
|
||||
:loading="isLoading"
|
||||
:href="`${downloadURL_profiled}-osx_x64.zip`"
|
||||
>
|
||||
<v-icon>fab fa-apple</v-icon>
|
||||
<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>
|
||||
|
||||
@ -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"/>
|
||||
<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-layout>
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user