mirror of
https://github.com/RPCSX/RPCSX.github.io.git
synced 2026-01-31 01:05:21 +01:00
Add components
This commit is contained in:
OCDkirby
26
src/components/PitchItem.vue
Normal file
26
src/components/PitchItem.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<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>
|
||||
@@ -3,93 +3,100 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FeatureListItem>
|
||||
<template #icon>
|
||||
<n-icon size="30">
|
||||
<book />
|
||||
</n-icon>
|
||||
</template>
|
||||
<template #heading>Documentation</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>
|
||||
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>
|
||||
<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>.
|
||||
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 />
|
||||
<br />
|
||||
|
||||
More instructions are available in <code>README.md</code>.
|
||||
</FeatureListItem>
|
||||
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>
|
||||
<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>
|
||||
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>
|
||||
<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>
|
||||
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>
|
||||
<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>
|
||||
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>
|
||||
91
src/components/TopBarMenu.vue
Normal file
91
src/components/TopBarMenu.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<darkModeButtonIcon/>
|
||||
<n-button
|
||||
quaternary
|
||||
tag="a"
|
||||
href="https://rpcsx.github.io/rpcsx-site/">
|
||||
<img alt="Vue logo" class="logo" :src="getCoverURI()" width="32" height="32" />
|
||||
</n-button>
|
||||
<n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
|
||||
<n-button tertiary @click="toggleTheme()">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Moon />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { NIcon } from 'naive-ui'
|
||||
import {
|
||||
Code as CodeIcon,
|
||||
Book as BookIcon,
|
||||
LogoDiscord as DiscordIcon,
|
||||
Moon, Sun
|
||||
} from '@vicons/carbon'
|
||||
|
||||
function renderIcon (icon: Component) {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
const menuOptions: MenuOption[] = [
|
||||
{
|
||||
label: () =>
|
||||
h(
|
||||
'a',
|
||||
{
|
||||
href: 'https://github.com/RPCSX/rpcsx',
|
||||
target: '_blank',
|
||||
rel: 'noopenner noreferrer'
|
||||
},
|
||||
'development'
|
||||
),
|
||||
key: 'development',
|
||||
icon: renderIcon(CodeIcon)
|
||||
},
|
||||
{
|
||||
label: 'wiki',
|
||||
key: 'wiki',
|
||||
icon: renderIcon(BookIcon),
|
||||
children: [
|
||||
{
|
||||
// TODO: populate
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'discuss',
|
||||
key: 'discuss',
|
||||
icon: renderIcon(DiscordIcon)
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
methods: {
|
||||
toggleTheme: function() {
|
||||
this.darkModeButtonIcon = this.darkModeButtonIcon == Moon ? Sun : Moon;
|
||||
this.$emit('toggle-darkmode');
|
||||
},
|
||||
getCoverURI() {
|
||||
return this.$parent.theme === null ? './assets/logo-light.png' : './assets/logo-dark.png';
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
activeKey: ref<string | null>(null),
|
||||
darkModeButtonIcon: ref(Moon),
|
||||
menuOptions
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user