---
# System prepended metadata

title: 共同網站 110-2

---

# 共同網站 110-2 

https://hackmd.io/9tXJQOn-SnS_f51A5nOsYg
## 時程

**第一週(2/25):** 
進度確認(30min) & 美化(30min) & 合併(1hr up) 
1. bulletin should be link to blog correctly
2. 美化!!!


**第二週(3/04):** 分組進行
* TeamA(2人): Combine components to a page(訂出網站架構，可以填入各部門資訊生成出網站) Michael 陳亮瑜
* TeamB: Design customized components 
    1. 行銷部(2人)：時間軸、採訪文案 陳駿瑋 黃筱穎
    2. 總務(2人)：賣衣服 張創渝 
    3. 體育部(2人)：告系隊練球時間、地點及介紹 (slides) 陳威侑 
    4. 衛生部(2人)：失物招領 google form link => google sheet api => gallery of lost & found 黃宥翔 黃柏睿 

**第三週(3/11):** 
Schema

**第四週(3/18):**
* TeamA: 進度確認: 訂出網站架構，可以填入各部門資訊生成出網站
* TeamB: 雛形完成

To be continued ...


# 2022 04 02 共同網站 meeting

出席名單： 

* 陳宏恩(redxouls)
* Mecoli
* 陳威侑
* 張創渝（哭啊）
* 陳駿瑋(caffrey)

[https://github.com/NTUEEInfoDep/EESA-website](https://github.com/NTUEEInfoDep/EESA-website)

# 目前分工

* TeamA(2人): Combine components to a page(訂出網站架構，可以填入各部門資訊生成出網站) **Michael 陳亮瑜 branch: departmentMainPage**
    * 下次進度: 簡化新增 componenet 的複雜度，紀錄新增 component 需要的步驟
* TeamB: Design customized components

    1. 行銷部(2人)：時間軸、採訪文案 **陳駿瑋 黃筱穎**
        * 下次進度：demo
    1. 總務(2人)：賣衣服 **張創渝 branch: clothes**
        * 下次進度：
    1. 體育部(2人)：告系隊練球時間、地點及介紹 (slides) **陳威侑**
        * branch: `sports`
        * 下次進度：
            1. 訂好 carousel 和 table 的 schema 
            2. 找到 carousel 和 table 的套件，簡單 demo
    1. 衛生部(2人)：失物招領 google form link => google sheet api => gallery of lost & found 
        * **黃宥翔 黃柏睿**
        * 下次進度：
           1. 前端串接上 api，美化，使用說明


## 4/29

* Main Page: **Michael 陳亮瑜**
    - [x] 簡化新增 componenet 的複雜度
    - [x] 紀錄新增 component 需要的步驟
        ```javascript
        1. Modify Contentful setting
        
        // => ./src/static/constant.js
        2. import the Component
        3. Depends on the type of Component(function, class)
           adding the data to the Object(FUNC_CONST, CLASS_CONST)
        ```
        
    #### Example: Add a "Sports" body
    1. Add "Sports" in contentful
        ![](https://i.imgur.com/Md9pw8Z.png)
    2. Add to the target department main page
        ![](https://i.imgur.com/UdRn79Y.png)
    3. Modify ./src/static/constant.js in form:
        - import the component
        - add data in FUNC_CONST, CLASS_CONST depends on the type of the component
        - A is the value of the Body of the Department Main Page on contentful
        - A: [B, C]    =>  <C data={get(this, `props.data.allContentful${B}.edges`)} />
        - B: Type Name from contentful
        - C: component function/class
    ![](https://i.imgur.com/qJOVJ87.png)


* 時間軸、採訪文案： **陳駿瑋 黃筱穎**
    - [ ] push branch
    - [ ] 串接既有的 blog post 創建頁面
    - [ ] demo 新增／更換順序/刪除 blog post
* 賣衣服： **張創渝**
    - [x] push branch
    - [ ] demo 新增
* 系隊練球時間、地點及介紹 (slides)： **陳威侑**
    - [x] 訂好 carousel 和 table 的 schema 
    - [x] 找到 carousel 和 table 的套件，簡單 
    - [x] demo
    - [ ] Pop Over
* 失物招領：  **黃宥翔 黃柏睿**
    - [x] 前端串接上 api，美化，使用說明
    - [ ] 標題


# 共同網站 5/6

https://blog.larsbehrenberg.com/top-50-gatsby-plugins-youre-going-to-love
### 1. 講解如何 fork 使用 PR!
### 2. 可以列出需要的素材，看看效果如何
* 總務：
    - [ ] 衣服的照片 & 價格 & 資訊
* 體育部：
    - [ ] 各系隊得獎照片，聯絡資料
    - [ ] ...
### 3. 待修改
* departmentMainpage
    - [x] 做一個同一使用的 wrpper 可以直接生成出來，搭配 #id，到時候每個部門都可以有 dropdown 直接飛過去![](https://i.imgur.com/a4rYrxa.png)
    - [ ] 標題
    - [x] child 要置中
    - [ ] 留好 padding
    - 說不定有現成的？
* Blog post 
    - [ ] 可以有一頁是全部消息，可以有搜尋功能 (Connor Chen)
    - https://www.gatsbyjs.com/plugins/gatsby-plugin-local-search/
* Bulletin
    - [ ] 下面會滑動，把寫死的寬度 改成 vw 或是可以動態調整的 css，**我改成 "flex-grow" 就好了**
    - [ ] 右上角的 filter 點下去如果篩選完以後是空的會直接爆漿，要另外處理找不到的情況
    - [ ] 這兩個功能很棒，但直接看不太確定是不是 tag 的篩選器，可以用
    - ![](https://i.imgur.com/CDzFcxh.png)
* 時間軸、採訪文案： **陳駿瑋 黃筱穎**
    - [ ] push 改變上去或是直接發 PR
    - [ ] 串接既有的 blog post 創建頁面
    - [ ] demo 新增／更換順序/刪除 blog post
* 賣衣服： **張創渝**
    - [ ] demo 新增
    - [ ] 發 PR 合到 main 裡面
* 系隊練球時間、地點及介紹 (slides)： **陳威侑**
    - [ ] Pop Over
    - [ ] 發 PR 改
* 失物招領：  **黃宥翔 黃柏睿**
    - [ ] padding 好像怪怪的，四周的 padding 留出來會比較好看![](https://i.imgur.com/2SWuT3U.png)
    - [ ] 發 PR 改標題美化，使用說明
    - [ ] department 的小卡背面可以改成兩個橫排

## Create Fork
```bash=
git clone git@github.com:${USERNAME}/EESA-website.git
cd EESA-website

git remote add upstream git@github.com:NTUEEInfoDep/EESA-website.git
git remote set-url --push upstream no_push

git remote -v
```

## Work Flow

### Create local branch
```shell=
git checkout main
git fetch upstream
git rebase upstream/main
git push origin main
# Create a new branch for the new issue EESA-#${ISSUE_ID}
git checkout -b EESA-#${ISSUE_ID} 
# git checkout -b EESA-#1
```

### Before Push, sync with upstream
```bash=
git fetch upstream
git rebase upstream/main
```

### Push local branch to local repository
```shell=
git push origin EESA-#${ISSUE_ID}
```

### PR Title => EESA-#{issue_number} {issue_title}