feat(session): make CpSessionPage ClientOnly#188
Conversation
| <template> | ||
| <div class="flex flex-col-reverse sm:flex-col"> | ||
| <CpSessionDaySelectorPlaceholder class="w-screen" /> | ||
| <CpSessionPlaceholder class="w-[var(--viewport-width,100vw)]" /> |
There was a problem hiding this comment.
元件內部已經有 w-full 了,不需要再指定寬度
| <CpSessionPlaceholder class="w-[var(--viewport-width,100vw)]" /> | |
| <CpSessionPlaceholder /> |
There was a problem hiding this comment.
這是因為 w-full 不會扣掉 scroll bar 的寬度,所以之前寫了 --viewport-width 確保 scroll bar 不會蓋到東西
| class="w-screen bottom-0 left-0 sticky z-10 sm:bottom-auto" | ||
| :days="days" | ||
| /> | ||
| <ClientOnly placeholder-tag="div"> |
There was a problem hiding this comment.
| <ClientOnly placeholder-tag="div"> | |
| <ClientOnly> |
There was a problem hiding this comment.
把 CpSessionDaySelectorPlacehoder 跟 CpSessionPlaceeHolder 拆出去,是有什麼原因嗎
There was a problem hiding this comment.
其他 PR 會有更多元件,想說要不要模組化
但看起來好像沒有這麼必要
| <template> | ||
| <div class="flex flex-col-reverse sm:flex-col"> | ||
| <CpSessionDaySelectorPlaceholder class="w-screen" /> | ||
| <CpSessionPlaceholder class="w-[var(--viewport-width,100vw)]" /> |
There was a problem hiding this comment.
這是因為 w-full 不會扣掉 scroll bar 的寬度,所以之前寫了 --viewport-width 確保 scroll bar 不會蓋到東西
mirudapon
left a comment
There was a problem hiding this comment.
我想想覺得不太對,session.vue 只會預選染一次應該不會有什麼大問題,最主要是 page/session/[id].vue 每個議程都會重新選染過 session table,而在這些頁面的主要重點都是單一議程本身,背景的 session table 或是 sessionn list 反而沒有那麼重要,在這裡做 client only 應該才是對的
不過 session/[id].vue 的頁面佈局是源自於 session.vue 的 NuxtPage,除了拆成兩個元件外,好像除了重構外,不能很簡單的做到「某個頁面 ClientOnly、某個頁面完整渲染」。 |
我在思考如果在 session.vue 裡面做了 client only 在 session/[id].vue 當中源自 NuxtPage 會不會也有 client only 的行為 |
我覺得是我誤會了,這樣應該沒什麼問題 |
|
@mirudapon @rileychh 修好了~
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c81a6a23d6
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
現在 sessions 頁面要渲染的東西太多,導致 SSG 時
nuxt build偶爾會 OOM: https://github.com/COSCUP/2026/actions/runs/26892693499?pr=176考慮到 COSCUP 2025 也是把 Session Table 設定成 ClientOnly 的,且現在的 Layout 完全不利於 SEO,故把這個 pattern 移植到 COSCUP 2026 上。
CleanShot.2026-06-05.at.15.21.37.mp4
這樣還有二個額外的好處: