feat: apply tuidoc (close #27) (#28)

nhn · Feb 12, 2019 · 3b1833b · 3b1833b
1 parent 2af0149
commit 3b1833b
Show file tree

Hide file tree

Showing 16 changed files with 3,672 additions and 3,110 deletions.
diff --git a/README.md b/README.md
@@ -71,9 +71,9 @@ tui.usageStatistics = false;
 
 
 ## 🐾 Examples
-* [Basic](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example01-basic.html) : Example of using default options.
-* [Batch transfer](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example02-batch-transfer.html) : Example of transferring files in batches instead of uploading them directly.
-* [Using the list UI](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example05-table-ui.html) : Example of creating a list of transfer files in the form of a table.
+* [Basic](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example01-basic) : Example of using default options.
+* [Batch transfer](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example02-batch-transfer) : Example of transferring files in batches instead of uploading them directly.
+* [Using the list UI](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example05-table-ui) : Example of creating a list of transfer files in the form of a table.
 
 More examples can be found on the left sidebar of each example page, and have fun with it.
 
@@ -137,7 +137,7 @@ tui.file-uploader/
 ### HTML
 
 Add the container element to create the component as an option.
-See [here](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example01-basic.html#) for information about the added element.
+See [here](https://nhnent.github.io/tui.file-uploader/latest/tutorial-example01-basic) for information about the added element.
 
 ### JavaScript
 
@@ -155,10 +155,10 @@ var FileUploader = require('tui-file-uploader'); /* CommonJS */
 ```
 
 ``` javascript
-import {FileUploader} from 'tui-file-uploader'; /* ES6 */
+import FileUploader from 'tui-file-uploader'; /* ES6 */
 ```
 
-You can create an instance with [options](https://nhnent.github.io/tui.file-uploader/latest/Uploader.html) and call various APIs after creating an instance.
+You can create an instance with [options](https://nhnent.github.io/tui.file-uploader/latest/Uploader) and call various APIs after creating an instance.
 
 ``` javascript
 var container = document.getElementById('tui-file-uploader');
@@ -168,7 +168,7 @@ var instance = new FileUploader(container, { ... });
 instance.getCheckedList();
 ```
 
-For more information about the API, please see [here](https://nhnent.github.io/tui.file-uploader/latest/Uploader.html).
+For more information about the API, please see [here](https://nhnent.github.io/tui.file-uploader/latest/Uploader).
 
 
 ## 🔧 Pull Request Steps

diff --git a/examples/css/docs.css b/examples/css/docs.css
diff --git a/examples/css/tui-example-style.css b/examples/css/tui-example-style.css
@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.code-description {
+  padding: 22px 52px;
+  background-color: rgba(81, 92, 230, 0.1);
+  line-height: 1.4em;
+}
+
+.code-description,
+.code-description a {
+  font-family: Arial;
+  font-size: 14px;
+  color: #515ce6;
+}
+
+ .code-html {
+  padding: 20px 52px;
+}
diff --git a/examples/example.json b/examples/example.json
diff --git a/examples/example01-basic.html b/examples/example01-basic.html
@@ -3,12 +3,12 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with normal transfer</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example just show normal transfer action.<br>
             Each server request and response data is a mocking data. (not real)<br>
             So, the information of the selected file is not the same as in the list view.

diff --git a/examples/example02-batch-transfer.html b/examples/example02-batch-transfer.html
@@ -3,12 +3,12 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with batch transfer</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example just show batch transfer action.<br>
             Each server request and response data is a mocking data. (not real)<br>
             So, the information of the selected file is not the same as in the list view.

diff --git a/examples/example03-folder.html b/examples/example03-folder.html
@@ -3,12 +3,12 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with selecting folder</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example just show selecting folder.<br>
             Each server request and response data is a mocking data. (not real)<br>
             So, the information of the selected file is not the same as in the list view.

diff --git a/examples/example04-simple-ui.html b/examples/example04-simple-ui.html
@@ -3,12 +3,12 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with simple list</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example just show a list style.<br>
             So, don't include submit button despite of using batch transfer.
         </div>

diff --git a/examples/example05-table-ui.html b/examples/example05-table-ui.html
@@ -3,12 +3,12 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with table list</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example just show a list style.<br>
             So, don't include submit button despite of using batch transfer.
         </div>

diff --git a/examples/example06-dropzone.html b/examples/example06-dropzone.html
@@ -3,12 +3,12 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with dropzone</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example just show using dropzone in table list. (support modern browsers)<br>
             So, don't include submit button despite of using batch transfer.
         </div>

diff --git a/examples/example07-customizing.html b/examples/example07-customizing.html
@@ -3,13 +3,13 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with customizing view</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-component-file-uploader.css" />
-        <link rel="stylesheet" href="css/service.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/service.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example jsut show customizing the view in service.<br>
             Each server request and response data is a mocking data. (not real)<br>
             So, the request data is not same as the response data like uploaded file's total count or size.

diff --git a/examples/example08-local-test.html b/examples/example08-local-test.html
@@ -3,13 +3,13 @@
     <head lang="en">
         <meta charset="UTF-8">
         <title>FileUploader with customizing view</title>
-        <link rel="stylesheet" href="css/docs.css" />
-        <link rel="stylesheet" href="../dist/tui-file-uploader.css" />
-        <link rel="stylesheet" href="css/service.css" />
+        <link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
+        <link rel="stylesheet" type="text/css" href="../dist/tui-file-uploader.css" />
+        <link rel="stylesheet" type="text/css" href="./css/service.css" />
     </head>
 
     <body>
-        <div class="explain">
+        <div class="code-description">
             This example can test all features in local enviroment. (using <a href="https://nodejs.org/ko/">nodejs</a>)<br>
             So, server request &amp; response is not executed in this page.<br>
             How to use? Referring to <a href="https://github.com/nhnent/tui.file-uploader/wiki/Test-on-local-enviroment" target="_blank">the wiki's document.</a>.