mirror of
https://github.com/Ryujinx/Ryujinx-Website.git
synced 2024-06-12 18:18:46 +02:00
Deprecate News page, implement link to Blog, modify colors
This commit is contained in:
Lordmau5
parent
a6f6b445f2
commit
d950e064ed
34
src/App.vue
34
src/App.vue
|
|
@ -17,11 +17,11 @@
|
|||
<v-btn flat exact :to="{ name: 'Home' }">
|
||||
<v-icon>fas fa-home</v-icon>
|
||||
</v-btn>
|
||||
<v-btn flat exact :to="{ name: 'News' }">
|
||||
<v-btn flat href="https://blog.ryujinx.org/">
|
||||
<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-icon>fas fa-globe</v-icon>
|
||||
</v-btn>
|
||||
<v-btn flat exact :to="{ name: 'Build' }">
|
||||
<v-icon>fas fa-database</v-icon>
|
||||
|
|
@ -34,20 +34,22 @@
|
|||
</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="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 exact :to="{ name: 'News' }">News</v-btn>
|
||||
<v-btn flat href="https://blog.ryujinx.org/">Blog</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 exact :to="{ name: 'Compatibility' }">Compatibility</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-btn flat color="green" href="https://github.com/gdkchan/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()">
|
||||
|
|
@ -74,17 +76,17 @@
|
|||
</v-list-tile>
|
||||
|
||||
<!-- News -->
|
||||
<v-list-tile exact :to="{ name: '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>News</v-list-tile-title>
|
||||
<v-list-tile-title>Blog</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-icon>fas fa-globe</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title>Wiki</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
|
|
@ -123,6 +125,14 @@
|
|||
<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>
|
||||
|
|
@ -154,6 +164,12 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: #00C4E1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@
|
|||
<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-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-btn dark color="red" target="_blank" :href="downloadURL">
|
||||
<v-btn dark color="ryu_orange" 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>
|
||||
|
|
|
|||
|
|
@ -41,11 +41,11 @@
|
|||
Please consider reporting it via our Discord server.
|
||||
</p>
|
||||
|
||||
<v-btn dark color="blue" :to="{ name: 'Compatibility' }">
|
||||
<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="red" :to="{ name: 'Build' }">
|
||||
<v-btn dark color="ryu_orange" :to="{ name: 'Build' }">
|
||||
<v-icon left>fas fa-download</v-icon>
|
||||
Download the latest build
|
||||
</v-btn>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<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-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>
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
<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-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>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<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-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>
|
||||
|
|
@ -118,9 +118,9 @@
|
|||
<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-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>
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
<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-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>
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
<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-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>
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
<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-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>
|
||||
|
|
|
|||
|
|
@ -1,110 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<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://ryujinx.org/public/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>
|
||||
|
|
@ -6,7 +6,12 @@ import router from './router';
|
|||
import Vuetify from 'vuetify';
|
||||
import 'vuetify/dist/vuetify.min.css';
|
||||
|
||||
Vue.use(Vuetify);
|
||||
Vue.use(Vuetify, {
|
||||
theme: {
|
||||
ryu_blue: '#00C4E1',
|
||||
ryu_orange: '#FF5E5B'
|
||||
}
|
||||
});
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
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';
|
||||
|
|
@ -16,11 +15,6 @@ export default new Router({
|
|||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
name: 'News',
|
||||
component: News
|
||||
},
|
||||
{
|
||||
path: '/contribute',
|
||||
name: 'Contribute',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user