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 +55 -15
5 changed files with 55 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0fd2da1ce6 - Show all commits

24
frontend-v2/src/app.css
View File

@ -1,14 +1,28 @@
@import 'tailwindcss';
@font-face {
font-family: 'HackNerdMono';
src: url('/font/HackNerdMono.woff2') format('woff2');
}
:root {
--font-noto-sans-tc: 'Noto Sans TC', sans-serif;
--font-noto-sans-mono: 'Noto Sans Mono', monospace;
--font-hack-nerd-mono: 'HackNerdMono', monospace;
@theme {
--font-sans: 'Noto Sans TC', sans-serif;
--font-mono: 'HackNerdMono', 'Noto Sans Mono', monospace;
--spacing-toolbar-height: 4rem;
--spacing-content-height: calc(100vh - var(--spacing-toolbar-height));
}
body {
font-family: var(--font-noto-sans-tc);
@apply bg-white font-sans text-base font-normal text-gray-600;
}
pre,
code,
kbd,
samp {
@apply font-mono;
}
.toolbar {
@apply h-[--tool-bar-height];
}

4
frontend-v2/src/app.html
View File

@ -9,10 +9,10 @@
<meta name="description" content="程式、科技、教學、分享" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet">
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover" class="antialiased">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

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

@ -0,0 +1,9 @@
<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 Normal file
View File

@ -0,0 +1,16 @@
<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>

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

@ -1,7 +1,8 @@
<script lang="ts">
import '../app.css';
let { children } = $props();
<script>
import Navbar from "$lib/Navbar.svelte";
import "../app.css";
</script>
{@render children()}
<Navbar />
<slot />