From 8e43dc76b446e19414b69079141d3699ca12155e Mon Sep 17 00:00:00 2001
From: Hare <hare.02.k@gmail.com>
Date: Sat, 17 Aug 2024 21:11:27 +0900
Subject: [PATCH] feat: add formatted_date.svelte/footer

---
 src/lib/components/footer.svelte         |  90 ++++
 src/lib/components/formatted_date.svelte |  24 +
 src/routes/+layout.svelte                |   4 +-
 src/routes/+page.svelte                  | 582 +++++++++++------------
 4 files changed, 407 insertions(+), 293 deletions(-)
 create mode 100644 src/lib/components/footer.svelte
 create mode 100644 src/lib/components/formatted_date.svelte

diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
new file mode 100644
index 0000000..661938f
--- /dev/null
+++ b/src/lib/components/footer.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	// let location = window.location.pathname;
+  let links = [
+    { name: 'Home', url: '/' },
+    { name: 'Search', url: '/search' },
+    { name: 'About Me', url: 'https://me.hareworks.net/' },
+  ];
+</script>
+
+<footer>
+	<div class="banner">
+		<a href="https://me.hareworks.net/" target="_blank">
+			<img src="/img/logo.png" alt="HareWorks" width="100px" height="100px" />
+		</a>
+		<div class="copyright">
+			<p>© 2024 Hare</p>
+		</div>
+	</div>
+	<div class="separator"></div>
+	<div class="panel">
+		<ul>
+      {#each links as link}
+        <li><a href={link.url}>{link.name}</a></li>
+      {/each}
+			<li><p>Contact: hello at hareworks dot net</p></li>
+		</ul>
+	</div>
+</footer>
+
+<style lang="scss">
+	footer {
+		width: 100%;
+		background-color: var(--background-primary);
+		display: flex;
+		justify-content: center;
+		align-items: stretch;
+		flex-direction: row;
+		padding: 10px 10px;
+		box-sizing: border-box;
+		color: white;
+	}
+	.banner {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		a {
+			width: 100px;
+			height: 100px;
+			margin: 20px;
+		}
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+	}
+	.separator {
+		width: 1px;
+		margin: 0 20px;
+		background-color: var(--line-primary);
+	}
+	.panel {
+		width: 300px;
+		margin: 20px 0;
+		display: flex;
+		justify-content: space-between;
+		align-items: top;
+		flex-direction: row;
+		gap: 20px;
+	}
+	ul {
+		margin: 0;
+	}
+	li {
+		list-style: none;
+		> a,
+		> p {
+			color: lightgrey;
+			text-decoration: none;
+			padding: 2px;
+			margin: 0;
+			display: block;
+			text-wrap: nowrap;
+		}
+    > p {
+      padding-top: 15px;
+    }
+	}
+</style>
diff --git a/src/lib/components/formatted_date.svelte b/src/lib/components/formatted_date.svelte
new file mode 100644
index 0000000..2930e4b
--- /dev/null
+++ b/src/lib/components/formatted_date.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let date: string | Date;
+
+	if (typeof date === 'string') date = new Date(date);
+
+	const pad = function (str: string): string {
+		return ('0' + str).slice(-2);
+	};
+
+	const year = date.getFullYear().toString();
+	const month = pad((date.getMonth() + 1).toString());
+	const day = pad(date.getDate().toString());
+	const hour = pad(date.getHours().toString());
+	const min = pad(date.getMinutes().toString());
+	const sec = pad(date.getSeconds().toString());
+	const tz = -date.getTimezoneOffset();
+	const sign = tz >= 0 ? '+' : '-';
+	const tzHour = pad((tz / 60).toString());
+	const tzMin = pad((tz % 60).toString());
+
+	let formattedDate = `${year}-${month}-${day}T${hour}:${min}:${sec}${sign}${tzHour}:${tzMin}`;
+</script>
+
+{formattedDate}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bd2e7e0..9b79363 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-    import '../app.scss';
+  import '../app.scss';
 </script>
 
-<slot />
+<slot />
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1dd64e6..214545f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,307 +1,307 @@
 <script lang="ts">
-    import type { PageData } from './$types';
-    // import Cursor from '$lib/components/cursor.svelte';
-    // import Footer from '$lib/components/footer.svelte';
+	import type { PageData } from './$types';
+	// import Cursor from '$lib/components/cursor.svelte';
+	import Footer from '$lib/components/footer.svelte';
+	import FormattedDate from '$lib/components/formatted_date.svelte';
 
-    export let data: PageData;
+	export let data: PageData;
 
-    let refresh = true;
-    let searchInput: HTMLInputElement;
-    let suggest: HTMLDivElement;
-    const emojis = ['( ᐢ˙꒳˙ᐢ )', '(=`•ω•´)', '₍ᐢ｡•༝•｡ᐢ₎', 'ヽ(･ω･*)', '( |||| ᐢ˙꒳˙ᐢ )'];
-    const searchChange = (e: Event) => {
-        if (refresh === false) return;
-        const value = (e.target as HTMLInputElement).value;
-        if (value.length === 0) return;
-        refresh = false;
-        let xhr = new XMLHttpRequest();
-        // xhr.open('GET', `/api/search?q=${value}`);
-        // xhr.send();
-        // xhr.onload = () => {
-        //     setTimeout(() => {q
-        //         refresh = true;
-        //     }, 1000);
-        // };
-        setTimeout(() => {
-            suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ﾐｼﾞｯｿｳﾀﾞﾖ...';
-            setTimeout(() => {
-                refresh = true;
-            }, 1000);
-        }, Math.random() * 100);
-    };
-    const searchKeydown = (e: KeyboardEvent) => {
-        if (e.key !== 'Enter') return;
-        // const input = e.target as HTMLInputElement;
-        // const value = input.value;
-        // if (value.length > 0) {
-        //     window.location.href = `/search?s=${value}`;
-        // }
-        suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ｱﾝ?';
-    };
+	let refresh = true;
+	let searchInput: HTMLInputElement;
+	let suggest: HTMLDivElement;
+	const emojis = ['( ᐢ˙꒳˙ᐢ )', '(=`•ω•´)', '₍ᐢ｡•༝•｡ᐢ₎', 'ヽ(･ω･*)', '( |||| ᐢ˙꒳˙ᐢ )'];
+	const searchChange = (e: Event) => {
+		if (refresh === false) return;
+		const value = (e.target as HTMLInputElement).value;
+		if (value.length === 0) return;
+		refresh = false;
+		let xhr = new XMLHttpRequest();
+		// xhr.open('GET', `/api/search?q=${value}`);
+		// xhr.send();
+		// xhr.onload = () => {
+		//     setTimeout(() => {q
+		//         refresh = true;
+		//     }, 1000);
+		// };
+		setTimeout(() => {
+			suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ﾐｼﾞｯｿｳﾀﾞﾖ...';
+			setTimeout(() => {
+				refresh = true;
+			}, 1000);
+		}, Math.random() * 100);
+	};
+	const searchKeydown = (e: KeyboardEvent) => {
+		if (e.key !== 'Enter') return;
+		// const input = e.target as HTMLInputElement;
+		// const value = input.value;
+		// if (value.length > 0) {
+		//     window.location.href = `/search?s=${value}`;
+		// }
+		suggest.textContent = emojis[Math.floor(Math.random() * emojis.length)] + 'ｱﾝ?';
+	};
 </script>
 
 <svelte:head>
-    <title>Home | Blog | HareWorks</title>
-    <meta name="description" content="Hareの個人ブログです。" />
-    <meta property="og:title" content="Home - HareWorks" />
-    <meta property="og:description" content="Hareの個人ブログです。" />
-    <meta property="og:image" content="/img/logo.png" />
-    <meta property="og:url" content={`https://blog.hare.works/`} />
+	<title>Home | Blog | HareWorks</title>
+	<meta name="description" content="Hareの個人ブログです。" />
+	<meta property="og:title" content="Home - HareWorks" />
+	<meta property="og:description" content="Hareの個人ブログです。" />
+	<meta property="og:image" content="/img/logo.png" />
+	<meta property="og:url" content={`https://blog.hare.works/`} />
 </svelte:head>
 
 <div class="container">
-    <div class="controls" > </div>
-    <main>
-        <h1>blog.hareworks.net</h1>
-        <p>
-            このブログはHareの個人ブログです。プログラミング、情報技術全般、デザイン、その他興味のあることについて書いています。
-        </p>
-        <div class="links">
-            <ul>
-                <li><a href="/about">ABOUT</a></li>
-                <li><a href="/contact">CONTACT</a></li>
-                <li><a href="/discord">DISCORD</a></li>
-            </ul>
-        </div>
-        <div class="notice">
-            <p>( ᐢ˙꒳˙ᐢ ) ← cute</p>
-        </div>
-        <div class="serch">
-            <div class="box">
-                <input
-                    type="text"
-                    placeholder="Search"
-                    on:focus={() => {
-                        suggest.classList.remove('hidden');
-            
-                    }}
-                    on:blur={() => {
-                        suggest.classList.add('hidden');
-                    }}
-                    on:input={searchChange}
-                    on:keydown={searchKeydown}
-                    bind:this={searchInput}
-                />
-            </div>
-            <div class="suggest hidden" bind:this={suggest}></div>
-        </div>
-        <div class="recent">
-            <h2>RECENT<span>updated: {data.updated}</span></h2>
-            <ul>
-                {#each data.recent as post}
-                    <li>
-                        <a href={post.link}>{post.title} - {post.date}</a>
-                    </li>
-                {/each}
-            </ul>
-        </div>
-        <div class="tags">
-            <h2>TAGS</h2>
-            <ul>
-                {#each data.tags as tag}
-                    <li>
-                        <button on:click={() => (searchInput.value = tag)}>{tag}</button>
-                    </li>
-                {/each}
-            </ul>
-        </div>
-        <!-- <Footer mode="home" /> -->
-    </main>
+	<div class="controls"></div>
+	<main>
+		<h1>blog.hareworks.net</h1>
+		<p>
+			このブログはHareの個人ブログです。プログラミング、情報技術全般、デザイン、その他興味のあることについて書いています。
+		</p>
+		<div class="links">
+			<ul>
+				<li><a href="/about">ABOUT</a></li>
+				<li><a href="/contact">CONTACT</a></li>
+				<li><a href="/discord" target="_blank">DISCORD</a></li>
+			</ul>
+		</div>
+		<div class="notice">
+			<p>( ᐢ˙꒳˙ᐢ ) ← cute</p>
+		</div>
+		<div class="serch">
+			<div class="box">
+				<input
+					type="text"
+					placeholder="Search"
+					on:focus={() => {
+						suggest.classList.remove('hidden');
+					}}
+					on:blur={() => {
+						suggest.classList.add('hidden');
+					}}
+					on:input={searchChange}
+					on:keydown={searchKeydown}
+					bind:this={searchInput}
+				/>
+			</div>
+			<div class="suggest hidden" bind:this={suggest}></div>
+		</div>
+		<div class="recent">
+			<h2>RECENT<span>updated: <FormattedDate date={data.updated} /></span></h2>
+			<ul>
+				{#each data.recent as post}
+					<li>
+						<a href={post.link}>{post.title} - {post.date}</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+		<div class="tags">
+			<h2>TAGS</h2>
+			<ul>
+				{#each data.tags as tag}
+					<li>
+						<button on:click={() => (searchInput.value = tag)}>{tag}</button>
+					</li>
+				{/each}
+			</ul>
+		</div>
+		<Footer />
+	</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: auto;
-    }
-    .controls {
-        position: fixed;
-        top: 0;
-        left: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-    }
-    main {
-        border: 1px solid var(--line-primary);
-        border-top: none;
-        border-bottom: none;
-        margin: 0 auto;
-        padding: 60px 8px;
-        box-sizing: border-box;
-        width: 100%;
-        max-width: 1000px;
-        height: 100dvh;
-        color: white;
-        display: flex;
-        flex-direction: column;
-        > div {
-            margin: 10px 0;
-        }
-        h1 {
-            font-size: 2rem;
-            font-weight: 400;
-            margin: 0;
-            padding: 0;
-        }
-        p {
-            width: 80%;
-        }
-        .links {
-            margin-left: auto;
-            width: 80%;
-            ul {
-                list-style: none;
-                padding: 10px;
-                margin: 0;
-                display: flex;
-                flex-direction: row;
-                justify-content: end;
-                gap: 4px;
-                border-top: 1px solid var(--line-primary);
-                li {
-                    backdrop-filter: blur(10px);
-                    padding: 0 3px 0 3px;
-                    a {
-                        text-decoration: none;
-                        color: white;
-                        box-sizing: border-box;
-                    }
-                }
-            }
-        }
-        .notice {
-            padding: 5px 0;
-            border-bottom: 1px solid var(--line-primary);
-            p {
-                padding: 15px 0;
-                text-align: center;
-                width: 100%;
-                margin: 0;
-                background-color: rgba(105, 105, 105, 0.1);
-            }
-        }
+	: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: auto;
+	}
+	.controls {
+		position: fixed;
+		top: 0;
+		left: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+	main {
+		border: 1px solid var(--line-primary);
+		border-top: none;
+		border-bottom: none;
+		margin: 0 auto;
+		padding: 60px 8px;
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 1000px;
+		height: 100dvh;
+		color: white;
+		display: flex;
+		flex-direction: column;
+		> div {
+			margin: 10px 0;
+		}
+		h1 {
+			font-size: 2rem;
+			font-weight: 400;
+			margin: 0;
+			padding: 0;
+		}
+		p {
+			width: 80%;
+		}
+		.links {
+			margin-left: auto;
+			width: 80%;
+			ul {
+				list-style: none;
+				padding: 10px;
+				margin: 0;
+				display: flex;
+				flex-direction: row;
+				justify-content: end;
+				gap: 4px;
+				border-top: 1px solid var(--line-primary);
+				li {
+					backdrop-filter: blur(10px);
+					padding: 0 3px 0 3px;
+					a {
+						text-decoration: none;
+						color: white;
+						box-sizing: border-box;
+					}
+				}
+			}
+		}
+		.notice {
+			padding: 5px 0;
+			border-bottom: 1px solid var(--line-primary);
+			p {
+				padding: 15px 0;
+				text-align: center;
+				width: 100%;
+				margin: 0;
+				background-color: rgba(105, 105, 105, 0.1);
+			}
+		}
 
-        .serch {
-            width: 100%;
-            .box {
-                display: flex;
-                &::before {
-                    content: ' ';
-                    position: relative;
-                    bottom: 0;
-                    left: 0;
-                    width: 30%;
-                    border-bottom: 1px solid var(--line-primary);
-                }
-                input[type='text'] {
-                    display: inline;
-                    width: 70%;
-                    margin-left: auto;
-                    box-sizing: border-box;
-                    padding: 10px;
-                    background-color: transparent;
-                    backdrop-filter: blur(10px);
-                    border: 1px solid var(--line-primary);
-                    border-bottom: none;
-                    border-right: none;
-                    color: white;
-                    &:active,
-                    &:focus {
-                        outline: none;
-                    }
-                }
-            }
-            .suggest {
-                display: block;
-                margin-left: 30%;
-                width: 70%;
-                height: 30px;
-                overflow: hidden;
-                border-bottom: 1px solid var(--line-primary);
-                transition: 0.5s ease-in-out;
-                transition-property: height border-bottom;
-                &.hidden {
-                    height: 0;
-                    border-bottom: 1px solid transparent;
-                }
-            }
-        }
-        h2 {
-            display: block;
-            font-size: 1.5rem;
-            font-weight: 400;
-            margin: 5px;
-            padding: 0 20px 0 10px;
-            border-left: 1px solid var(--line-primary);
-            backdrop-filter: blur(10px);
-            > span {
-                padding-left: 30px;
-                font-size: 0.8rem;
-                color: rgba(255, 255, 255, 0.5);
-            }
-        }
-        a {
-            backdrop-filter: blur(10px);
-        }
-        button {
-            font-size: 1rem;
-            backdrop-filter: blur(10px);
-            border: none;
-            color: white;
-            background-color: transparent;
-            border-bottom: 1px solid transparent;
-            &:hover {
-                border-bottom: 1px solid var(--line-primary);
-            }
-        }
-        ul {
-            list-style: none;
-            padding: 0 0 0 30px;
-            margin: 0;
-            li {
-                padding: 5px 0;
-            }
-        }
-        .recent {
-            margin-top: 20px;
-        }
-        .tags {
-            ul {
-                display: flex;
-                gap: 3px;
-                li {
-                    font-size: 1rem;
-                    padding: 3px 5px;
-                }
-            }
-        }
-    }
+		.serch {
+			width: 100%;
+			.box {
+				display: flex;
+				&::before {
+					content: ' ';
+					position: relative;
+					bottom: 0;
+					left: 0;
+					width: 30%;
+					border-bottom: 1px solid var(--line-primary);
+				}
+				input[type='text'] {
+					display: inline;
+					width: 70%;
+					margin-left: auto;
+					box-sizing: border-box;
+					padding: 10px;
+					background-color: transparent;
+					backdrop-filter: blur(10px);
+					border: 1px solid var(--line-primary);
+					border-bottom: none;
+					border-right: none;
+					color: white;
+					&:active,
+					&:focus {
+						outline: none;
+					}
+				}
+			}
+			.suggest {
+				display: block;
+				margin-left: 30%;
+				width: 70%;
+				height: 30px;
+				overflow: hidden;
+				border-bottom: 1px solid var(--line-primary);
+				transition: 0.5s ease-in-out;
+				transition-property: height border-bottom;
+				&.hidden {
+					height: 0;
+					border-bottom: 1px solid transparent;
+				}
+			}
+		}
+		h2 {
+			display: block;
+			font-size: 1.5rem;
+			font-weight: 400;
+			margin: 5px;
+			padding: 0 20px 0 10px;
+			border-left: 1px solid var(--line-primary);
+			backdrop-filter: blur(10px);
+			> span {
+				padding-left: 30px;
+				font-size: 0.8rem;
+				color: rgba(255, 255, 255, 0.5);
+			}
+		}
+		a {
+			backdrop-filter: blur(10px);
+		}
+		button {
+			font-size: 1rem;
+			backdrop-filter: blur(10px);
+			border: none;
+			color: white;
+			background-color: transparent;
+			border-bottom: 1px solid transparent;
+			&:hover {
+				border-bottom: 1px solid var(--line-primary);
+			}
+		}
+		ul {
+			list-style: none;
+			padding: 0 0 0 30px;
+			margin: 0;
+			li {
+				padding: 5px 0;
+			}
+		}
+		.recent {
+			margin-top: 20px;
+		}
+		.tags {
+			ul {
+				display: flex;
+				gap: 3px;
+				li {
+					font-size: 1rem;
+					padding: 3px 5px;
+				}
+			}
+		}
+	}
 
-    a {
-        text-decoration: none;
-        border-bottom: 1px solid var(--line-primary);
-        color: white;
-        box-sizing: border-box;
-    }
+	a {
+		text-decoration: none;
+		border-bottom: 1px solid var(--line-primary);
+		color: white;
+		box-sizing: border-box;
+	}
 
-    @media (max-width: 1000px) {
-        main {
-            width: 100%;
-            flex-direction: column;
-            gap: 20px;
-        }
-        .notice {
-            p {
-                padding: 10px 0;
-            }
-        }
-    }
+	@media (max-width: 1000px) {
+		main {
+			width: 100%;
+			flex-direction: column;
+			gap: 20px;
+		}
+		.notice {
+			p {
+				padding: 10px 0;
+			}
+		}
+	}
 </style>