feat: add formatted_date.svelte/footer

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>

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}

src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	// import Cursor from '$lib/components/cursor.svelte';
-    // import Footer from '$lib/components/footer.svelte';
+	import Footer from '$lib/components/footer.svelte';
+	import FormattedDate from '$lib/components/formatted_date.svelte';
 
 	export let data: PageData;
 
@@ -60,7 +61,7 @@
 			<ul>
 				<li><a href="/about">ABOUT</a></li>
 				<li><a href="/contact">CONTACT</a></li>
-                <li><a href="/discord">DISCORD</a></li>
+				<li><a href="/discord" target="_blank">DISCORD</a></li>
 			</ul>
 		</div>
 		<div class="notice">
@@ -73,7 +74,6 @@
 					placeholder="Search"
 					on:focus={() => {
 						suggest.classList.remove('hidden');
-            
 					}}
 					on:blur={() => {
 						suggest.classList.add('hidden');
@@ -86,7 +86,7 @@
 			<div class="suggest hidden" bind:this={suggest}></div>
 		</div>
 		<div class="recent">
-            <h2>RECENT<span>updated: {data.updated}</span></h2>
+			<h2>RECENT<span>updated: <FormattedDate date={data.updated} /></span></h2>
 			<ul>
 				{#each data.recent as post}
 					<li>
@@ -105,7 +105,7 @@
 				{/each}
 			</ul>
 		</div>
-        <!-- <Footer mode="home" /> -->
+		<Footer />
 	</main>
 </div>