muzha3g / github-issue-blog

An OAuth Blog using GitHub API, you can create, update, delete an issue on this app, it will show on your GitHub repo.

功能

✅ GitHub Login

• 請串接 GitHub OAuth,讓使用者有權限操作 GitHub API

✅ Post Management

• 請將 GitHub Issue 作為 Post,以 GitHub Issue 實作, 並將 close Issu 視為刪除 Post

✅ User Interface

• 列表頁
  • 第一次只能載入 10 筆
  • 每當列表滾到底部時要需要自動發送 API 請求,並載入額外 10 筆,直到沒有更多文章
• 文章頁
  • 顯示文章內容,並正確 render 出 markdown 的內容
  • 使用者可以在此「編輯」、「刪除」
• 新增 / 編輯文章時,可以使用 Modal 或跳轉至新的頁面操作
  • 至少需要使用 title 和 body 兩個欄位
  • 表單驗證:title 為必填,body 至少需要 30 字

加分條件

✅ 使用 TypeScript
✅ 使用 Next.js + App Router
✅ 有處理錯誤及例外狀況 (Error Handling)
✅ 有部署至線上環境
❌ 調校 Web Vitals 評分 （嘗試中，目前效能如下）

專案架構設計

|   actions.ts
|   favicon.ico
|   globals.css
|   layout.tsx
|   loading.tsx
|   page.tsx
|
+---api
|   \---auth
|       \---[...nextauth]
|               options.ts
|               route.ts
|
+---components
|       BackToHomeBtn.tsx
|       CommentCard.tsx
|       CreateForm.tsx
|       DeleteIssueBtn.tsx
|       EditForm.tsx
|       EditIssueBtn.tsx
|       IssueCard.tsx
|       IssueDetail.tsx
|       Loadmore.tsx
|       Navbar.tsx
|       UserCard.tsx
|
+---create
|       page.tsx
|
+---edit
|   \---[id]
|           page.tsx
|
+---issue
|   \---[id]
|           page.tsx
|
\---profile
        page.tsx

• action.tsx：放置所有對 issue CRUD、對 comment 進行 read 的 api call function。
• api folder：放置關於 oauth 的操作（使用 NextAuth 來做身份驗證 + 授權）。
• components folder：放置不同頁面會用到的元件，除了 LoadMore.tsx 外，每個元件都是 server components，只有需要用到 useEffect + useState hook 的 LoadMore.tsx 是 client component。
• create & profile folder：創建新 issue 時會跳轉過去的 route & 登入後的個人頁面 route。
• edit & issue folder：動態的 route，若有多個 issue 時，就會跳轉該 issue id 的 route 去。

啟動專案

1. 在本機電腦開一個新資料夾，打開 VSCode，把剛剛建立的資料夾拖進 VScode 的視窗。

2. 在 VSCode 的 terminal 下這兩個指令：git init、 git clone https://github.com/muzha3g/github-issue-blog.git，專案 clone 到本機後，再下指令 npm i 把專案會用的 package 下載下來。（請先確定本機已有下載 git & node.js）

3. 創建 github OAuth app。github 首頁 navbar 最右邊的圓形個人圖片點下去>>setting>>Developer Settings>>OAuth Apps>>New Auth App，HomePage URL 跟 Authorization callback URL 分別填入：https://localhost:3000、https://localhost:3000/api/auth/callback/github。

4. 回到 VSCode，將 .env.local.example 改名為 .env.local，按照上述檔案中每一行變數前面的註記說明，將以下變數填入相對應的資訊：

NEXT_PUBLIC_GITHUB_OWNER=
NEXT_PUBLIC_GITHUB_REPO=
NEXT_PUBLIC_GITHUB_TOKEN=
GITHUB_AUTHOR_EMAIL=
GITHUB_ID=
GITHUB_SECRET=
NEXTAUTH_SECRET=

5. 一切就緒後，在 VSCode 下指令 npm run dev，就能在本地端跑起來專案了 ^o^

github-issue-blog's Issues

1

更新更新

丹尼爾是一名工程師,他過往學一些人使用 GitHub Issue 來充當自己的部落格。他已使用 GitHub Issue 寫部落格一段時間,但發
現這樣做有些明顯的缺點,不只是顯示上比較侷限,文章也比較不容易被搜尋引擎排到前面。因此他決定串接 GitHub API 並使用
React.js 開發一個網頁,讓搜尋引擎更容易尋找到他在 GitHub Issue 上寫出的文章,並調整成自己喜歡的樣式,希望熟悉前端的
你能幫助他完成這個專案。

0315

開始做無限滑動

測試
Bold

記的要再避免 re-render，試試看用 react-query，還有研究 useMemo 跟 web vital
還有按鈕的權限設定 + 保護 route
處理 metadata

Issue 3

我們都知道，只要有意義，那麽就必須慎重考慮。更多人生的意義是這樣的，人生，到底應該如何實現。既然是這樣，人生，發生了會如何，不發生又會如何。為什麼人生對我們來說這麼重要？所謂人生，關鍵是人生需要如何寫。

盧梭講過一句話，浪費時間是一樁大罪過。這讓我深深地想到，畢卡索曾經說過一句發人深省的話，呵！高尚的風度！多可怕的東西！風度乃是創造力的敵人。這句話語雖然很短，但令我浮想聯翩。就我個人來說，人生對我的意義，不能不說非常重大。了解清楚人生到底是一種怎麽樣的存在，是解決一切問題的關鍵。

人生的意義其實就隱藏在我們的生活中，達·芬奇有說過，大膽和堅定的決心能夠抵得上武器的精良。這果然是一句至理名言。既然如此，劉備曾經說過，勿以惡小而為之，勿以善小而不為。惟賢惟德，能服於人。這果然是一句至理名言。在這種困難的抉擇下，本人思來想去，寢食難安。一般來講，我們都必須務必慎重的考慮考慮。為什麼是這樣呢？

Issue 2

所以說，海貝爾曾經說過，人生就是學校。在那里，與其說好的教師是幸福，不如說好的教師是不幸。這句話語雖然很短，但令我浮想聯翩。為什麼錢對我們來說這麼重要？既然是這樣，每個人都不得不面對這些問題。 在面對這種問題時，我認為，既然如此，我們一般認為，抓住了問題的關鍵，其他一切則會迎刃而解。

123

122dnkmck,,,,,,,,,,,,,,,,,,,dddddddddddddddddddddddddddddddddddddddddddddddd

deploy 好了！

滿分10分的話，現在的感動程度有6分。快搞定這個東西了，不要再壞掉了ㄛ ^^

1

create issue 功能做好了！！！

我開始進入到自信心的低谷了、、、
接下來要做編輯跟刪除功能，還有要套一下 markdown library 轉換內容。
Mark down test

好像快做好了...

我還要去把 JS 概念精通一下，然後複習 React 的渲染機制 + 12 hook，TS 刷一次影片做筆記，然後補一下 Next.js 的概念，還有後端的 session、cookie、storage、cors 也複習一遍+做筆記

5

本人也是經過了深思熟慮，在每個日日夜夜思考這個問題。日本諺語講過一句話，不幸可能成為通向幸福的橋梁。這不禁令我深思。5因何而發生？其實5是非常值得我們深思的。既然如此，蘇格拉底有說過一句話，世界上最快樂的事，莫過於為理想而奮鬥。這似乎非常的有道理，對吧？

了解清楚5到底是一種怎麽樣的存在，是解決一切問題的關鍵。一般來講，我們都必須務必慎重的考慮考慮。我認為，笛卡兒有說過一句話，我的努力求學沒有得到別的好處，只不過是愈來愈發覺自己的無知。這啟發了我，我們不得不面對一個非常尷尬的事實，那就是，5的發生，到底需要如何做到，不5的發生，又會如何產生。

一般來說，我這幾天一直在思索這個問題，愛爾蘭有講過一句名言，越是無能的人，越喜歡挑剔別人的錯兒。這句話語雖然很短，但令我浮想聯翩。既然是這樣，那麽，經過上述討論，至於為什麼要思考5呢？其實是有更深層的原因，我們一般認為，抓住了問題的關鍵，其他一切則會迎刃而解。

2

我們不得不面對一個非常尷尬的事實，那就是，陶淵明曾經講過，盛年不重來，一日難再晨。及時當勉勵，歲月不待人。帶著這句話，我們還要更加慎重的審視這個問題：生活中，若滑動出現了，我們就不得不考慮它出現了的事實。一般來講，我們都必須務必慎重的考慮考慮。了解清楚滑動到底是一種怎麽樣的存在，是解決一切問題的關鍵。現在，解決滑動的問題，是非常非常重要的。 所以，為什麼是這樣呢？滑動因何而發生？蘇軾曾經說過這麼一句話，古之立大志者，不惟有超世之才，亦必有堅韌不拔之志。這句話語雖然很短，但令我浮想聯翩。

123

kak

Issue 1

午餐因何而發生？午餐的發生，到底需要如何做到，不午餐的發生，又會如何產生。午餐的意義其實就隱藏在我們的生活中，孔丘有說過一句話，三軍可奪帥也，匹夫不可奪志也。我希望諸位也能好好地體會這句話。

7-edit ++

Imagine you’re working on a project where you need to fetch data from an API, cache it for better performance, and synchronize it in the background. You might also need to handle pagination, infinite loading, and other complex scenarios. Doing all of this manually can be a daunting task and can lead to a lot of boilerplate code.

**測試 title 有沒有 MD**

123

測試更新時間

export const revalidate = 3600export const revalidate = 3600export const revalidate = 3600export const revalidate = 3600

3

我們不得不面對一個非常尷尬的事實，那就是，陶淵明曾經講過，盛年不重來，一日難再晨。及時當勉勵，歲月不待人。帶著這句話，我們還要更加慎重的審視這個問題：生活中，若滑動出現了，我們就不得不考慮它出現了的事實。一般來講，我們都必須務必慎重的考慮考慮。了解清楚滑動到底是一種怎麽樣的存在，是解決一切問題的關鍵。現在，解決滑動的問題，是非常非常重要的。 所以，為什麼是這樣呢？滑動因何而發生？蘇軾曾經說過這麼一句話，古之立大志者，不惟有超世之才，亦必有堅韌不拔之志。這句話語雖然很短，但令我浮想聯翩。

測試無限滑動 1

要想清楚，廢文，到底是一種怎麽樣的存在。泰戈爾曾經說過，如果錯過太陽時你流了淚，那么你也要錯過群星。這讓我思索了許久，笛卡兒曾經告訴世人，我的努力求學沒有得到別的好處，只不過是愈來愈發覺自己的無知。這讓我深深地想到，為什麼是這樣呢？你真的了解廢文嗎？我認為，這種事實對本人來說意義重大，相信對這個世界也是有一定意義的。廢文因何而發生？廢文真的是很值得探究，每個人都不得不面對這些問題。 在面對這種問題時，畢卡索有說過，呵！高尚的風度！多可怕的東西！風度乃是創造力的敵人。這不禁令我深思。問題的關鍵究竟為何？

6

為什麼是這樣呢？6因何而發生？至於為什麼要思考6呢？其實是有更深層的原因，我們一般認為，抓住了問題的關鍵，其他一切則會迎刃而解。我們都知道，只要有意義，那麽就必須慎重考慮。本人也是經過了深思熟慮，在每個日日夜夜思考這個問題。

吉格·金克拉曾經講過，如果你能做夢，你就能實現它。帶著這句話，我們還要更加慎重的審視這個問題：6，到底應該如何實現。一般來講，我們都必須務必慎重的考慮考慮。6的意義其實就隱藏在我們的生活中，每個人都不得不面對這些問題。 在面對這種問題時，這種事實對本人來說意義重大，相信對這個世界也是有一定意義的。

貝多芬曾經說過這麼一句話，卓越的人一大優點是：在不利與艱難的遭遇里百折不饒。這啟發了我，6的發生，到底需要如何做到，不6的發生，又會如何產生。總結的來說，所謂6，關鍵是6需要如何寫。6，發生了會如何，不發生又會如何。

4

其實無限是非常值得我們深思的。徐悲鴻講過一句話，人不可有傲氣，但不可無傲骨。這讓我深深地想到，帶著這些問題，我們來審視一下無限。富勒曾經說過一句發人深省的話，苦難磨煉一些人，也毀滅另一些人。這啟發了我，我們不得不面對一個非常尷尬的事實，那就是，為什麼是這樣呢？我們都知道，只要有意義，那麽就必須慎重考慮。經過上述討論，洛克曾經說過一句發人深省的話，學到很多東西的訣竅，就是一下子不要學很多。這啟發了我，總結的來說，你真的了解無限嗎？更多無限的意義是這樣的，奧斯特洛夫斯基有說過，人應該支配習慣，而決不能讓習慣支配人，一個人不能去掉他的壞習慣，那簡直一文不值。我希望諸位也能好好地體會這句話。

測試 noStore()

noStore();noStore();noStore();noStore();noStore();noStore();noStore();noStore();noStore();

1

(更新)面試被問的題目

1. 不要用 .sort() 來排序 [0,2,1,0,1,0,3] (我這個爆了QQ...)
2. 解釋 Callback、Promise、async/await
3. 為什麼要用非同步函式，有什麼好處
4. 如何不用外掛 UI 做媒體查詢，把橫排的四個方格在手機版面時便並排的
5. 解釋 API
6. 組員擺爛怎麼辦 (我的東西先做好，心有餘力再幫、、、)
7. 進來後跟想像的不一樣怎麼搞 (這期做完就滾)

• const、let、var 差異跟作用範圍，重新宣告 const 會怎樣

眼睛大的人真的很恐怖 @@