feat: loading data for article layout

src/lib/publish.ts

@@ -0,0 +1,15 @@
+export type Publish =
+    | 'public'
+    | 'limited' // noindex
+    | 'private'; // noindex nofollow
+
+export function robots(publish: Publish) {
+    switch (publish) {
+        case 'public':
+            return '';
+        case 'limited':
+            return 'noindex';
+        case 'private':
+            return 'noindex, nofollow';
+    }
+}

src/lib/server/database/article.ts

@@ -0,0 +1,12 @@
+export type Article = {
+  seq: number;
+  id: string;
+  title: string;
+  category: string;
+  released_at: Date;
+  updated_at: Date;
+  tags: string[];
+  image: string;
+  publish: string;
+  content: string;
+};

src/routes/article/+layout.server.ts

@@ -0,0 +1,20 @@
+import type { Article } from '$lib/server/database/article';
+import type { LayoutServerLoad } from './$types';
+export const load: LayoutServerLoad = async () => {
+  return {
+    props: {
+      article: {
+        seq: 0,
+        id: 'test',
+        title: 'test',
+        category: 'test',
+        released_at: new Date(),
+        updated_at: new Date(),
+        tags: ['test'],
+        image: 'test',
+        publish: 'test',
+        content: 'test',
+      } as Article,
+    },
+  };
+};

src/routes/article/+layout.svelte

@@ -1,5 +1,161 @@
-<script>
+<script lang="ts">
-  import '$lib/app.scss';
+	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 { LayoutData } from './$types';
+	export let data: LayoutData;
 </script>
 
-<slot />
+<svelte:head>
+	<title>{data.props.article.title} | Blog | HareWorks</title>
+	<meta property="og:title" content={data.props.article.title + '- HareWorks'} />
+	<!-- <meta property="og:description" content={data.props.article.description} /> -->
+	<meta property="og:image" content={data.props.article.image} />
+	<meta property="og:type" content="article" />
+	<meta property="article:published_time" content={data.props.article.released_at.toISOString()} />
+	{#if data.props.article.updated_at}
+		<meta property="article:modified_time" content={data.props.article.updated_at.toISOString()} />
+	{/if}
+	<meta property="article:author" content="HareWorks" />
+	<meta property="article:section" content="Blog" />
+	<meta property="article:tag" content={data.props.article.tags.join(',')} />
+	<meta name="robots" content={data.props.article.publish as publish.Publish} />
+</svelte:head>
+
+<!-- <div class="back">
+    <img src={data.props.article.image} alt="" />
+</div> -->
+<div class="container">
+	<div class="title">
+		<h1>{data.props.article.title}</h1>
+		<div class="meta">
+			<span>
+				released <FormattedDate date={data.props.article.released_at} />
+				{#if data.props.article.updated_at}<br />
+					updated <FormattedDate date={data.props.article.updated_at} />
+				{/if}
+			</span>
+			<span>
+				<a href="/category/{data.props.article.category}"
+					>{data.props.article.category[0].toUpperCase() + data.props.article.category.slice(1)}</a
+				>
+				{#each data.props.article.tags as tag}
+					<a href={`/search?tag=${tag}`}>{tag}</a>
+				{/each}
+			</span>
+		</div>
+	</div>
+	<div class="panel">
+		<main>
+			<div class="document">
+				<slot />
+			</div>
+		</main>
+		<Footer />
+	</div>
+</div>
+
+<style lang="scss">
+	:global(body) {
+		background-color: var(--background-primary);
+	}
+	.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;
+	}
+	.container {
+		color: white;
+		min-height: 100%;
+		padding-top: 100px;
+		width: 1000px;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+	}
+	.title {
+		h1 {
+			font-size: 2rem;
+			text-align: center;
+			margin: 0;
+			padding: 12px 100px 12px 0;
+			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;
+			padding: 0 20px;
+			font-size: 0.8rem;
+			span {
+				opacity: 0.6;
+			}
+			a {
+				&:first-child {
+					&::before {
+						content: '🗀 ';
+					}
+					&::after {
+						content: '|';
+						margin-left: 15px;
+					}
+				}
+				margin-left: 5px;
+				padding: 0 5px;
+				color: inherit;
+				text-decoration: none;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+	.panel {
+		flex: 1;
+		background-color: var(--background-primary);
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+	}
+	main {
+		padding: 20px;
+		box-sizing: border-box;
+		width: 1000px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	@media (max-width: 1000px) {
+		.container {
+			width: 100%;
+		}
+		.title {
+			h1 {
+				padding: 8px 20px;
+			}
+		}
+		main {
+			max-width: 100%;
+		}
+	}
+</style>

src/routes/article/[id]/+page.server.ts

@@ -0,0 +1,46 @@
+import type { Article } from '$lib/server/database/article';
+import type { PageServerLoad } from './$types';
+import PG from '$lib/server/database';
+
+export const load: PageServerLoad = async ({ params }) => {
+  const { id } = params;
+
+  const db = await PG();
+  await db.begin();
+  try {
+    const article = await db.query(
+      "SELECT * FROM article WHERE id = $1",
+      [id]
+    );
+    if (article.rowCount === 0) {
+      return {
+        status: 404,
+        error: new Error('Not found'),
+      };
+    }
+    const row = article.rows[0];
+    const data: Article = {
+      seq: row.seq,
+      id: row.id,
+      title: row.title,
+      category: row.category,
+      released_at: row.released_at,
+      updated_at: row.updated_at,
+      tags: row.tags,
+      image: row.image,
+      publish: row.publish,
+      content: row.content,
+    };
+    return {
+      props: { data },
+    };
+  } catch (e) {
+    await db.rollback();
+    return {
+      status: 500,
+      error: e as Error,
+    };
+  } finally {
+    await db.release();
+  }
+};

src/routes/article/[id]/+page.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+
+</script>