Sponsorship Page

[bessyhuang]

No description provided.

[mirumodapon]

有些建議可能不只一個檔案，所以就這邊提一下：

1. 或許減少或盡量避免 inline style
2. renderMarkdown 基本給 marked 一樣，可以直接使用 marked
3. 可能要注意一下暗黑模式下的畫面

[mirumodapon]

暗黑模式下，顏色看起來不太 ok

[mirumodapon]

暗黑模式下，顏色看起來不太 ok

[mirumodapon]

這些 array 的部分，都可以盡量用 markdown 表示

[mirumodapon]

我在想是不是這個 method 另外寫啊(?
在思考與討論看看

[bessyhuang]

我在想 components/SponsorshipAddonsTable.vue 和 components/SponsorshipTable.vue 的 function handlePrint() 是不是要提出來共用？

[mirumodapon]

我覺得可以寫一個頁面，重複用 components，然後用

---
layout: false
---

來去掉 vitepress 的版。

這裡呼叫其他人來討論看看 @rileychh @Spyup

[rileychh]

這裡呼叫其他人來討論看看 @rileychh

晚上來看看😁

[bessyhuang]

目前做了以下調整：

1. 盡量避免 inline style
2. 直接使用 marked，取代額外宣告 renderMarkdown
3. 調整暗黑模式下的畫面 👉👉👉 可能需要幫忙看一下配色是否順眼
4. data 拉到 data/sponsorship.ts 裡面，方便後續修改

然後，我的 Code Quality Checks 一直過不了 😭
尤其是 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type ...
想問問該如何怎麼改呢？謝謝！

[mirumodapon]

目前做了以下調整：

1. 盡量避免 inline style
2. 直接使用 marked，取代額外宣告 renderMarkdown
3. 調整暗黑模式下的畫面 👉👉👉 可能需要幫忙看一下配色是否順眼
4. data 拉到 data/sponsorship.ts 裡面，方便後續修改

然後，我的 Code Quality Checks 一直過不了 😭 尤其是 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type ... 想問問該如何怎麼改呢？謝謝！

因為原本的 script 沒有標記 ts，所以 code quality checks 沒有檢查，
而在 f6631f2 之後加入了 lang="ts" 所以開始檢查

[mirumodapon]

抱歉我沒有說清楚，造成 type check 錯誤的問題是因為 lang='ts'，但是是需要加上的，所以我把他改回來，然後修了這個問題。

[mirumodapon]

然後順手把上次討論的結構 rebase 進來

[rileychh]

我 rebase 到 main 上了，也做了一些改動：

• 7318e25：把列印按鈕改成之前使用過的 <VPButton>。
• 43e4f68：把〖常見問答〗部分改寫成 Markdown。

[rileychh]

這邊有個想法，或許可以參考一些網站的定價頁面來重新設計贊助階級頁面，讓資訊更清楚，避免重複描述。

舉例來說，ChatGPT 的定價頁面 的設計就可以作為參考：

• 階級排列：按照從最低到最高階級依序排列，讓使用者容易了解各階級的差異。
• 資訊重複減少：例如在「Plus」階級中只列出額外內容，並說明已包含「Free」階級的所有權益；同理，在「Pro」階級中只展示新增的部分，並標示包含「Plus」階級的全部內容。

雖然目前的設計將最高階級放在最前面，可能會讓贊助者更傾向於選擇高階級方案，但從整體資訊的易讀性來看，依照階級順序排列會更直觀。

[rileychh]

順帶一提，我發現可以把 Markdown 當作 Vue SFC 一樣匯入到其他 Markdown。

content/sponsorship/TitaniumBenefits.md:

**官網 及 OPass app:**

- 公司簡介
- 議程頁面廣告（按等級比重播出）
<!-- ... -->

content/sponsorship/index.md:

<script setup lang="ts">
import TitaniumBenefits from './TitaniumBenefits.md'
</script>

# 贊助

## 贊助方案

| 贊助等級 | 贊助金額    | 贊助福利             |
| -------- | ----------- | -------------------- |
| 鈦金級   | NT$ 238,000 | <TitaniumBenefits /> |

這樣就不需要使用 marked 就能在表格內呈現 Markdown 了。