關於這個網站

Features

其實這是我第五次寫個人網站了，以前做的功能都太複雜了，還越寫越多，最後根本用不到。
這一次，我重點都放在 UX 和 DX 上，並且只做我會用到的功能，具體如下：

此顏色代表：自己寫的 Rehype Plugin，未來或許會在 NPM 發佈。

• MDX By Next MDX Remote
  • 語法突顯 (Syntax Highlighting) By Rehype Pretty Code
    • 使用 MDX 特性並而外支援 複製按鈕 & 程式碼圖標
  • Images Optimization*
    • 使用 Sharp 套件實現 Webp 格式轉換以及分析圖片寬高
    • 使用 Thumbhash 生成 Next/Image 用的 BlurDataUrl ( 低解析度圖片 )
    • 支援 Local & Remote Images
    • 將轉換後的圖片儲存到 public\images\generated 並將 src 重新指向該路徑
  • Twemoji*
    • 支援 SVG / PNG
    • 支援 A11y
    • 可和上面的 Image Optimization 一起使用
  • Tweet Embed*
    • 在構建過程中提前獲取 Tweet 資料，實現 SSR Embed
• Animation
  • 使用 Framer Motion 以及 CSS Animation
  • 為了實現 Page Transition，Next.js 使用了 Page Router 而非 App Router ( 相關 Issue )
• Font
  • 使用 Fontsource 而非 Next/Font，原因我打算寫在另一篇文章

Conclusion

希望我不要再寫新的個人網站了。