Lepton 特色
Lepton的初衷很简单,希望成为一款可以方便保存 snippet (代码片段)的 APP 。
作为一名码匠,平时爱总结有用的代码片段,如果能把它们保存在 Evernote (印象笔记)就好了。
可惜 Evernote 对代码块支持不好,需要在别的地方把代码块高亮,然后再贴回来,这常常导致格式混乱。新的 block 功能{}
虽可以方便地把代码块和正文区分,但不能高亮语法。目前找到的最好折中方法是在Marxico使用 Markdown 记录代码,再同步保存到 Evernote 中。
有没有其他方法呢?我们可以使用 Google Drive/Dropbox ,其中 Google docs 还有支持代码高亮的 plugin 。缺点是,这种基于文件夹的管理方式并不如标签适合代码片段的检索。还有一些单机软件比如Snippets, 能实现本地代码保存,可惜不支持跨设备同步。
到 2017 年初为止,GitHub Gist可能是最适合保存代码片段的云端。(其他网站,比如 Stackoverflow ,也提供或将提供部分代码片段保存功能,但目前还不如 Gist 完善。)它不仅支持最基本的代码高亮、分享、隐私设置,还会保存代码的所有历史版本,甚至还提供了 REST API 支持。美中不足的是, Gist 没有提供标签功能,所有代码片段( Gist )按照时间顺序堆积在一起。GistBox 曾是一款不错的 Gist Web App 。可惜近来开发进度缓慢,许多 issue 不修复也不回复。加上代码不开源, community 难以参与。
目前 Gist 并还没有类似 Evernote 的桌面客户端, 所以 2017 年第一小目标就是做一款基于 GitHub Gist 的桌面客户端。
通过调研,决定选用 Electron 框架。 Electron 把 Node.js 和 Chromium 两者结合,开发者可以使用 JavaScript 进行跨平台的桌面 APP 开发。
为了快速掌握 Electron 的开发技术,我花了一点时间阅读了另外一个开源的 Electron APP pupaFM 的 commit 历史,大概读到 60 多条吧。作者的开发流程是将 React + Redux 结合来构建前端 UI 和管理 App 的状态,使用 Webpack 来作为构建工具。为了开发过程中少踩坑,我决定采用和 pupaFM 类似的开发流程。(去 Udemy 自学了些 React+Redux ,然后又学了点 Webpack 和 Scss )
主要开发阶段历时 3 周,前两周负责功能实现,第三周负责优化界面。第三周后的工作主要负责解决用户反馈的 bug 和搭建 GitHub Page 。后来又在基本功能基础上加入了个性化标签
和本地搜索
。
我采用Highlight.js
来实现语法高亮。由于作者很傲娇地不支持 line number,所以 line number 部分由自己写。其中难点是如何让用户复制黏贴代码时不把 line number 也一同贴上。我最后使用了data-pseudo-content
来标记行数解决了这个问题,这是具体的代码。
刚开始开发时候,把一些 Dialog 的 show/hide 作为 React component 的 local state ,以为它们和 app 的全局 state 无关,应该放在 component 中。后来,随着 dialog 数目的增多( search dialog 、 create dialog 、 edit dialog ),属于不同 component 的 dialog 有时候会出现相互覆盖、难以协调的现象。如果一开始就把它们的 state 作为 Redux 的全局 state ,就可以有效避免这些问题。这是一点小经验。
Gist 本身并不支持标签。我一开始想法是通过一个 scret gist 来保存和同步标签记录。后来发现这个方法效率不高,每次标签变化都要把所有标签记录重新写入这个 scret gist ,而且出错后容易丢失记录,最后弃用。目前方法是通过 description 部分的特殊字符#tags
来保存自定义的标签。优点是标签分散到每个 gist 中,每次只需要更新该 gist 对应部分的标签即可,而且可读性高,还能提高本地搜索的准确性。
Lepton的本地搜索采用了elasticlunr.js模块。遗憾的是,它目前只支持英文的整词搜索,而且我只让它搜索 Description 部分(因为代码部分常构不成整词)。
Electron 自带了一个autoUpdater
模块,可以自动检测 server 上的新版本,并自动在后台下载。目前这部分还没有集成到Lepton中,也许以后会加上。
作为非 Designer ,能把图标制作到这个程度我也是很满意的了。制作方法是先画一个逗号,然后去下面第一个网站把图片转换成 svg ,然后再去第二个网站把 svg 文件转换成 Material 风格的图标。
Lepton v1.1.0 正式发布!!
Command/Control + i
) 1
1mhz 2017-02-03 10:42:09 +08:00
内测用户帮顶!
|
2
chengfu 2017-02-03 10:59:35 +08:00 via iPhone
现在还在内测么?
|
6
XYxe 2017-02-03 11:16:19 +08:00
登录不了
登陆以后还是显示登录界面 |
7
sox 2017-02-03 11:23:10 +08:00
建议使用 prismjs 高亮 🤗
|
8
CosmoX OP @XYxe 点击登录以后 App 会去 GitHub Gist 下载所有的 gist 记录,如果没有下载成功就会一直卡在登录界面(虽然不常见,但我以前试过这样)。也有可能是页面 render 的问题,可以 open dev tool 看看。
|
9
CosmoX OP @XYxe https://github.com/hackjutsu/Lepton/blob/master/app/index.js 里面的 updateUserGists(),也许我应该对登录设置一个 timeout 。
|
11
HLT 2017-02-03 11:55:44 +08:00
so cool
|
12
echohanyu 2017-02-03 12:02:49 +08:00
试用一下....不知道对于单纯记笔记如何..
|
13
chemzqm 2017-02-03 12:11:03 +08:00
我只关心有没有设置代理功能,公司用的服务大多在国内,切 VPN 比较麻烦。
|
14
xiaket 2017-02-03 12:18:27 +08:00
我还是觉得我自己在用的这个脚本比一个额外的程序好用... https://github.com/xiaket/etc/blob/master/bin/Snape
|
15
majinjing3 2017-02-03 12:42:29 +08:00 via Android
支持一下~
|
16
majinjing3 2017-02-03 12:46:11 +08:00 via Android
有一点比较奇怪,为啥不用图标呢,而用#edit 这样不常用的按钮图形?
|
17
sox 2017-02-03 12:55:17 +08:00
@CosmoX 高亮样式更好看,参考 https://github.com/egoist/docute/issues/53
|
18
hinate 2017-02-03 13:03:31 +08:00 via iPhone
赞下😁
|
19
ksco 2017-02-03 14:09:59 +08:00
小小 Star ,不成赞意
|
20
quericy 2017-02-03 14:28:58 +08:00
@majinjing3 #16 +1 井号换成 Logo 更好看 ,特别是 Language
|
21
sobigfish 2017-02-03 14:53:45 +08:00
出个本地化存储的 Sqlite ? 的 branch 可好?
|
22
CosmoX OP @chemzqm 暂时还没有内置代理。 GitHub server 在国内可以访问,但是某些地区可能不稳定。如果有相关设置代理经验,欢迎发 pull request 哈~
|
23
CosmoX OP @sobigfish 自己给自己发了个 offline mode 的 new feature issue 。还没想好本地存储的形式( db 还是文件?需要保密吗?如何保密?)和离线使用场景(电脑似乎都是一直联网的)。有好想法欢迎讨论~
|
24
CosmoX OP |
25
CosmoX OP @echohanyu 其实是可以的……甚至可以用 markdown 写……然后加个 markdown renderer ,每次遇到 md 文件自动渲染…… 哈哈哈
|
26
CosmoX OP @sox 哈哈,其实是这样的,所有 syntax highlight 的库本质上只是把关键词用<span>包起来,比如<span class="keyword">var</span> a = 123 ,本身不负责高亮样式。高亮样式是和加载 css 有关。 highlight.js 提供了十多种 css 样式,有好看有难看,我们也可以把 prismjs 的高亮样式 css 挪到这里用。我目前选择的是 GitHub 风格的高亮样式包,也许以后可以开放更多的主题选择( https://github.com/hackjutsu/Lepton/tree/master/app/utilities/vendor/highlightJS/styles )。
|
27
CosmoX OP @majinjing3 好问题!因为一旦使用了 button ,我就会各种纠结于 button 的大小、颜色、字体、间距、阴影,最后走火入魔…… 为了加快开发进度,我克制不使用 button ……
|
29
CosmoX OP Logo 灵感来自于写轮眼……
|
30
xinxing260 2017-02-03 15:24:03 +08:00
GistBox 和你的很类似。
|
31
sobigfish 2017-02-03 15:33:20 +08:00
主要是 github gist 不翻墙的情况下还是很慢的
本地 sqlite 的话,比如存储到办公室的公用机器上的话,就有个基本功能的(共同协作的)代码片段共享/协作库了 加密好像需求不大 |
32
sobigfish 2017-02-03 15:44:20 +08:00
或者本地服务器干脆实现个 gist 的就不用改主代码了
找到一个: https://github.com/bartTC/dpaste (但也只有基础的功能 没有历史版本 没有 oauth 等等) gist 服务器方面, lz 在国内假设一个的话,在加上这个 Lepton app , 可以当一个项目来运营了 |
33
bleaker 2017-02-03 16:03:32 +08:00
楼主用过 Dash 吗。。。
|
34
sobigfish 2017-02-03 16:13:01 +08:00
看到个类似的 https://github.com/Gisto/Gisto 不过也没有 active 了, 而且要丑一些
|
35
uestcfei 2017-02-03 16:21:10 +08:00
楼主棒棒的,我也觉得 gist 很好用,但就是少了一个方便发布的客户端。。另外如果能加上 markdown 的渲染和语法的高亮就更好啦。
|
36
xiaozi 2017-02-03 16:28:30 +08:00
我用的 SnippetsLab
|
37
seeker 2017-02-03 16:47:42 +08:00
强。 SnippetsLab 没有 win 版。 Dash 主要功能也不是这个。我早就觉得要有楼主这么个东西出来了,自己也构思过。
网上也有些类似的,但是要么界面丑陋,要么不更新了。 楼主加油,使用后哪里给反馈? |
38
bkmi 2017-02-03 17:30:45 +08:00 via Android
必须要赞一个
|
40
goldenlove 2017-02-03 17:51:17 +08:00
简单试用了下,挺简洁的,继续努力~
不过... markdown 不能实时预览,感觉废了一半... 短期若不好实现,可以加个 github 直达链接,也会方便不少? |
42
Garantion 2017-02-03 21:07:08 +08:00
挺好的,非常适合随手记录的场景,希望后续功能可以跟上。加油!
|
43
oldj 2017-02-03 21:14:50 +08:00
赞,「标签实现」的思路很棒。本来也想写一个的,楼主先实现了。👍
|
44
xuboying 2017-02-03 21:43:53 +08:00 via Android
我不需要笔记,我的笔记在 stackoverflow
|
45
heart4lor 2017-02-03 21:50:02 +08:00
感觉非常好用啊!
|
46
adoyle 2017-02-03 23:06:30 +08:00
支持一下
|
47
akavir 2017-02-03 23:23:06 +08:00
赞赞赞!
|
48
wujysh 2017-02-03 23:43:21 +08:00
赞,加油!
|
49
CosmoX OP @bleaker 没有啊。 Dash 好像没有 Windows 和 Linux 版本?(也许有但我没找到……)由于平时要在 macOS 、 Windows 、 Linux 多个环境切换,所以需要跨平台支持。
|
50
CosmoX OP @seeker 欢迎到 GitHub 的 issue 版块: https://github.com/hackjutsu/Lepton/issues
|
51
CosmoX OP @goldenlove 这是关于 Markdown 渲染的 new feature issue ,应该能很快实现出来。 https://github.com/hackjutsu/Lepton/issues/43
|
52
iyaozhen 2017-02-04 00:19:55 +08:00 via Android
支持,点赞,对我来说比较刚需。
|
53
CosmoX OP @goldenlove 也许可以点击头像跳转到 GitHub 网页端? 欢迎到 Issue page 补充想法: https://github.com/hackjutsu/Lepton/issues/44
|
54
uxstone 2017-02-04 00:21:38 +08:00
官网的字体是 Montserrat ?
感觉挺好看的 |
55
CosmoX OP @XYxe Gists 和 Login button 应该不能同时显示出来。可能是个 corner case 没处理好?不知道你方不方便到 GitHub Issue 版块描述一下你遇到的问题呢? https://github.com/hackjutsu/Lepton/issues
|
56
CosmoX OP @uxstone 秉着开源精神,附送官网 template 链接: https://startbootstrap.com/template-overviews/freelancer/
|
57
CosmoX OP @sobigfish 哈哈,那也是个很棒的软件。看了一下,用 NW.js 做的,和 Electron 类似框架,同个作者。可惜作者 Zhao Cheng 去了 GitHub 以后就专注于 Electron 了, NW.js 社区渐渐没那么活跃。如果想讨论本地 server 问题,可以给我发邮件哈 [email protected] ,后者去 Issue Page 也行。 https://github.com/hackjutsu/Lepton/issues
|
58
macroideal 2017-02-04 02:02:19 +08:00 via iPhone
LZ 是做前端的?
|
59
SeanLin 2017-02-04 02:08:25 +08:00
好看!
|
60
devopscode 2017-02-04 02:13:20 +08:00
感觉不错的样子,已经 star
|
61
CosmoX OP @macroideal 跨平台 SDK ( Win+macOS+Linux ),最近要开始支持 Node.js 。前端是自学的。
|
62
rashawn 2017-02-04 07:23:24 +08:00 via iPhone
建议楼主开发从各种编辑器 ide 桌面 capture 代码的插件 如果还是要复制粘贴的话 吸引力不大
|
63
scnace 2017-02-04 08:37:16 +08:00 via Android
听说以后能更加方便地抄自己的代码了 我就滚进来了(之前也是用 gist 来抄自己的代码的😂
|
66
SoulGem 2017-02-04 09:48:42 +08:00
赞一个~加油
|
67
CosmoX OP *** v1.0.0-beta.4 *** Released
1. 呐,大家要的 markdown rendering 2. 点击头像转跳 GitHub 主页 3. 修复某些情况下登录失败的 bug 4. 修复 Objective-C 高亮失败的 bug https://github.com/hackjutsu/Lepton/releases/tag/v1.0.0-beta.4 |
68
xwartz 2017-02-04 10:12:40 +08:00
我就奇怪这两天 PupaFM 怎么 star 数多起来了,原来是这样子,谢谢楼主。
|
70
gkiwi 2017-02-04 11:27:43 +08:00
@CosmoX 感谢!
不过现在困住了。。 直接下载的 beta4.dmg 打开后,通过 github 登录,第一次是个授权没太注意,好像是直接同意了(或者没同意?)。之后显示 Sync success 通知,然后又变成需要 github 登录的界面了。。反复如此~ |
72
CosmoX OP @gkiwi 登录一直是个很难 debug 的地方。你可以去 the GitHub Issue 页面描述一下问题吗? https://github.com/hackjutsu/Lepton/issues
|
75
billion 2017-02-04 12:24:41 +08:00 1
先给你 82 分,剩下 18 分以 666 的形式给你。
|
76
gkiwi 2017-02-04 12:49:16 +08:00
@CosmoX
https://github.com/hackjutsu/Lepton/issues/48 已给。 另外我尝试了 beta3 ,直接 Sync Fail ,当然你这边应该解决了( https://github.com/hackjutsu/Lepton/issues/46 )~ |
77
CosmoX OP @xream 在 @gkiwi 的帮助下, bug 修复了。 https://github.com/hackjutsu/Lepton/issues/48
原因是当 Gist 的 description 缺失时, GitHub Gist API 有时候返回 null ,有时候返回空字符串。 Lepton 处理了第二种,漏了第一种。现在上传了修复 bug 的版本,欢迎测试:) https://github.com/hackjutsu/Lepton/releases/tag/v1.0.0-beta.4 |
78
chemzqm 2017-02-04 14:10:49 +08:00
@CosmoX #22 我估计没什么时间写 PR ,你可以用 https://github.com/koichik/node-tunnel 这个模块,请求前做为参数传进去就完了,你做的这个 GUI 应用大概需要额外搞个配置界面让用户填配置。
|
79
SunFarrell 2017-02-04 14:36:52 +08:00
@CosmoX 本来想做一个和楼主想法一样的东西的,被楼主抢先了!
不过我们想法还真是相似,最近工作再用 electron + react + redux 重构之前公司 electron 的产品,楼主的项目给了我不少启发!!!!! |
80
CosmoX OP @SunFarrell 挺有意思的,欢迎一起进步:)
|
81
jedrek 2017-02-04 16:15:20 +08:00
如果未来能加上 GitHub Page 搭建博客的功能就好了,写笔记、发博客就方便简单得多了
|
82
CosmoX OP @SunFarrell 一点小体会, react+redux 未必特别适合 Electron 。因为 redux 的 state 在 renderer process 进行管理,难以 sync 到 main process (只能以 IPC 方式进行)。当进行大型多窗口 app 开发时候,目前还没有特别好的、运行在 main process 上的全局的状态管理解决方案(我在公司参与的项目)。但是如果 app 主要运行在单个窗口,那么用 redux 还是挺不错的。
|
83
CosmoX OP @jedrek 目前没有这方面的计划。如果需要在 github page 搭建博客,推荐使用 Hexo 。这是我用 hexo 搭的效果: http://hackjutsu.com/
|
84
est 2017-02-04 16:19:42 +08:00
一直没有搜集 snippet 的习惯。。。
|
87
CosmoX OP @chemzqm 有个关于 proxy 的 issue ,以后加入配置界面时候应该会把这功能加进去。 https://github.com/hackjutsu/Lepton/issues/45
|
88
CosmoX OP @sox 在 Issue https://github.com/egoist/docute/issues/53 上提交了 comment ,希望作者可以提交截图解释一下 Prismjs 如何改进 syntax highlight 。
|
89
yidinghe 2017-02-05 10:40:39 +08:00 via Android
感谢作者的努力,这个东西一定要试一试!
|
90
Akagi201 2017-02-06 18:56:58 +08:00
搜索功能太鸡肋, 基本搜索不到内容, 加强一下, 文本内容也是需要搜索的.
|
91
CosmoX OP @Akagi201 只能搜索 description 部分,暂时不支持代码,而且只能搜索英文整词。由于目前采用 Elasticlunr.js 作为搜索引擎,受到 Elasticlunr.js 本身的限制(英文整词)。
如果有好的引擎,欢迎推荐:) https://github.com/hackjutsu/Lepton/issues/28 https://github.com/hackjutsu/Lepton/issues/33 |
93
solobat 2017-02-07 10:12:02 +08:00
star 一个,试用一下
|
95
cchange 2017-02-09 11:26:12 +08:00 via iPhone
支持 纯文本是最可靠的 非常不错
|
96
hackpro 2017-02-09 11:44:35 +08:00
兹瓷 期待尽早上架 MAS
|
100
CosmoX OP @YimianDai 我个人感觉是 GitHub CDN 传过来的 JS 版本不对,似乎和前段时间 AWS 宕机有关?
这是今天别人报给 Lepton 的 issue : https://github.com/hackjutsu/Lepton/issues/120 我去 Electron 官网也报了一个: https://github.com/electron/electron/issues/8838 |