85 lines
3.9 KiB
Vue
85 lines
3.9 KiB
Vue
<script setup>
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { computed } from 'vue';
|
|
import PortalLayout from '../../Layouts/PortalLayout.vue';
|
|
|
|
const props = defineProps({
|
|
site: { type: Object, required: true },
|
|
auth: { type: Object, required: true },
|
|
urls: { type: Object, required: true },
|
|
flash: { type: Object, default: () => ({}) },
|
|
articles: { type: Object, required: true },
|
|
});
|
|
|
|
const paginationLinks = computed(() => props.articles.links.map((link, index, links) => ({
|
|
...link,
|
|
label: index === 0 ? 'Назад' : (index === links.length - 1 ? 'Вперёд' : link.label),
|
|
})));
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<title>Новости — {{ site.name }}</title>
|
|
<meta name="description" content="Новости, обновления и события игрового проекта MoonWell." />
|
|
<link rel="canonical" :href="urls.news" />
|
|
</Head>
|
|
|
|
<PortalLayout :site="site" :auth="auth" :urls="urls" :flash="flash">
|
|
<main class="wrap portal-news-index">
|
|
<header class="portal-news-index__hero">
|
|
<span class="eyebrow">Хроники сервера</span>
|
|
<h1 class="h-display">Новости и обновления</h1>
|
|
<p class="lead">События MoonWell, патчноуты, дневники разработки и важные объявления проекта.</p>
|
|
</header>
|
|
|
|
<div v-if="articles.data.length" class="portal-news-list">
|
|
<Link
|
|
v-for="article in articles.data"
|
|
:key="article.id"
|
|
class="portal-news-list__card"
|
|
:href="article.url"
|
|
:aria-label="`Прочитать новость «${article.title}»`"
|
|
>
|
|
<div
|
|
class="portal-news-list__cover"
|
|
:class="{ empty: !article.image_url }"
|
|
:style="article.image_url ? { backgroundImage: `url(${article.image_url})` } : {}"
|
|
>
|
|
<span v-if="!article.image_url" aria-hidden="true">✦</span>
|
|
</div>
|
|
<div class="portal-news-list__content">
|
|
<div class="news-meta">
|
|
<span class="news-tag patch">Новости</span>
|
|
<time v-if="article.date">{{ article.date }}</time>
|
|
</div>
|
|
<h2 class="h-display">{{ article.title }}</h2>
|
|
<p>{{ article.excerpt }}</p>
|
|
<span class="news-read">Читать полностью <span aria-hidden="true">→</span></span>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
<div v-else class="portal-news-index__empty">
|
|
<span aria-hidden="true">✦</span>
|
|
<h2 class="h-display">Хроники пока пусты</h2>
|
|
<p>Первая новость появится здесь после публикации.</p>
|
|
<Link class="btn btn-ghost" :href="urls.home">Вернуться на главную</Link>
|
|
</div>
|
|
|
|
<nav v-if="articles.last_page > 1" class="portal-pagination" aria-label="Страницы новостей">
|
|
<template v-for="(link, index) in paginationLinks" :key="`${link.label}-${index}`">
|
|
<Link
|
|
v-if="link.url"
|
|
:class="{ active: link.active }"
|
|
:href="link.url"
|
|
preserve-scroll
|
|
>
|
|
{{ link.label }}
|
|
</Link>
|
|
<span v-else class="disabled">{{ link.label }}</span>
|
|
</template>
|
|
</nav>
|
|
</main>
|
|
</PortalLayout>
|
|
</template>
|