Add files

This commit is contained in:
Lordmau5 2018-05-22 18:41:37 +02:00
parent e0f846d221
commit 25c35d5aca
35 changed files with 1610 additions and 0 deletions

12
.babelrc Normal file
View file

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

9
.editorconfig Normal file
View file

@ -0,0 +1,9 @@
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 Normal file
View file

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

29
.eslintrc.js Normal file
View file

@ -0,0 +1,29 @@
// 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']
}
}

14
.gitignore vendored Normal file
View file

@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

10
.postcssrc.js Normal file
View file

@ -0,0 +1,10 @@
// 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": {}
}
}

41
build/build.js Normal file
View file

@ -0,0 +1,41 @@
'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 Normal file
View file

@ -0,0 +1,54 @@
'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 Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

101
build/utils.js Normal file
View file

@ -0,0 +1,101 @@
'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 Normal file
View file

@ -0,0 +1,22 @@
'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'
}
}

View file

@ -0,0 +1,92 @@
'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 Normal file
View file

@ -0,0 +1,95 @@
'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 Normal file
View file

@ -0,0 +1,145 @@
'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 Normal file
View file

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

76
config/index.js Normal file
View file

@ -0,0 +1,76 @@
'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 Normal file
View file

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

21
index.html Normal file
View file

@ -0,0 +1,21 @@
<!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.github.io/static/favicon.png">
<meta property="og:image:secure_url" content="https://ryujinx.github.io/static/favicon.png">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

75
package.json Normal file
View file

@ -0,0 +1,75 @@
{
"name": "ryujinx_router",
"version": "1.0.0",
"description": "RyujiNX Website with Vue-Router support",
"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": {
"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"
]
}

12
src/.gitrepo Normal file
View file

@ -0,0 +1,12 @@
; 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

163
src/App.vue Normal file
View file

@ -0,0 +1,163 @@
<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 exact :to="{ name: 'News' }">
<v-icon>fas fa-newspaper</v-icon>
</v-btn>
<v-btn flat href="https://github.com/gdkchan/Ryujinx/wiki">
<v-icon>fas fa-lemon</v-icon>
</v-btn>
<v-btn flat exact :to="{ name: 'Build' }">
<v-icon>fas fa-database</v-icon>
</v-btn>
<v-btn flat exact :to="{ name: 'Contribute' }">
<v-icon>fas fa-code</v-icon>
</v-btn>
<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon>fab fa-github</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 exact :to="{ name: 'News' }">News</v-btn>
<v-btn flat href="https://github.com/gdkchan/Ryujinx/wiki">Wiki</v-btn>
<v-btn flat exact :to="{ name: 'Build' }">Build</v-btn>
<v-btn flat exact :to="{ name: 'Contribute' }">Contribute</v-btn>
<v-btn flat color="green" href="https://github.com/gdkchan/Ryujinx"><v-icon left>fab fa-github</v-icon>GitHub</v-btn>
<v-btn flat color="blue" href="https://discord.gg/VkQYXAZ"><v-icon left>fab fa-discord</v-icon>Discord</v-btn>
<v-btn flat color="red" href="https://www.reddit.com/r/Ryujinx"><v-icon left>fab fa-reddit</v-icon>Reddit</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 exact :to="{ name: 'News' }">
<v-list-tile-action>
<v-icon>fas fa-newspaper</v-icon>
</v-list-tile-action>
<v-list-tile-title>News</v-list-tile-title>
</v-list-tile>
<!-- Wiki -->
<v-list-tile href="https://github.com/gdkchan/Ryujinx/wiki">
<v-list-tile-action>
<v-icon>fas fa-lemon</v-icon>
</v-list-tile-action>
<v-list-tile-title>Wiki</v-list-tile-title>
</v-list-tile>
<!-- Build -->
<v-list-tile exact :to="{ name: 'Build' }">
<v-list-tile-action>
<v-icon>fas fa-database</v-icon>
</v-list-tile-action>
<v-list-tile-title>Build</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>
<v-divider></v-divider>
<!-- GitHub -->
<v-list-tile color="green" href="https://github.com/gdkchan/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>
<!-- 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>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>
<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>

BIN
src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/shell.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 505 KiB

BIN
src/assets/wallp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

BIN
src/assets/wallp2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

BIN
src/assets/wallp3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View file

@ -0,0 +1,72 @@
<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.0 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/learn/get-started/linuxredhat" 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~ "dotnet publish -c Release -f win10-x64".
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>

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

@ -0,0 +1,75 @@
<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="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-btn dark color="red" target="_blank" :href="downloadURL">
<v-icon left>fas fa-download</v-icon>
Download for <v-icon class="mx-1">fab fa-windows</v-icon> ({{ version }})
</v-btn>
<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>
</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 ...'
};
},
methods: {
async fetchDownloadURL () {
let _f = await fetch('https://ci.appveyor.com/api/projects/gdkchan/ryujinx');
let json = await _f.json();
this.version = json.build.version;
let jobId = json.build.jobs[0].jobId;
let _a = await fetch(`https://ci.appveyor.com/api/buildjobs/${jobId}/artifacts`);
json = await _a.json();
this.downloadURL = `https://ci.appveyor.com/api/buildjobs/${jobId}/artifacts/${json[0].fileName}`;
}
},
mounted () {
this.fetchDownloadURL();
}
};
</script>

View file

@ -0,0 +1,42 @@
<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">How may I contribute?</p>
<span class="subheading">
<p class="mt-4">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://discordapp.com/invite/SNDWTz"
target="_blank"
dark
color="blue"
class="my-0"
>
<v-icon left>fab fa-discord</v-icon>
Join our Discord!
</v-btn>
<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>

253
src/components/Home.vue Normal file
View file

@ -0,0 +1,253 @@
<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>
<p class="my-2">Note: This emulator is not capable (as of now) of running Commercial Nintendo Switch games!
If you somehow find a source claiming that the Emulator is capable, and it has not been officially confirmed by us;
Please consider reporting it via our Discord server.
</p>
<v-btn dark color="blue" target="_blank" href="https://github.com/gdkchan/Ryujinx/wiki/Games-Compatibility-List">
<v-icon left>fas fa-list</v-icon>
Game compatibility list
</v-btn>
<v-btn dark color="red" :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="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="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="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 currently doesn't work well with games as of now.
Much like 'yuzu,' it only supports homebrew at the moment.
</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="blue--text text--lighten-2 mr-4">fab fa-windows</v-icon>
<v-icon x-large class="blue--text text--lighten-2 mr-4">fab fa-apple</v-icon>
<v-icon x-large class="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 only available for Windows.
Although, support for Linux, and macOS is there;
but it may be more difficult to compile it.
</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="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="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="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://cors-anywhere.herokuapp.com/https://gitlab.com/Lordmau5/RyujiNX-Website-Public/raw/master/team/team.json');
this.team = await _t.json();
this.loading = false;
}
},
mounted () {
this.fetchTeamMembers();
}
};
</script>

124
src/components/News.vue Normal file
View file

@ -0,0 +1,124 @@
<template>
<div>
<!-- <section>
<v-parallax :src="require('@/assets/wallp.png')" height="200">
<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="my-5"
align-center
justify-center
>
<v-container grid-list-xl fluid>
<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>
<v-flex
v-for="article in articles"
xs12 md6 lg4
:key="article.title"
>
<v-card hover @click.native.stop="openArticle(article)">
<v-card-media :src="article.image" height="300px"></v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ article.title }}</h3>
<span class="grey--text">{{ article.created }} by {{ article.author }}</span>
<vue-markdown class="mt-3" v-if="article.short">{{ article.short }}</vue-markdown>
</div>
</v-card-title>
<v-card-actions v-if="article.text">
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native.stop="openArticle(article)">Learn More</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</section>
<v-dialog v-model="dialog" max-width="1000" scrollable lazy>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ currentArticle.title }}</h3>
<span class="grey--text">{{ currentArticle.created }} by {{ currentArticle.author }}</span>
</div>
</v-card-title>
<v-card-media v-if="currentArticle" :src="currentArticle.image" height="300px"></v-card-media>
<v-card-text>
<vue-markdown :source="currentArticle.text"></vue-markdown>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components: {
VueMarkdown
},
data () {
return {
currentArticle: false,
dialog: false,
loading: true,
articles: []
};
},
methods: {
async fetchArticles () {
let _a = await fetch('https://cors-anywhere.herokuapp.com/https://gitlab.com/Lordmau5/RyujiNX-Website-Public/raw/master/articles/articles.json');
this.articles = await _a.json();
this.loading = false;
},
openArticle (article) {
if (!article.text) return;
this.dialog = true;
this.currentArticle = article;
}
},
mounted () {
this.fetchArticles();
}
};
</script>

19
src/main.js Normal file
View file

@ -0,0 +1,19 @@
// 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';
Vue.use(Vuetify);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});

39
src/router/index.js Normal file
View file

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

0
static/.gitkeep Normal file
View file

BIN
static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB