blog.hareworks.net/src/lib/page/article_page.svelte

<script lang="ts">
	import '$lib/app.scss';
	import '$lib/blog.scss';

	import Footer from '$lib/components/footer.svelte';
	import * as publish from '$lib/publish';
	import FormattedDate from '$lib/components/formatted_date.svelte';

	import type { Article } from '$lib/article';
	export let data: Article;
	const isUpdated = data.updated_at.getTime() != data.released_at.getTime();
</script>

<svelte:head>
	<title>{data.title} | Blog | HareWorks</title>
	<meta property="og:title" content={data.title + '- HareWorks'} />
	<!-- <meta property="og:description" content={data.description} /> -->
	<meta property="og:image" content={data.image} />
	<meta property="og:type" content="article" />
	<meta property="article:published_time" content={data.released_at.toISOString()} />
	{#if isUpdated}
		<meta property="article:modified_time" content={data.updated_at.toISOString()} />
	{/if}
	<meta property="article:author" content={data.author} />
	<meta property="article:section" content="Blog" />
	<meta property="article:tag" content={data.tags.join(',')} />
	<meta name="robots" content={data.publish as publish.Publish} />
</svelte:head>

<!-- <div class="back">
    <img src={data.image} alt="" />
</div> -->
<div class="container">
	<main>
		<div class="title">
			<h1>{data.title}</h1>
			<div class="meta">
				<div class="left">
					<span>
						released <FormattedDate date={data.released_at} />
						{#if isUpdated}<br />
							updated <FormattedDate date={data.updated_at} />
						{/if}
					</span>
					<span>
						<a href="/category/{data.category}"
							>{data.category[0].toUpperCase() + data.category.slice(1)}</a
						>
						{#each data.tags as tag}
							<a href={`/search?tag=${tag}`}>{tag}</a>
						{/each}
					</span>
				</div>
				<div class="right">
					<img
						src="https://gitea.hareworks.net/avatars/e595ec10f8052671deab92caca78220fc838f63259bcd542a0d93f53e2371d52?size=512"
						alt="Author"
					/>
					<div>@{data.author}</div>
				</div>
			</div>
		</div>
		<div class="panel">
			<div class="document">
				<slot />
			</div>
			<Footer />
		</div>
	</main>
</div>

<style lang="scss">
	:global(body) {
		overflow: hidden;
		background-color: var(--background-primary);
		background-size: cover;
		background-blend-mode: overlay;
	}
	.container {
		overflow: hidden;
		width: 100vw;
		height: 100dvh;
		backdrop-filter: blur(2px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.back {
		position: fixed;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		color: white;
		filter: brightness(0.8) grayscale(0.5);
	}
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.card {
		position: fixed;
		top: 0;
		right: 0;
	}
	main {
		border: 1px solid var(--line-primary);
		border-top: none;
		border-bottom: none;
		box-sizing: border-box;
		color: white;
		min-height: 100%;
		padding: 20px;
		padding-top: 100px;
		max-width: 800px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.title {
		h1 {
			font-size: 2rem;
			text-align: center;
			margin: 0;
			padding: 12px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.meta {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			padding: 0 20px;
			font-size: 1rem;
			> .left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: left;
				span {
					opacity: 0.6;
				}
				a {
					margin-left: 5px;
					padding: 0 5px;
					color: inherit;
					text-decoration: none;
					&:hover {
						text-decoration: underline;
					}
					&:first-child {
						margin-left: 0;
						padding-left: 0;
						&::before {
							content: '🗀 ';
						}
						&::after {
							content: '|';
							margin-left: 15px;
						}
					}
				}
			}
			> .right {
				display: flex;
				flex-direction: row;
				justify-content: right;
				align-items: center;
				gap: 10px;
				height: 50px;
				margin: 10px;

				img {
					width: 50px;
					height: 50px;
					border-radius: 15%;
				}
				div {
					font-size: 1rem;
				}
			}
		}
	}
	.panel {
		flex: 1;
		background-color: var(--background-primary);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	@media (max-width: 1000px) {
		.container {
			width: 100%;
		}
		.title {
			h1 {
				padding: 8px 20px;
			}
		}
	}
</style>