Add separate screenshots page

This commit is contained in:
Matt Isenhower 2022-08-28 20:45:21 -07:00
parent 28515a3976
commit e59c15d761
6 changed files with 97 additions and 0 deletions

13
screenshots/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Splatoon3.ink</title>
</head>
<body class="h-full">
<div id="app"></div>
<script type="module" src="/src/screenshots.js"></script>
</body>
</html>

20
src/router/screenshots.js Normal file
View File

@ -0,0 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import ScreenshotsHomeView from '@/views/screenshots/ScreenshotsHomeView.vue'
import CountdownView from '@/views/screenshots/CountdownView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL + 'screenshots/'),
routes: [
{
path: '/',
component: ScreenshotsHomeView,
},
{
path: '/countdown',
component: CountdownView,
},
]
})
export default router

12
src/screenshots.js Normal file
View File

@ -0,0 +1,12 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router/screenshots'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

View File

@ -0,0 +1,26 @@
<template>
<div class="min-h-screen grow flex items-center justify-center">
<div class="grow flex items-center justify-center">
<div class="relative w-full max-w-2xl m-4">
<Splat3 class="absolute w-48 -bottom-16 left-28" fill="fill-splatoon-red" />
<Splat2 class="absolute w-64 -top-20 -left-20" fill="fill-splatoon-orange" />
<Splat4 class="absolute w-64 -top-20 -right-20" fill="fill-splatoon-blue" />
<Splat1 class="absolute hidden sm:block w-48 -bottom-36 right-20" fill="fill-splatoon-green" />
<div class="relative">
<div class="font-splatoon1 text-5xl text-center">Splatoon 3</div>
<Splatoon3Countdown />
</div>
</div>
</div>
</div>
</template>
<script setup>
import Splatoon3Countdown from '@/components/Splatoon3Countdown.vue'
import Splat2 from '@/components/splats/Splat2.vue';
import Splat3 from '@/components/splats/Splat3.vue';
import Splat4 from '@/components/splats/Splat4.vue';
import Splat1 from '@/components/splats/Splat1.vue';
</script>

View File

@ -0,0 +1,17 @@
<template>
<div class="min-h-screen grow flex items-center justify-center">
<div class="text-center space-y-4">
<div><strong>Screenshots</strong></div>
<div>
<router-link to="/countdown">Countdown</router-link>
</div>
</div>
</div>
</template>
<style scoped>
a {
@apply underline;
}
</style>

View File

@ -1,3 +1,4 @@
import { resolve } from 'path'
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
@ -10,5 +11,13 @@ export default defineConfig({
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
screenshots: resolve(__dirname, 'screenshots/index.html')
}
}
}
})