disfactory

meet.google.com

Meet

Real-time meetings by Google. Using your browser, share your video, desktop, and presentations with teammates and customers.

g0v.hackmd.io

違章工廠回報系統第141次小聚 - HackMD

figma.com

LANDING PAGE 2.0

Created with FigJam

figma.com

About Disfactory 2.0

Created with Figma

Oriyar 2022-09-07 14:11:24

我正要寫我有帶花蓮硬的甜餅乾（？）猜一名產～ 晚上見囉！

as840922qq 2022-09-07 18:20:29

不好意思我今天晚上20:30後有事情
會提前離開~~ :pray:

🦦 1 😆 2 1

スクリーンショット 2022-09-07 午後7.45.40.png

S__10952708.jpg

S__10952706.jpg

<https://github.com/twreporter/orangutan-monorepo/blob/master/packages/zoom-in/docs/zh-tw/manual.md | manual.md>

*「報導者／大圖點我」小工具介紹－－《報導者開放實驗室 The Reporter Lab》* 「報導者／大圖點我」是由「報導者開放實驗室」製作、釋出的一個敘事元件，元件產生器的服務一樣是對外開放的。而這個小工具的功能基本上就是：「點我看大圖」。好了，一句話就講完了，大家可以回去做自己的事了。 不過其實呢，這次釋出的「報導者／點我看大圖」內含的功能可能比你想的還要再多一點，因此在這篇文章裡我會提到它誕生的原因、它的特色以及產生器服務的使用步驟說明。 *誕生* 還記得在<https://medium.com/|Medium>網頁上瀏覽文章第一次注意到他們家的圖片放大功能時，完全被它舒適又順暢的賞圖體驗收服，只能暗自讚嘆這個強大的動態設計。他們的設計團隊也曾寫過<https://medium.design/image-zoom-on-medium-24d146fc0c20|文章>說明其設計理念，目標是創造一個全螢幕觀賞圖片的沈浸式體驗，又不影響文章的閱讀進度，此外，這樣的一個目標還可以直接藉由動態效果展現，也是對使用者的貼心告知。就動態而言，圖片會在原來的位置慢慢向螢幕中間移動、放大，原先圖片所在的背景畫面則逐漸淡出，直到圖片放大到視窗能容納的最大尺寸。在關閉放大圖片的動態設計也同樣回應了前面的目標，將圖片逐漸縮小、復位，文章又重新從背景浮現。另外，觸動關閉圖片的時機也考量了使用者習慣的操作，點任何地方、按鍵盤 Esc 鍵，甚至是滑動畫面都能觸發關閉，整體看來真的是相當替使用者著想的設計。 類似的圖片縮放動態效果也可以參考<https://www.dropbox.com/|Dropbox>、<https://www.nytimes.com/|The New York Times>。 同樣是希望《報導者》每一篇文章裡的照片、圖表有另一種被觀看的形式，同樣想讓這些努力有不只一種被看見的可能，我們也在思考在未來也要為文章裡的圖片加上「大圖點我」功能，<https://www.twreporter.org/author/5a0d4eb109e8eb7a03e3145c|設計師珍娜>希望「大圖點我」能以一種融合讀者當下閱讀狀態的無縫體驗出現，因此動態效果的呈現上決定參考<https://medium.com/|Medium>的圖片縮放動態，介面設計方面則是帶入《報導者》習慣讓圖片帶有圖說的編排進行創作。 這次的釋出也將產生小工具的服務一起公開，想邀請您一起參與這個新功能的製作，期待在吸取公眾試用過的回饋之後，會更符合讀者對《報導者》文章內「大圖點我」功能的需求及想像。 *功能* 下面是「報導者／大圖點我」現有的功能描述： • 點擊圖片後原地將圖片放大、移動到螢幕正中央 • 關閉大圖的方法：再次點擊大圖、按鍵盤 Esc 鍵、滾動滑鼠或向下滑動 • 大圖開啟時可以選擇附帶圖說 • 客製化選項有： • 圖片外空白（margin） • 圖片背景（background）、透明度（opacity） • 圖說位置、邊留白（margin）、字體樣式（font-size, line-height, letter-spacing, color, font-family） • 圖片縮放動畫時間(transition-duration)、動畫轉換函數(transition-function) • 向下滑動以關閉大圖的距離 *產生器使用說明* *步驟 1. 選擇要呈現的圖片，上傳至網路並取得圖片網址（需有公開存取權限）。* *步驟 2. 打開<https://lab.twreporter.org/projects/zoom-in/|「報導者／大圖點我」元件產生器>，新增圖片網址及圖說（選填），按下【SUBMIT】按鈕送出。* &lt;../assets/addImage.jpg|add image&gt; *步驟 3. 設定呈現樣式* 按下【SUBMIT】按鈕後，往下拉會看到樣式設定的欄位和可供點擊預覽的圖片。 「報導者／大圖點我」可以針對視窗寬度的不同，分別設定樣式，產生器支援四種載具的樣式設定，如頁籤所示，分別為： • HD: 視窗寬度大於 1439 pixels(px) • DESKTOP: 視窗寬度介於 1023(px) ~ 1439(px) • TABLET: 視窗寬度介於 768(px) ~ 1023(px) • MOBILE: 視窗寬度小於 768(px) 頁籤下方是有支援客製化的樣式設定欄位，例如說現在頁籤選取的是`DESKTOP`載具，這裡設定的就會是「報導者／大圖點我」顯示在`DESKTOP`載具上的樣式。 預設的樣式有兩種，在沒輸入圖說的情形下，圖片會被放大到視窗能容納的最大尺寸；在有輸入圖說時，預設會顯示《報導者》文章內使用「報導者／大圖點我」的樣式，而這兩種預設樣式都能在欄位裡再做修改。 設定欄位總共分為三個部分，以下就有圖說的預設樣式為例依序說明： &lt;../assets/desktop-example.png|桌機版預設&gt; 為了方便說明，將所有的空白都先拿掉。 &lt;../assets/desktop-example-no-margin.png|桌機版無空白範例&gt; 就上圖可以看到我們將圖片、圖說一起在視窗內置中，且將圖片放大到不會將圖說推到視窗外的最大尺寸。 這時的圖片構成了一個「邊界」，也就是它最大也只能放到這麼大的「邊界」，而下圖標註的紅線就是「邊界線」。 &lt;../assets/desktop-example-no-margin-note.png|桌機版邊界線&gt; 1. image: 圖片相關的設定 設定圖片與邊界的距離，單位都是 pixel 數值，縮寫為 px。 • margin-top(px): 圖片與上側邊界的距離 • margin-right(px): 圖片與右側邊界的距離 • margin-bottom(px): 圖片與下方圖說的距離 • margin-left(px): 圖片與左側邊界的距離 把圖片離邊界的距離都調整回預設值後就會像這樣： &lt;../assets/desktop-example-only-image-margin.png|加上圖片離邊界的距離&gt; 2. overlay: 圖片背景的相關設定 圖片放大後背景的設定，預設是白色背景。 • background: 背景顏色，需輸入色碼（例：白色為 #fff） • opacity: 背景的透明度，從 0 到 1，0 最透明、1 最不透明 • z-index: 放大後的圖片及其背景在與其他元素重疊時，z-index 愈大就愈不容易被覆蓋，一般來說不會調整到這個數值 3. caption: 圖說的相關設定 • side: 圖說要顯示在圖片的哪一側 • align: 圖說要對齊哪一邊，如果圖說會顯示在圖片的上方或下方，那它可以對齊左邊或右邊；如果要顯示在圖片的左邊或右邊，圖說則可以選擇對齊上緣或下緣 這是一個圖說在左側（side: left）、對齊上緣（align: top）的例子： &lt;../assets/desktop-example-caption-left.png|圖說在左側&gt; 同樣的，這時圖說也構成了一個邊界，下圖標註的框線便是「邊界線」 &lt;../assets/desktop-example-caption-note.png|圖說邊界&gt; 下面幾個欄位可以設定與邊界的距離，單位都是 pixel 數值，縮寫為 px。 • margin-top(px): 圖說與上側邊界的距離 • margin-right(px): 圖說與右側邊界的距離 • margin-bottom(px): 圖說與下側邊界的距離 • margin-left(px): 圖說與左側邊界的距離 現在加上圖說離邊界距離的預設值： &lt;../assets/desktop-example.png|桌機版預設&gt; • font-size(px): 圖說字體大小 • line-height(px): 圖說行高 • letter-spacing(px): 圖說字與字的間距 • color: 字體顏色 • font-family: 圖說字型 • width: 圖說寬度設定 *步驟 4. 點擊【BUILD CODE】按鈕，取得「報導者／大圖點我」所需的程式碼片段。* &lt;../assets/buildCode.jpg|buildCode&gt; *步驟 5. 複製該程式碼片段，然後貼至目標網頁的 HTML 中你想要顯示的位置。* ``` &lt;html&gt; &lt;head&gt; &lt;title&gt;網頁標題&lt;/title&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 在這裡 內貼上「報導者／大圖點我」HTML程式碼片段 --&gt; &lt;/body&gt; &lt;/html&gt; ``` 結果會像這樣： <https://codesandbox.io/s/gracious-sound-l24ci?fontsize=14&amp;hidenavigation=1&amp;theme=dark|https://codesandbox.io/s/gracious-sound-l24ci?fontsize=14&amp;hidenavigation=1&amp;theme=dark> *常見問題* *1. 我可以將圖片上傳到哪裡呢？* 可以將圖片上傳到有提供圖片託管服務的網路空間，並取得圖片的公開網址。 下面是幾個推薦用來上傳圖片的平台以及操作指引： • <https://github.com/twreporter/orangutan-monorepo/blob/master/packages/scrollable-image/docs/zh-tw/google-drive-hosting.md|Google 雲端硬碟> • <https://github.com/twreporter/orangutan-monorepo/blob/master/packages/scrollable-image/docs/zh-tw/dropbox-hosting.md|Dropbox> *2.「報導者／大圖點我」支援哪些瀏覽器？* 在各主要瀏覽器如 Firefox、Google Chrome、Safari、Internet Explorer (IE 11 以上，含 IE 11)、Edge 都能夠正常運作。 程式碼採用響應式設計，會自動根據螢幕寬度調整適合的版面。 如有遇到瀏覽器顯示結果異常，請填寫<https://forms.gle/TidE4vNBzsPWECXDA|回報表單>。或將您的異常狀況、作業系統、瀏覽器名稱、瀏覽器版本等資訊傳送到 `<mailto:developer@twreporter.org|developer@twreporter.org>`。 *3. 「報導者／大圖點我」是否提供商業使用？* 是，「報導者／大圖點我」使用 MIT 授權條款，可供商業使用且不需要支付任何費用，如您使用時能一併標明出處我們會非常感謝。 詳細授權資訊請見<https://github.com/twreporter/orangutan-monorepo/blob/master/LICENSE|授權條款頁>。 *意見回饋* 您可以透過以下任何管道給我們回饋意見： 1. 填寫<https://forms.gle/TidE4vNBzsPWECXDA|回饋表單> 2. 在我們的 <https://github.com/twreporter/orangutan-monorepo/tree/master/packages/zoom-in|Github> 上開 issue 或 open PR 3. 來信至報導者工程部信箱 `<mailto:developer@twreporter.org|developer@twreporter.org>` ，我們將有專人為你服務 :kissing_heart:。 *ABOUT 報導者開放實驗室 The Reporter Lab* <https://medium.com/twreporter|「報導者開放實驗室」>的任務之一，是提供開源的新聞小工具，增加說故事可能的方式，減少產製過程中不必要的重複工作，與內容生產者一起製作更多優質的報導。 「報導者／滾動式影片」產生器是我們所製作的各種新聞小工具其中之一，若您對更多新聞小工具有興趣，歡迎追蹤我們的頁面：<https://medium.com/twreporter|報導者開放實驗室 The Reporter Lab>

ael 2022-09-07 20:23:52

READr 可能也有一些
https://github.com/orgs/readr-media/repositories

David Fu 2022-09-07 21:28:20

要找什麼（？

10th.g0v.tw

零宇宙大爆炸 - 零時政府 g0v 十週年生日派對於台北的社會創新實驗中心

零時政府十週年了！「零宇宙大爆炸」將以生日派對的形式，舉辦在台北的社會創新實驗中心，透過短講、表演、開放工作坊、闖關遊戲、和源力不絕的生日蛋糕與美食，我們邀請「沒有人」化身為「零時空旅人」一同來回顧 g0v 的第一個十年，並且想像第二個、第三個、第 n 個十年！

*大會報告：今晚我想來點*…

我們這週三零食政策是‘*限量的速食*’
就決定今天吃肯德基的中秋炸雞了！！

這邊統計一下今晚會來實體小聚的朋朋
會來的請喊

IMG_6014

4

download.gif

meet.google.com

Meet

Real-time meetings by Google. Using your browser, share your video, desktop, and presentations with teammates and customers.

g0v.hackmd.io

違章工廠回報系統第142次小聚 - HackMD

figma.com

LANDING PAGE 2.0

Created with FigJam

figma.com

About Disfactory 2.0

Created with Figma

Oriyar 2022-09-14 16:35:25

天哪今天是限量速食日！我居然無法去（一直努力中….），嗚嗚嗚線上參與惹！

as840922qq 2022-09-14 16:45:24

不好意思今天家人生日聚餐，要錯過這週的炸雞小聚了QQ 目前landing-page code有更新上github了，有問題都歡迎隨時反映留言，我會趕快修改or回覆！感謝~！

<https://github.com/Disfactory/Landing/pull/1|#1 Fix netlify build>

as840922qq 2022-09-14 21:17:28

好的謝謝你！
我再修一下，應該是我這邊有code沒寫好or寫乾淨qq 感謝你～～！！！

meet.google.com

Meet

Real-time meetings by Google. Using your browser, share your video, desktop, and presentations with teammates and customers.

g0v.hackmd.io

違章工廠回報系統第143次小聚 - HackMD

figma.com

LANDING PAGE 2.0

Created with FigJam

figma.com

About Disfactory 2.0

Created with Figma

swind 2022-09-21 16:38:40

我今天有事情，所以會請假一次 ～ 有事情的話可 @ 我

Oriyar 2022-09-21 16:43:45

今天剛好遇到我在花蓮碩果僅存唯一能找到的數位社群（GDG Hualine）聚會，所以我先去坐檯那邊，想認識他們～ 今天pass，

然後關於熱的洋芋片，我想到風琴馬鈴薯？

David Fu 2022-09-21 20:32:46

*如何活在社群裡面*

1. 不用擔心錯誤訊息多跟少，一但遇到就先丟出來
2. 非同步溝通通常都用非同步的文字，優點在於不太會打擾別人，缺點則在於不一定會有人回。但其實因為大家都有別的工作要忙，所以沒人及時回是很正常的。不用想是不是問題太怪或太菜。


*如何開啟一個專案*

1. 有現成盡量用現成的
2. 如果真的要開新的，越早丟出來越好
3. 可以先把issue/pr的template做好

chewei 2022-09-21 20:39:50

歡迎分享 本週六活動 數位洄瀾黑客松~
https://g0v-jothon.kktix.cc/events/g0v-hualienthon2022

<https://github.com/Disfactory/frontend/issues/2|#2 Frontend 2.0 Backlog>

*Tasks* • 建立工廠 • 手機版 <https://github.com/Disfactory/frontend/pull/1|#1> ☑︎ 顯示設定手機版按鈕 component 化 ☑︎ 顯示經緯度手機版 ☑︎ 新增工廠成功 modal • 電腦 <https://github.com/Disfactory/frontend/pull/8|#8> • 桌面版 navigation bar ☑︎ 三步驟顯示 ☑︎ 取消新增工廠按鈕 • 經緯度 ☑︎ 搜尋經緯度表單 ☑︎ 打開/關閉經緯度介面 • 檢視工廠 • 手機版 ☑︎ 工廠詳細資料 Bottom Sheet <https://github.com/Disfactory/frontend/pull/9|#9> ☑︎ 詳細資料半開/全開切換 ☑︎ 詳細資料顯示 ☑︎ 工廠篩選按鈕（navbar 下面那排 <https://github.com/Yukaii|@Yukaii> ☑︎ 顯示設定按鈕 • ~詳細資料顯示時隱藏篩選按鈕、顯示設定~ ☑︎ 分享按鈕 <https://github.com/Disfactory/frontend/pull/14|#14> ☑︎ 點擊分享按鈕複製連結 ☑︎ 顯示通知 • 電腦版 ☐ 電腦版顯示設定按鈕 popover menu ☑︎ 工廠詳細資料 Sidebar <https://github.com/Disfactory/frontend/pull/15|#15> ☑︎ 工廠詳細資料 Sidebar 收合 <https://github.com/Disfactory/frontend/pull/15|#15> ☑︎ 分享按鈕已複製提示 <https://github.com/Disfactory/frontend/pull/15|#15> • 補充工廠 • 手機版 <https://github.com/Disfactory/frontend/pull/16|#16> ☑︎ 補充照片按鈕 ☑︎ 上傳圖片表單串接 ☑︎ 補充描述按鈕 ☑︎ 補充描述表單串接 ☑︎ 補充工廠成功 modal • 電腦版 <https://github.com/Disfactory/frontend/pull/19|#19> ☑︎ 補充描述 modal

Disfactory/SpotDiff

SpotDiff專案希望能讓鄉民比對 2016.5.20 前後衛星雲圖，去抓出農委會五萬筆資料中的疑似工廠位址上的建物是不是新增建物，可以集中火力去檢舉或是可以把台灣疑似工廠的地點掃一遍。

<https://github.com/Disfactory/frontend/pull/165|#165 Create LICENSE>

change.greenpeace.org.tw

政見選物所｜綠色和平 Greenpeace

綠色和平的理想生活選物所。在這個網站呈現的每一項商品，都是為了你我更好的未來而準備。

ael 2022-09-21 21:41:11

對不起，我第一個想法是綠色和平這個網站外包（？）花了多少錢

Ryno Hsiao 2022-09-21 21:52:56

剛剛pei也有類似的想法😆

3

moea_factories.csv

ifengc 2022-09-26 03:26:17

其中有些沒有地號，另外也有部分是轉失敗的
```Failed converting 新北市新莊區泰山段三小段602號之1
Failed converting 新北市五股區五股坑段壟鈎坑小段104號之13
Failed converting 新北市五股區五股坑段壟鈎坑小段137號之22
Failed converting 新北市泰山一小段255號
Failed converting 臺中市丁台三段1042、1043地號
Failed converting 桃園市永豐段354-2地號
Failed converting 桃園市茄苳段700-8地號
Failed converting 桃園市宏華段141地號
Failed converting 桃園市蚵殼港段深圳小段20、20-7、20-8、24-1
Failed converting 嘉義縣太保市春珠小段1180、1181、1182、1176、1176-1地號
Failed converting 臺南市仁德區岳王段
Failed converting 臺南市頭社段255.255之18地號
Failed converting 臺南市草店段841地號
Failed converting 臺中市峰谷段284-1地號
Failed converting 臺南市六塊寮段2270地號
Failed converting 臺南市海寮段1328.1329.1330地號
Failed converting 臺南市善化段3136地號
Failed converting 新北市泰山區大窼段734、737地號
Failed converting 花蓮縣光明段286號
Failed converting 高雄市山子頂段2227、2227-1地號
Failed converting 高雄市維新段33-37地號
Failed converting 高雄市竹園段1135-8地號
Failed converting 高雄市觀音湖段1248-13地號
Failed converting 基隆市鶯歌石段鶯歌石小段134-23地號
Failed converting 臺南市海寮段1328、1329、1330地號
Failed converting 嘉義縣朴子市母寮段竹村小段581地號
Failed converting 新北市淡水區大屯段石頭厝小段94-9地號
Failed converting 嘉義縣太保市茄苳腳段春珠小段1180、1181、1182、1176、1176-1地號
Failed converting 彰化縣溪湖鎮西安段970號
Failed converting 彰化縣和美鎮竹圍段140地號
Failed converting 屏東縣內埔鄉犁頭鏢段525-3地號
Failed converting 臺中市后里區后安段729地號
Failed converting 臺中市神岡區溪州段138地號
Failed converting 新北市五股區五股坑段壟鈎坑小段104-13地號
Failed converting 新北市五股區五股坑段壟鈎坑小段104地號
Failed converting 桃園市八德區茄冬段700-8地號
Failed converting 嘉義縣新港鄉古民段667-22、667-23、667-24、667-28、668-26地號
Failed converting 高雄市鳥松區大腳腿段1297-7地號
Failed converting 高雄市鳥松區大腳腿段1297-6地號```

2

zooniverse.org

Zooniverse

The Zooniverse is the world’s largest and most popular platform for people-powered research.

❤️ 2 1

meet.google.com

Meet

Real-time meetings by Google. Using your browser, share your video, desktop, and presentations with teammates and customers.

g0v.hackmd.io

違章工廠回報系統第145次小聚 - HackMD

figma.com

LANDING PAGE 2.0

Created with FigJam

figma.com

About Disfactory 2.0

Created with Figma

Oriyar 2022-09-28 15:54:20

順利的話我八點上線！

Guo-Jim 2022-09-28 16:51:18

熱的甜餅乾，感覺好好吃

peii 2022-09-28 17:52:10

*先提臨時動議*
今天還想跟大家討論一下接下來小聚的頻率，是否還是維持一週一聚，或者要拉長頻率？以及週三還是最好的選擇嗎？有沒有需要更動。
(今天不克前來的人也可以在slack上提意見噢)

ael 2022-09-28 19:30:02

Sorry 我今天沒辦法上線

Ryno Hsiao 2022-09-28 22:17:17

抱歉，我今天快篩確定確診了，一直在休息沒辦法參與會議，如果有任何跟我有關的update也請告訴我，謝謝大家：（

ael 2022-09-29 00:03:57

@orz12399 身體保重

YouTube

g0v tw hackath47n — 中場短講 — 給新手工程師的開源貢獻小撇步 ／ Tai — 板橋油庫口黑客松

as840922qq 2022-09-28 19:29:55

哇感謝分享！！！❤️

ael 2022-09-28 19:32:01

@contactfromg0vslack 錄的，超感謝

<https://github.com/Disfactory/about.disfactory.tw/blob/dev/components/TheFooter.vue | TheFooter.vue>

``` &lt;template&gt; &lt;footer&gt; &lt;picture&gt; &lt;source type="image/webp" srcset="~/assets/imgs/earth-and-g0v.webp" /&gt; &lt;img src="~/assets/imgs/earth-and-g0v.png" alt="" /&gt; &lt;/picture&gt; &lt;div class="containr"&gt; &lt;p class="contact"&gt;聯繫地球公民基金會&lt;/p&gt; &lt;p&gt; Email: &lt;a href="https://github.com/Disfactory" target="_blank" rel="noopener" &gt;cet@cet-taiwan.org&lt;/a &gt; &lt;/p&gt; &lt;p&gt;電話：02-23920371&lt;/p&gt; &lt;p&gt; 網站：&lt;a href="https://github.com/Disfactory" target="_blank" rel="noopener" &gt;<https://www.cet-taiwan.org>&lt;/a &gt; &lt;/p&gt; &lt;/div&gt; &lt;p class="license"&gt; 全站由使用者回報之資料及設計圖以CC BY姓名標示4.0釋出，標註「農地違章工廠回報系統貢獻者」，原始碼已MIT開放授權公開在&lt;a href="https://github.com/Disfactory" target="_blank" rel="noopener" &gt;GitHub&lt;/a &gt;上。使用者回報資料未涉及個人資訊部分已整理成開放資料與&lt;a href="https://api.disfactory.tw/redoc/" target="_blank" rel="noopener" &gt;API&lt;/a &gt;。&lt;a class="contributor-list" @click.prevent="openModal"&gt;貢獻者名單&lt;/a&gt; &lt;/p&gt; &lt;transition name="modal"&gt; &lt;div v-if="showModal" class="modal-shadow" @click.self="closeModal"&gt; &lt;div class="modal-body"&gt; &lt;SvgClose class="modal-close" @click="closeModal" /&gt; &lt;div class="modal-content"&gt; &lt;div class="title"&gt;貢獻者&lt;/div&gt; &lt;div class="introduction"&gt; &lt;p class="thanks"&gt;謝謝！&lt;/p&gt; &lt;div&gt; &lt;p&gt;<http://Disfactory.tw|Disfactory.tw> 為農地違章工廠的回報平台&lt;/p&gt; &lt;p&gt; project is run by volunteers in the <http://g0v.tw|g0v.tw> civic hacker network. &lt;/p&gt; &lt;p&gt; Don't ask why nobody is doing this. &lt;br /&gt;Become that nobody. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="list"&gt; &lt;div class="group"&gt; &lt;div class="group-name"&gt;前端&lt;/div&gt; &lt;div class="group-member"&gt; &lt;p&gt;IU、yukai、yeefun、dotsea、Caleb&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="group"&gt; &lt;div class="group-name"&gt;設計&lt;/div&gt; &lt;div class="group-member"&gt; &lt;p&gt;SL、J、Tin、Lydia、Xinroo、RAY&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="group"&gt; &lt;div class="group-name"&gt;後端&lt;/div&gt; &lt;div class="group-member"&gt; &lt;p&gt; cph、yellowsoar、swind、小白、YAlgorithm、sour、Jsaon、Toby、 Sonia、Andy、Hubert、Darren、Looofy、Simon、Aaron &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="group"&gt; &lt;div class="group-name"&gt;圖資/GIS&lt;/div&gt; &lt;div class="group-member"&gt; &lt;p&gt;chewei、ronnywang、bdon、pm5、kiang、shupo&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="group"&gt; &lt;div class="group-name"&gt;PM&lt;/div&gt; &lt;div class="group-member"&gt; &lt;p&gt;ael&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="group"&gt; &lt;div class="group-name"&gt;地球公民基金會&lt;/div&gt; &lt;div class="group-member"&gt; &lt;p&gt;小海、deeper、小胖、沅諭、可飛、peii&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="group"&gt; &lt;div class="group-name"&gt;社群協力&lt;/div&gt; &lt;div class="group-member"&gt; &lt;p&gt; ddio、chiahe、Joycelin、laiTzan、chelin、jenhaoyang、chihao、Angel、安東尼、Bryce、笑笑、積丹尼、誠夏、Stasia、慈忻、Kai、昱伶、Tai、Wuulong、Carmen、fly、土撥鼠、mhshih、JinWen、Johnson、John Huang、zyan、tai、slayer、mg、robin、星穎、ichieh、isabel、Tiff、雅安、Jay Lo、mcdlee、CRW、Guo-Jim &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="thanks"&gt;謝謝！&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/transition&gt; &lt;/footer&gt; &lt;/template&gt; &lt;script&gt; import SvgClose from '~/assets/imgs/close-cross.svg?inline' export default { name: 'TheFooter', components: { SvgClose, }, data() { return { showModal: false, } }, methods: { // when modal is opened, freeze scroll bar of the page openModal() { this.showModal = true document.documentElement.style.overflow = 'hidden' }, // when modal is closed, unfreeze scroll bar of the page closeModal() { this.showModal = false document.documentElement.style.overflow = 'auto' }, }, } &lt;/script&gt; &lt;style lang="scss" scoped&gt; footer { font-size: 18px; padding: 40px 0; @include media-breakpoint-up(lg) { padding: 40px 0 48px 0; } } img { width: 160px; margin: 0 auto; margin-bottom: 12px; } a { color: inherit; text-decoration: underline; } .containr { border-top: 1px solid #d9e0a2; padding: 32px 32px 0 32px; max-width: 376px; margin: 0 auto; box-sizing: border-box; p + p { margin-top: 5px; } } .contact { font-weight: 700; margin-bottom: 8px; } .license { text-align: center; font-size: 15px; color: #a1a1a1; margin: 45px auto 0 auto; padding: 0 32px; max-width: 800px; .contributor-list { color: #5f5f5f; } } .modal-shadow { position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); @include media-breakpoint-up(lg) { z-index: 1000; } } .modal-body { display: block; position: absolute; left: 50vw; top: 70px; transform: translate(-50%, 0%); border-radius: 10px; background-color: #fff; border: 1px solid #888; width: calc(100% - 30px); padding-top: 40px; padding-bottom: 20px; @include media-breakpoint-up(lg) { left: 50vw; top: 50vh; transform: translate(-50%, -50%); max-width: 776px; } } .modal-content { text-align: center; font-size: 16px; height: calc(100vh - 140px); overflow-y: scroll; padding-left: 16px; padding-right: 16px; @include media-breakpoint-up(lg) { max-height: 706px; padding-left: 70px; padding-right: 70px; } .title { font-size: 38px; line-height: 55px; padding-bottom: 37px; } .thanks { font-weight: 500; font-style: normal; font-size: 26px; line-height: 30px; color: #2b4754; @include media-breakpoint-up(lg) { display: none; } } .introduction { font-weight: 400; font-style: normal; margin: 0 auto; width: 100%; text-align: left; line-height: 1.25; padding-bottom: 14px; border-bottom: 1px solid #9d9d9d; p { margin: 0 0 16px 0; } .thanks { display: none; } @include media-breakpoint-up(lg) { display: flex; justify-content: space-between; padding-bottom: 4px; .thanks { display: block; min-width: 140px; text-align: left; margin-right: 20px; } } } .list { padding: 30px 0 14px 0; .group { padding-bottom: 21px; line-height: 1.5; font-style: normal; .group-name { color: #107393; font-weight: 500; } .group-member { font-weight: 400; overflow-wrap: break-word; } @include media-breakpoint-up(lg…

1

<https://github.com/Disfactory/about.disfactory.tw/issues/50|#50 Add contributor list>

I want to add a section to thank the contributors. For example, <https://vaxx.tw/credits|https://vaxx.tw/credits> It can be a link to a HackMD or plain html without design, or one section embedded in the about page.

<https://github.com/Disfactory/about.disfactory.tw/issues/50#issuecomment-1260832435|Comment on #50 Add contributor list>

新增貢獻者名單 前端：二路、KuoMin 設計：ryno 後端：steven、ifengc、kai wang、tuo 圖資：karen 社群協力：sarah

peii 2023-03-08 20:22:06

@yukai

❤️ 5 2 3

Disfactory 違小寶 的地區限定進化角色 農地違彰 <https://m.facebook.com/story.php?story_fbid=pfbid02qQAAKa5q3hSQ8gYStu42nVwHmMnHoiFdZC2FiRpemMCeA21M8iBcu1pP2rbBbdtVl&amp;id=148513668543221|https://www.facebook.com/story.php?story_fbid=pfbid02qQAAKa5q3hSQ8gYStu42nVwHmMnHoiFdZC2FiRpemMCeA21M8iBcu1pP2rbBbdtVl&amp;id=148513668543221>

Disfactory 違小寶 的地區限定進化角色 農地違彰 <https://m.facebook.com/story.php?story_fbid=pfbid02qQAAKa5q3hSQ8gYStu42nVwHmMnHoiFdZC2FiRpemMCeA21M8iBcu1pP2rbBbdtVl&amp;id=148513668543221|https://www.facebook.com/story.php?story_fbid=pfbid02qQAAKa5q3hSQ8gYStu42nVwHmMnHoiFdZC2FiRpemMCeA21M8iBcu1pP2rbBbdtVl&amp;id=148513668543221>