The_Hackable_Dashboard.md

The Hackable Dashboard

简介

我们希望开发一个浏览器扩展，由它提供高度可定制的浏览器主页体验。此外，这种体验应当可以在正常网页上复刻，不依赖浏览器扩展。

整体设计原则

• 单一配置文件：用户的整体配置，保管在一个便携的配置文件内
• 网格布局：提供一个 12x240 的网格，用户可以自行安排如何布置 block
• 开放插件：每个功能由插件提供，每个插件有独立的配置文件命名空间，有独立的缓存管理策略

样例使用场景

• 屏幕分为左右两部分（L/R）
  • L 展示 GitHub 的 issue 列表
  • R 分为上下两部分（RT/RB）
    • RT 展示 V2EX 热帖列表
    • RB 展示 Feedly 的 RSS 条目列表

配置文件

配置文件是 JSON 格式，需要包含自身的 metadata 和各个插件的配置数据。

{
    "metadata": {
        // selfurl: 从何处自动更新配置文件
        "selfurl": "https://gist.github.com/neruthes/56637dcc29fb7b1f498b1b669f424a8a/raw/The_Hackable_Dashboard.md",
        // maxwidth: 手动指定容器宽度上限，留空表示 calc(100vw - 4em)
        "maxwidth": "1100px"
    },
    // grid: 网格布局信息
    "grid": [
        {
            "applet": "githubdemo",
            // subtype: 一个 applet 可以有多个 subtype，例如 GitHub 分为 issuelist/prlist/notiflist/mosaic
            "subtype": "issuelist",
            "position": { "x": 0, "y": 0 },
            // size: 将容器宽度分为 12 列，将 calc(100vh - 6em) 分为 12 行
            "size": { "cols": 6, "rows": 6 }
        }
    ],
    // applets: 各个 applet 内部的配置
    "applets": {
        "githubdemo": {
            // pat: Personal access token
            "username": "neruthes",
            "pat": "a8a37e8fc3d94dd48510405db26f6ea7"
        }
    }
}