diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 1df1afa..7bbe58e 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -7,31 +7,39 @@ assignees: '' --- ## Describe the bug + A clear and concise description of what the bug is. ## To Reproduce + Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error ## Expected behavior + A clear and concise description of what you expected to happen. ## Screenshots + If applicable, add screenshots to help explain your problem. ## Desktop (please complete the following information): - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] ## Smartphone (please complete the following information): - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] ## Additional context + Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 57ce27d..58162e8 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -18,12 +18,15 @@ And you can write template's contents in Korean also. ## Version + Write the version that you are currently using. ## Development Environment + Write the browser type, OS and so on. ## Current Behavior + Write a description of the current operation. You can add sample code, 'CodePen' or 'jsfiddle' links. ```js @@ -31,4 +34,5 @@ Write a description of the current operation. You can add sample code, 'CodePen' ``` ## Expected Behavior + Write a description of the future action. diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index 52bcc63..c7129a6 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -17,13 +17,17 @@ assignees: '' --> ## Summary + A clear and concise description of what the question is. ## Screenshots + If applicable, add screenshots to help explain your question. ## Version + Write the version of the grid you are currently using. ## Additional context + Add any other context about the problem here. diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index d20634d..339ab5a 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -14,21 +14,21 @@ religion, or sexual identity and orientation. Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or +- The use of sexualized language or imagery and unwelcome sexual attention or advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2db45e4..641f415 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -5,87 +5,103 @@ First off, thanks for taking the time to contribute! πŸŽ‰ 😘 ✨ The following is a set of guidelines for contributing to TOAST UI. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request. ## Reporting Bugs + Bugs are tracked as GitHub issues. Search the list and try reproduce on [demo][demo] before you create an issue. When you create an issue, please provide the following information by filling in the template. Explain the problem and include additional details to help maintainers reproduce the problem: -* **Use a clear and descriptive title** for the issue to identify the problem. -* **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard. -* **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks. -* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. -* **Explain which behavior you expected to see instead and why.** -* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. +- **Use a clear and descriptive title** for the issue to identify the problem. +- **Describe the exact steps which reproduce the problem** in as many details as possible. Don't just say what you did, but explain how you did it. For example, if you moved the cursor to the end of a line, explain if you used a mouse or a keyboard. +- **Provide specific examples to demonstrate the steps.** Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets on the issue, use Markdown code blocks. +- **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. +- **Explain which behavior you expected to see instead and why.** +- **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. ## Suggesting Enhancements + In case you want to suggest for a TOAST UI product, please follow this guideline to help maintainers and the community understand your suggestion. Before creating suggestions, please check [issue list](../../labels/Enhancement) if there's already a request. Create an issue and provide the following information: -* **Use a clear and descriptive title** for the issue to identify the suggestion. -* **Provide a step-by-step description of the suggested enhancement** in as many details as possible. -* **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks. -* **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of a TOAST UI product which the suggestion is related to. -* **Explain why this enhancement would be useful** to most TOAST UI users. -* **List some other products where this enhancement exists.** +- **Use a clear and descriptive title** for the issue to identify the suggestion. +- **Provide a step-by-step description of the suggested enhancement** in as many details as possible. +- **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks. +- **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of a TOAST UI product which the suggestion is related to. +- **Explain why this enhancement would be useful** to most TOAST UI users. +- **List some other products where this enhancement exists.** ## First Code Contribution Unsure where to begin contributing to TOAST UI? You can start by looking through these `document`, `good first issue` and `help wanted` issues: -* **document issues**: issues which should be reviewed or improved. -* **good first issues**: issues which should only require a few lines of code, and a test or two. -* **help wanted issues**: issues which should be a bit more involved than beginner issues. +- **document issues**: issues which should be reviewed or improved. +- **good first issues**: issues which should only require a few lines of code, and a test or two. +- **help wanted issues**: issues which should be a bit more involved than beginner issues. ## Pull Requests ### Development WorkFlow + - Set up your development environment - Make change from a right branch - Be sure the code passes `npm run test` - Make a pull request ### Development environment + - Prepare your machine node and it's packages installed. - Checkout our repository - Install dependencies by `npm install && bower install` - Start webpack-dev-server by `npm run serve` ### Make changes + #### Checkout a branch + - **develop**: PR base branch. merge features, updates for next minor or major release - **master**: bug fix or document update for next patch release. develop branch will rebase every time master branch update. so keep code change to a minimum. - **production**: lastest release branch with distribution files. never make a PR on this - **gh-pages**: API docs, examples and demo #### Check Code Style + Run `npm run eslint` and make sure all the tests pass. #### Test + Run `npm run test` and verify all the tests pass. If you are adding new commands or features, they must include tests. If you are changing functionality, update the tests if you need to. #### Commit + Follow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md). ### Yes! Pull request + Make your pull request, then describe your changes. + #### Title + Follow other PR title format on below. + ``` : Short Description (fix #111) : Short Description (fix #123, #111, #122) : Short Description (ref #111) ``` -* capitalize first letter of Type -* use present tense: 'change' not 'changed' or 'changes' + +- capitalize first letter of Type +- use present tense: 'change' not 'changed' or 'changes' #### Description + If it has related to issues, add links to the issues(like `#123`) in the description. Fill in the [Pull Request Template](./docs/PULL_REQUEST_TEMPLATE.md) by check your case. ## Code of Conduct + This project and everyone participating in it is governed by the [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to dl_javascript@nhn.com. > This Guide is base on [atom contributing guide](CONTRIBUTING.md), [CocoaPods](http://guides.cocoapods.org/contributing/contribute-to-cocoapods.html) and [ESLint](http://eslint.org/docs/developer-guide/contributing/pull-requests) diff --git a/README.md b/README.md index 723cb9e..b5dc88d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # TOAST UI Doc -> TOAST UI Doc is a documentation generator used with TOAST UI products that allows you to create documentations for any JavaScript library easily. +> TOAST UI Doc is a documentation generator used with TOAST UI products that allows you to create documentations for any JavaScript library easily. [![GitHub release](https://img.shields.io/github/v/release/nhn/toast-ui.doc?include_prereleases)](https://github.com/nhn/toast-ui.doc/releases/latest) [![npm](https://img.shields.io/npm/v/@toast-ui/doc)](https://www.npmjs.com/package/@toast-ui/doc) [![GitHub license](https://img.shields.io/github/license/nhn/toast-ui.doc.svg)](https://github.com/nhn/toast-ui.doc/blob/master/LICENSE) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhn/toast-ui.doc/pulls) [![code with hearth by NHN](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN-ff1414.svg)](https://github.com/nhn) @@ -8,86 +8,86 @@ ## 🚩 Table of Contents -* [What is TOAST UI Doc?](#-what-is-toast-ui-doc) -* [Main Features](#-main-features) - * [API Page](#api-page) - * [Examples Page](#examples-page) - * [Search Feature](#search-feature) - * [Permalink](#permalink) - * [Customizable Layout Contents](#customizable-layout-contents) - * [Simple Builds](#simple-builds) -* [Demo](#-demo) -* [Usage](#-usage) - * [Install](#install) - * [Adding Config Files](#adding-config-files) - * [Setting Options in Config Files](#setting-options-in-config-files) - * [Running the Command](#running-the-command) -* [Contributing](#-contributing) -* [License](#-license) +- [What is TOAST UI Doc?](#-what-is-toast-ui-doc) +- [Main Features](#-main-features) + - [API Page](#api-page) + - [Examples Page](#examples-page) + - [Search Feature](#search-feature) + - [Permalink](#permalink) + - [Customizable Layout Contents](#customizable-layout-contents) + - [Simple Builds](#simple-builds) +- [Demo](#-demo) +- [Usage](#-usage) + - [Install](#install) + - [Adding Config Files](#adding-config-files) + - [Setting Options in Config Files](#setting-options-in-config-files) + - [Running the Command](#running-the-command) +- [Contributing](#-contributing) +- [License](#-license) ## πŸ“‘ What is TOAST UI Doc? -TOAST UI Doc is a documentation generator used with TOAST UI products, and is a module that creates a single documentation by combining the API document created by parsing the [JSDoc comments](https://jsdoc.app/) with the example page. TOAST UI Doc uses the [documentation.js](https://documentation.js.org) and [Gatsby](https://www.gatsbyjs.org). The layouts TOAST UI Doc is created with Gatsby to be a [React](https://reactjs.org/) component. Simply by configuring the options and running TOAST UI Doc, you can easily create documentations for any JavaScript library. +TOAST UI Doc is a documentation generator used with TOAST UI products, and is a module that creates a single documentation by combining the API document created by parsing the [JSDoc comments](https://jsdoc.app/) with the example page. TOAST UI Doc uses the [documentation.js](https://documentation.js.org) and [Gatsby](https://www.gatsbyjs.org). The layouts TOAST UI Doc is created with Gatsby to be a [React](https://reactjs.org/) component. Simply by configuring the options and running TOAST UI Doc, you can easily create documentations for any JavaScript library. ## 🎨 Main Features ### API Page -TOAST UI Doc parses the JSDoc composed within the JavaScript file to create the API page. The API page can mainly be categorized into seven types, and is represented as a menu in the Local Navigation Bar (LNB). +TOAST UI Doc parses the JSDoc composed within the JavaScript file to create the API page. The API page can mainly be categorized into seven types, and is represented as a menu in the Local Navigation Bar (LNB). -* MODULES -* EXTERNALS -* CLASSES -* NAMESPACES -* MIXINS -* TYPEDEF +- MODULES +- EXTERNALS +- CLASSES +- NAMESPACES +- MIXINS +- TYPEDEF Furthermore, each type has a submenu, and you can easily check the inheritance or mixin relationship, member (property, method) and other custom event API information. -* EXTENDS -* MIXES -* STATIC PROPERTIES -* STATIC METHODS -* INSTANCE METHODS -* EVENTS +- EXTENDS +- MIXES +- STATIC PROPERTIES +- STATIC METHODS +- INSTANCE METHODS +- EVENTS ### Examples Page -TOAST UI Doc reads the HTML file to directly create an Examples page. If you use appropriate selectors for each Example page, you can display HTML and JavaScript snippets within the page. The Try-it-yourself demos and each code snippet are provided as tabs. +TOAST UI Doc reads the HTML file to directly create an Examples page. If you use appropriate selectors for each Example page, you can display HTML and JavaScript snippets within the page. The Try-it-yourself demos and each code snippet are provided as tabs. ### Search Feature -You can use the search bar in the top portion of the local navigation bar (LNB) to search for any API and Example pages provided by TOAST UI Doc. TOAST UI Doc also comes with auto-complete feature to facilitate faster transversals between API and Examples pages for users. +You can use the search bar in the top portion of the local navigation bar (LNB) to search for any API and Example pages provided by TOAST UI Doc. TOAST UI Doc also comes with auto-complete feature to facilitate faster transversals between API and Examples pages for users. ### Permalink -TOAST UI Doc provides a [Github Permalink](https://help.github.com/en/articles/getting-permanent-links-to-files) feature. The permalinks can be found at the top right of each API area, and links the location where the JSDoc file is to the Github repository. Permalinks can be useful when directly accessing the API codes and JSDoc contents for reference. +TOAST UI Doc provides a [Github Permalink](https://help.github.com/en/articles/getting-permanent-links-to-files) feature. The permalinks can be found at the top right of each API area, and links the location where the JSDoc file is to the Github repository. Permalinks can be useful when directly accessing the API codes and JSDoc contents for reference. ### Customizable Layout Contents -TOAST UI Doc layouts can mainly be categorized in Header, Footer, LNB, Contents (Main, API, and Examples). You can use the config file to readily customize which content goes in Header and Footer areas. Furthermore, if necessary, you can configure whether or not to expose the Examples page. +TOAST UI Doc layouts can mainly be categorized in Header, Footer, LNB, Contents (Main, API, and Examples). You can use the config file to readily customize which content goes in Header and Footer areas. Furthermore, if necessary, you can configure whether or not to expose the Examples page. ### Simple Builds -TOAST UI Doc comes with Gatsby built into it, so when the build takes place, Gatsby script runs automatically to compile documentation files into a folder. By uploading the created folder onto the [Github Pages](https://pages.github.com/) or onto a server, you can easily create your public API page. +TOAST UI Doc comes with Gatsby built into it, so when the build takes place, Gatsby script runs automatically to compile documentation files into a folder. By uploading the created folder onto the [Github Pages](https://pages.github.com/) or onto a server, you can easily create your public API page. ## 🐾 Demo -* https://nhn.github.io/toast-ui.doc/latest/ +- https://nhn.github.io/toast-ui.doc/latest/ ## πŸ”¨ Usage ### Install -Use npm to install it globally. +Use npm to install it globally. -``` sh +```sh $ npm install -g @toast-ui/doc ``` ### Adding Config Files -Add your config files to the root of your working directory. The config file must be in the form of `tuidoc.config.json`. +Add your config files to the root of your working directory. The config file must be in the form of `tuidoc.config.json`. ``` project/ @@ -100,58 +100,56 @@ project/ The `tuidoc.config.json` file can be used to configure following options, and such options can be customized to create more approprite documents. For a full explanation on using options, refer to [here](https://github.com/nhn/toast-ui.doc/blob/master/tuidoc.config.json). - #### Configuring the Header Area -`[logo] / [text] [version]` can be exposed sequentially. +`[logo] / [text] [version]` can be exposed sequentially. -| Option | Type | Description | -| --- | --- | --- | -| `header.logo.src` | `string` | Configures the path for the logo image source. | -| `header.logo.linkUrl` | `?string` | Embeds a URL link onto the logo image. The default is set to be the root (`/`). | -| `header.title` | `object \| boolean` | Determines whether or not to display a text to the right of the logo. | -| `header.title.text` | `?string` | When displaying text, declares the value of the to be displayed text. The default is set to be the `name` value of the `package.json`. | -| `header.title.linkUrl` | `?string` | When displaying text, configures a URL link onto the text. The default is set to be the `github` value of `package.json`. | -| `header.version` | `?boolean` | Determines whether or not to display the module version. The default is set to be `true`, and the `version` value of `package.json` will be displayed. | +| Option | Type | Description | +| ---------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `header.logo.src` | `string` | Configures the path for the logo image source. | +| `header.logo.linkUrl` | `?string` | Embeds a URL link onto the logo image. The default is set to be the root (`/`). | +| `header.title` | `object \| boolean` | Determines whether or not to display a text to the right of the logo. | +| `header.title.text` | `?string` | When displaying text, declares the value of the to be displayed text. The default is set to be the `name` value of the `package.json`. | +| `header.title.linkUrl` | `?string` | When displaying text, configures a URL link onto the text. The default is set to be the `github` value of `package.json`. | +| `header.version` | `?boolean` | Determines whether or not to display the module version. The default is set to be `true`, and the `version` value of `package.json` will be displayed. | #### Configuring the Footer Area -A list of product related links including company information can be displayed. +A list of product related links including company information can be displayed. -| Option | Type | Description | -| --- | --- | --- | -| `footer[].title` | `string` | Configures the link text. | -| `footer[].linkUrl` | `string` | Configures the link URL. | +| Option | Type | Description | +| ------------------ | -------- | ------------------------- | +| `footer[].title` | `string` | Configures the link text. | +| `footer[].linkUrl` | `string` | Configures the link URL. | #### Configuring the Main Page -| Option | Type | Description | -| --- | --- | --- | -| `main.filePath` | `string` | Configures the file path to be displayed on the main page, and the file must be a markdown (`*.md`) file. The default is set to be the `README.md` file found in the project folder. | - +| Option | Type | Description | +| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `main.filePath` | `string` | Configures the file path to be displayed on the main page, and the file must be a markdown (`*.md`) file. The default is set to be the `README.md` file found in the project folder. | #### Configuring the API Page -| Option | Type | Description | -| --- | --- | --- | -| `api.filePath` | `string \| array` | Configures the file path to be displayed on the API page (the file to be parsed using JSDoc). When declaring the path to be the entire folder, declare it as a `string`, and for individual files, use an `array`. Only JavaScript files (`*.js`) can be parsed. | -| `api.permalink` | `object \| boolean` | Determines whether or not to use permalinks. If set to `false`, permalinks are hidden. | -| `api.permalink.repository` | `?string` | If using permalinks, configures the Github repository URL. The default is set to be the `github` value of `package.json`. | -| `api.permalink.ref` | `?string` | If using permalinks, configures the branch or the tag. This option can be used to declare the hash value of a specific commit. The default value is set to be `v{SemVer}`. | +| Option | Type | Description | +| -------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `api.filePath` | `string \| array` | Configures the file path to be displayed on the API page (the file to be parsed using JSDoc). When declaring the path to be the entire folder, declare it as a `string`, and for individual files, use an `array`. Only JavaScript files (`*.js`) can be parsed. | +| `api.permalink` | `object \| boolean` | Determines whether or not to use permalinks. If set to `false`, permalinks are hidden. | +| `api.permalink.repository` | `?string` | If using permalinks, configures the Github repository URL. The default is set to be the `github` value of `package.json`. | +| `api.permalink.ref` | `?string` | If using permalinks, configures the branch or the tag. This option can be used to declare the hash value of a specific commit. The default value is set to be `v{SemVer}`. | #### Configuring the Examples Page -| Option | Type | Description | -| --- | --- | --- | -| `examples` | `object \| boolean` | Configures options to use the Examples page. If set to `false`, the Examples tab is hidden from the local navigation bar. | -| `examples.filePath` | `string` | Configures the file path to be displayed on the Examples page. Declare the folder with example files in `string` format. | -| `examples.titles` | `object` | Maps each example file to the menu name to be displayed on the local navigation bar. The configuration should be made in `{ [Example File Name]: [LNB Menu Name]}` format. | +| Option | Type | Description | +| --------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `examples` | `object \| boolean` | Configures options to use the Examples page. If set to `false`, the Examples tab is hidden from the local navigation bar. | +| `examples.filePath` | `string` | Configures the file path to be displayed on the Examples page. Declare the folder with example files in `string` format. | +| `examples.titles` | `object` | Maps each example file to the menu name to be displayed on the local navigation bar. The configuration should be made in `{ [Example File Name]: [LNB Menu Name]}` format. | | `examples.globalErrorLogVariable` | `?string \| ?boolean` | Automatically inserts the code snippet that puts the error in the example page into a global variable. Variable names can be set directly as strings. If set to `true`, the default `errorLogs` is used. | #### Others -| Option | Type | Description | -| --- | --- | --- | +| Option | Type | Description | +| ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `pathPrefix` | `string` | Only used when the created documentation file exists at a location that is not the root of the Github repository or the server, and is used to declare the specific path. If not configured, the documentation may be prone to link reference error due to the lack of the resource file. | ### Configuring the Files for Examples Page @@ -172,37 +170,36 @@ In order to display the tabular content in the Examples page, additional configu ### Running the Command -TOAST UI Doc provides a `tuidoc` CLI, and running the following command will allow you to build your documentation based on the environment settings that you have configured above. First, the Gatsby, wrapped by TOAST UI Doc, is executed, and the `--serv` flag can be used to preview the created documentation on your local machine. +TOAST UI Doc provides a `tuidoc` CLI, and running the following command will allow you to build your documentation based on the environment settings that you have configured above. First, the Gatsby, wrapped by TOAST UI Doc, is executed, and the `--serv` flag can be used to preview the created documentation on your local machine. -``` sh +```sh $ tuidoc --serv ``` -When you are done verifying the local product, running `tuidoc` command will create two folders, `_latest` and `_[SemVer]`, under the project root directory. These folders can be used to upload to a server. +When you are done verifying the local product, running `tuidoc` command will create two folders, `_latest` and `_[SemVer]`, under the project root directory. These folders can be used to upload to a server. -``` sh +```sh $ tuidoc ``` -Or, you can add the commands as scripts to the project's `package.json` file. +Or, you can add the commands as scripts to the project's `package.json` file. -``` json +```json { - "scripts" : { - "doc:serve" : "tuidoc --serv", - "doc" : "tuidoc" + "scripts": { + "doc:serve": "tuidoc --serv", + "doc": "tuidoc" } } ``` - ## πŸ”§ Making a Pull Request -All TOAST UI products are open source. A Pull Request (PR) can be made upon fixing an issue or developing additional features to be implemented. +All TOAST UI products are open source. A Pull Request (PR) can be made upon fixing an issue or developing additional features to be implemented. ### Install -To install, first fork the `master` branch to your own personal repository. Then, clone the forked repository to your local machine, and install the following node module. Prior to development, first, make sure that the modules are properly installed. +To install, first fork the `master` branch to your own personal repository. Then, clone the forked repository to your local machine, and install the following node module. Prior to development, first, make sure that the modules are properly installed. ```sh $ git clone https://github.com/{your-personal-repo}/toast-ui.doc.git @@ -225,7 +222,7 @@ $ npm run tuidoc:dev #### Checking the Build Status -When the script is run, Gatsby begins the build as well as the server so that you can check that the created documentation performs properly. In order to check the status of the documentation before distribution, connect to `localhost:9000`. +When the script is run, Gatsby begins the build as well as the server so that you can check that the created documentation performs properly. In order to check the status of the documentation before distribution, connect to `localhost:9000`. ```sh $ npm run tuidoc:serve @@ -233,17 +230,16 @@ $ npm run tuidoc:serve ### Pull Request -Finally, perform a final check in order to make sure that there are no problems with your before making a pull request. If none are found, commit, and push it to the repository. +Finally, perform a final check in order to make sure that there are no problems with your before making a pull request. If none are found, commit, and push it to the repository. -For more detailed explanation on making a PR, refer to the **Contributing** appendix below. +For more detailed explanation on making a PR, refer to the **Contributing** appendix below. ## πŸ’¬ Contributing -* [Code of Conduct](https://github.com/nhn/toast-ui.doc/blob/master/CODE_OF_CONDUCT.md) -* [Contributing guideline](https://github.com/nhn/toast-ui.doc/blob/master/CONTRIBUTING.md) -* [Issue guideline](https://github.com/nhn/toast-ui.doc/tree/master/.github/ISSUE_TEMPLATE) -* [Commit convention](https://github.com/nhn/toast-ui.doc/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md) - +- [Code of Conduct](https://github.com/nhn/toast-ui.doc/blob/master/CODE_OF_CONDUCT.md) +- [Contributing guideline](https://github.com/nhn/toast-ui.doc/blob/master/CONTRIBUTING.md) +- [Issue guideline](https://github.com/nhn/toast-ui.doc/tree/master/.github/ISSUE_TEMPLATE) +- [Commit convention](https://github.com/nhn/toast-ui.doc/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md) ## πŸ“œ License diff --git a/__mocks__/gatsby.js b/__mocks__/gatsby.js index eb8f439..90beb24 100644 --- a/__mocks__/gatsby.js +++ b/__mocks__/gatsby.js @@ -1,3 +1,3 @@ const gatsby = jest.requireActual('gatsby'); -module.exports = {...gatsby, graphql: jest.fn(), Link: 'Link'}; +module.exports = { ...gatsby, graphql: jest.fn(), Link: 'Link' }; diff --git a/__tests__/components/ListGroup.spec.js b/__tests__/components/ListGroup.spec.js index a1f6b37..a1f886e 100644 --- a/__tests__/components/ListGroup.spec.js +++ b/__tests__/components/ListGroup.spec.js @@ -4,60 +4,30 @@ import ListItem from '../../src/components/ListItem'; describe('ListGroup component', () => { test('is not rendered when has no children.', () => { - let wrapper = shallow( - - ); + let wrapper = shallow(); expect(wrapper.find('.nav-group')).toHaveLength(0); }); test('has group title.', () => { - let wrapper = shallow( - - ); + let wrapper = shallow(); expect(wrapper.find('.title')).toHaveLength(0); - wrapper = shallow( - - ); + wrapper = shallow(); expect(wrapper.find('.title')).toHaveLength(1); }); - test('set title.', function() { - const wrapper = shallow( - - ); + test('set title.', function () { + const wrapper = shallow(); expect(wrapper.find('.title').text()).toBe('bar'); }); test('render list of items.', () => { const wrapper = shallow( - + ); expect(wrapper.find(ListItem)).toHaveLength(3); diff --git a/__tests__/components/ListItem.spec.js b/__tests__/components/ListItem.spec.js index 6762f19..70af631 100644 --- a/__tests__/components/ListItem.spec.js +++ b/__tests__/components/ListItem.spec.js @@ -5,11 +5,7 @@ import SubListGroups from '../../src/components/SubListGroups'; describe('ListItem component', () => { test('is created with name.', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper.find('a').text()).toBe('foo'); }); @@ -18,11 +14,7 @@ describe('ListItem component', () => { let wrapper; beforeEach(() => { - wrapper = shallow( - - ); + wrapper = shallow(); }); test('has toggle button.', () => { @@ -38,12 +30,7 @@ describe('ListItem component', () => { let wrapper; beforeEach(() => { - wrapper = shallow( - - ); + wrapper = shallow(); }); test('has toggle button.', () => { diff --git a/__tests__/components/SubListGroups.spec.js b/__tests__/components/SubListGroups.spec.js index ef43059..47d03f1 100644 --- a/__tests__/components/SubListGroups.spec.js +++ b/__tests__/components/SubListGroups.spec.js @@ -3,22 +3,13 @@ import SubListGroups from '../../src/components/SubListGroups'; describe('SubListGroups component', () => { test('is hidden by default.', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper.find('.hide')).toHaveLength(1); }); test('is shown.', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper.find('.show')).toHaveLength(1); }); diff --git a/__tests__/components/ToggleButton.spec.js b/__tests__/components/ToggleButton.spec.js index ac2d114..7f1abd9 100644 --- a/__tests__/components/ToggleButton.spec.js +++ b/__tests__/components/ToggleButton.spec.js @@ -3,40 +3,26 @@ import ToggleButton from '../../src/components/ToggleButton'; describe('ToggleButton component', () => { test('is created.', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper.find('.btn-toggle')).toHaveLength(1); }); test('is closed.', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper.find('.btn-toggle').hasClass('opened')).toBe(false); }); test('is opened.', () => { - const wrapper = shallow( - - ); + const wrapper = shallow(); expect(wrapper.find('.btn-toggle').hasClass('opened')).toBe(true); }); test('simulates click events.', () => { const onButtonClick = jest.fn(); - const wrapper = shallow( - - ); + const wrapper = shallow(); wrapper.find('button').simulate('click'); diff --git a/__tests__/components/layout.spec.js b/__tests__/components/layout.spec.js index 2367c9f..4c8763e 100644 --- a/__tests__/components/layout.spec.js +++ b/__tests__/components/layout.spec.js @@ -1,14 +1,16 @@ import React from 'react'; -import {Layout} from '../../src/components/layout'; +import { Layout } from '../../src/components/layout'; describe('Layout component', () => { test('render children.', () => { const wrapper = shallow( - +
); diff --git a/__tests__/jest-preprocess.js b/__tests__/jest-preprocess.js index 7575929..bfdab94 100644 --- a/__tests__/jest-preprocess.js +++ b/__tests__/jest-preprocess.js @@ -1,9 +1,6 @@ const babelOptions = { presets: ['@babel/react', '@babel/env'], - plugins: [ - '@babel/plugin-proposal-optional-chaining', - '@babel/plugin-proposal-class-properties' - ] + plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-class-properties'] }; module.exports = require('babel-jest').createTransformer(babelOptions); diff --git a/__tests__/jest-setup.js b/__tests__/jest-setup.js index 6a43c48..41d367e 100644 --- a/__tests__/jest-setup.js +++ b/__tests__/jest-setup.js @@ -1,8 +1,8 @@ -import {configure, shallow, render, mount} from 'enzyme'; +import { configure, shallow, render, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import graphql from 'graphql-mock'; -configure({adapter: new Adapter()}); +configure({ adapter: new Adapter() }); global.shallow = shallow; global.render = render; diff --git a/demo/examples/css/tuidoc-example-style.css b/demo/examples/css/tuidoc-example-style.css index 83322f9..accbacf 100644 --- a/demo/examples/css/tuidoc-example-style.css +++ b/demo/examples/css/tuidoc-example-style.css @@ -18,4 +18,4 @@ body { .contents { padding: 20px 52px; -} \ No newline at end of file +} diff --git a/demo/examples/example01-default-template.html b/demo/examples/example01-default-template.html index 38231a1..1f8a898 100644 --- a/demo/examples/example01-default-template.html +++ b/demo/examples/example01-default-template.html @@ -1,14 +1,14 @@ - + 1. Default Template
- Demo for using example pages + Demo for using example pages

code snippet for HTML

diff --git a/demo/src/class.js b/demo/src/class.js index 2592d00..c658ce0 100644 --- a/demo/src/class.js +++ b/demo/src/class.js @@ -14,7 +14,7 @@ * @param {string} options.artist.name - Name of artist * @param {string} [options.artist.type] - Type of artist * @param {string} [options.artist.debut] - Debut daofte of artist - * @param {object} [options.company] - Company of album + * @param {object} [options.company] - Company of album * @param {string} [options.company.agency] - Agency name of album * @param {string} [options.company.distributor] - Distributor name of album * @example @@ -34,19 +34,12 @@ * } * }; * const instance = new Album(options); - * + * * console.log(instance); */ class Album { constructor(options) { - const { - title, - genres = [], - playTime = 0, - active = true, - artist = {}, - company - } = options; + const { title, genres = [], playTime = 0, active = true, artist = {}, company } = options; /** * @type {string} @@ -100,7 +93,7 @@ class Album { * title: 'bar', * playTime: 60 * }); - * + * * Album.getDescription(album1); // "The total play time of "foo" album is 00:00:20." * Album.getDescription(album2); // "The total play time of "bar" album is 00:01:00." */ @@ -154,7 +147,7 @@ class Album { * // ... * genre: ['Pop', 'Jazz'] * }); - * + * * instance.getGenres(); // "Pop,Jazz" */ getGenres() { @@ -163,19 +156,19 @@ class Album { /** * Returns play time of all songs. - * @param {boolean} formatted - Whether use formatted play time or not + * @param {boolean} formatted - Whether use formatted play time or not * @returns {number|string} Play time * @example * const instance = new Album({ * // ... * playTime: 3600 * }); - * + * * instance.getPlayTime(); // 3600 * instance.getPlayTime(true); // "01:00:00" */ getPlayTime(formatted) { - let {playTime} = this; + let { playTime } = this; if (formatted) { return this.getFormattedTime(playTime); diff --git a/demo/src/event.js b/demo/src/event.js index 0c7b467..2a46ee9 100644 --- a/demo/src/event.js +++ b/demo/src/event.js @@ -14,12 +14,12 @@ * // ... * title: 'foo' * }); - * + * * instance.setActive(false); - * + * * instance.on('active', (ev) => { * const { title, active } = ev; - * + * * console.log(title); // "foo" * console.log(active); // false * }); diff --git a/demo/src/extends.js b/demo/src/extends.js index 95e002a..ab978f5 100644 --- a/demo/src/extends.js +++ b/demo/src/extends.js @@ -17,7 +17,7 @@ import Album from './class'; * @param {string} options.artist.name - Name of artist * @param {string} [options.artist.type] - Type of artist * @param {string} [options.artist.debut] - Debut daofte of artist - * @param {object} [options.company] - Company of album + * @param {object} [options.company] - Company of album * @param {string} [options.company.agency] - Agency name of album * @param {string} [options.company.distributor] - Distributor name of album * @param {number} [options.rank=999] - Rank of album @@ -39,7 +39,7 @@ import Album from './class'; * rank: 1 * }; * const instance = new ChartAlbum(options); - * + * * console.log(instance); */ class ChartAlbum extends Album { @@ -69,7 +69,7 @@ class ChartAlbum extends Album { * title: 'bar', * rank: 99 * }); - * + * * Album.getDescription(album1); // "The rank of "foo" album is 10." * Album.getDescription(album2); // "The rank of "bar" album is 99." */ diff --git a/demo/src/external.js b/demo/src/external.js index fcaec2d..75a15da 100644 --- a/demo/src/external.js +++ b/demo/src/external.js @@ -15,7 +15,7 @@ * @static * @example * const date = Date.now(); - * + * * console.log(date); // 1566379209918 */ @@ -25,6 +25,6 @@ * @example * const birthday = new Date('August 19, 1975 23:15:30'); * const date = birthday.getDate(); - * + * * console.log(date); // 19 */ diff --git a/demo/src/mixin.js b/demo/src/mixin.js index 6f0b009..375a691 100644 --- a/demo/src/mixin.js +++ b/demo/src/mixin.js @@ -14,7 +14,7 @@ var Eventful = { * @param {string} eventName - Name of the event. * @param {function} handler - The handler to call. */ - on: function(eventName, handler) { + on: function (eventName, handler) { // code... }, @@ -23,7 +23,7 @@ var Eventful = { * @param {string} eventName - Name of the event. * @param {Object} eventData - The data provided to each handler. */ - fire: function(eventName, eventData) { + fire: function (eventName, eventData) { // code... } }; @@ -34,13 +34,13 @@ var Eventful = { */ function ReleaseAlbum() { // code... -}; +} /** * Open release album and fire custom event. */ -ReleaseAlbum.prototype.open = function() { +ReleaseAlbum.prototype.open = function () { this.fire('open', {}); }; -mix(Eventful).into(ReleaseAlbum.prototype); \ No newline at end of file +mix(Eventful).into(ReleaseAlbum.prototype); diff --git a/demo/src/module.js b/demo/src/module.js index 01ba85e..a4a4940 100644 --- a/demo/src/module.js +++ b/demo/src/module.js @@ -12,7 +12,7 @@ * isNull, * isExisty * } from './module'; - * + * * isUndefined(); * isNull(); * isExisty(); diff --git a/demo/src/namespace.js b/demo/src/namespace.js index 744be01..0eb1a8e 100644 --- a/demo/src/namespace.js +++ b/demo/src/namespace.js @@ -12,7 +12,7 @@ * isNull, * isExisty * } = toastui.utils; - * + * * isUndefined(); * isNull(); * isExisty(); @@ -51,8 +51,4 @@ const isExisty = (param) => { return !isUndefined(param) && !isNull(param); }; -export { - isUndefined, - isNull, - isExisty -}; +export { isUndefined, isNull, isExisty }; diff --git a/docs/COMMIT_MESSAGE_CONVENTION.md b/docs/COMMIT_MESSAGE_CONVENTION.md index e7e6a6d..d3568b4 100644 --- a/docs/COMMIT_MESSAGE_CONVENTION.md +++ b/docs/COMMIT_MESSAGE_CONVENTION.md @@ -9,9 +9,11 @@ Logger description here if necessary BREAKING CHANGE: only contain breaking change ``` -* Any line of the commit message cannot be longer 100 characters! + +- Any line of the commit message cannot be longer 100 characters! ## Revert + ``` revert: commit @@ -20,30 +22,33 @@ More description if needed ``` ## Type + Must be one of the following: -* **feat**: A new feature -* **fix**: A bug fix -* **docs**: Documentation only changes -* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) -* **refactor**: A code change that neither fixes a bug nor adds a feature -* **perf**: A code change that improves performance -* **test**: Adding missing or correcting existing tests -* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation +- **feat**: A new feature +- **fix**: A bug fix +- **docs**: Documentation only changes +- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) +- **refactor**: A code change that neither fixes a bug nor adds a feature +- **perf**: A code change that improves performance +- **test**: Adding missing or correcting existing tests +- **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation ## Subject -* use the imperative, __present__ tense: "change" not "changed" nor "changes" -* don't capitalize the first letter -* no dot (.) at the end -* reference GitHub issues at the end. If the commit doesn’t completely fix the issue, then use `(refs #1234)` instead of `(fixes #1234)`. + +- use the imperative, **present** tense: "change" not "changed" nor "changes" +- don't capitalize the first letter +- no dot (.) at the end +- reference GitHub issues at the end. If the commit doesn’t completely fix the issue, then use `(refs #1234)` instead of `(fixes #1234)`. ## Body -* use the imperative, __present__ tense: "change" not "changed" nor "changes". -* the motivation for the change and contrast this with previous behavior. +- use the imperative, **present** tense: "change" not "changed" nor "changes". +- the motivation for the change and contrast this with previous behavior. ## BREAKING CHANGE -* This commit contains breaking change(s). -* start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this. + +- This commit contains breaking change(s). +- start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this. This convention is based on [AngularJS](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits) and [ESLint](https://eslint.org/docs/developer-guide/contributing/pull-requests#step2) diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md index fcad861..c72ae98 100644 --- a/docs/PULL_REQUEST_TEMPLATE.md +++ b/docs/PULL_REQUEST_TEMPLATE.md @@ -26,6 +26,7 @@ --> ### Please check if the PR fulfills these requirements + - [ ] It's submitted to right branch according to our branching model - [ ] It's right issue type on title - [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number) @@ -36,7 +37,6 @@ ### Description - - --- + Thank you for your contribution to TOAST UI product. πŸŽ‰ 😘 ✨ diff --git a/gatsby-node.js b/gatsby-node.js index 3af4be3..5f1900f 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,9 +1,6 @@ const path = require('path'); -exports.onCreateWebpackConfig = ({ - rules, - actions -}) => { +exports.onCreateWebpackConfig = ({ rules, actions }) => { actions.setWebpackConfig({ module: { rules: [ @@ -17,11 +14,8 @@ exports.onCreateWebpackConfig = ({ }); }; -exports.createPages = ({ - graphql, - actions -}) => { - const {createPage} = actions; +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions; return new Promise((resolve) => { graphql(` @@ -35,16 +29,14 @@ exports.createPages = ({ } } } - `).then(result => { - result.data.allNavigationJson.edges.forEach(({node}) => { - const { - pid, - type - } = node; + `).then((result) => { + result.data.allNavigationJson.edges.forEach(({ node }) => { + const { pid, type } = node; let filename = ''; - if (type === 'example') { // for static file using in iframe + if (type === 'example') { + // for static file using in iframe filename = pid.replace('tutorial-', ''); } diff --git a/jest.config.js b/jest.config.js index 94d0224..a25b3aa 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,24 +1,17 @@ module.exports = { - 'transform': { + transform: { '.(js|jsx)': '/__tests__/jest-preprocess.js' }, - 'transformIgnorePatterns': [ - 'node_modules/(?!(gatsby)/)' - ], - 'moduleNameMapper': { + transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'], + moduleNameMapper: { '\\.(jpg|jpeg|png|svg|woff|woff2)$': '/__mocks__/fileMock.js', '^(?!.*\\.module\\.scss$).*\\.scss$': '/__mocks__/styleMock.js' }, - 'testRegex': '(\\.(test|spec))\\.(jsx|js)$', - 'testPathIgnorePatterns': [ - '/node_modules/', - '/.cache/' - ], - 'globals': { - '__PATH_PREFIX__': '' + testRegex: '(\\.(test|spec))\\.(jsx|js)$', + testPathIgnorePatterns: ['/node_modules/', '/.cache/'], + globals: { + __PATH_PREFIX__: '' }, - 'testURL': 'http://localhost', - 'setupFiles': [ - '/__tests__/jest-setup.js' - ] + testURL: 'http://localhost', + setupFiles: ['/__tests__/jest-setup.js'] }; diff --git a/src/components/ApiNavigation.js b/src/components/ApiNavigation.js index f1d0906..c4688c1 100644 --- a/src/components/ApiNavigation.js +++ b/src/components/ApiNavigation.js @@ -1,58 +1,36 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {StaticQuery, graphql} from 'gatsby'; +import { StaticQuery, graphql } from 'gatsby'; import ListGroup from '../components/ListGroup'; class ApiNavigation extends React.Component { filterItems(type) { - return this.props.items.filter(item => { + return this.props.items.filter((item) => { return item.node.parentPid === type; }); } render() { - const { - selectedId - } = this.props; + const { selectedId } = this.props; return (
- + - + - - - + + +
); } @@ -62,7 +40,7 @@ const NavigationWrapper = (props) => ( ( } } `} - render={data => } + render={(data) => } /> ); diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js index 1decbbd..d3717af 100644 --- a/src/components/CodeBlock.js +++ b/src/components/CodeBlock.js @@ -5,7 +5,7 @@ class CodeBlock extends React.Component { render() { return ( 
-        
+
); } diff --git a/src/components/CodeInfo.js b/src/components/CodeInfo.js index b98df89..d74d850 100644 --- a/src/components/CodeInfo.js +++ b/src/components/CodeInfo.js @@ -3,33 +3,23 @@ import PropTypes from 'prop-types'; class CodeInfo extends React.Component { render() { - const { - filename, - lineNum, - linkUrl - } = this.props.data; + const { filename, lineNum, linkUrl } = this.props.data; - return linkUrl && ( - - - - {filename} - + return ( + linkUrl && ( + + + + {filename} + + + + + line {lineNum} + + - - - line {lineNum} - - - + ) ); } } diff --git a/src/components/ExampleItems.js b/src/components/ExampleItems.js index 75d83d9..e8e6f1f 100644 --- a/src/components/ExampleItems.js +++ b/src/components/ExampleItems.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; class ExampleItems extends React.Component { render() { - const {items} = this.props; + const { items } = this.props; const customItems = items.slice(0); customItems.pop(); @@ -13,16 +13,13 @@ class ExampleItems extends React.Component {
EXAMPLES
{customItems.map((item, index) => { - const { - description, - code - } = item; + const { description, code } = item; return (
{description ?

{description}

: null} 
-                  
+
); diff --git a/src/components/ExampleNavigation.js b/src/components/ExampleNavigation.js index 48a55c0..845c399 100644 --- a/src/components/ExampleNavigation.js +++ b/src/components/ExampleNavigation.js @@ -1,22 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {StaticQuery, graphql} from 'gatsby'; +import { StaticQuery, graphql } from 'gatsby'; import ListGroup from '../components/ListGroup'; class ExampleNavigation extends React.Component { render() { - const { - selectedId, - items - } = this.props; + const { selectedId, items } = this.props; return (
- +
); } @@ -26,7 +20,7 @@ const NavigationWrapper = (props) => ( ( } } `} - render={data => } + render={(data) => } /> ); diff --git a/src/components/Footer.js b/src/components/Footer.js index 4e4b5f8..527fa01 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -6,21 +6,11 @@ class Footer extends React.Component { return (