Refactoring 眾多 listing pages，使重複的程式碼減少

[kwhsiung]

Reference: #63

目前的 listing pages 條列如下，當中有許多程式碼屬重複部分，可考慮重構：

• 已實作：
  • /pages/author/_id.vue
  • /pages/category/_name.vue
  • /pages/search/_keyword.vue
  • /pages/section/_name.vue
  • /pages/section/topic.vue
  • /pages/tag/_id.vue
  • /pages/topic/_id.vue

在 nuxt 中令多個 routes 可共用同一個 page component 而減少 page components 數量的方法參考：nuxt/nuxt#2693 (comment)

[kwhsiung]

這部分的重構我有計畫要引入 composition api 來輔助，由於 composition api 使用上需要手動 import 相關 function 並透過 setup 來使用，故引入之後不會直接影響既有的 components，可漸進式的使用，所以引入之後應該不會直接破壞目前的系統。

[kwhsiung]

Default listing pages 現有功能紀錄

• （基本功能）項目列表
  • 列表可自訂大標與顏色
  • 列表項目主圖可自訂輔助文字與顏色
• （基本功能）無限捲軸 loadmore
• 廣告
  • GPT: top, bottom, sticky 以及蓋版廣告
  • MicroAd: listing 項目的第 3, 5, 8 個項目為廣告
• 飲酒警示
• 搜尋關鍵字大標

Default listing pages 各頁功能列表

https://docs.google.com/spreadsheets/d/1mIcRw-2ehZ0UQv7KjMcQ9vOkCoBqOP6wiLDfmMSmSDA

[kwhsiung]

重構方法

依我個人認為重構後的結果依收斂（需要越少檔案越收斂）程度由小到大排序

• 已知方法
  1. 將同質性的功能（利用 composition api）封裝。
  2. 維持檔案結構定義 routes，但 page component 其實直接吃另一個 page component 的定義。
     
     • 優：維持 nuxt 預設定義 page routes 的方式，減少往後溝通成本。
     • 缺：檔案結構依然有很多 default listing pages，且很多 page components 內容打開來發現內容其實都是吃同一個 component。
  3. 捨棄檔案結構定義 routes，在 nuxt.config.js 中用 extendRoutes 來讓重複性高的 pages components 都導向某一個樣板。
     
     • 優：檔案結構不再看到一堆 default listing pages。
     • 缺：不再使用 nuxt 預設的定義 page routes 方式，且可能同時有兩種定義 page routes 的方式並存，溝通成本增加。
  4. vue-router

目前 default listing pages 測試覆蓋率

---------------------------------------------|---------|----------|---------|---------|-----------------------------------------------------------------------------
File                                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                                                           
---------------------------------------------|---------|----------|---------|---------|-----------------------------------------------------------------------------                                                           
 pages/author                                |   63.64 |    67.74 |   79.17 |   63.64 |                                                                             
  _id.vue                                    |   63.64 |    67.74 |   79.17 |   63.64 | 69-75,89,94,155-158,164-176,187-200                                         
 pages/category                              |   74.19 |    71.88 |    87.5 |   74.19 |                                                                             
  _name.vue                                  |   74.19 |    71.88 |    87.5 |   74.19 | 77-80,135,167,195-201,212-225                                                                                                                 
 pages/search                                |   69.05 |    81.08 |   88.89 |   69.05 |                                                                             
  _keyword.vue                               |   69.05 |    81.08 |   88.89 |   69.05 | 27-30,59,123-136                                                            
 pages/section                               |   71.72 |    59.21 |   77.14 |   71.72 |                                                                             
  _name.vue                                  |   72.73 |    71.43 |   88.46 |   72.73 | 60-63,102,153-159,170-183                                                   
  topic.vue                                  |   67.39 |    61.54 |   85.71 |   67.39 | 67-70,84,146-150,161-174                                                    
 pages/tag                                   |   66.04 |    65.52 |   82.61 |   66.04 |                                                                             
  _id.vue                                    |   66.04 |    65.52 |   82.61 |   66.04 | 69-75,89,94,155-161,175-188                                                 
 pages/topic                                 |   60.53 |    70.83 |      80 |   60.53 |                                                                             
  _id.vue                                    |   60.53 |    70.83 |      80 |   60.53 | 37-40,60,99-105,116-129                                                    
---------------------------------------------|---------|----------|---------|---------|-----------------------------------------------------------------------------

[yeefun]

Mixin: fetch-list-and-loadmore.js
Component: ContainerList.vue