# Ctitv Website 前台專案說明文件
Repository https://gitlab.com/ctitv/ctitv-website

## Prerequisites

- Node.js v14
- Yarn 2+

本專案設有 Remote Container 環境，相關設置請參考
https://www.tpisoftware.com/tpu/articleDetails/2575

## Implementation

- [Nuxt3 based on Vite & Vue3](https://v3.nuxtjs.org/)
- [Pinia](https://pinia.vuejs.org/ssr/nuxt.html)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [Varlet](https://varlet-varletjs.vercel.app/#/zh-CN/home)
- [VueUse](https://vueuse.org/guide/)
- [Google Icons](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Rounded) (Rounded Style)
- Husky、Lint-Staged
- Linter and Auto fix (Stylelint、Eslint)

## Recommended IDE Setup

VS Code with the following extensions:

- vue.volar
- dbaeumer.vscode-eslint
- stylelint.vscode-stylelint
- bradlc.vscode-tailwindcss

## 資料夾架構

### `/common`

專案內共用的utils或data

- `/common/ui-preset.json`

TailwindCSS 客製的設定放這裡，會選擇另外放的原因是為了 `script` 裡也能取得 UI 的設定例如顏色或斷點等。而不直接利用 nuxt tailwind 直接暴露 config 出來是為了減少 bundle 體積，事實上我們也不需要所有 config 設定內容

### `/components`

`base` 裡主要放 atom 性質可以讓其他元件使用的基礎元件，例如 `BaseButton` `BaseAvatar`，其餘則依據使用性質來定義。

`example` 放元件的使用範例

用法請參考 → [https://v3.nuxtjs.org/guide/directory-structure/components](https://v3.nuxtjs.org/guide/directory-structure/components)

### `/plugins/varlet.js`

專案有使用 Varlet 這個 UI 元件庫，按需使用，所以遇到要用到的元件需要手動引入到這支檔案裡

參考 → [https://varlet-varletjs.vercel.app/#/en-US/serverSideRendering](https://varlet-varletjs.vercel.app/#/en-US/serverSideRendering)

### `/assets/style`

- `animation.scss` 共用 @keyframes 與 v-transition 動畫
- `abstract.scss` sass mixin function 等工具
- `varlet.scss` varlet UI庫的樣式客製覆寫統一集中在這，方便管理
- `tailwind.scss` tailwindcss 相關樣式的主要入口
- `/components` 主要為元件的基本樣式設定，活用 tailwindcss 的 `@layout` 讓元件覆用更有彈性

## 樣式使用

- `.l-container` max container layout
- `.alt-text` 隱藏文字資訊（ex: 有些 button 樣式不想顯示文字的時候）
- `@screen {breakpoint}` tailwind 的 at-rule function，變版用這個方便管理
- 斷點請參考 /common/ui-preset.json
- 用法請參考 https://tailwindcss.com/docs/functions-and-directives#screen

## Misc工具

- `screen`
- screen 會儲存目前視口的資訊（reactive）包括斷點、視口大小、scroll top
- 請參考 `composables/useScreen.js`
- 已做成 provide/inject 之後只需要 `const screen = inject('screen')` 引入即可
- Google Icons Icon 使用 [Google Icons](https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Rounded) 的 **Rounded** 版本
- `<IconSprite id="icon-id">` 若 Google Icon 沒有的 svg 圖，將 svg 整理成 symbol 後，在 template call 這個元件並傳入 icon ID 就可以使用

## 開始開發
- [規格書](https://www.figma.com/files/project/52884835/%E5%89%8D%E5%8F%B0-PRD?fuid=990518661814386910)
- [設計稿](https://www.figma.com/file/zKk1TKcI9iVxpOp2u3oJ3Z/%E5%89%8D%E7%AB%AF%E7%B6%B2%E9%A0%81_PM%E4%BD%BF%E7%94%A8_%E9%A6%96%E9%A0%81?node-id=0%3A1)

目前 gitlab 上的 issue 是自己開的，裡面只有寫一些基本資訊，詳細規格請看figma規格，當然如果有閒將需求補在 issue 的話會很感謝 :pray:

### 開發流程
GitLab Issue 認領任務 → 基於 `develop` 開分支處理（分支名稱帶上issue單號） → 開發完成發 PR

發完PR之後我跟 @PeterLiao 有空就會幫忙 review，如果有優先需求的話，麻煩 Link issue

#### 如何認領
請看 [issue](https://gitlab.com/ctitv/ctitv-website/-/boards) 上註記的 milestone，依照時間優先順序認領任務，建議可以善用 filter 功能。

### 開發順序
1. 新聞首頁
2. 新聞子首頁
3. 新聞內頁
4. 搜尋結果頁＋看更多列表
5. 影音節目
6. 大直播
7. 錯誤頁