给组件库加个鸡腿

为了工作,也为了长点见识,费心费力捣腾了一个组件库antd-doddle,还是有成长的,总结都写了两篇,收获还是有的,如果你喜欢听故事: 从dist到es:发一个NPM库,我蜕了一层皮从24m到1m, 一个react+antd后台系统构建打包历程组件文档地址为什么要鸡腿组件库写出来了,项目也陆陆续续用了,但组里小伙伴用起来,总是要问这个配置怎么写,这个组件怎么用,手把手教学,总不能让小伙伴都去看源码实现吧,所以自己一发狠,用一整晚,写了一篇组件库使用指南,基本就是下图这个风格,示例代码有了,输入输出配置有了,输出效果有了,临时解决了一些问题,但随着业务膨胀,使用人员逐步增多,这种静态文档已经不能满足需求了。 鸡腿是要解决什么不是解决解饿,是让生活更富有。这一篇组件库使用指南,该有的内容都有,但问题还是很多: 整个组件库就一个指南,特别长,没有很好的分类,无法快速找到自己的所需;由于篇幅和实现难度,组件库demo太单一,覆盖面太小;组件库没有用例,每一次修改,没有demo用例来快速测试,发布了才测试,有比较大的风险,容易造成频繁发版;自己又想捣腾了;鸡腿原配方市面上有很多成熟的方案,推荐比较多的就是Docz,但试了一下,使用起来并没有介绍的那么好用,规范太死板,复杂demo编写实现困难,所以最后还是采用了antd的组件库方案Bisheng,毕竟是完美兼容react,与antd的组件库。花了一两天折腾了一下Bisheng,发现其还是很好用的,库更多是作为一个路由适配的数据流容器(RenderProps),可配置性很高,UI完全由使用人自己定制(官方称其为主题),库本身提供一个简易的主题Bisheng-Theme-One。只要搞懂了数据长什么样,编写一个展示性组件就显得不是那么难了,从下图看看(图片路由:http://localhost:8090/guide/introduce): data:是所有的文档信息,和你的文档结构具有强匹配,可以用此数据做文档菜单的数据源;pageData:是当前路由,匹配出的文档内容,也就是你正文要显示的内容;themeConfig:是一个主题定制对象,你想自己定义的变量,都可以在这个对象中增加utils:toReactComponent是暴露出来的一个常用方法当然,每一个主题有一个组件路由适配方案,需要在主题根目录下的index.js进行配置,一张图胜所有:左边的配置会告诉bisheng插件,在匹配到某个路由时去调用相应的组件。组件的具体实现,请参看源码,这里不再一一分析。 鸡腿的味道总的来说,鸡腿的味道还是很香的,菜单清晰,组件文档一目了然,还配有相应的demo,上两张高清大图感受一下。 捣腾到此为止,明天开始专心复习【捂脸】。

June 26, 2019 · 1 min · jiezi

优于 swagger 的 java markdown 文档生成框架-01-入门使用

设计初衷节约时间Java 文档一直是一个大问题。很多项目不写文档,即使写文档,对于开发人员来说也是非常痛苦的。不写文档的缺点自不用多少,手动写文档的缺点也显而易见:非常浪费时间,而且会出错。无法保证及时更新。代码已经变了,但是文档还要同步修改。需要强制人来维护这一种一致性。这很难。为什么不是 swagger-uijava 的文档有几类:jdk 自带的 doc 生成。这个以前实践给别人用过,别人用 C#,看到 java 的默认文档感觉很痛苦。就算是我们 java 开发者,也很讨厌看 jdk 的文档。看着不美观,也很累。swagger-ui 是基于 java 注解的文档生成工具。相对而言比较优雅,也非常强大。但是缺点也是有的。开发人员要写 jdk 原来的注释+注解。注解太多,导致写起来也很痛苦,大部分开发者后来还是选择了放弃。那么问题来了?我们怎么办才能尽可能的让开发人员,和文档阅读人员都乐于接受呢?jdk 自带的 doc 就是基于 maven 插件的,本项目也是。区别如下:尽可能的保证和 Java 原生注释一致,让开发者很容易就可以使用。尽可能的信息全面,但是文档简洁。让文档的阅读者享受到等同于手写文档的体验。将信息的获取和生成区分开。方便用户自己定义自己的输出方式。IDOCi-doc 项目简介为 java 项目生成项目文档。基于原生的 java 注释,尽可能的生成简介的文档。用户可以自定义自己的模板,生成自己需要的文档。特性基于 maven 项目生成包含大部分信息的元数据默认支持 markdown 简化文档的生成,支持自定义模板支持用户自定义文档生成器支持用户自定生成文档的类过滤器新特性添加字段类型别名,支持用户自定义快速入门需要jdk1.8+maven 3.x+maven 引入使用 maven 引入当前 idoc 插件。<build> <plugins> <plugin> <groupId>com.github.houbb</groupId> <artifactId>idoc-core</artifactId> <version>0.1.0</version> </plugin> </plugins></build>测试对象的创建为了演示文档,我们创建了一个 Address 对象。package com.github.houbb.idoc.test.model;/** * 地址 * @author binbin.hou * @since 0.0.1 /public class Address { /* * 城市 / private String country; /* * 街道 */ private String street; public String getCountry() { return country; } public void setCountry(String country) { this.country = country; } public String getStreet() { return street; } public void setStreet(String street) { this.street = street; }}执行插件mvn com.github.houbb:idoc-core:0.0.2:idoc命令行日志信息[INFO] ———————————— Start generate doc[INFO] 共计 【1】 个文件待处理,请耐心等待。进度如下:==================================================================================================== 100%[INFO] Generator doc with docGenerator: com.github.houbb.idoc.core.api.generator.ConsoleDocGenerator[INFO] ———————————— 文档信息如下:[类名] com.github.houbb.idoc.test.model.Address[类信息] {“comment”:“地址”,“docAnnotationList”:[],“docFieldList”:[{“comment”:“城市”,“name”:“country”,“type”:“java.lang.String”},{“comment”:“街道”,“name”:“street”,“type”:“java.lang.String”}],“docMethodList”:[{“docMethodParameterList”:[],“docMethodReturn”:{“fullName”:“java.lang.String”,“name”:“String”,“packageName”:“java.lang”},“docTagList”:[],“exceptionList”:[],“modifiers”:[“public”],“name”:“getCountry”,“seeList”:[],“signature”:“getCountry()”},{“docMethodParameterList”:[{“docAnnotationList”:[],“name”:“country”,“type”:“java.lang.String”}],“docMethodReturn”:{},“docTagList”:[],“exceptionList”:[],“modifiers”:[“public”],“name”:“setCountry”,“seeList”:[],“signature”:“setCountry(country)”},{“docMethodParameterList”:[],“docMethodReturn”:{“fullName”:“java.lang.String”,“name”:“String”,“packageName”:“java.lang”},“docTagList”:[],“exceptionList”:[],“modifiers”:[“public”],“name”:“getStreet”,“seeList”:[],“signature”:“getStreet()”},{“docMethodParameterList”:[{“docAnnotationList”:[],“name”:“street”,“type”:“java.lang.String”}],“docMethodReturn”:{},“docTagList”:[],“exceptionList”:[],“modifiers”:[“public”],“name”:“setStreet”,“seeList”:[],“signature”:“setStreet(street)”}],“docTagList”:[{“lineNum”:5,“name”:“author”,“parameters”:[“binbin.hou”],“value”:“binbin.hou”},{“lineNum”:6,“name”:“since”,“parameters”:[“0.0.1”],“value”:“0.0.1”}],“fullName”:“com.github.houbb.idoc.test.model.Address”,“modifiers”:[“public”],“name”:“Address”,“packageName”:“com.github.houbb.idoc.test.model”}[INFO] ———————————— Finish generate docMarkdown 的生成参考 03-自定义生成文件过滤器效果参见 idoc-test-全部文档.md进一步学习00-项目概览01-设计初衷02-插件的参数配置03-自定义生成文件过滤器04-字段类型别名支持开源地址idoc ...

March 18, 2019 · 1 min · jiezi

ADOC Guide

引言点开spring-boot的官方仓库,README却不是我们熟知的markdown格式,而是adoc。adoc的官网也明确列出了它的优势,可以装换为HTML5、DocBook及更多格式。测试了一下,装换为网页后,效果还不错。使用安装官网有好多种安装方法,APT、Homebrew、Chocolatey。挺喜欢Mac下的Homebrew的,十分方便,但是看了好多篇博客,都是用的Gem安装,心里想着,第一次接触这个,还是在借鉴前人的好,万一碰到问题也可以查阅资料,遂选择了Gem。Gem是Ruby的包管理器,我这里直接可以用,可能是系统自带的?gem install asciidoctor话不多说,进入shell就是敲。Fetching: asciidoctor-1.5.8.gem (100%)ERROR: While executing gem … (Gem::FilePermissionError)You don’t have write permissions for the /Library/Ruby/Gems/2.3.0 directory.错了,你没有写入/Library/Ruby/Gems/2.3.0的权限,上sudo。sudo gem install asciidoctorPassword:Fetching: asciidoctor-1.5.8.gem (100%)ERROR: While executing gem … (Gem::FilePermissionError)You don’t have write permissions for the /usr/bin directory.还是没有权限,你没有/usr/bin的权限,查阅了一下,在MacOS中,/usr/bin是受系统保护的目录,即便是root也无权操作。sudo gem install -n /usr/local/bin asciidoctor解决方案,换一个目录:猜想可能是创建软链接的时候出现错误,/usr/bin没有权限,那就把软链接放在/usr/local/bin里,一样可以用。一路顺利,安装成功。语法撰写基本没什么问题,就是原来markdown中这么写,然后切换到adoc中改了一下格式。官网有语法参考,和Bootstrap差不多,文档写得特别好。会有示例的demo,点击右上角的view result,下面会弹出来这段文字最终显示的效果。生成HTML生成HTML一点毛病都没有,很简单。asciidoctor README.adoc直接在后面写上文档名即可,即可生成同名的HTML文档。用浏览器打开,效果还不错。生成PDF生成PDF就没有那么顺利了。安装PDF生成工具:sudo gem install -n /usr/local/bin –pre asciidoctor-pdfasciidoctor-pdf README.adoc网上好多的解决方案虽然能解决,但是容易让人看懵圈,其实很简单的东西,就一直打这个命令,它提示什么,就安装什么。asciidoctor: WARNING: gem ‘concurrent-ruby’ is not installed. This gem is recommended when registering custom converters.提示少concurrent-ruby,装。sudo gem install -n /usr/local/bin concurrent-ruby再执行,不报错了,PDF也生成出来了,就是有问题。大家应该也看出问题了,少字!后来发现是字体的原理,字体没有这个字,就显示不出来。安装字体sudo asciidoctor-pdf-cjk-kai_gen_gothic-install这里应该是网络的问题,我下了好多次,一直是网络超时。最终放弃,去官方仓库手动下载字体。下字体,也不知道哪个有用哪个没用,干脆就把一共20个字体都下下来了。gem environment找到INSTALLATION DIRECTORY一项,这就是Gem软件包安装目录。/Library/Ruby/Gems/2.3.0/gems/asciidoctor-pdf-cjk-kai_gen_gothic-0.1.1/data/fonts把下载的字体移动到该目录中。asciidoctor-pdf -r asciidoctor-pdf-cjk-kai_gen_gothic -a pdf-style=KaiGenGothicCN README.adoc再次执行命令,执行时指定生成PDF的主题。大功告成!总结参考前人的经验,总好过自己的一意孤行。 ...

March 16, 2019 · 1 min · jiezi

文档资源搜索小工具 - 支持PDF,DOC,PPT,XLS

最近做了一个文档搜索小工具,当然不是网盘搜索工具,这个工具支持四种文件格式搜索(pdf,doc,ppt,xls),你只需要在搜索框中输入你想要搜索资源的关键词,点击搜索按钮即可获取相关资源,点击下载按钮,就可以直接在线浏览和下载。随着搜索关键词次数的增多,可索引到的资源量就越大 。这个工具还有一个【手气不错】的小功能,点击【手气不错】按钮,就可以随机获取一定量的资源,喜欢探索未知资源的小伙伴可以来尝试一下哦。这个工具支持多种国家语言搜索,个人比较喜欢搜索中文和英文的资源。下面是这个工具的屏幕截图以及链接:更多信息Maning文档资源搜索工具

January 16, 2019 · 1 min · jiezi