rhiokim / flybook Goto Github PK

View Code? Open in Web Editor NEW

80.0 8.0 8.0 672 KB

:airplane: FlyBook is a simple utility to generate static website such as gh-pages, manual of you projects

Home Page: https://rhiokim.github.io/flybook

JavaScript 53.83% CSS 46.17%

react static-site static-site-generator markdown documentation cli

flybook's Introduction

Just write markdown, Flybook will create your book.

FlyBook is a simple utility to generate static website. This is inspired by funbook and next.js export functionality

Rewrited using by React and React DOM Server

Goals

Already we know that we can have a number of document tools to publish markdown docs. So flybook will keep in simplest way to generate static web site for writing the manual of project

How flybook works

Features

Custom Styling (Google Fonts, Highlight.js)
Theme (only support light and dark now)
Responsive

How to use flybook

For example, Flybook documentation structure look like below

$ ls /path/to/project/docs
  docs
  |____advanced
  | \____theme.md
  |____basic
  | \____getting-started.md
  | \____install.md
  |____examples
  | \____syntax-highlight.md
  |____readme.md

globally

$ npm i -g flybook
$ cd /path/to/project

$ flybook docs
> FlyBook was generated at /Users/rhio/Works/my/fly-book/out

with NPM Project

$ cd /path/to/project
$ npm install flybook --save-dev
$
$ vi package.json

  ,
  "scripts": {
    ...,
    "docs": "flybook docs --outdir=out"
  },
  ...
// after save

$ npm run docs

Development

Turn on the auto build mode after npm install

$ git clone [email protected]:rhiokim/flybook
$ cd flybook
$ npm install
$ npm run build

After that you are able to see the notification with your code changes automatically

npm run release // build
npm run docs // generate a book with newest code

License

MIT

flybook's People

Contributors

Stargazers

Watchers

Forkers

djkeh chiyodad study-fork thomasjang mwasa trpgms kc17 presscafe

flybook's Issues

feature: add license and change log page

절대경로표기를 상대경로로 바꿀수 있나요?

상대 경로로 바꿔줄수는 없나요?

<link rel="stylesheet" href="/static/css/normalize.css" />
      <link rel="stylesheet" href="/static/css/flexboxgrid.min.css" />
      <link rel="stylesheet" href="/static/css/github-flavored-markdown.css" />
      <link rel="stylesheet" href="/static/css/main.css" />
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css" />

GNB 영역의 BI(제목), Home, Github 링크가 예상대로 만들어지지 않는 현상

사용환경: Windows 7, Git Bash, Chrome
node 버젼: 6.10.0
npm 버젼: 3.10.10
yarn 버젼: 0.24.5
flybook 버젼: 1.4.1
설치 패키지: yarn, flybook, gh-pages
증상: flybook으로 gh-pages 브랜치에 정적페이지 생성 후 결과물을 확인해보면 GNB 영역의 링크들이 예상대로 만들어지지 않습니다.
- BI
  - expected: https://djkeh.github.io/project
  - actual: https://djkeh.github.io/
- Home
  - expected: https://djkeh.github.io/project
  - actual: https://djkeh.github.io/
- Github
  - expected: https://github.com/djkeh/project
  - actual: 링크가 생성되지 않음
재현
1. yarn init
2. yarn add flybook -D
3. ./package.json 파일에 아래 참고와 같이 "scripts" 커맨드 추가
4. yarn docs
5. yarn pages
6. 깃헙 페이지 사이트로 가서 GNB 확인
참고: package.json

{
  "name": "project",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/djkeh/project.git",
  "author": "Uno Kim <[email protected]>",
  "license": "MIT",
  "scripts": {
      "docs": "flybook docs --outdir=out --silent --font=Noto+Sans --codeStyle=androidstudio --theme=light",
      "pages": "gh-pages -d out"
  },
  "devDependencies": {
    "flybook": "^1.4.1",
    "gh-pages": "^1.0.0"
  }
}

위 이슈 확인 부탁드립니다.
감사합니다~

feature: support custom document

As I can see, until now, custom document doesn't support yet. It's very powerful feature for me who would like to customize layout of the page. It can be possible that there are many layout template made by users. Concept is inspired from next.js. For example of no header / sidebar,

import {Head, Style, Body, Sidebar, Page, Footer} from 'flybook/layout'

export default () => (
     <html>
       <Head>
         <Title title="my boo">
         <Style>
            <Link src="xxx.css>
          </Style>
       </Head>
       <Body>
          <!-- NO SIDEBAR, NO HEADER -->
          <Page>
         <NextScript />
       </Body>
     </html>
)

feature: support wiki syntax

In my experience, it's often useful to use flybook as a wiki doc. So, It might be reasonable for the additional syntax or plugin to support wiki syntax and more

feature: theme

$ fly-book docs —theme=dark

계층적 리스트(`<li>`) 엘리먼트의 여백 개선 건의

Detailed Description

Environment

Node Version: 6.10.0
OS/Arch: Windows 7
Flybook Version: 1.4.4

Structure of Document Root

- docs
\_ sample.md
\_ toc.yml

Error

결과물의 스타일링에 개선이 가능한 요소가 보입니다.
리스트(<li>) 엘리먼트가 계층을 가질 경우, 하위 엘리먼트가 있는 <li>에 margin-top, margin-bottom이 각각 16px씩 잡혀 있어 보기에 위 아래 간격이 조금 부자연스럽게 떨어져 있습니다.
이 여백을 조절하면 더 보기 좋은 리스트 마크업을 만들 수 있을 것 같습니다.

다음의 마크업 코드로 테스트 가능합니다.

* line 1
* line 2
* line 3 // where margin problem happens
    * sub-line 1
    * sub-line 2

한 번 검토 부탁드립니다.

feature: i18n

ISO Specification : iso-639-1

Structure of Document Root

- docs
\_ ko
  \_ readme.md
  \_ basic
    \_ a.md
    \_ b.md
\_ en
\_ zh
\_ ...

Route Rule

[HOST]/ko/index.html <- docs/ko/readme.md
[HOST]/ko/basic/a.html <- docs/ko/basic/a.md
[HOST]/ko/basic/b.html <- docs/ko/basic/b.md
[HOST]/en/basic/a.html <- docs/en/basic/a.md

special char in file name

윈도우에서 파일경로가 잘못나와서 동작하지 않는 이슈

###에러 내용

> [email protected] docs C:\workspace\rxjs-book
> flybook docs --outdir=out

? There is no `toc.yml` which is table of contents file to generate static book
Please create table of content [Y/n]
(node:7508) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT:
no such file or directory, open 'C:\workspace\rxjs-book\docs\C:\workspace\rxjs-book\docs\part1\1-01.intro.md

Manage unsupported type in url of repository

I faced the issue that redirecting github page doesn't work when it uses of git+https url in package.json

  "repository": {
    "type": "git",
    "url": "git+https://github.com/seouljs/seouljs.github.io.git"
  },

flybook generates this elements below:

<a href="git+https://github.com/seouljs/seouljs.github.io.git">Github</a>

페이지 링크

제의 웹서버 설정이 디렉토리를 보여주는 식으로 되어있어서 알게되었습니다.

<a href="/part1\1-01.intro">1 01.intro</a>

/part1\1-01.intro/index.html로 명시 해주면 좋을것 같아요.
마찬가지로 상대경로로 되면 좋겠습니다. #6

오랜만에 이슈를 등록합니다. 오랫동안 참여를 하지 못했지만.. 까먹지 않기 위해 등록해 둡니다.

이를 제어할 수 있는 기능이 들어가면 좋을 것 같습니다.

resources are removed and throws error!

When I run npm task, face a problem.

env

node version 6.10.3
window7 23bit
flybook version 1.4.1

error message

> [email protected] docs C:\workspace\rxjs-book                                                               
> flybook docs --outdir=out                                                                                 
                                                                                                            
> Part1 - 1 01.intro                                                                                        
 C:\workspace\rxjs-book\out\part1\1-01.intro.html                                                           
> Part1 - 1 02.input                                                                                        
 C:\workspace\rxjs-book\out\part1\1-02.input.html                                                           
> Part1 - 1 03.propagation                                                                                  
 C:\workspace\rxjs-book\out\part1\1-03.propagation.html                                                     
fs.js:641                                                                                                   
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);                              
                 ^                                                                                          
                                                                                                            
Error: ENOENT: no such file or directory, open 'C:\workspace\rxjs-book\docs\resources\A-B-use.png'          
    at Error (native)                                                                                       
    at Object.fs.openSync (fs.js:641:18)                                                                    
    at copyFileSync (C:\workspace\rxjs-book\node_modules\fs-extra\lib\copy-sync\copy-file-sync.js:21:18)    
    at copySync (C:\workspace\rxjs-book\node_modules\fs-extra\lib\copy-sync\copy-sync.js:43:5)              
    at C:\workspace\rxjs-book\node_modules\flybook\dist\libs\main.js:175:27                                 
    at Array.forEach (native)                                                                               
    at exports.default (C:\workspace\rxjs-book\node_modules\flybook\dist\libs\main.js:174:9)                
    at gen (C:\workspace\rxjs-book\node_modules\flybook\dist\bin\cli.js:81:22)                              
    at Object.<anonymous> (C:\workspace\rxjs-book\node_modules\flybook\dist\bin\cli.js:115:5)               
    at Module._compile (module.js:570:32)

resources are removed

> git status
 deleted:    docs/resources/A-B-use.png

Object.entries() 함수 인식 문제

사용환경: Windows 7, Git CMD
- node 버젼: 6.10.0
- npm 버젼: 3.10.10
- yarn 버젼: 0.24.5
- 설치 패키지: yarn, react, react-dom(, object.entries - 해결을 위해 시도해봄)
증상: flybook docs 명령어를 실행할 경우 Object.entries is not a function TypeError 발생
소스코드 지점: flybook/components/layout.js, 26번째 줄
재현
1. yarn init
2. yarn add flybook -D
3. ./package.json 파일에 "scripts" 커맨드 추가: "docs": "flybook docs --outdir=out"
4. yarn docs
로그

C:\test>
C:\test>npm --version
3.10.10

C:\test>yarn --version
0.24.5

C:\test>type package.json
{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "docs": "flybook docs --outdir=out"
  },
  "devDependencies": {
    "flybook": "^1.0.7"
  }
}

C:\test>yarn docs
yarn docs v0.24.5
$ flybook docs --outdir=out
C:\test\node_modules\flybook\dist\components\layout.js:58
            Object.entries(toc[key]).map(function (item, i) {
                   ^

TypeError: Object.entries is not a function
    at C:\test\node_modules\flybook\dist\components\layout.js:58:20
    at Array.map (native)
    at module.exports (C:\test\node_modules\flybook\dist\components\layout.js:54:26)
    at C:\test\node_modules\react-dom\lib\ReactCompositeComponent.js:306:16
    at measureLifeCyclePerf (C:\test\node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (C:\test\node_modules\react-dom\lib\ReactCompositeComponent.js:305:14)
    at ReactCompositeComponentWrapper._constructComponent (C:\test\node_modules\react-dom\lib\ReactCompositeComponent.js:280:21)
    at ReactCompositeComponentWrapper.mountComponent (C:\test\node_modules\react-dom\lib\ReactCompositeComponent.js:188:21)
    at Object.mountComponent (C:\test\node_modules\react-dom\lib\ReactReconciler.js:46:35)
    at ReactCompositeComponentWrapper.performInitialMount (C:\test\node_modules\react-dom\lib\ReactCompositeComponent.js:371:34)
error Command failed with exit code 1.

C:\test>

위 이슈 확인 부탁드립니다.
감사합니다~

image files?

assets file such as image, audio and video should be copied to output directory

Supports a table of contents

you can create a table of contents using headline title like this

file A.md

## title
### title1
### title2

a table of contents

title
- title1
- title2

How about supporting a table of contents?

기능 질문

홈페이지 링크는 어떻게 변경하나요 ? :)
왼쪽 메뉴 리스팅 순서를 변경할 수 있나요?

feature: maintainers page

https://docs.npmjs.com/files/package.json#people-fields-author-contributors

문서의 LNB 링크를 반복 클릭하면 `.%5C` 특수기호가 붙는 현상

Detailed Description

Environment

Node Version: v6.10.0
OS/Arch: Windows 7
Flybook Version: v1.4.4

Structure of Document Root

- docs
\_ Korean.md
\_ English.md
\_ toc.yml

Error

LNB 영역의 문서 링크를 재차 클릭하면, 링크 중간에 .%5C 특수기호(.\을 의미)가 붙습니다.

재현 방법
1. yarn docs (flybook docs --outdir=out --prod --silent)
2. yarn pages (gh-pages -d out)
3. 웹페이지 방문하여 LNB에서 문서를 클릭
4. LNB 링크들을 확인

위 문제 확인 부탁드립니다.
감사합니다.

Documentation

: all of commands
: basic configuration package.json
: with CI/CD platform(travis, circle ci) - after seoul.js 1st seminar
: basic usage - https://rhiokim.github.io/flybook/basic/getting-started.html
: deploy to github pages - https://rhiokim.github.io/flybook/advanced/github-pages.html
: theme, syntax highlighting, web font - https://rhiokim.github.io/flybook/advanced/styling.html
: CNAME - https://rhiokim.github.io/flybook/advanced/github-CNAME.html

rhiokim / flybook Goto Github PK

flybook's Introduction

Goals

How flybook works

Features

How to use flybook

Development

License

flybook's People

Contributors

Stargazers

Watchers

Forkers

flybook's Issues

Environment

Structure of Document Root

Error

Structure of Document Root

Route Rule

env

error message

resources are removed

file A.md

a table of contents

Environment

Structure of Document Root

Error

Recommend Projects

Recommend Topics

Recommend Org