articles

@@ -1 +1 @@
-Subproject commit 3744bd78995594e5fdfcaeff32f426f1d41daffa
+Subproject commit d1d724d1170e8cd2460cf1beb5098161ac33ef9a

src/lib/app.scss

@@ -6,7 +6,7 @@
 }
 
 :root {
-  font-size: 16px;
+  font-size: 18px;
 }
 
 body {
@@ -15,5 +15,5 @@ body {
   color: #ffffff;
   font-family: 'ZenKakuGothicNew-Regular', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro',
     'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif;
-  font-size: 16px;
+  font-size: 1rem;
 }

src/lib/article.ts

@@ -7,6 +7,8 @@ export type Article = {
   category: string;
   released_at: Date;
   updated_at: Date;
+  author: string;
+  email: string;
   tags: string[];
   image: string;
   publish: Publish;

src/lib/blog.scss

@@ -7,11 +7,15 @@
 
 	color: var(--color-text);
 
+    padding-left: 2rem;
+    box-sizing: border-box;
+
 	h1 {
 		position: relative;
 		width: auto;
-        font-size: 2rem;
+		font-size: 1.8rem;
 		margin-bottom: 0.5rem;
+        margin-left: -1rem;
 	}
 
 	hr {
@@ -19,24 +23,21 @@
 		margin: 0;
 		border: none;
 		border-top: 1px solid var(--color-outline);
-    }
+        margin-left: -1rem;
-
-    >*:not(h1, hr) {
-        margin-left: 2rem;
 	}
 
 	h2 {
 		font-size: 1.5rem;
 		position: relative;
 
-        &::before {
+		// &::before {
-            content: '#';
+		// 	content: '#';
-            position: absolute;
+		// 	position: absolute;
-            top: 0;
+		// 	top: 0;
-            left: -1.5rem;
+		// 	left: -1.5rem;
-            font-size: 1.75rem;
+		// 	font-size: 1.75rem;
-            color: rgb(131, 131, 131);
+		// 	color: rgb(131, 131, 131);
-        }
+		// }
 	}
 
 	h3 {
@@ -111,24 +112,35 @@
 		}
 	}
 
+	code:not(pre>code) {
+		display: inline-block;
+		font-family: monospace;
+        font-size: 0.9rem;
+		background: #66666666;
+        padding: 0 0.3rem;
+        border-radius: 0.5rem;
+	}
+
 	pre {
 		font-family: monospace;
 		position: relative;
 		display: block;
 		margin-top: 0.75rem;
 		margin-bottom: 0.75rem;
-        border: 2px solid #ffffff40;
+		// border: 2px solid #ffffff40;
 		border-radius: 0.5rem;
-        overflow-x: scroll;
+		overflow-x: auto;
+		font-size: 0.9rem;
 
 		&::-webkit-scrollbar {
 			border-radius: 10px;
 			height: 10px;
 			width: 8px;
+			background: #3d3d3d;
 		}
 
 		&::-webkit-scrollbar-thumb {
-            background: #999;
+			background: #6f6f6f;
 			border-radius: 10px;
 		}
 
@@ -136,7 +148,7 @@
 			border-radius: 10px;
 		}
 
-        >code {
+		> code {
 			display: inline-block;
 			padding: 0.5rem;
 			border-radius: 0.6rem;
@@ -154,7 +166,7 @@
 		transition-property: height;
 		padding-inline-start: 0.1rem;
 
-        >summary {
+		> summary {
 			position: relative;
 			border-radius: 0.5rem;
 			list-style: '＋ ' outside;
@@ -168,7 +180,7 @@
 			}
 		}
 
-        >p {
+		> p {
 			margin-block-start: 0.5rem;
 			margin-block-end: 0.5rem;
 			margin-left: 1rem;
@@ -176,11 +188,11 @@
 		}
 
 		&[open] {
-            >summary {
+			> summary {
 				list-style: '－ ' outside;
 			}
 
-            >p {
+			> p {
 				animation: detailsIn 0.5s ease;
 				display: block;
 			}

src/lib/page/article_page.svelte

@@ -21,7 +21,7 @@
 	{#if isUpdated}
 		<meta property="article:modified_time" content={data.updated_at.toISOString()} />
 	{/if}
-	<meta property="article:author" content="HareWorks" />
+	<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} />
@@ -35,6 +35,7 @@
 		<div class="title">
 			<h1>{data.title}</h1>
 			<div class="meta">
+				<div class="left">
 					<span>
 						released <FormattedDate date={data.released_at} />
 						{#if isUpdated}<br />
@@ -50,6 +51,14 @@
 						{/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">
@@ -91,6 +100,11 @@
 		height: 100%;
 		object-fit: cover;
 	}
+	.card {
+		position: fixed;
+		top: 0;
+		right: 0;
+	}
 	main {
 		border: 1px solid var(--line-primary);
 		border-top: none;
@@ -100,7 +114,7 @@
 		min-height: 100%;
 		padding: 20px;
 		padding-top: 100px;
-		max-width: 1000px;
+		max-width: 800px;
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
@@ -110,7 +124,7 @@
 			font-size: 2rem;
 			text-align: center;
 			margin: 0;
-			padding: 12px 100px 12px 0;
+			padding: 12px;
 			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 			box-sizing: border-box;
 			display: flex;
@@ -120,8 +134,14 @@
 		.meta {
 			display: flex;
 			justify-content: space-between;
+			flex-direction: row;
 			padding: 0 20px;
-			font-size: 0.8rem;
+			font-size: 1rem;
+			> .left {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: left;
 				span {
 					opacity: 0.6;
 				}
@@ -134,6 +154,8 @@
 						text-decoration: underline;
 					}
 					&:first-child {
+						margin-left: 0;
+						padding-left: 0;
 						&::before {
 							content: '🗀 ';
 						}
@@ -144,6 +166,25 @@
 					}
 				}
 			}
+			> .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;

src/lib/server/aritcle-git.ts

@@ -0,0 +1,15 @@
+import { simpleGit, } from 'simple-git';
+import type { SimpleGit, SimpleGitOptions } from 'simple-git';
+
+console.log(process.cwd()+'/articles'); 
+export const gitOptions: Partial<SimpleGitOptions> = {
+  baseDir: process.cwd()+'/articles',
+  binary: 'git',
+  maxConcurrentProcesses: 6,
+  config: [
+    'core.sshCommand=ssh -i ../key -F /dev/null'
+  ],
+};
+
+const git: SimpleGit = simpleGit(gitOptions);
+export default git;

src/lib/server/article.ts

@@ -1,3 +1,4 @@
+//@ts-ignore
 import { compile, escapeSvelte } from "mdsvex";
 import { createHighlighter } from "shiki";
 import { kanagawa_dark as theme } from "$lib/kanagawa"

src/lib/server/database/get_connection.ts

@@ -10,10 +10,14 @@ import {
 } from '$env/static/private'
 const connectionString = `postgres://${PG_USER}:${PG_PASS}@${PG_HOST}:${PG_PORT}/${PG_DB}`;
 
-const pool = new Pool({ connectionString });
+let pool = new Pool({ connectionString });
 
 export const getConnection = () => pool;
 
+export const reConnect = async () => {
+  pool = new Pool({ connectionString });
+}
+
 import init_db from '$lib/server/database/init';
 import PG from '$lib/server/database';
 await init_db(await PG(pool));

src/lib/server/database/init.ts

@@ -90,10 +90,14 @@ export default async function init(db: Postgres) {
       });
       const res = await db.query('select * from article where id = $1', [id]);
 
-      const author = gitlog.all[0].author_name;
+      // console.log(gitlog);
-      const email = gitlog.all[0].author_email;
+      const latest = gitlog.latest!;
-      const released_at = new Date(gitlog.all[0].date);
+      const oldest = gitlog.all[gitlog.all.length - 1];
-      const updated_at = (gitlog.latest === null) ? released_at : new Date(gitlog.latest.date);
+
+      const author = oldest.author_name;
+      const email = oldest.author_email;
+      const released_at = new Date(oldest.date);
+      const updated_at = new Date(latest.date);
       console.log(`Author: ${author} <${email}>\nReleased at: ${format(released_at)}\nUpdated at: ${format(updated_at)}`);
 
       const category = path.split('/')[3];
@@ -112,8 +116,8 @@ export default async function init(db: Postgres) {
           'insert into article (id, released_at, updated_at, author, email, title, category, tags, image, publish, content) values ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)',
           [id, released_at, updated_at, author, email, title, category, tags, image, publish, content]
         );
-      } else if (res.rows[0].updated_at < updated_at) {
+        // } else if (res.rows[0].updated_at < updated_at) {
-        // } else if (true) {
+      } else if (true) {
         console.log(`Update article: ${id}`);
         await db.query(
           'update article set released_at = $2, updated_at = $3, author = $4, email = $5, title = $6, category = $7, tags = $8, image = $9, publish = $10, content = $11 where id = $1',

src/routes/+page.server.ts

@@ -1,6 +1,7 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import PG from '$lib/server/database';
+import { format } from '$lib/scripts/formatted_date';
 
 let data: {
   recent: {
@@ -28,7 +29,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
     data.recent = recent_articles.rows.map((row) => ({
       title: row.title,
       image: row.image,
-      date: row.updated_at.toISOString().slice(0, 10),
+      date: format(row.updated_at),
       link: `/article/${row.category}/${row.id}`,
       tags: row.tags,
     }));