docker/app.Dockerfile

@@ -17,8 +17,6 @@ FROM node:22-slim
 
 WORKDIR /app
 
-COPY ./articles ./articles
-
 COPY --from=builder /app/build ./build
 COPY --from=builder /app/package.json .
 COPY --from=builder /app/node_modules ./node_modules

src/lib/page/article_page.svelte

@@ -7,7 +7,7 @@
 	import FormattedDate from '$lib/components/formatted_date.svelte';
 	import Head from '$lib/components/head.svelte';
 
-	import type { Article } from '$lib/article';
+  import type { Article } from '$lib/article';
 	export let data: Article;
 </script>
 
@@ -31,49 +31,38 @@
     <img src={data.image} alt="" />
 </div> -->
 <div class="container">
-	<main>
+	<div class="title">
-		<div class="title">
+		<h1>{data.title}</h1>
-			<h1>{data.title}</h1>
+		<div class="meta">
-			<div class="meta">
+			<span>
-				<span>
+				released <FormattedDate date={data.released_at} />
-					released <FormattedDate date={data.released_at} />
+				{#if data.updated_at}<br />
-					{#if data.updated_at}<br />
+					updated <FormattedDate date={data.updated_at} />
-						updated <FormattedDate date={data.updated_at} />
+				{/if}
-					{/if}
+			</span>
-				</span>
+			<span>
-				<span>
+				<a href="/category/{data.category}"
-					<a href="/category/{data.category}"
+					>{data.category[0].toUpperCase() + data.category.slice(1)}</a
-						>{data.category[0].toUpperCase() + data.category.slice(1)}</a
+				>
-					>
+				{#each data.tags as tag}
-					{#each data.tags as tag}
+					<a href={`/search?tag=${tag}`}>{tag}</a>
-						<a href={`/search?tag=${tag}`}>{tag}</a>
+				{/each}
-					{/each}
+			</span>
-				</span>
-			</div>
 		</div>
-		<div class="panel">
+	</div>
+	<div class="panel">
+		<main>
 			<div class="document">
 				<slot />
 			</div>
-			<Footer />
+		</main>
-		</div>
+		<Footer />
-	</main>
+	</div>
 </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;
@@ -91,19 +80,15 @@
 		height: 100%;
 		object-fit: cover;
 	}
-	main {
+	.container {
-		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;
 		width: 1000px;
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
+		box-sizing: border-box;
 	}
 	.title {
 		h1 {
@@ -153,6 +138,14 @@
 		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%;
@@ -162,5 +155,8 @@
 				padding: 8px 20px;
 			}
 		}
+		main {
+			max-width: 100%;
+		}
 	}
 </style>

src/lib/server/database.ts

@@ -1,5 +1,5 @@
 import pg from 'pg';
-const { Pool } = pg;
+import { Pool } from 'pg';
 import { getConnection } from './database/get_connection';
 
 export class Postgres {

src/lib/server/database/init_db.ts

@@ -1,4 +1,5 @@
 // initialize
+import PG from '$lib/server/database';
 import type { Postgres } from '$lib/server/database';
 import fs from 'fs';
 import { compile } from 'mdsvex';
@@ -107,7 +108,6 @@ export default async function init(db: Postgres) {
     for (const { path, id } of articleFiles) {
       const res = await db.query('select * from article where id = $1', [id]);
       const compiled = await compile(fs.readFileSync(path, 'utf-8'));
-      
       const title = compiled.data.fm.title;
       const category = path.split('/')[3];
       const tags: string[] = compiled.data.fm.tags;
@@ -127,8 +127,8 @@ export default async function init(db: Postgres) {
       } else if (res.rows[0].updated_at < updated_at) {
         console.log(`Update article: ${id}`);
         await db.query(
-          'update article set title = $2, category = $3, released_at = $4, updated_at = $5, tags = $6, image = $7, publish = $8, content = $9 where id = $1',
+          'update article set title = $2, updated_at = $4, tags = $5, content = $6 where id = $1',
-          [id, title, category, released_at, updated_at, tags, image, publish, content]
+          [id, title, updated_at, tags, content]
         );
       } else {
         console.log(`Article ${id} is already up-to-date`);

src/routes/+error.svelte

@@ -41,10 +41,7 @@
 
 <style lang="scss">
   :global(body) {
-		overflow: hidden;
+    background-color: var(--background-primary);
-		background-color: var(--background-primary);
-		background-size: cover;
-		background-blend-mode: overlay;
   }
     .back {
         position: fixed;

src/routes/+page.svelte

@@ -114,8 +114,8 @@
 		</div>
 		<Footer />
 	</main>
+	<Cursor />
 </div>
-<Cursor />
 
 <style lang="scss">
 	:global(body) {
@@ -129,8 +129,7 @@
 		width: 100vw;
 		height: 100dvh;
 		backdrop-filter: blur(2px);
-		overflow-y: auto;
+		overflow: hidden;
-    overflow-x: hidden;
 	}
 	.controls {
 		position: fixed;
@@ -147,10 +146,12 @@
 		box-sizing: border-box;
 		width: 100%;
 		max-width: 1000px;
+		height: 100dvh;
 		color: white;
 		display: flex;
 		flex-direction: column;
-		overflow: visible;
+		overflow-x: hidden;
+		overflow-y: auto;
 		> div {
 			margin: 10px 0;
 		}