Fix/homepage

.github/workflows/pull_request_template.md

@@ -0,0 +1,12 @@
+## 描述你的更改 / Describe your changes
+
+## Issue 的單子 / Issue ticket (Optional)
+
+- closed #
+
+## 在開 PR 之前 / Checklist before opening this PR
+
+- [ ] 我已在本地測試了這些更改 / I have tested these changes locally
+- [ ] 我已更新了文件 (如果需要) / I have updated the documentation (if needed)
+- [ ] 我已添加必要的測試 (如果需要) / I have added necessary tests (if needed)
+- [ ] 我已自己檢查過程式碼 / I have performed a self-review of my code

README.md

@@ -1,5 +1,6 @@
-# ba-pyroxene-calculator 
-🚧 WIP 🚧  
+# ba-pyroxene-calculator
+
+🚧 WIP 🚧
 
 ## 簡介
 

src/lib/components/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Home } from 'lucide-svelte';
+	import { Github, Home } from 'lucide-svelte';
 
 	import { browser } from '$app/environment';
 	import { version } from '$app/environment';
@@ -21,14 +21,13 @@
 		</a>
 	</div>
 
-	<div
-		class="w-40 flex justify-center items-center"
-		class:text-primary={currentPath === '/pyroxene-calculator'}
-	>
-		<a href="/pyroxene-calculator"> 青輝石計算機 </a>
-	</div>
-	<div class="ml-auto">
-		{version}
+	<div class="ml-auto mr-4 flex items-center gap-x-4">
+		<div>
+			{version}
+		</div>
+		<a href="https://github.com/toddLiao469469/ba-pyroxene-calculator" target="_blank">
+			<Github />
+		</a>
+		<ColorModeToggle />
 	</div>
-	<ColorModeToggle class="ml-4 mr-4" />
 </header>

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { Github } from 'lucide-svelte';
 
 	import Typography from '$lib/components/Typography.svelte';
+	import { Button } from '$lib/components/ui/button';
 	import ReleaseNoteTable from '$lib/views/ReleaseNoteTable.svelte';
 </script>
 
@@ -21,16 +22,16 @@
 			target="_blank"
 			>【工具】全華語圈最好用的青輝石計算器！小春、吹雪和優香都適合！《9/18 5.0大改版》</a
 		>
-		所做的網頁版青輝石計算機
-	</Typography>
-
-	<Typography>
+		所做的網頁版青輝石計算機 <br />
 		<a
 			href="https://docs.google.com/spreadsheets/d/1HxwR8CqAw7UMm8M2c74EEXU7RqhnIIIeEZi8XK8aMRU/edit#gid=2117524808"
 			target="_blank"
-			class="text-cyan-500">原 excel 版本青輝石計算器</a
+			class="text-cyan-500">原 excel 版本的計算器</a
 		>
 	</Typography>
+
+	<Button class="w-48 mt-6 mx-auto" href="/pyroxene-calculator">開始使用</Button>
+
 	<Typography variant="h2" class="my-4">專案資訊</Typography>
 
 	<p>
@@ -39,46 +40,18 @@
 	</p>
 	<Typography variant="h3" class="mt-4">專案說明</Typography>
 	<p>
-		這是一個使用參考巴哈貼文，所做的網頁版青輝石計算機，目前還在開發中，暫時以原版的<span
+		這是一個使用參考巴哈貼文，所做的網頁版青輝石計算機，目前還在緩慢開發中暫時先以原版的<span
 			class="text-pink-300">小春及吹雪版</span
 		>進行開發，歡迎各位提供意見與建議。
 	</p>
-	<Typography variant="h4" class="mt-4">問題回報與功能討論</Typography>
+	<Typography variant="h4" class="mt-4">問題回報與功能許願</Typography>
 	<p>
-		如果是有關 Bug 回報或者功能可以的話請至 <a
+		如果是有關 Bug 回報或者功能許願可以的話請至 <a
 			href="https://github.com/toddLiao469469/ba-pyroxene-calculator/issues"
 		>
 			<Github class="inline" />
 			<span class="text-cyan-500"> Github </span>
-		</a> 開 Issue，這樣我才能夠更好的追蹤問題。
-	</p>
-
-	<Typography variant="h4" class="mt-4">TODO</Typography>
-
-	<ul class="ml-6 list-disc [&>li]:mt-2">
-		<li>更新活動資料至日服進度</li>
-		<li>個別活動青輝石調整</li>
-		<li>優香版計算器</li>
-		<li>優化 UI</li>
-		<li>優化更新活動資料的方法及資料結構</li>
-	</ul>
-
-	<Typography variant="h4" class="mt-4">Tech stack 及如何協作</Typography>
-	<p>
-		目前並沒有 coding style 的規範，只有基本的 linter rule <br />
-		所以只要能夠跑起來的話沒問題的話就可以開 PR。
-	</p>
-
-	<p>目前比較主要用到的工具是：</p>
-	<ul class="ml-6 list-disc [&>li]:mt-2">
-		<li>Svelte + Svelte-kit</li>
-		<li>tailwind css</li>
-		<li>shadcn/svelte</li>
-		<li>Lucide</li>
-	</ul>
-	<p>
-		但除了 tailwind css
-		以外，基本上我都沒有在工作上使用過所以可能會有一些奇怪的地方，歡迎各位提供意見與建議。
+		</a> 新增 Issue，這樣我才能夠更好的追蹤問題。
 	</p>
 
 	<Typography variant="h3" class="mt-4">更新紀錄</Typography>