From 5503f812ec26e5d034a3f9ef6ed12da71bc57c2b Mon Sep 17 00:00:00 2001
From: moris <moris@noreply.moris.day>
Date: Mon, 10 Mar 2025 09:54:40 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A1=E3=82=BF=E3=83=87=E3=83=BC=E3=82=BF?=
 =?UTF-8?q?=E3=82=92=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(DefaultStyle)/post/[slug]/+page.svelte   | 92 +------------------
 .../post/[slug]/metadata.svelte               | 89 ++++++++++++++++++
 2 files changed, 91 insertions(+), 90 deletions(-)
 create mode 100644 src/routes/(DefaultStyle)/post/[slug]/metadata.svelte

diff --git a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
index fe0c5ac..85107d5 100644
--- a/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
+++ b/src/routes/(DefaultStyle)/post/[slug]/+page.svelte
@@ -4,6 +4,7 @@
     import Toc from './toc.svelte'
 	import Share from './share.svelte'
 	import Profile from './profile.svelte'
+	import Metadata from './metadata.svelte'
 	import { base } from '$app/paths';
 	import { PUBLIC_HOSTNAME, PUBLIC_POST_REPO } from '$env/static/public';
 	import { onMount } from 'svelte';
@@ -100,28 +101,7 @@
 	<article>
 		<h1 class="title">{data.metadata.title}</h1>
 
-		<div class="meta">
-			<div class="category">
-				<span class="txt">Category:</span>
-				<a class="tag" href='../../category/{data.metadata.category}'>{data.metadata.category}</a>
-			</div>
-
-			{#if data.metadata.tags.length}
-			<div class="divider"></div>
-
-			<div class="tags">
-				<span class="txt">Tag:</span>
-				{#each data.metadata.tags as tag}
-					<a class='tag' href='../../tag/{tag}'>{tag}</a>
-				{/each}
-			</div>
-			{/if}
-
-			<div class="date">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
-				<time datetime="{data.metadata.date.toLocaleDateString('sv-SE')}">{data.metadata.date.toLocaleDateString('sv-SE')}</time>
-			</div>
-		</div>
+		<Metadata meta={data.metadata}/>
 
 		{#if thumbnail}
 			<img class="thumbnail" alt="thumbnail" src="{thumbnail}" style='view-transition-name: {data.id}'/>
@@ -269,72 +249,4 @@
 			}
 		}
 	}
-
-	.meta {
-		display: grid;
-		grid-template-rows: auto auto;
-		grid-template-columns: auto auto 1fr auto;
-		gap: 4px;
-		font-size: 0.95em;
-		margin: 8px 16px;
-		white-space: nowrap;
-
-		@media(width<1000px) {
-			flex-direction: column;
-		}
-
-		& .category {
-			grid-area: 1 / 1;
-		}
-
-		& .tags {
-			grid-area: 1 / 3;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			@media(width<1000px) {
-				grid-area: 2 / 1 / 3 / 5;
-			}
-			@media(width<480px){
-				grid-area: 1 / 3;
-			}
-		}
-
-		& .tag {
-			display: inline-block;
-			padding: 1px 4px;
-			margin: 3px;
-			border-radius: 3px;
-			color: currentColor;
-			background-color: var(--theme-color);
-		}
-
-		& .divider {
-			width: 1px;
-			margin: 3px 0;
-			background-color: currentColor;
-			grid-area: 1 / 2;
-			@media(480px<=width<1000px){
-				display: none;
-			}
-		}
-
-		& .date{
-			display: flex;
-			align-items: center;
-			grid-area: 1 / 4;
-			@media(width<480px){
-				grid-area: 2 / 1 / 3 / 5;
-			}
-
-			& svg{
-				height: 1rem;
-				fill: currentColor;
-			}
-		}
-
-		@media(width<480px) {
-			& .txt {display: none;}
-		}
-	}
 </style>
\ No newline at end of file
diff --git a/src/routes/(DefaultStyle)/post/[slug]/metadata.svelte b/src/routes/(DefaultStyle)/post/[slug]/metadata.svelte
new file mode 100644
index 0000000..f0c8a8c
--- /dev/null
+++ b/src/routes/(DefaultStyle)/post/[slug]/metadata.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    export let meta
+</script>
+
+<div class="meta">
+    <div class="category">
+        <span class="txt">Category:</span>
+        <a class="tag" href='../../category/{meta.category}'>{meta.category}</a>
+    </div>
+
+    {#if meta.tags.length}
+    <div class="divider"></div>
+
+    <div class="tags">
+        <span class="txt">Tag:</span>
+        {#each meta.tags as tag}
+            <a class='tag' href='../../tag/{tag}'>{tag}</a>
+        {/each}
+    </div>
+    {/if}
+
+    <div class="date">
+        <svg class="clockicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
+        <time datetime="{meta.date.toLocaleDateString('sv-SE')}">{meta.date.toLocaleDateString('sv-SE')}</time>
+    </div>
+</div>
+
+<style>
+    .meta {
+		display: grid;
+		grid-template: auto auto / auto auto 1fr auto;
+		gap: 4px;
+		margin: 8px 16px;
+		white-space: nowrap;
+	}
+
+    .category {
+		grid-area: 1 / 1;
+	}
+
+    .tags {
+		grid-area: 1 / 3;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		@media(width<1000px) {
+			grid-area: 2 / 1 / 3 / 5;
+		}
+		@media(width<480px){
+			grid-area: 1 / 3;
+		}
+	}
+
+    .tag {
+		display: inline-block;
+		padding: 1px 4px;
+		margin: 3px;
+		border-radius: 3px;
+		color: currentColor;
+		background-color: var(--theme-color);
+	}
+
+    .date {
+		display: flex;
+		align-items: center;
+		grid-area: 1 / 4;
+		@media(width<480px){
+			grid-area: 2 / 1 / 3 / 5;
+		}
+	}
+	.clockicon {
+		height: 1em;
+		fill: currentColor;
+	}
+
+    .divider {
+		width: 1px;
+		margin: 3px 6px;
+		background-color: currentColor;
+		grid-area: 1 / 2;
+		@media(480px<=width<1000px){
+			display: none;
+		}
+	}
+
+    @media(width<480px) {
+		.txt {display: none;}
+	}
+</style>
\ No newline at end of file