V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
reorx
V2EX  ›  分享创造

做了一个支持键盘导航的极简风格起始页

  •  
  •   reorx ·
    reorx · 2022-10-02 01:31:41 +08:00 · 2428 次点击
    这是一个创建于 785 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目页面: https://github.com/reorx/sui2

    Demo: https://reorx.github.io/sui2/

    做这个项目的初衷,是想把我自部署的许多应用集中到一个入口。一来可以快速启动,二来看着属于自己的应用集合有种莫名的成就感。

    我先是去找了下现有的项目,却没有发现能符合我需求的,最终在相对满意的 jeroenpardon/sui 基础上进行了二次开发,重新命名为 sui2 。

    sui2 有这些特点和功能:

    • 静态构建。主流起始页项目分为两类,一种是将数据保存在浏览器,一种是将数据保存在后端数据库中。但我认为起始页不需要经常改动,不如舍弃在线修改能力,变成纯静态网页服务,可以自由部署在任意服务器和 static hosting 服务上。但这样也带来了一个局限性,需要有一定的动手开发能力才能使用,因此 sui2 是一个适合程序员和 Geek 的起始页。
    • 键盘导航。这是 sui2 开发的新功能,效果可以在 GitHub 页面的视频看到。打开起始页后,直接输入字母,即可模糊匹配应用和书签,聚焦在匹配度最高的条目上,按下回车即可打开网站。如果匹配结果有多个,按 tab 键即可进行遍历。ESC 键清除输入恢复原状。
    • 更换主题。目前内置了一些主题,继承自 sui ,后面我准备将主题色变成可自定义调整的。

    如何使用:

    1. 将代码 clone 到本地后,执行 cp data.example.json data.json, 修改 data.json 文件填入你自己的应用和书签。
    2. 执行 npm install 安装依赖,然后 npm run dev 运行开发服务器,npm run build 构建静态网站,生成的结果在 dist 目录下,可以上传到 Cloudflare Pages 或 Netlify 上,也可以用 GitHub Actions 进行自动构建。

    欢迎提出意见。如果觉得不错的话,可以点个 Star 或在 GitHub Sponsors 赞助我。

    13 条回复    2022-10-16 18:54:51 +08:00
    Tink
        1
    Tink  
       2022-10-02 08:28:25 +08:00 via Android
    挺好看的,搞上
    Tink
        2
    Tink  
       2022-10-02 08:30:21 +08:00 via Android
    能支持一下 docker 部署不
    reorx
        3
    reorx  
    OP
       2022-10-02 10:24:26 +08:00 via iPhone
    @Tink Docker 的话也可以,npm build 完塞到 nginx 镜像里,回头我整一个
    me221
        4
    me221  
       2022-10-02 11:40:05 +08:00   ❤️ 1
    在 twitter 看到了 好看
    lockheart
        5
    lockheart  
       2022-10-02 12:41:01 +08:00 via iPhone
    Moeyua
        6
    Moeyua  
       2022-10-02 12:50:24 +08:00 via iPhone
    这个 UI 是参考了 flame 或者 flare 吗,看起来一模一样。
    reorx
        7
    reorx  
    OP
       2022-10-02 13:34:44 +08:00 via iPhone
    @Moeyua @lockheart 看了下项目介绍,flame 说自己是参考 sui 的,flare 又是参考 flame 的,我是直接 fork 的 sui ,看来大家都有同一个祖先😄

    flame 确实不错,不过也是有数据库的,跟我的目标不同,看来 sui2 也不算做了重复的事情
    Moeyua
        8
    Moeyua  
       2022-10-02 13:42:17 +08:00 via iPhone
    @reorx 子孙满堂了属于是🤣
    ShineyWang
        9
    ShineyWang  
       2022-10-03 17:47:45 +08:00 via Android
    https://github.com/lissy93/dashy
    dashy 不符合你的要求吗?
    reorx
        10
    reorx  
    OP
       2022-10-04 11:07:56 +08:00 via iPhone
    @ShineyWang dashy 需要数据库部署,不大想要,而且亮色主题巨丑
    cheung
        11
    cheung  
       2022-10-06 16:45:21 +08:00
    都可以学习学习,收藏先。
    reorx
        12
    reorx  
    OP
       2022-10-16 16:15:09 +08:00
    @Tink 好了,搞了一个 docker 镜像,里面跑了一个 node 服务端,打开首页就是 sui2 ,并且提供了一个编辑器可以直接修改页面数据



    详细描述见 readme https://github.com/reorx/sui2#deploy-using-docker
    Tink
        13
    Tink  
       2022-10-16 18:54:51 +08:00 via Android
    @reorx 很 6 ,安排
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   976 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 22:51 · PVG 06:51 · LAX 14:51 · JFK 17:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.