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

Rewrite website using Gridsome

Browse source 
TODO:
- migrate to vuetify 2.x
- CI integration
- move team.json to another repository
This commit is contained in:
Thog 2020-02-07 16:08:14 +01:00
parent a083aea6bb
commit 8134389b9f
40 changed files with 972 additions and 1850 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.babelrc
View file

@ -1,12 +0,0 @@
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

9
.editorconfig
View file

@ -1,9 +0,0 @@
root = true
[*]
charset = utf-8
indent_style = tabs
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

4
.eslintignore
View file

@ -1,4 +0,0 @@
/build/
/config/
/dist/
/*.js

29
.eslintrc.js
View file

@ -1,29 +0,0 @@
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'indent': [2, 'tab'],
'no-tabs': 0,
'semi': [2, 'always']
}
}

21
.gitignore vendored
View file

@ -1,14 +1,9 @@
*.log
.cache
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
src/.temp
package-lock.json
node_modules
dist
.env
.env.*

10
.postcssrc.js
View file

@ -1,10 +0,0 @@
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}

10
README.md
View file

@ -1,13 +1,17 @@
# Ryujinx Website
## Build Setup
### 1. Install Gridsome CLI tool if you don't have
`npm install --global @gridsome/cli`
## 2. Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
npm run develop
# build for production with minification
npm run build
@ -15,5 +19,3 @@ npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

41
build/build.js
View file

@ -1,41 +0,0 @@
'use strict'
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
const spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})

54
build/check-versions.js
View file

@ -1,54 +0,0 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}

BIN
build/logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.7 KiB

101
build/utils.js
View file

@ -1,101 +0,0 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}

22
build/vue-loader.conf.js
View file

@ -1,22 +0,0 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
}

92
build/webpack.base.conf.js
View file

@ -1,92 +0,0 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}

95
build/webpack.dev.conf.js
View file

@ -1,95 +0,0 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

145
build/webpack.prod.conf.js
View file

@ -1,145 +0,0 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig

7
config/dev.env.js
View file

@ -1,7 +0,0 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

76
config/index.js
View file

@ -1,76 +0,0 @@
'use strict'
// Template version: 1.2.8
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

4
config/prod.env.js
View file

@ -1,4 +0,0 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

5
gridsome.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
siteName: 'Ryujinx',
titleTemplate: 'Ryujinx - %s',
plugins: []
}

13
gridsome.server.js Normal file
View file

@ -0,0 +1,13 @@
const nodeExternals = require('webpack-node-externals')
module.exports = function (api) {
api.chainWebpack((config, { isServer }) => {
if (isServer) {
config.externals([
nodeExternals({
whitelist: [/^vuetify/]
})
])
}
})
}

21
index.html
View file

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Ryujinx - Switch Emulator</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" crossorigin="anonymous">
<link rel="icon" type="image/png" href="static/favicon.png">
<meta property="og:title" content="Ryujinx - Switch Emulator">
<meta property="og:type" content="website">
<meta property="og:description" content="A simple, experimental Nintendo Switch emulator.">
<meta property="og:image" content="https://ryujinx.org/static/favicon.png">
<meta property="og:image:secure_url" content="https://ryujinx.org/static/favicon.png">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

88
package.json
View file

@ -1,76 +1,18 @@
{
"name": "ryujinx_router",
"version": "1.0.0",
"name": "ryujinx_website",
"version": "2.0.0",
"description": "Ryujinx Website",
"author": "Lordmau5 <mail@lordmau5.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"moment": "^2.22.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuetify": "^1.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-markdown": "^2.2.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
"private": true,
"scripts": {
"build": "gridsome build",
"develop": "gridsome develop",
"explore": "gridsome explore"
},
"dependencies": {
"gridsome": "^0.7.0",
"vuetify": "^1.0.0"
},
"devDependencies": {
"webpack-node-externals": "^1.7.2"
}
}

12
src/.gitrepo
View file

@ -1,12 +0,0 @@
; DO NOT EDIT (unless you know what you are doing)
;
; This subdirectory is a git "subrepo", and this file is maintained by the
; git-subrepo command. See https://github.com/git-commands/git-subrepo#readme
;
[subrepo]
remote = https://github.com/vuetifyjs/templates-common.git
branch = subrepo/webpack-src
commit = 090741fa8ba4da0c6f85db64eff64550704123e1
parent = e05204fc0583a8c99f1963ce873eba1266838215
method = merge
cmdver = 0.4.0

192
src/App.vue
View file

@ -1,192 +0,0 @@
<template>
<v-app :dark="dark">
<v-toolbar fixed app>
<v-toolbar-side-icon class="hidden-md-and-up mr-0" @click="drawer = !drawer"></v-toolbar-side-icon>
<v-avatar
size="32px"
tile
class="ml-3 mr-1"
>
<img
src="@/assets/logo.png"
>
</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="{ name: 'Home' }">
<v-icon>fas fa-home</v-icon>
</v-btn>
<v-btn flat href="https://blog.ryujinx.org/">
<v-icon>fas fa-newspaper</v-icon>
</v-btn>
<v-btn flat exact :to="{ name: 'Build' }">
<v-icon>fas fa-download</v-icon>
</v-btn>
<v-btn flat exact :to="{ name: 'Contribute' }">
<v-icon>fas fa-code</v-icon>
</v-btn>
<!-- <v-btn flat exact :to="{ name: 'Compatibility' }"> -->
<v-btn flat exact href="https://github.com/Ryujinx/Ryujinx-Games-List/issues" target="_blank">
<v-icon>fas fa-gamepad</v-icon>
</v-btn>
<v-btn flat color="red" href="https://patreon.com/Ryujinx"><v-icon>fab fa-patreon</v-icon></v-btn>
<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon>fab fa-reddit</v-icon></v-btn>
</v-toolbar-items>
<v-toolbar-items class="hidden-md-and-down">
<v-btn flat exact :to="{ name: 'Home' }">Home</v-btn>
<v-btn flat href="https://blog.ryujinx.org/">Blog</v-btn>
<v-btn flat exact :to="{ name: 'Build' }">Download</v-btn>
<v-btn flat exact :to="{ name: 'Contribute' }">Contribute</v-btn>
<!-- <v-btn flat exact :to="{ name: 'Compatibility' }">Compatibility</v-btn> -->
<v-btn flat exact href="https://github.com/Ryujinx/Ryujinx-Games-List/issues" target="_blank">Compatibility</v-btn>
<v-btn flat color="red" href="https://patreon.com/Ryujinx"><v-icon>fab fa-patreon</v-icon></v-btn>
<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx"><v-icon>fab fa-github</v-icon></v-btn>
<v-btn flat color="red" href="https://yt.ryujinx.org/"><v-icon>fab fa-youtube</v-icon></v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon>fab fa-discord</v-icon></v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon>fab fa-reddit</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-icon v-else>fas fa-moon</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
<v-navigation-drawer
temporary
v-model="drawer"
fixed
>
<v-list>
<!-- Home -->
<v-list-tile exact :to="{ name: 'Home' }">
<v-list-tile-action>
<v-icon>fas fa-home</v-icon>
</v-list-tile-action>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile>
<!-- News -->
<v-list-tile href="https://blog.ryujinx.org/">
<v-list-tile-action>
<v-icon>fas fa-newspaper</v-icon>
</v-list-tile-action>
<v-list-tile-title>Blog</v-list-tile-title>
</v-list-tile>
<!-- Download -->
<v-list-tile exact :to="{ name: 'Build' }">
<v-list-tile-action>
<v-icon>fas fa-download</v-icon>
</v-list-tile-action>
<v-list-tile-title>Download</v-list-tile-title>
</v-list-tile>
<!-- Contribute -->
<v-list-tile exact :to="{ name: 'Contribute' }">
<v-list-tile-action>
<v-icon>fas fa-code</v-icon>
</v-list-tile-action>
<v-list-tile-title>Contribute</v-list-tile-title>
</v-list-tile>
<!-- Game Compatibility -->
<!-- <v-list-tile exact :to="{ name: 'Compatibility' }"> -->
<v-list-tile exact href="https://github.com/Ryujinx/Ryujinx-Games-List/issues" target="_blank">
<v-list-tile-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-divider></v-divider>
<!-- Patreon -->
<v-list-tile color="red" href="https://patreon.com/Ryujinx">
<v-list-tile-action>
<v-icon color="red">fab fa-patreon</v-icon>
</v-list-tile-action>
<v-list-tile-title>Patreon</v-list-tile-title>
</v-list-tile>
<!-- GitHub -->
<v-list-tile color="green" href="https://github.com/Ryujinx/Ryujinx">
<v-list-tile-action>
<v-icon color="green">fab fa-github</v-icon>
</v-list-tile-action>
<v-list-tile-title>GitHub</v-list-tile-title>
</v-list-tile>
<!-- YouTube -->
<v-list-tile color="red" href="https://yt.ryujinx.org/">
<v-list-tile-action>
<v-icon color="red">fab fa-youtube</v-icon>
</v-list-tile-action>
<v-list-tile-title>YouTube</v-list-tile-title>
</v-list-tile>
<!-- Discord -->
<v-list-tile color="blue" href="https://discord.gg/VkQYXAZ">
<v-list-tile-action>
<v-icon color="blue">fab fa-discord</v-icon>
</v-list-tile-action>
<v-list-tile-title>Discord</v-list-tile-title>
</v-list-tile>
<!-- Reddit -->
<v-list-tile color="red" href="https://www.reddit.com/r/Ryujinx">
<v-list-tile-action>
<v-icon color="red">fab fa-reddit</v-icon>
</v-list-tile-action>
<v-list-tile-title>Reddit</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-footer fixed app class="text-xs-center">
<v-flex>
<em>Website made with <v-icon color="red" class="mx-1">fas fa-heart</v-icon> by <a target="_blank" href="https://twitter.com/Lordmau5">Lordmau5</a></em>
</v-flex>
</v-footer>
</v-app>
</template>
<style scoped>
.btn {
min-width: 0;
}
</style>
<style>
a {
color: #00C4E1;
}
</style>
<script>
export default {
data () {
return {
dark: localStorage.dark_mode === 'true',
drawer: false,
title: 'Ryujinx - Switch Emulator'
};
},
methods: {
toggleDarkMode () {
this.dark = !this.dark;
localStorage.dark_mode = this.dark;
}
},
name: 'App'
};
</script>

0
static/.gitkeep → src/components/.gitkeep
View file

72
src/components/Build.Net_Core.vue
View file

@ -1,72 +0,0 @@
<template>
<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">
<p class="display-1">Building Ryujinx <small>(Windows only for now)</small>:</p>
<p class="headline"><em>
Support for OSX and Linux is limited and not really recommended for use as of late.<br>
To get started; you will need the .NET Core 2.1 RC1 or greater runtime installed.
</em></p>
<span class="subheading">
<v-layout row wrap align-start justify-center>
<v-flex xs12>
<p class="mt-4 title">Step one:</p>
<p>Download NET Core <a href="https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-rc1" target="_blank">here</a>. Then install the SDK.</p>
</v-flex>
<v-flex xs12 md6>
<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/gdkchan/Ryujinx" 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>
<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>
<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,
and typing the following command <code>dotnet publish -c Release -r win10-x64</code>.
The build directory is "root/bin/release/etc/etc."
</p>
</v-flex>
<v-flex xs12>
<p class="mt-4 title">Step four:</p>
<p>
In order to run a NRO or NSO; simply drag the file onto the Executable. The app will launch, and the homebrew/application will begin emulation.
Do keep in mind, that emulation is finicky, and will most likely crash at some point.
</p>
</v-flex>
</v-layout>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</template>
<script>
export default {
data () {
return {
downloadURL: '',
version: 'Loading ...'
};
}
};
</script>

178
src/components/Build.vue
View file

@ -1,178 +0,0 @@
<template>
<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">
<p class="display-1">Building Ryujinx and latest downloads</p>
<img class="text-xs-center" width="100%" src="@/assets/shell.png">
<span class="subheading">
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<p class="mt-4 title">Building methods</p>
<v-btn dark color="ryu_blue" :to="{ name: 'BuildNetCore' }">
<v-icon left>fas fa-code</v-icon>
.NET Core
</v-btn>
</v-flex>
<v-flex xs12 md6>
<p class="mt-4 title">Automatically compiled builds</p>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
:loading="isLoading"
:href="`${downloadURL}-win_x64.zip`"
>
<v-icon>fab fa-windows</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
:loading="isLoading"
:href="`${downloadURL}-linux_x64.tar.gz`"
>
<v-icon>fab fa-linux</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
:loading="isLoading"
:href="`${downloadURL}-osx_x64.zip`"
>
<v-icon>fab fa-apple</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<br>
<v-btn flat target="_blank" href="https://ci.appveyor.com/project/gdkchan/ryujinx">
<img width="140" src="https://ci.appveyor.com/api/projects/status/ssg4jwu6ve3k594s?svg=true">
</v-btn>
<p class="mt-4 title">
Profiled builds
<br>
<span class="caption">(If you're not a developer, these builds aren't for you.)</span>
</p>
<div v-if="showProfiledBuilds">
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
:loading="isLoading"
:href="`${downloadURL_profiled}-win_x64.zip`"
>
<v-icon>fab fa-windows</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
:loading="isLoading"
:href="`${downloadURL_profiled}-linux_x64.tar.gz`"
>
<v-icon>fab fa-linux</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
:loading="isLoading"
:href="`${downloadURL_profiled}-osx_x64.zip`"
>
<v-icon>fab fa-apple</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
</div>
<div v-else>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
@click.stop="showProfiledBuilds = true"
>
I know what I'm doing
</v-btn>
</div>
</v-flex>
</v-layout>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</template>
<script>
export default {
data () {
return {
downloadURL: '',
downloadURL_profiled: '',
isLoading: true,
version: 'Loading ...',
showProfiledBuilds: false,
jobId_profiled: ''
};
},
methods: {
async fetchDownloadURL () {
this.isLoading = true;
let _f = await fetch('https://ci.appveyor.com/api/projects/gdkchan/ryujinx/branch/master');
let json = await _f.json();
this.version = json.build.version;
console.log(json);
const jobId = json.build.jobs[0].jobId;
const jobIdProfiled = json.build.jobs[1].jobId;
this.downloadURL = `https://ci.appveyor.com/api/buildjobs/${jobId}/artifacts/ryujinx-${this.version}`;
this.downloadURL_profiled = `https://ci.appveyor.com/api/buildjobs/${jobIdProfiled}/artifacts/ryujinx-profiled-${this.version}`;
this.isLoading = false;
}
},
mounted () {
this.fetchDownloadURL();
}
};
</script>

155
src/components/Compatibility.vue
View file

@ -1,155 +0,0 @@
<template>
<div>
<section>
<v-card>
<v-card-title>
<v-card-title class="display-1">
Game Compatibility List
</v-card-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="games"
:loading="loading"
:search="search"
item-key="name"
must-sort
class="elevation-1"
>
<v-progress-linear slot="progress" color="blue" indeterminate></v-progress-linear>
<template slot="items" slot-scope="props">
<tr @click="props.expanded = !props.expanded">
<td>
<img :src="props.item.boxart_url" height="100px">
</td>
<td>{{ props.item.name }}</td>
<td>{{ props.item.title_id.join(', ') }}</td>
<td>{{ props.item.state_emu_version }}</td>
<td>{{ props.item.nickname }}</td>
<td>{{ props.item.state }}</td>
<td>
<vue-markdown :source="props.item.comment"></vue-markdown>
<div v-if="props.item.screen_url"><em>Click for more information</em></div>
</td>
<td>{{ props.item.state_last_date_fmt }} ({{ props.item.state_last_date }})</td>
</tr>
</template>
<template slot="expand" slot-scope="props">
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<img
v-if="props.item.screen_url"
:src="props.item.screen_url"
class="px-5 py-5"
width="100%"
>
</v-flex>
</v-layout>
</template>
<template slot="no-data">
<div v-if="loading" class="text-xs-center">
Loading games, hang tight fam...
</div>
</template>
</v-data-table>
</v-card>
</section>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
import moment from 'moment';
export default {
components: {
VueMarkdown
},
data () {
return {
loading: true,
games: [],
search: '',
headers: [
{
text: 'Boxart',
value: 'boxart_url',
sortable: false
},
{
text: 'Name',
value: 'name'
},
{
text: 'Title IDs',
value: 'title_id'
},
{
text: 'Commit',
value: 'state_emu_version'
},
{
text: 'Tester',
value: 'nickname'
},
{
text: 'State',
value: 'state'
},
{
text: 'Comment',
value: 'comment'
},
{
text: 'Last Test Date',
value: 'state_last_date_ts'
}
]
};
},
methods: {
async fetchGames () {
this.games.length = 0;
let _fetch = await fetch('https://ryujinx.org/public/CompatibilityList.json');
const json = await _fetch.json();
for (const game of json) {
// this.games.push(game);
this.games.push({
boxart_url: game.boxart_url,
comment: game.comment,
name: game.name,
nickname: game.nickname,
screen_url: game.screen_url,
state: game.state,
state_emu_version: game.state_emu_version,
state_last_date: game.state_last_date,
state_last_date_fmt: moment(game.state_last_date, 'DD/MM/YYYY').fromNow(),
state_last_date_ts: moment(game.state_last_date, 'DD/MM/YYYY').valueOf(),
title_id: game.title_id
});
console.log(game.state_last_date);
}
console.log(this.games);
this.loading = false;
}
},
mounted () {
this.fetchGames();
}
};
</script>

124
src/components/Contribute.vue
View file

@ -1,124 +0,0 @@
<template>
<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">
<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>
<p class="headline mt-4">Helping With Development</p>
</v-flex>
<v-flex xs12 md6>
<p class="headline mt-4">Helping With Donations</p>
</v-flex>
</v-layout>
<v-layout row wrap align-center justify-center class="hidden-sm-and-down">
<v-flex xs12 md6>
<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>
<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-layout row wrap align-start justify-center class="hidden-sm-and-down">
<v-flex xs12 md6>
<v-btn
href="https://discord.gg/VkQYXAZ"
target="_blank"
dark
color="blue"
class="my-0"
>
<v-icon left>fab fa-discord</v-icon>
Join our Discord!
</v-btn>
</v-flex>
<v-flex xs12 md6>
<v-btn
href="https://patreon.com/Ryujinx"
target="_blank"
dark
color="red"
class="my-0"
>
<v-icon left>fab fa-patreon</v-icon>
Become a patron!
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap align-start justify-center class="hidden-md-and-up">
<v-flex xs12 md6>
<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.
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-btn
href="https://discord.gg/VkQYXAZ"
target="_blank"
dark
color="blue"
class="my-0"
>
<v-icon left>fab fa-discord</v-icon>
Join our Discord!
</v-btn>
</v-flex>
<v-flex xs12 md6>
<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.
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-btn
href="https://patreon.com/Ryujinx"
target="_blank"
dark
color="red"
class="my-0"
>
<v-icon left>fab fa-patreon</v-icon>
Become a patron!
</v-btn>
</v-flex>
</v-layout>
<div fluid>
<iframe class="mt-4" align="center" src="https://discordapp.com/widget?id=410208534861447168&theme=dark" width="100%" height="400" allowtransparency="true" frameborder="0"></iframe>
</div>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</template>

245
src/components/Home.vue
View file

@ -1,245 +0,0 @@
<template>
<div>
<section>
<v-parallax :src="require('@/assets/wallp.png')" height="600">
<v-layout
column
align-center
justify-center
class="text-xs-center"
>
<img src="@/assets/logo.png" alt="Ryujinx" class="mb-5" />
<p class="display-1">A simple, experimental Nintendo Switch emulator.</p>
<p class="caption">Information and content is subject to change.</p>
</v-layout>
</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">
<p class="display-1">What is Ryujinx?</p>
<span class="subheading">
<small>
<em>(REE-YOU-JI-NX)</em>
</small>
<p class="my-2">It is a Nintendo Switch Emulator programmed in C#; unlike most emulators that are created with C++ or C.
This emulator aims to offer good performance, a friendly interface, and consistent builds.
Ryujinx is created by user gdkchan over at the GBAtemp forums.
This emulator is also available on GitHub, and is licensed under the "Unlicensed" license.</p>
<v-btn dark color="ryu_blue" :to="{ name: 'Compatibility' }">
<v-icon left>fas fa-gamepad</v-icon>
Game compatibility list
</v-btn>
<v-btn dark color="ryu_orange" :to="{ name: 'Build' }">
<v-icon left>fas fa-download</v-icon>
Download the latest build
</v-btn>
<p class="my-2">
<small>
<em>Please keep in mind that these builds are from AppVeyor and are considered unstable!</em>
</small>
</p>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
<v-container grid-list-xl>
<v-layout row wrap align-start>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-github</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Where can I grab it?</div>
</v-card-title>
<v-card-text class="text-xs-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-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-code</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">How can I contribute?</div>
</v-card-title>
<v-card-text class="text-xs-center">
Please visit the contributing tab for more information.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-gamepad</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Gaming?</div>
</v-card-title>
<v-card-text class="text-xs-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-container>
</v-layout>
<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-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-windows</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-apple</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-linux</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Platforms</div>
</v-card-title>
<v-card-text class="text-xs-center">
Ryujinx is currently available for Windows, Linux, and macOS.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-discord</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Discord</div>
</v-card-title>
<v-card-text class="text-xs-center">
Join the Ryujinx Discord server; you can get help,
as well as converse with fellow users and developers.
Join here.
</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-nintendo-switch</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Why the name?</div>
</v-card-title>
<v-card-text class="text-xs-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.
The name stems from Ryu (as already explained), then RyuJIT;
which is the codename for the JIT compiler for Net Core.
The NX part of the name is from the Codename of the Switch itself.
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
<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-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-users</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Our Team</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
<v-layout
v-if="loading"
row
wrap
align-center
justify-center
>
<v-flex
xs12
class="text-xs-center"
>
<v-progress-circular :size="100" indeterminate color="primary"></v-progress-circular>
</v-flex>
</v-layout>
<v-layout row wrap align-start justify-center>
<v-flex xs12 sm4 md2 v-for="member in team" :key="member.name">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-avatar
size="72"
>
<img :src="member.avatar">
</v-avatar>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<a v-if="member.github" :href="`https://github.com/${member.github}`" target="_blank" class="headline text-xs-center">{{ member.name }}</a>
<p v-else class="headline text-xs-center">{{ member.name }}</p>
</v-card-title>
<v-card-text class="text-xs-center">
<p class="title">{{ member.title }}</p>
<em v-if="member.description">{{ member.description }}</em>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</template>
<script>
export default {
data () {
return {
loading: true,
team: []
};
},
methods: {
async fetchTeamMembers () {
let _t = await fetch('https://ryujinx.org/public/team.json');
this.team = await _t.json();
this.loading = false;
}
},
mounted () {
this.fetchTeamMembers();
}
};
</script>

0
static/favicon.png → src/favicon.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

223
src/layouts/Default.vue Normal file
View file

@ -0,0 +1,223 @@
<template>
<v-app :dark="dark">
<v-toolbar fixed app>
<v-toolbar-side-icon class="hidden-md-and-up mr-0" @click="drawer = !drawer"></v-toolbar-side-icon>
<v-avatar size="32px" tile class="ml-3 mr-1">
<img src="@/assets/logo.png" />
</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-icon>fas fa-home</v-icon>
</v-btn>
<v-btn flat href="https://blog.ryujinx.org/">
<v-icon>fas fa-newspaper</v-icon>
</v-btn>
<v-btn flat exact to="/download">
<v-icon>fas fa-download</v-icon>
</v-btn>
<v-btn flat exact to="/contribute">
<v-icon>fas fa-code</v-icon>
</v-btn>
<v-btn
flat
exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
target="_blank"
>
<v-icon>fas fa-gamepad</v-icon>
</v-btn>
<v-btn flat color="red" href="https://patreon.com/Ryujinx">
<v-icon>fab fa-patreon</v-icon>
</v-btn>
<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx">
<v-icon>fab fa-github</v-icon>
</v-btn>
<v-btn flat color="red" href="https://yt.ryujinx.org/">
<v-icon>fab fa-youtube</v-icon>
</v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ">
<v-icon>fab fa-discord</v-icon>
</v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx">
<v-icon>fab fa-reddit</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
flat
exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
target="_blank"
>Compatibility</v-btn>
<v-btn flat color="red" href="https://patreon.com/Ryujinx">
<v-icon>fab fa-patreon</v-icon>
</v-btn>
<v-btn flat color="green" href="https://github.com/Ryujinx/Ryujinx">
<v-icon>fab fa-github</v-icon>
</v-btn>
<v-btn flat color="red" href="https://yt.ryujinx.org/">
<v-icon>fab fa-youtube</v-icon>
</v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ">
<v-icon>fab fa-discord</v-icon>
</v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx">
<v-icon>fab fa-reddit</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-icon v-else>fas fa-moon</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
<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-icon>fas fa-home</v-icon>
</v-list-tile-action>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile>
<!-- News -->
<v-list-tile href="https://blog.ryujinx.org/">
<v-list-tile-action>
<v-icon>fas fa-newspaper</v-icon>
</v-list-tile-action>
<v-list-tile-title>Blog</v-list-tile-title>
</v-list-tile>
<!-- Download -->
<v-list-tile exact to="/download">
<v-list-tile-action>
<v-icon>fas fa-download</v-icon>
</v-list-tile-action>
<v-list-tile-title>Download</v-list-tile-title>
</v-list-tile>
<!-- Contribute -->
<v-list-tile exact to="/contribute">
<v-list-tile-action>
<v-icon>fas fa-code</v-icon>
</v-list-tile-action>
<v-list-tile-title>Contribute</v-list-tile-title>
</v-list-tile>
<!-- Game Compatibility -->
<v-list-tile
exact
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
target="_blank"
>
<v-list-tile-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-divider></v-divider>
<!-- Patreon -->
<v-list-tile color="red" href="https://patreon.com/Ryujinx">
<v-list-tile-action>
<v-icon color="red">fab fa-patreon</v-icon>
</v-list-tile-action>
<v-list-tile-title>Patreon</v-list-tile-title>
</v-list-tile>
<!-- GitHub -->
<v-list-tile color="green" href="https://github.com/Ryujinx/Ryujinx">
<v-list-tile-action>
<v-icon color="green">fab fa-github</v-icon>
</v-list-tile-action>
<v-list-tile-title>GitHub</v-list-tile-title>
</v-list-tile>
<!-- YouTube -->
<v-list-tile color="red" href="https://yt.ryujinx.org/">
<v-list-tile-action>
<v-icon color="red">fab fa-youtube</v-icon>
</v-list-tile-action>
<v-list-tile-title>YouTube</v-list-tile-title>
</v-list-tile>
<!-- Discord -->
<v-list-tile color="blue" href="https://discord.gg/VkQYXAZ">
<v-list-tile-action>
<v-icon color="blue">fab fa-discord</v-icon>
</v-list-tile-action>
<v-list-tile-title>Discord</v-list-tile-title>
</v-list-tile>
<!-- Reddit -->
<v-list-tile color="red" href="https://www.reddit.com/r/Ryujinx">
<v-list-tile-action>
<v-icon color="red">fab fa-reddit</v-icon>
</v-list-tile-action>
<v-list-tile-title>Reddit</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-footer fixed app class="text-xs-center">
<v-flex>
<em>
Website made with
<v-icon color="red" class="mx-1">fas fa-heart</v-icon>by
<a target="_blank" href="https://twitter.com/Lordmau5">Lordmau5</a>
</em>
</v-flex>
</v-footer>
</v-app>
</template>
<static-query>
query {
metadata {
siteName
}
}
</static-query>
<style scoped>
.btn {
min-width: 0;
}
</style>
<style>
a {
color: #00c4e1;
}
</style>
<script>
export default {
data() {
return {
dark: localStorage.dark_mode === "true",
drawer: false,
title: "Ryujinx - Switch Emulator"
};
},
methods: {
toggleDarkMode() {
this.dark = !this.dark;
localStorage.dark_mode = this.dark;
}
}
};
</script>

53
src/main.js
View file

@ -1,24 +1,35 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import DefaultLayout from '~/layouts/Default.vue'
Vue.use(Vuetify, {
theme: {
ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B'
}
});
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,700|Material+Icons'
})
Vue.config.productionTip = false;
head.link.push({
rel: 'stylesheet',
href: 'https://use.fontawesome.com/releases/v5.0.13/css/all.css'
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
// Remove the generator tag
const gIndex = head.meta.findIndex(e => e.name === 'generator')
if (gIndex !== -1) head.meta.splice(gIndex, 1)
const opts = {
theme: {
ryu_blue: '#00C4E1',
ryu_orange: '#FF5E5B'
}
} //opts includes, vuetify themes, icons, etc.
Vue.use(Vuetify, opts)
// Disable production tip
Vue.config.productionTip = false;
// Set default layout as a global component
Vue.component('Layout', DefaultLayout)
}

75
src/pages/Build.vue Normal file
View file

@ -0,0 +1,75 @@
<template>
<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">
<p class="display-1">Building Ryujinx:</p>
<span class="subheading">
<v-layout row wrap align-start justify-center>
<v-flex xs12>
<p class="mt-4 title">Step one:</p>
<p>
Download NET Core
<a
href="https://dotnet.microsoft.com/download/dotnet-core/3.0"
target="_blank"
>here</a>. Then install the SDK.
</p>
</v-flex>
<v-flex xs12 md6>
<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" 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>
<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>
<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,
and typing the following command
<code>dotnet publish -c Release -r win10-x64</code>.
The build directory is "root/bin/release/etc/etc."
</p>
</v-flex>
<v-flex xs12>
<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>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</Layout>
</template>
<script>
export default {
metaInfo: {
title: "Build"
},
data() {
return {
downloadURL: "",
version: "Loading ..."
};
}
};
</script>

132
src/pages/Contribute.vue Normal file
View file

@ -0,0 +1,132 @@
<template>
<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">
<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>
<p class="headline mt-4">Helping With Development</p>
</v-flex>
<v-flex xs12 md6>
<p class="headline mt-4">Helping With Donations</p>
</v-flex>
</v-layout>
<v-layout row wrap align-center justify-center class="hidden-sm-and-down">
<v-flex xs12 md6>
<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>
<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-layout row wrap align-start justify-center class="hidden-sm-and-down">
<v-flex xs12 md6>
<v-btn
href="https://discord.gg/VkQYXAZ"
target="_blank"
dark
color="blue"
class="my-0"
>
<v-icon left>fab fa-discord</v-icon>Join our Discord!
</v-btn>
</v-flex>
<v-flex xs12 md6>
<v-btn
href="https://patreon.com/Ryujinx"
target="_blank"
dark
color="red"
class="my-0"
>
<v-icon left>fab fa-patreon</v-icon>Become a patron!
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap align-start justify-center class="hidden-md-and-up">
<v-flex xs12 md6>
<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.
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-btn
href="https://discord.gg/VkQYXAZ"
target="_blank"
dark
color="blue"
class="my-0"
>
<v-icon left>fab fa-discord</v-icon>Join our Discord!
</v-btn>
</v-flex>
<v-flex xs12 md6>
<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.
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-btn
href="https://patreon.com/Ryujinx"
target="_blank"
dark
color="red"
class="my-0"
>
<v-icon left>fab fa-patreon</v-icon>Become a patron!
</v-btn>
</v-flex>
</v-layout>
<div fluid>
<iframe
class="mt-4"
align="center"
src="https://discordapp.com/widget?id=410208534861447168&theme=dark"
width="100%"
height="400"
allowtransparency="true"
frameborder="0"
></iframe>
</div>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</Layout>
</template>
<script>
export default {
metaInfo: {
title: "Contribute"
}
};
</script>

185
src/pages/Download.vue Normal file
View file

@ -0,0 +1,185 @@
<template>
<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">
<p class="display-1">Building Ryujinx and latest downloads</p>
<img class="text-xs-center" width="100%" src="@/assets/shell.png" />
<span class="subheading">
<v-layout row wrap align-start justify-center>
<v-flex xs12 md6>
<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>
</v-flex>
<v-flex xs12 md6>
<p class="mt-4 title">Automatically compiled builds</p>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
:loading="isLoading"
:href="`${downloadURL}-win_x64.zip`"
>
<v-icon>fab fa-windows</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
:loading="isLoading"
:href="`${downloadURL}-linux_x64.tar.gz`"
>
<v-icon>fab fa-linux</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
:loading="isLoading"
:href="`${downloadURL}-osx_x64.zip`"
>
<v-icon>fab fa-apple</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<br />
<v-btn
flat
target="_blank"
href="https://ci.appveyor.com/project/gdkchan/ryujinx"
>
<img
width="140"
src="https://ci.appveyor.com/api/projects/status/ssg4jwu6ve3k594s?svg=true"
/>
</v-btn>
<p class="mt-4 title">
Profiled builds
<br />
<span
class="caption"
>(If you're not a developer, these builds aren't for you.)</span>
</p>
<div v-if="showProfiledBuilds">
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
:loading="isLoading"
:href="`${downloadURL_profiled}-win_x64.zip`"
>
<v-icon>fab fa-windows</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
:loading="isLoading"
:href="`${downloadURL_profiled}-linux_x64.tar.gz`"
>
<v-icon>fab fa-linux</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
<v-tooltip top>
<v-btn
slot="activator"
dark
color="ryu_blue"
target="_blank"
:loading="isLoading"
:href="`${downloadURL_profiled}-osx_x64.zip`"
>
<v-icon>fab fa-apple</v-icon>
</v-btn>
<span>{{ this.version }}</span>
</v-tooltip>
</div>
<div v-else>
<v-btn
slot="activator"
dark
color="ryu_orange"
target="_blank"
@click.stop="showProfiledBuilds = true"
>I know what I'm doing</v-btn>
</div>
</v-flex>
</v-layout>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</Layout>
</template>
<script>
export default {
metaInfo: {
title: "Download"
},
data() {
return {
downloadURL: "",
downloadURL_profiled: "",
isLoading: true,
version: "Loading ...",
showProfiledBuilds: false,
jobId_profiled: ""
};
},
methods: {
async fetchDownloadURL() {
this.isLoading = true;
let _f = await fetch(
"https://ci.appveyor.com/api/projects/gdkchan/ryujinx/branch/master"
);
let json = await _f.json();
this.version = json.build.version;
console.log(json);
const jobId = json.build.jobs[0].jobId;
const jobIdProfiled = json.build.jobs[1].jobId;
this.downloadURL = `https://ci.appveyor.com/api/buildjobs/${jobId}/artifacts/ryujinx-${this.version}`;
this.downloadURL_profiled = `https://ci.appveyor.com/api/buildjobs/${jobIdProfiled}/artifacts/ryujinx-profiled-${this.version}`;
this.isLoading = false;
}
},
mounted() {
this.fetchDownloadURL();
}
};
</script>

224
src/pages/Index.vue Normal file
View file

@ -0,0 +1,224 @@
<template>
<Layout>
<div>
<section>
<v-parallax :src="require('@/assets/wallp.png')" height="600">
<v-layout column align-center justify-center class="text-xs-center">
<img src="@/assets/logo.png" alt="Ryujinx" class="mb-5" />
<p class="display-1">A simple, experimental Nintendo Switch emulator.</p>
<p class="caption">Information and content is subject to change.</p>
</v-layout>
</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">
<p class="display-1">What is Ryujinx?</p>
<span class="subheading">
<small>
<em>(REE-YOU-JI-NX)</em>
</small>
<p
class="my-2"
>It is an open source Nintendo Switch Emulator written in C# created by gdkchan.</p>
<p
class="my-2"
>This emulator aims at providing good performance and accuracy, a friendly interface, and consistent builds.</p>
<p
class="my-2"
>Ryujinx is available on GitHub and is licensed under the "MIT" license.</p>
<v-btn
dark
color="ryu_blue"
href="https://github.com/Ryujinx/Ryujinx-Games-List/issues"
>
<v-icon left>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>
</span>
</div>
</v-flex>
</v-layout>
</v-container>
<v-container grid-list-xl>
<v-layout row wrap align-start>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-github</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Where can I grab it?</div>
</v-card-title>
<v-card-text class="text-xs-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-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-code</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">How can I contribute?</div>
</v-card-title>
<v-card-text
class="text-xs-center"
>Please visit the contributing tab for more information.</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-gamepad</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Gaming?</div>
</v-card-title>
<v-card-text
class="text-xs-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-container>
</v-layout>
<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-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-windows</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2 mr-4">fab fa-apple</v-icon>
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-linux</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Platforms</div>
</v-card-title>
<v-card-text
class="text-xs-center"
>Ryujinx is currently available for Windows, Linux, and macOS.</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 md4>
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-discord</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Discord</div>
</v-card-title>
<v-card-text class="text-xs-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-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fab fa-nintendo-switch</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Why the name?</div>
</v-card-title>
<v-card-text class="text-xs-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.
The name stems from Ryu (as already explained), then RyuJIT;
which is the codename for the JIT compiler for Net Core.
The NX part of the name is from the Codename of the Switch itself.
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
<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-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-icon x-large class="ryu_blue--text text--lighten-2">fas fa-users</v-icon>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<div class="display-1 text-xs-center">Our Team</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
<v-layout v-if="loading" row wrap align-center justify-center>
<v-flex xs12 class="text-xs-center">
<v-progress-circular :size="100" indeterminate color="primary"></v-progress-circular>
</v-flex>
</v-layout>
<v-layout row wrap align-start justify-center>
<v-flex xs12 sm4 md2 v-for="member in team" :key="member.name">
<v-card class="elevation-0 transparent">
<v-card-text class="text-xs-center">
<v-avatar size="72">
<img :src="member.avatar" />
</v-avatar>
</v-card-text>
<v-card-title primary-title class="layout justify-center">
<a
v-if="member.github"
:href="`https://github.com/${member.github}`"
target="_blank"
class="headline text-xs-center"
>{{ member.name }}</a>
<p v-else class="headline text-xs-center">{{ member.name }}</p>
</v-card-title>
<v-card-text class="text-xs-center">
<p class="title">{{ member.title }}</p>
<em v-if="member.description">{{ member.description }}</em>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
</div>
</Layout>
</template>
<script>
export default {
metaInfo: {
title: "Nintendo Switch Emulator"
},
data() {
return {
loading: true,
team: []
};
},
methods: {
async fetchTeamMembers() {
let _t = await fetch("/public/team.json");
this.team = await _t.json();
this.loading = false;
}
},
mounted() {
this.fetchTeamMembers();
}
};
</script>

39
src/router/index.js
View file

@ -1,39 +0,0 @@
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Contribute from '@/components/Contribute';
import Build from '@/components/Build';
import BuildNetCore from '@/components/Build.Net_Core';
import Compatibility from '@/components/Compatibility';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/contribute',
name: 'Contribute',
component: Contribute
},
{
path: '/Build',
name: 'Build',
component: Build
},
{
path: '/Build/NetCore',
name: 'BuildNetCore',
component: BuildNetCore
},
{
path: '/Compatibility',
name: 'Compatibility',
component: Compatibility
}
]
});

0
src/templates/.gitkeep Normal file
View file

54
static/public/team.json Normal file
View file

@ -0,0 +1,54 @@
[{
"name": "gdkchan",
"github": "gdkchan",
"avatar": "https://avatars2.githubusercontent.com/u/5624669",
"title": "Project Lead"
},
{
"name": "Ac_K",
"github": "AcK77",
"avatar": "https://avatars3.githubusercontent.com/u/4905390",
"title": "Secondary Developer"
},
{
"name": "LDj3SNuD",
"github": "LDj3SNuD",
"avatar": "https://avatars3.githubusercontent.com/u/35856442",
"title": "Developer"
},
{
"name": "emmauss",
"github": "emmauss",
"avatar": "https://avatars3.githubusercontent.com/u/5307160",
"title": "Developer"
},
{
"name": "MerryMage",
"github": "MerryMage",
"avatar": "https://avatars2.githubusercontent.com/u/8682882",
"title": "Developer"
},
{
"name": "MS-DOS1999",
"github": "MS-DOS1999",
"avatar": "https://avatars3.githubusercontent.com/u/23052366",
"title": "Developer"
},
{
"name": "Thog",
"github": "Thog",
"avatar": "https://avatars3.githubusercontent.com/u/1760003",
"title": "Developer"
},
{
"name": "Lordmau5",
"github": "Lordmau5",
"avatar": "https://avatars0.githubusercontent.com/u/1345036",
"title": "Web Designer"
},
{
"name": "Dr. Hacknik",
"github": "drhacknik",
"avatar": "https://avatars1.githubusercontent.com/u/7658605",
"title": "Discord Maintainer, Web Designer"
}]