96 lines
No EOL
2.7 KiB
Svelte
96 lines
No EOL
2.7 KiB
Svelte
<script lang="ts">
|
||
import { page } from '$app/state';
|
||
import DateWidget from '$src/lib/components/DateWidget.svelte';
|
||
import InfoBlock from '$src/lib/components/InfoBlock.svelte';
|
||
import Icon from '@iconify/svelte';
|
||
import type { PageData } from './$types';
|
||
import { blogPostTypeToIcon, blogPostTypeToString } from '$src/lib/util/Blogs';
|
||
|
||
export let data: PageData;
|
||
|
||
const isPublic = !!data.blogPost.date;
|
||
const authors =
|
||
data.blogPost.authors == null
|
||
? []
|
||
: typeof data.blogPost.authors === 'string'
|
||
? [data.blogPost.authors]
|
||
: data.blogPost.authors;
|
||
const type: App.BlogPostType = data.blogPost.type ?? 'article';
|
||
</script>
|
||
|
||
<base target="_blank" />
|
||
|
||
<svelte:head>
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
</svelte:head>
|
||
|
||
<section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
|
||
<div
|
||
class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
|
||
>
|
||
<div class="text-left">
|
||
<h1>{data.blogPost.title}</h1>
|
||
{#if data.blogPost.description}
|
||
<h2 class="text-gray">{data.blogPost.description}</h2>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="flex shrink-0 flex-col flex-wrap items-center justify-center p-2 font-bold {isPublic
|
||
? 'bg-amber-50 text-slate-950'
|
||
: 'bg-red-500 text-slate-50'} sm:flex-row sm:gap-x-5"
|
||
>
|
||
<DateWidget dateString={data.blogPost.date} type="published" />
|
||
{#if data.blogPost.dateChanged}
|
||
<DateWidget dateString={data.blogPost.dateChanged} type="updated" />
|
||
{/if}
|
||
<div class="flex items-center gap-2 p-1 text-lg font-bold">
|
||
<Icon icon={blogPostTypeToIcon(type)} width={28} height={28} />
|
||
<span>
|
||
{blogPostTypeToString(type)}
|
||
</span>
|
||
</div>
|
||
{#each authors as author}
|
||
<!-- TODO: rndtrash: из-за 404 не даёт собрать сайт. href="/team/{author}" -->
|
||
<a class="flex items-center gap-2 p-1 text-lg font-bold" href="#">
|
||
<Icon icon="material-symbols:person" width={28} height={28} />
|
||
<span class="underline">
|
||
{author}
|
||
</span>
|
||
</a>
|
||
{/each}
|
||
</section>
|
||
|
||
{#if page.data.blogPost.projects?.length > 0}
|
||
<InfoBlock>
|
||
<p>В данной заметке упоминаются наши проекты:</p>
|
||
<ul>
|
||
{#each page.data.blogPost.projects as project}
|
||
<li>{project}</li>
|
||
{/each}
|
||
</ul>
|
||
</InfoBlock>
|
||
{/if}
|
||
|
||
<article
|
||
class="prose
|
||
sm:prose-xl
|
||
prose-slate
|
||
prose-code:break-words
|
||
prose-pre:drop-shadow-md
|
||
prose-headings:font-disket
|
||
prose-headings:mb-4
|
||
prose-headings:font-bold prose-headings:text-slate-950 prose-h1:text-2xl
|
||
prose-h1:sm:text-4xl prose-h2:text-xl
|
||
prose-h2:sm:text-3xl prose-p:text-justify
|
||
mx-auto
|
||
w-5xl
|
||
p-4
|
||
text-base
|
||
text-slate-950
|
||
sm:text-xl lg:p-8"
|
||
>
|
||
<svelte:component this={data.content} />
|
||
</article> |