frontend-v2/package.json

@@ -1,7 +1,7 @@
 {
-	"name": "frontend-v2",
+	"name": "squidspirit-blog",
 	"private": true,
-	"version": "0.0.1",
+	"version": "0.1.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -16,6 +16,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@fortawesome/fontawesome-free": "^7.0.0",
 		"@sveltejs/adapter-auto": "^6.0.0",
 		"@sveltejs/kit": "^2.22.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
@@ -40,5 +41,5 @@
 			"esbuild"
 		]
 	},
-	"packageManager": "pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912"
+	"packageManager": "pnpm@10.12.4"
 }

frontend-v2/pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@eslint/js':
         specifier: ^9.18.0
         version: 9.31.0
+      '@fortawesome/fontawesome-free':
+        specifier: ^7.0.0
+        version: 7.0.0
       '@sveltejs/adapter-auto':
         specifier: ^6.0.0
         version: 6.0.1(@sveltejs/kit@2.25.1(@sveltejs/vite-plugin-svelte@6.1.0(svelte@5.36.13)(vite@7.0.5(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.36.13)(vite@7.0.5(jiti@2.4.2)(lightningcss@1.30.1)))
@@ -278,6 +281,10 @@ packages:
     resolution: {integrity: sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fortawesome/fontawesome-free@7.0.0':
+    resolution: {integrity: sha512-X48nISrSOa89zu2VMljC4XaRf8NmgTwQBVHfS2Nu5G00ZwM31oOVrAtGxZF3b6wDYf9lJsf/Eq4cCSFKIkOWPQ==}
+    engines: {node: '>=6'}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1571,6 +1578,8 @@ snapshots:
       '@eslint/core': 0.15.1
       levn: 0.4.1
 
+  '@fortawesome/fontawesome-free@7.0.0': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':

frontend-v2/src/lib/Action.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  let { label, link, isSelected } = $props();
-</script>
-
-<div class:rounded={isSelected} class:px-1.5={isSelected} class:bg-blue-600={isSelected} class:bg-transparent={!isSelected}>
-  <a class:font-extrabold={true} class:text-white={isSelected} class:text-gray-800={!isSelected} href={link}>
-    {label}
-  </a>
-</div>

frontend-v2/src/lib/Navbar.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/state';
-  import Action from '$lib/Action.svelte';
-</script>
-
-<div class="border-b border-gray-300">
-  <div class="mx-auto flex h-toolbar-height max-w-screen-xl flex-row items-center justify-between px-4 md:px-6">
-    <a class="flex flex-row items-center gap-x-2" href="/">
-      <img class="mt-1 size-10" src="/icon/logo-light.svg" alt="SquidSpirit" />
-      <span class="text-2xl font-black text-gray-800">魚之魷魂</span>
-    </a>
-    <div class="flex flex-row items-center gap-x-6">
-      <Action label="首頁" link="/" isSelected={page.url.pathname === '/'} />
-    </div>
-  </div>
-</div>

frontend-v2/src/lib/common/framework/ui/Action.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let { label, link, isSelected } = $props();
+</script>
+
+<div class="rounded px-1.5 {isSelected ? 'bg-blue-600' : 'bg-transparent'}">
+	<a class="font-extrabold {isSelected ? 'text-white' : 'text-gray-800'}" href={link}>
+		{label}
+	</a>
+</div>

frontend-v2/src/lib/common/framework/ui/Footer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+</script>
+
+<div class="border-t border-gray-300">
+	<div
+		class="mx-auto flex max-w-screen-xl flex-col items-center justify-center gap-4 px-4 py-12 md:flex-row md:px-6"
+	>
+		<div class="flex flex-row items-center justify-center gap-x-4">
+			<a href="https://www.youtube.com/@squidspirit16" target="_blank" aria-label="YouTube Channel">
+				<i class="fa-brands fa-youtube size-4" title="YouTube Channel"></i>
+			</a>
+			<a href="mailto:squid@squidspirit.com" aria-label="Email">
+				<i class="fa-solid fa-envelope size-4" title="Email"></i>
+			</a>
+			<a href="https://git.squidspirit.com/squid/blog" target="_blank" aria-label="Git Repository">
+				<i class="fa-brands fa-git-alt size-4" title="Git Repository"></i>
+			</a>
+		</div>
+		<div class="max-md:hidden">
+			<div class="h-4 w-0.5 bg-gray-300"></div>
+		</div>
+		<span class="text-sm">Copyright © 2025 SquidSpirit</span>
+	</div>
+</div>

frontend-v2/src/lib/common/framework/ui/Navbar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import Action from '$lib/common/framework/ui/Action.svelte';
+</script>
+
+<div class="border-b border-gray-300">
+	<div
+		class="h-toolbar-height mx-auto flex max-w-screen-xl flex-row items-center justify-between px-4 md:px-6"
+	>
+		<a class="flex flex-row items-center gap-x-2" href="/">
+			<img class="mt-1 size-10" src="/icon/logo-light.svg" alt="SquidSpirit" />
+			<span class="text-2xl font-black text-gray-800">魚之魷魂</span>
+		</a>
+		<div class="flex flex-row items-center gap-x-6">
+			<Action label="首頁" link="/" isSelected={page.url.pathname === '/'} />
+		</div>
+	</div>
+</div>

frontend-v2/src/routes/+layout.svelte

@@ -1,8 +1,12 @@
 <script>
-  import Navbar from "$lib/Navbar.svelte";
+	import Footer from '$lib/common/framework/ui/Footer.svelte';
-  import "../app.css";
+	import Navbar from '$lib/common/framework/ui/Navbar.svelte';
+	import '../app.css';
+	import '@fortawesome/fontawesome-free/css/all.min.css';
 </script>
 
-<Navbar />
+<div class="min-h-screen">
-
+	<Navbar />
-<slot />
+	<slot />
+</div>
+<Footer />