84 lines
3.3 KiB
Vue
84 lines
3.3 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: () => ({}) },
|
|
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>
|