squid/blog
squid/blog
1
2
Fork 0
Code Issues 10 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

BLOG-58 Rewrite frontend with svelte kit #61

Merged
squid merged 15 commits from BLOG-58_rewrite_frontend_with_svelte into main 2025-07-23 05:34:25 +08:00
Conversation 0 Commits 15 Files Changed 57 +73 -33
8 changed files with 73 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 27c74312ad - Show all commits

7
frontend-v2/package.json
View File

@ -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"
}

9
frontend-v2/pnpm-lock.yaml generated
View File

@ -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':

9
frontend-v2/src/lib/Action.svelte
View File

@ -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>

16
frontend-v2/src/lib/Navbar.svelte
View File

@ -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>

9
frontend-v2/src/lib/common/framework/ui/Action.svelte Normal file
View File

@ -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>

24
frontend-v2/src/lib/common/framework/ui/Footer.svelte Normal file
View File

@ -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>

18
frontend-v2/src/lib/common/framework/ui/Navbar.svelte Normal file
View File

@ -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>

14
frontend-v2/src/routes/+layout.svelte
View File

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