Git Product home page Git Product logo

carbonbond's Introduction

碳鍵

碳鍵是一個次世代的論壇。它在文章之間的交互作用、筆戰過程中劍拔弩張的感受、板塊統治集團的鬥爭功能上進行了史無前例的大幅強化。

諸君,準備好了嗎?

提高你的鍵能,把那些笨蛋嘴成渣吧!

特點

  • 文章有「結構」
    • 可設定一個分類的文章必須由哪些資訊構成
    • 例如「新聞」必須包含來源、記者、內文、日期四個欄位
    • 發文者必須按照結構填寫表單,格式正確才能發文成功
    • 欄位可以限制型別,如數字、日期、字數在一百字以上的文本......等等
  • 文章之間有多樣的鍵結關係
    • 作者可以畫出鍵結來表示文章是在批鬥/支持/懷疑另一篇文章
    • 一篇文章可同時跟多篇文章產生鍵結
    • 精美的圖形介面可顯示文章之間的關係
  • 外掛系統
    • 根據看板中的文章結構、鍵結,進一步客製化看板的介面
    • 外掛作者可製作外掛上傳至碳鍵的外掛商店
  • 政黨系統
    • 看板由執政黨管理,握有定義板內文章結構、鍵結的權限,並可制定以人來做後續仲裁的板規
    • 一個看板板可能有多個在野黨,在野黨可以在具備民意基礎的狀況下挑戰執政黨
    • 一個政黨由多個黨員組成
    • 黨員可指派成不同角色,擁有各自的權限
  • 即時通訊
    • 個人
    • 羣組
      • 頻道
  • 現代介面
    • 支援瀏覽器跟App
  • 支援 Markdown 標記語言
    • 也考慮設計碳鍵自己的標記語言

更多細節詳見碳鍵文件

建置

  • 後端:使用 Rust 語言開發。
    • 使用 cargo run 可啟動伺服器
    • 使用 cargo run -- --config-file FILE 指定設定檔
    • 使用 cargo run --bin dbtool 可管理資料庫
    • 使用 cargo run --bin prepare --features prepare 準備所有程式碼生成的檔案,包含:
      1. 幾丁前後端
      2. sqlx 離線文件
    • 設定檔
      • 預設使用 api-service/config/carbonbond.[MODE].toml,其中 MODE 為環境變數,可能的選項為 releasedevtest
      • 若前述檔案不存在,則使用 api-service/config/carbonbond.toml
      • 私密訊息,如 API KEY 等等,請放置於 api-service/config/secret 資料夾,並於設定檔中指定欲使用哪一個私密檔案
      • 更詳盡的說明請參閱 api-service/config/carbonbond.toml
  • 前端:使用 typescript + React 開發。
    • yarn 安裝套件
    • yarn dev 啓動前端伺服器,支援熱重載
    • yarn lint 檢查風格

更詳細的步驟請見 快速開始

carbonbond's People

Contributors

mros avatar david0u0 avatar fro11o avatar jerry73204 avatar liu115 avatar pwliao avatar zqartwork avatar ntubiolin avatar

Stargazers

jyunsie0730 avatar HeisenBerg? avatar Léana 江 avatar  avatar  avatar  avatar  avatar Chojan Shang avatar Yihau Chen avatar kevin chang avatar Basel Ajarmeh avatar  avatar Peng Chao-Wei avatar sunday2146 avatar  avatar  avatar  avatar  avatar

Watchers

James Cloos avatar  avatar  avatar  avatar Basel Ajarmeh avatar

carbonbond's Issues

修復 ScrollState.useScrollToBottom 重複調用處理函式的問題

該功能應用場景

許多元件需要監聽頁面「滑到底」這個行為,例如看板頁滑到底加載文章、文章頁滑到底加載留言等等。

為了避免重複實作,將此邏輯抽取為一個 useScrollBottom 函式,又由於「滑到底」的行為實為監聽一個父組件的 scroll 事件,故採用 Context 的作法。

問題

本來實作的清理機制有問題,無法在重渲染時正確地清理掉舊的處理函式,因此導致多次調用,甚至可能引發記憶體洩漏的問題。

透過 react.useLayoutEffect() 返回清理函式的功能,可以正確地在重渲染時更新處理函式。

此外,需以這個機制重寫 BoardPage 的滑動加載功能。

文章列表介面的實作

  1. 目前是從最舊的開始排,應該要先跟後端詢問當前有幾篇文章(graphql Board 中有此欄位),然後從最新往下排
  2. 滑到最早的文章後就不該再觸發動作
  3. 實作設計頁面

文章頁前端刻板

按照 mockflow 上的設計刻

  • 「回大的」的時候:聚合分類 vs 先展開部分
    • 先展開
  • 留言、回文的安排
    • 留言放在回文之後,回文預設不展開
    • 左邊欄瀏覽所有系列文章應由外掛處理

設計左邊欄動態增加/減少功能的機制

某些外掛或網站原生功能可能需要動態增加/減少左邊欄的圖示,例如電影板輔助外掛理應只有在該板才有作用,或是原生的火箭功能就只有在點進文章時有用。

我預計設計一個機制可以在以下狀況調整左邊欄功能,並在離開時自動清除該功能

  1. 首頁
  2. 看板
  3. 文章
  4. 全局

並且用這個機制實作火箭功能,以測試該機制的易用性及正確性。

前端不可變函式庫從 immer 改換成 immutable.js

富文本編輯器如 slate.js draft.js 皆使用 immutable.js 提供不可變性,而非我們原先選用的 immer.js

為了節省程式碼的大小,並且避免一個專案中有兩個功能重疊的函式,希望儘早將所有前端依賴換成 immutable.js

回文功能

回文功能應整合於右下的編輯器面板,用以回應一至多篇文章。

應以易懂的UI顯示當前的回文欲創建哪些鍵結、也要可以調整是還是

上述資訊將傳回後端,並確實更新資料庫。

建立鍵結時,前後端必需進行檢查:

  • 鍵結能否輸能?
    • 根據分類的 transfusable 欄位
  • 鍵結能否指向欲回應的分類?
    • 根據分類的 attach_to 欄位
  • 鍵結不可重複
  • 鍵結不可跨板
  • 鍵結不可跨主題

統一錯誤碼

custom_error.rs 中的 LogicError 中有一個 key 欄位,需要文件/註解定義 key 的數值代表的含義。

政黨的權力分配使用「身份組」或是「階層制」

討論權力分配應該使用

  • 身份組(類似 discord)
  • 階層制(類似 facebook)

以下是政黨擁有的權力。權力後面的數字代表第幾階層(數字越大,越高階)的人才能行使。這些數字是石墨的提案。

(身份組則交由黨主席自行分配,亦可預設幾個易用的身份組)

政黨權力

對看板

  • 刪文 1
  • 置頂文章 2
  • 打 hashtag 1
  • 噤聲 1
  • 奪權 3
  • 看版設定
    • 簡單
      • 基本介紹 2
      • 推薦外掛 2
    • 高級
      • 分類 2

對黨內

  • 加人/踢人 2
  • 權力分配 3
  • 黨內設定(介紹) 2
  • 創版 3
  • 出走 3

後端 API 裡的 ID 成員都改成 i64

struct 的成員寫 ID 會導致:

  • 初始化時要從 i64 轉成 ID
  • 查詢其它資訊時要從 ID 轉回 i64

好處則只有查詢 ID 時不用轉型。

綜上所述,改成 i64 應該會讓程式碼乾淨一點。

graphiql 埠口固定爲 8080

src/api/mod.rs

let html = graphiql_source("http://localhost:8080/api");

將 graphiql 定死在 8080 ,但理應從 config 中讀取埠口

註冊機制的前端

  • 寄送邀請信的頁面
  • 個人設定中,可以重設密碼
  • 登入時,有忘記密碼的選項

想像各種使用場景

請各位在以下留言你們想像到的各種看板,格式為

  1. 看板用途
  2. 看板所包含分類
  3. 目前的設計要如何滿足需求/爲何無法滿足需求

個人頁

  • 基本資訊:介紹,名稱、簡介、所在位置......可編輯(0.3.0)
  • 統計資訊:鍵能、被多少人追蹤、仇視 (0.3.0)
  • 顯示所有動態:文章、留言、黨派、追蹤、收藏 (1.0.0)
  • 追蹤/仇視一個人(0.3.0)
  • 即時動態 (1.0.0)
    • 正在哪個板
    • 是否上線中

爲 diesel 加入連接池的功能

目前伺服器到資料庫只有一條連接,在大量存取時可能會成爲效能瓶頸。

嘗試用 r2d2 這個庫來爲 diesel 加入連接池功能。

修正 board_page.css 的命名規範

目前 board_page.css 使用 - 來命名變數,請修正爲首字母小寫駝峯式,並修正相應的 tsx 檔案。

此外,嘗試加入 stylelint 之類的風格檢查器來自動偵測命名問題。

「追蹤看板」的功能細節

追蹤看板至少要有以下功能:

  1. 增刪
  2. 自定義排序(拖曳或其它方法)
  3. 分類管理

其中分類管理目前我想到幾種方法

  1. 分隔線(一階層,不會有重複追蹤)
  2. 資料夾(多階層,可能有重複追蹤,即在不同資料夾有同一個看板)

我投分隔線一票。

聊天室總體設計(1.0 版)

聊天室(第一版)

聊天室的種類

  • 一對一
    • 建立方式:主動發訊息
  • 簡單群組
    • 建立方式:在聊天左邊欄主動建立
  • 含頻道的複雜群組
    • 建立方式:
      1. 由聊天左邊欄主動建立
      2. 由簡單群組升級而來

聊天室的權限管理(修改自 discord)

有三個預設好的身份組,權力由高到低分爲

  • 擁有者:刪除聊天室、管理身份組、以及其他所有權限
  • 管理員:加人、踢人
  • 一般成員:只能打字

但權限組不會僅限於這三種,可以建立全新的身份組,並指定該權限組擁有的各種能力,例如可以建立一個只能踢人但是不能加人的「糾察隊」身份組。

一個人可以同時擁有多個身份組。

政黨建立時,會將黨主席、黨代表、黨員,分別對應到這三個聊天室身份組。往後黨內地位調整時,聊天室的身份組也會相應變化,但不會更動到這三個預設身份組之外的身份組。

支援的聊天功能

  • 文字(超鏈接可點擊、圖片會自動展開)
  • 表情符號
  • 可往前讀取歷史訊息
  • 伺服器記得有哪些訊息未讀

管理權限

  • 加人、踢人
  • 管理身份組
  • 創建、銷毀聊天室
  • 創建、銷毀頻道

yarn lint 檢查 js

目前僅檢查 ts/tsx 檔案,但最近有些建置程式使用 js 撰寫,故需要連同 js 一起檢查。

注意到要修改部分 .eslintrc 的規則,例如,no-unused-var ,以使其也作用於 js 。

熱門

  • 全站熱門看板
  • 全站熱門文章
  • 一個板內的熱門文章

補齊 api.gql 文件

前後端溝通使用 graphql,目前的文件多有缺漏或錯誤,應使之與實作的功能同步。

於瀏覽器放大縮小(zoom in/out)時維持版型

在瀏覽器調整爲 80% ~ 120% 這個區間,都要有滿合理的顯示,可觀察 reddit ,在大倍率的狀況下甚至會有響應式行爲。

目前的版本在超出 110% 時,就會有部分 ui 被遮蓋,跑出滑桿,需要改進。

註冊機制

  • 邀請信
    • 在 db-tool 中能夠寄發具有邀請額度的邀請信
    • 一般用戶則能夠透過 web 介面寄送無邀請額度的邀請信
  • 更改密碼
  • 忘記密碼,收信重設

對於已經註冊者的邀請信規則

  • 禁止寄送邀請信給已經完成註冊的用戶,以防浪費邀請信額度
  • 一位用戶註冊完成時,應將他的所有邀請信都作廢(設爲 isUsed)

id -> name 混淆

在 PR #45 中,有許多應該回傳 name 而非 id 的 API,被回傳成了 id ,使得在使用者介面上只能看到 id (沒意義的數字)。

由於 user 的主鍵被更改,graphQL 中出現 user_id 的地方應該都改爲 User 這個 type ,以便於同時取得 id 以及 name 。

重構資料庫程式

  • 解決 parties 及 boards 表之間的循環參照
  • 統一使用 text 替代 varchar(*)
  • user id 改用 BIGSERIAL
  • 移除 articles 表中冗餘的 category_name 欄位
  • 改進資料庫程式風格

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.