новости + переработка текстов

2026-07-26 21:09:32 +04:00
parent 5495e40539
commit cb234b17ac
41 changed files with 809 additions and 1939 deletions
@@ -0,0 +1,84 @@
+<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>
@@ -0,0 +1,83 @@
+<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: () => ({}) },
+    article: { type: Object, required: true },
+    moreNews: { type: Array, default: () => [] },
+});
+
+const paragraphs = computed(() => props.article.body
+    .replace(/\r\n?/g, '\n')
+    .split(/\n{2,}/)
+    .map((paragraph) => paragraph.trim())
+    .filter(Boolean));
+</script>
+
+<template>
+    <Head>
+        <title>{{ article.title }} — {{ site.name }}</title>
+        <meta name="description" :content="article.excerpt" />
+        <link rel="canonical" :href="article.canonical_url" />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" :content="article.title" />
+        <meta property="og:description" :content="article.excerpt" />
+        <meta property="og:url" :content="article.canonical_url" />
+        <meta v-if="article.image_url" property="og:image" :content="article.image_url" />
+    </Head>
+
+    <PortalLayout :site="site" :auth="auth" :urls="urls" :flash="flash">
+        <article class="wrap portal-news-page">
+            <Link class="portal-news-back" :href="article.back_url">
+                <span aria-hidden="true">←</span>
+                Все новости
+            </Link>
+
+            <header class="portal-news-hero">
+                <div class="news-meta">
+                    <span class="news-tag patch">Новости</span>
+                    <time v-if="article.date">{{ article.date }}</time>
+                </div>
+                <h1 class="h-display">{{ article.title }}</h1>
+                <p class="lead">{{ article.excerpt }}</p>
+            </header>
+
+            <img
+                v-if="article.image_url"
+                class="portal-news-cover"
+                :src="article.image_url"
+                :alt="article.title"
+            />
+
+            <div class="portal-news-body">
+                <p v-for="(paragraph, index) in paragraphs" :key="index">{{ paragraph }}</p>
+            </div>
+
+            <footer class="portal-news-end">
+                <span aria-hidden="true">✦</span>
+                <Link :href="article.back_url">Вернуться к хроникам сервера</Link>
+            </footer>
+        </article>
+
+        <section v-if="moreNews.length" class="wrap portal-news-more">
+            <div class="portal-news-more__head">
+                <span class="eyebrow">Продолжить чтение</span>
+                <h2 class="h-display">Другие новости</h2>
+            </div>
+            <div class="portal-news-more__grid">
+                <Link v-for="item in moreNews" :key="item.id" class="portal-news-more__card" :href="item.url">
+                    <img v-if="item.image_url" :src="item.image_url" :alt="item.title" />
+                    <div class="news-meta"><span>{{ item.date }}</span></div>
+                    <h3 class="h-display">{{ item.title }}</h3>
+                    <p>{{ item.excerpt }}</p>
+                    <span class="news-read">Читать <span aria-hidden="true">→</span></span>
+                </Link>
+            </div>
+        </section>
+    </PortalLayout>
+</template>