70 lines
3.0 KiB
Vue
70 lines
3.0 KiB
Vue
<script setup>
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { onBeforeUnmount, onMounted } from 'vue';
|
|
import About from './Components/About.vue';
|
|
import Background from './Components/Background.vue';
|
|
import Features from './Components/Features.vue';
|
|
import Footer from './Components/Footer.vue';
|
|
import Hero from './Components/Hero.vue';
|
|
import Join from './Components/Join.vue';
|
|
import Nav from './Components/Nav.vue';
|
|
import News from './Components/News.vue';
|
|
import Realm from './Components/Realm.vue';
|
|
import Tweaks from './Components/Tweaks.vue';
|
|
|
|
const props = defineProps({
|
|
realm: { type: Object, required: true },
|
|
playUrl: { type: String, required: true },
|
|
posts: { type: Array, default: () => [] },
|
|
newsIndexUrl: { type: String, required: true },
|
|
tweaks: { type: Object, default: () => ({}) },
|
|
registerEndpoint: { type: String, required: true },
|
|
legalUrls: { type: Object, required: true },
|
|
csrfToken: { type: String, required: true },
|
|
inviteRequired: { type: Boolean, default: true },
|
|
auth: { type: Object, default: () => ({}) },
|
|
flash: { type: Object, default: () => ({}) },
|
|
});
|
|
|
|
const pageTitle = 'MoonWell — Лунный колодец';
|
|
const pageDescription = 'Пройди историю Азерота — от Классики до Короля-лича — в своём темпе, в одиночку или с небольшим отрядом.';
|
|
let revealObserver;
|
|
|
|
onMounted(() => {
|
|
document.documentElement.lang = 'ru';
|
|
revealObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('is-visible');
|
|
revealObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
|
|
|
|
document.querySelectorAll('.reveal').forEach((el) => revealObserver.observe(el));
|
|
});
|
|
|
|
onBeforeUnmount(() => revealObserver?.disconnect());
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<title>{{ pageTitle }}</title>
|
|
<meta name="description" :content="pageDescription" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
</Head>
|
|
|
|
<Background />
|
|
<Nav :auth="auth" :play-url="playUrl" :realm="realm" />
|
|
<Hero :play-url="playUrl" :client-version="realm.client_version" />
|
|
<Realm :realm="realm" />
|
|
<About />
|
|
<Features />
|
|
<Join :register-endpoint="registerEndpoint" :csrf-token="csrfToken" :invite-required="inviteRequired" :auth="auth" :flash="flash" :legal-urls="legalUrls" />
|
|
<News :posts="posts" :index-url="newsIndexUrl" />
|
|
<Footer :play-url="playUrl" :legal-urls="legalUrls" />
|
|
<Tweaks :tweaks="tweaks" />
|
|
</template>
|