RPCSX/archived-RPCSX.github.io
1
0
Fork 0
mirror of https://github.com/RPCSX/RPCSX.github.io.git synced 2026-01-31 01:05:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove unnecessary files, refactor, and add content

Browse Source
This commit is contained in:
OCDkirby
2023-07-10 22:56:01 -05:00
parent bc23896169
commit 5b242167b9
11 changed files with 202 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/App.vue
View File

@@ -1,30 +1,64 @@
<script setup lang="ts">
import { PedestrianFamily, ToolBox, GameConsole, Linux } from '@vicons/carbon';
</script>
<template>
<n-config-provider :theme="theme"
:theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
<main>
<div class="wrapper">
<TopBarMenu @toggle-darkmode="toggleTheme()"/>
<TopBarMenu :toggleTheme="toggleTheme" :themex="theme"/>
<div class="columns">
<div id="main-column" class="column">
<div class="top-main">
<div class="hook">
<h1>{{ months }} {{ months == 1 ? "month" : "months" }} of development.</h1>
<h1> {{ contributors }} experienced contributors.</h1>
<h1>0 days since someone asked for Bloodborne.</h1>
</div>
<Hook :time="getTime()" :contributors="contributors" />
</div>
<div class="column-content">
<n-card hoverable>
<template #cover>
<img :src="getCoverURI()">
<MainCard :themex="theme" />
<ContentCard>
<template #card-icon>
<PedestrianFamily />
</template>
<template #header>
<div class="card-header">RPCSX is your PlayStation 4 emulator.</div>
<template #card-title>
Huge community.
</template>
<div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
</n-card>
Everyone is here! The spirit of RPCS3 lives on.
</ContentCard>
<ContentCard>
<template #card-icon>
<ToolBox />
</template>
<template #card-title>
Ongoing development.
</template>
Est. 2016 by DH himself.
</ContentCard>
<ContentCard>
<template #card-icon>
<GameConsole />
</template>
<template #card-title>
All your favorite titles.
</template>
<div class="joke-wrapper">
<div class="body-text">
Bloodborne coming Soon™*
</div>
<div class="joke-footnote">
* RPCSX does not provide estimates or compatibility for any title.
</div>
</div>
</ContentCard>
<ContentCard>
<template #card-icon>
<Linux />
</template>
<template #card-title>
Currently Linux only.
</template>
WSL on Windows is being discussed.
</ContentCard>
<n-divider />
</div>
</div>
@@ -70,21 +104,19 @@
.column-content {
display: flex;
flex-flow: column nowrap;
gap: 8px;
align-items: center;
gap: 16px;
}
#main-column {
flex-shrink: 0; /* makes sure that content is not cut off in a smaller browser window */
/* flex-shrink: 0; /* makes sure that content is not cut off in a smaller browser window */ /* [OCDkirby: so that was a fucking lie.] */
flex-shrink: 1;
flex-grow: 4;
align-self: center;
align-items: center;
gap: 16px;
}
.n-card {
max-width: 300px;
}
#right-column {
flex-grow: 0;
gap: 5px;
@@ -105,17 +137,30 @@
display: flex;
}
.joke-wrapper {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
flex-shrink: 1;
gap: 8px;
align-items: flex-start;
}
.joke-footnote {
align-self: flex-end;
font-size: 8pt;
word-wrap: break-word;
}
</style>
<script>
<script lang="ts">
import { darkTheme } from 'naive-ui'
import { ref } from 'vue';
import 'vfonts/FiraSans.css';
import './assets/text-styles.css';
import './assets/logo-light.png';
/**
* @type import('naive-ui').GlobalThemeOverrides
*/
@@ -133,16 +178,14 @@
// ...
};
var repoCreation = new Date(2023, 6, 18);
var today = new Date();
const months = (today.getFullYear() - repoCreation.getFullYear()) * 12 - repoCreation.getMonth() + today.getMonth() + 1; // Months between creation and today
var contributors = null; // TODO web scraping
var contributors = 10; // TODO web scraping
// const response = await fetch("https://cors-anywhere.herokuapp.com/https://github.com/RPCSX/rpcsx/");
// contributors = await cheerio.load(response.text())('.Counter m1-1');
// console.log("hi");
var theme = null;
var theme;
var coverURI;
export default defineComponent({
@@ -156,8 +199,14 @@
openGithub() {
window.open('https://github.com/RPCSX/rpcsx', '_blank');
},
getCoverURI() {
return theme === null ? './assets/logo-light.png' : './assets/logo-dark.png';
getTime() {
const divmod = (x, y) => [Math.floor(x / y), x % y]; // Utility
var developmentStart = new Date(2016, 6, 18); // Rough estimate of when DH left RPCS3
var today = new Date();
const months = (today.getFullYear() - developmentStart.getFullYear()) * 12 - developmentStart.getMonth() + today.getMonth() + 1; // Months between start and today
var time_result = divmod(months, 12); // [years, partial year's months]
return months > 12 ? (time_result[0] + Math.round(time_result[1] / 12 * 10)/10) + " years" : months + "months";
}
},
setup() {
@@ -166,9 +215,9 @@
theme: ref(null),
lightThemeOverrides,
darkThemeOverrides,
months,
contributors
}
}
})
</script>

BIN
src/assets/logo-light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

1
src/assets/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 276 B

55
src/components/ContentCard.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup>
import '../assets/text-styles.css';
</script>
<template>
<n-card hoverable>
<div class="card-wrapper">
<div class="icon-wrapper">
<n-icon size="35">
<slot name="card-icon" class="card-icon"/>
</n-icon>
</div>
<div class="content-wrapper">
<div class="card-header">
<slot name="card-title" />
</div>
<div class="body-text" id="card-body">
<slot />
</div>
</div>
</div>
</n-card>
</template>
<style scoped>
.n-card {
max-width: 400px;
min-width: 400px;
}
.card-wrapper {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.icon-wrapper {
margin: 10px 20px 10px 0px;
border: 2px;
border-radius: 2px;
border-color: black; /* TODO fixme */
}
.card-icon {
font-size: 100px;
}
.content-wrapper {
flex-shrink: 1;
}
#card-body {
word-wrap: break-word;
}
</style>

87
src/components/FeatureListItem.vue
View File

@@ -1,87 +0,0 @@
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
position: relative;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>

44
src/components/HelloWorld.vue
View File

@@ -1,44 +0,0 @@
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>

21
src/components/Hook.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
defineProps({
time: {
type: String,
required: true
},
contributors: {
type: String,
required: true
},
})
</script>
<template>
<div class="hook">
<h1>{{ time }} of development.</h1>
<h1> {{ contributors }} experienced contributors.</h1>
<h1>0 days since someone asked for Bloodborne.</h1>
</div>
</template>

28
src/components/MainCard.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup>
import '../assets/text-styles.css';
defineProps({
themex: {
type: ref,
required: true
}
})
</script>
<style scoped>
.n-card {
max-width: 300px;
}
</style>
<template>
<n-card hoverable>
<template #cover>
<img :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'">
</template>
<template #header>
<div class="card-header">RPCSX is your PlayStation 4 emulator.</div>
</template>
<div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
</n-card>
</template>

26
src/components/PitchItem.vue
View File

@@ -1,26 +0,0 @@
<template>
<div class="wrapper">
<n-icon>
<slot name="icon" class="pitch-item-icon" />
</n-icon>
<slot class="body-text"></slot>
</div>
</template>
<style scoped>
.pitch-item-icon {
font-size: 50px;
}
.wrapper {
display: inline-block;
}
</style>
<script>
import './assets/text-styles.css'
</script>

102
src/components/TheWelcome.vue
View File

@@ -1,102 +0,0 @@
<script setup>
import FeatureListItem from './FeatureListItem.vue'
</script>
<template>
<div>
<FeatureListItem>
<template #icon>
<n-icon size="30">
<book />
</n-icon>
</template>
<template #heading>Documentation</template>
Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</FeatureListItem>
<FeatureListItem>
<template #icon>
<n-icon size="30">
<tool-box />
</n-icon>
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
you need to test your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
<br />
More instructions are available in <code>README.md</code>.
</FeatureListItem>
<FeatureListItem>
<template #icon>
<n-icon size="30">
<category />
</n-icon>
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</FeatureListItem>
<FeatureListItem>
<template #icon>
<n-icon size="30">
<chat />
</n-icon>
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
Discord server, or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
>StackOverflow</a
>. You should also subscribe to
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
the official
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
twitter account for latest news in the Vue world.
</FeatureListItem>
<FeatureListItem>
<template #icon>
<n-icon size="30">
<currency-dollar />
</n-icon>
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</FeatureListItem>
</div>
</template>
<style>
</style>
<script>
import { Book, ToolBox, CurrencyDollar, Chat, Category } from "@vicons/carbon";
</script>

19
src/components/TopBarMenu.vue
View File

@@ -5,7 +5,22 @@ import { NIcon } from 'naive-ui'
Book as BookIcon,
LogoDiscord as DiscordIcon,
Moon as MoonIcon, Sun as SunIcon
} from '@vicons/carbon';
} from '@vicons/carbon'
defineProps({
toggleTheme: {
type: Function,
required: true
},
coverImage: {
type: ref,
required: true
},
themex: {
type: ref,
required: true
},
})
</script>
<template>
@@ -14,7 +29,7 @@ import { NIcon } from 'naive-ui'
quaternary
tag="a"
href="https://rpcsx.github.io/rpcsx-site/">
<img alt="Vue logo" class="logo" :src="getCoverURI()" width="32" height="32" />
<img alt="RPCSX logo" class="logo" :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'" width="32" height="32" />
</n-button>
<n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
<n-button circle @click="toggleTheme()" class="dark-mode-button">