feat(tree): add file tree and handle readme correctly

ph1p · Sep 2, 2021 · 74017df · 74017df
1 parent 9edb992
commit 74017df
Show file tree

Hide file tree

Showing 18 changed files with 543 additions and 371 deletions.
diff --git a/example/documentation/.vuepress/config.js b/example/documentation/.vuepress/config.js
@@ -23,7 +23,7 @@ module.exports = {
         ],
         // Add the generated sidebar
         sidebar: {
-          ...sidebarTree('Test')
+          ...sidebarTree('Readme')
         }
       }
     }

diff --git a/example/documentation/code/README.md b/example/documentation/code/README.md
@@ -0,0 +1,18 @@
+## Example
+
+```bash
+# Install dependencies
+npm install
+
+# Run the CLI
+vuepress-jsdoc
+
+# Generate docs
+npm run docs
+
+# Run dev server
+npm run dev
+
+# Generate dist folder
+npm run build
+```
diff --git a/example/documentation/code/components/sub/sub-test.md b/example/documentation/code/components/sub/sub-test.md
@@ -1,4 +1,76 @@
 ---
 title: sub-test
 ---
-  # grid    > This is an example of creating a reusable grid component and using it with external data.      Author: [Rafael](https://github.com/rafaesc92)  Since: Version 1.0.1  Version: 1.0.5      ## Props  | Prop name     | Description | Type      | Values      | Default     |  | ------------- | ----------- | --------- | ----------- | ----------- |  | msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text || myF | Function | func | - | (param, param2) => {} || v-model | Model example<br/>`@model` true | string | - |  || data | describe data<br/>`@version` 1.0.5 | array | - |  || columns | get columns list | array | - |  || filterKey | filter key<br/>`@ignore` true | string | - | 'example' |    ## Methods  ### sortBy  > Sets the order  #### Params  | Param name     | Type        | Description  |  | ------------- |------------- | -------------|  | key | string | Key to order |  #### Return  | Type        | Description  |  | ------------- | -------------|  | string | Test |        ## Events  | Event name     | Properties     | Description  |  | -------------- |--------------- | -------------|  | success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event.    ## Slots  | Name          | Description  | Bindings |  | ------------- | ------------ | -------- |  | header | Use this slot header |  || footer | Use this slot footer |  |  ---
+
+  # grid
+
+
+  > This is an example of creating a reusable grid component and using it with external data.
+  
+
+  Author: [Rafael](https://github.com/rafaesc92)
+
+  Since: Version 1.0.1
+
+  Version: 1.0.5
+
+
+
+
+
+## Props
+
+  | Prop name     | Description | Type      | Values      | Default     |
+  | ------------- | ----------- | --------- | ----------- | ----------- |
+  | msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text |
+| myF | Function | func | - | (param, param2) => {} |
+| v-model | Model example<br/>`@model` true | string | - |  |
+| data | describe data<br/>`@version` 1.0.5 | array | - |  |
+| columns | get columns list | array | - |  |
+| filterKey | filter key<br/>`@ignore` true | string | - | 'example' |
+
+
+
+## Methods
+
+
+### sortBy
+  > Sets the order
+
+
+#### Params
+
+  | Param name     | Type        | Description  |
+  | ------------- |------------- | -------------|
+  | key | string | Key to order |
+
+
+#### Return
+
+  | Type        | Description  |
+  | ------------- | -------------|
+  | string | Test |
+
+
+
+
+## Events
+
+  | Event name     | Properties     | Description  |
+  | -------------- |--------------- | -------------|
+  | success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event.
+
+
+
+## Slots
+
+  | Name          | Description  | Bindings |
+  | ------------- | ------------ | -------- |
+  | header | Use this slot header |  |
+| footer | Use this slot footer |  |
+
+  ---
+
+
+
+
diff --git a/example/documentation/code/components/sub/sub-vue-md.md b/example/documentation/code/components/sub/sub-vue-md.md
@@ -1,4 +1,56 @@
 ---
 title: sub-vue-md
 ---
-  # Button    > The only true button.                ## Props  | Prop name     | Description | Type      | Values      | Default     |  | ------------- | ----------- | --------- | ----------- | ----------- |  | color | The color for the button. | string | - | '#333' || size | The size of the button | string | `small`, `normal`, `large` | 'normal' || onClick | Gets called when the user clicks on the button<br/>`@ignore` true | func | - | event => {<br>  console.log('You have clicked me!', event.target);<br>} |        ## Slots  | Name          | Description  | Bindings |  | ------------- | ------------ | -------- |  | default | Content of button |  |  ---Use vue live right here too````markdown```jsx live<Button>I’m transparent!</Button>``````````jsx live<Button>I’m transparent!</Button>```To render an example as highlighted source code remove the live modifier```html<Button>I’m transparent!</Button>```
+
+  # Button
+
+
+  > The only true button.
+  
+
+
+
+
+
+
+
+
+## Props
+
+  | Prop name     | Description | Type      | Values      | Default     |
+  | ------------- | ----------- | --------- | ----------- | ----------- |
+  | color | The color for the button. | string | - | '#333' |
+| size | The size of the button | string | `small`, `normal`, `large` | 'normal' |
+| onClick | Gets called when the user clicks on the button<br/>`@ignore` true | func | - | event => {<br>  console.log('You have clicked me!', event.target);<br>} |
+
+
+
+
+
+## Slots
+
+  | Name          | Description  | Bindings |
+  | ------------- | ------------ | -------- |
+  | default | Content of button |  |
+
+  ---
+Use vue live right here too
+
+````markdown
+```jsx live
+<Button>I’m transparent!</Button>
+```
+````
+
+```jsx live
+<Button>I’m transparent!</Button>
+```
+
+To render an example as highlighted source code remove the live modifier
+
+```html
+<Button>I’m transparent!</Button>
+```
+
+
+
diff --git a/example/documentation/code/components/test.md b/example/documentation/code/components/test.md
@@ -1,4 +1,76 @@
 ---
 title: test
 ---
-  # grid    > This is an example of creating a reusable grid component and using it with external data.      Author: [Rafael](https://github.com/rafaesc92)  Since: Version 1.0.1  Version: 1.0.5      ## Props  | Prop name     | Description | Type      | Values      | Default     |  | ------------- | ----------- | --------- | ----------- | ----------- |  | msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text || myF | Function | func | - | (param, param2) => {} || v-model | Model example<br/>`@model` true | string | - |  || data | describe data<br/>`@version` 1.0.5 | array | - |  || columns | get columns list | array | - |  || filterKey | filter key<br/>`@ignore` true | string | - | 'example' |    ## Methods  ### sortBy  > Sets the order  #### Params  | Param name     | Type        | Description  |  | ------------- |------------- | -------------|  | key | string | Key to order |  #### Return  | Type        | Description  |  | ------------- | -------------|  | string | Test |        ## Events  | Event name     | Properties     | Description  |  | -------------- |--------------- | -------------|  | success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event.    ## Slots  | Name          | Description  | Bindings |  | ------------- | ------------ | -------- |  | header | Use this slot header |  || footer | Use this slot footer |  |  ---
+
+  # grid
+
+
+  > This is an example of creating a reusable grid component and using it with external data.
+  
+
+  Author: [Rafael](https://github.com/rafaesc92)
+
+  Since: Version 1.0.1
+
+  Version: 1.0.5
+
+
+
+
+
+## Props
+
+  | Prop name     | Description | Type      | Values      | Default     |
+  | ------------- | ----------- | --------- | ----------- | ----------- |
+  | msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text |
+| myF | Function | func | - | (param, param2) => {} |
+| v-model | Model example<br/>`@model` true | string | - |  |
+| data | describe data<br/>`@version` 1.0.5 | array | - |  |
+| columns | get columns list | array | - |  |
+| filterKey | filter key<br/>`@ignore` true | string | - | 'example' |
+
+
+
+## Methods
+
+
+### sortBy
+  > Sets the order
+
+
+#### Params
+
+  | Param name     | Type        | Description  |
+  | ------------- |------------- | -------------|
+  | key | string | Key to order |
+
+
+#### Return
+
+  | Type        | Description  |
+  | ------------- | -------------|
+  | string | Test |
+
+
+
+
+## Events
+
+  | Event name     | Properties     | Description  |
+  | -------------- |--------------- | -------------|
+  | success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event.
+
+
+
+## Slots
+
+  | Name          | Description  | Bindings |
+  | ------------- | ------------ | -------- |
+  | header | Use this slot header |  |
+| footer | Use this slot footer |  |
+
+  ---
+
+
+
+
diff --git a/example/documentation/code/components/vue-md.md b/example/documentation/code/components/vue-md.md
@@ -1,4 +1,56 @@
 ---
 title: vue-md
 ---
-  # Button    > The only true button.                ## Props  | Prop name     | Description | Type      | Values      | Default     |  | ------------- | ----------- | --------- | ----------- | ----------- |  | color | The color for the button. | string | - | '#333' || size | The size of the button | string | `small`, `normal`, `large` | 'normal' || onClick | Gets called when the user clicks on the button<br/>`@ignore` true | func | - | event => {<br>  console.log('You have clicked me!', event.target);<br>} |        ## Slots  | Name          | Description  | Bindings |  | ------------- | ------------ | -------- |  | default | Content of button |  |  ---Use vue live right here too````markdown```jsx live<Button>I’m transparent!</Button>``````````jsx live<Button>I’m transparent!</Button>```To render an example as highlighted source code remove the live modifier```html<Button>I’m transparent!</Button>```
+
+  # Button
+
+
+  > The only true button.
+  
+
+
+
+
+
+
+
+
+## Props
+
+  | Prop name     | Description | Type      | Values      | Default     |
+  | ------------- | ----------- | --------- | ----------- | ----------- |
+  | color | The color for the button. | string | - | '#333' |
+| size | The size of the button | string | `small`, `normal`, `large` | 'normal' |
+| onClick | Gets called when the user clicks on the button<br/>`@ignore` true | func | - | event => {<br>  console.log('You have clicked me!', event.target);<br>} |
+
+
+
+
+
+## Slots
+
+  | Name          | Description  | Bindings |
+  | ------------- | ------------ | -------- |
+  | default | Content of button |  |
+
+  ---
+Use vue live right here too
+
+````markdown
+```jsx live
+<Button>I’m transparent!</Button>
+```
+````
+
+```jsx live
+<Button>I’m transparent!</Button>
+```
+
+To render an example as highlighted source code remove the live modifier
+
+```html
+<Button>I’m transparent!</Button>
+```
+
+
+
diff --git a/example/documentation/code/config.js b/example/documentation/code/config.js
diff --git a/example/documentation/code/test.md b/example/documentation/code/test.md
@@ -1,4 +1,85 @@
 ---
 title: test
 ---
-  # grid    > This is an example of creating a reusable grid component and using it with external data.      Author: [Rafael](https://github.com/rafaesc92)  Since: Version 1.0.1  Version: 1.0.5      ## Props  | Prop name     | Description | Type      | Values      | Default     |  | ------------- | ----------- | --------- | ----------- | ----------- |  | msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text || myF | Function | func | - | (param, param2) => {} || v-model | Model example<br/>`@model` true | string | - |  || data | describe data<br/>`@version` 1.0.5 | array | - |  || columns | get columns list | array | - |  || filterKey | filter key<br/>`@ignore` true | string | - | 'example' |    ## Methods  ### sortBy  > Sets the order  #### Params  | Param name     | Type        | Description  |  | ------------- |------------- | -------------|  | key | string | Key to order |  #### Return  | Type        | Description  |  | ------------- | -------------|  | string | Test |        ## Events  | Event name     | Properties     | Description  |  | -------------- |--------------- | -------------|  | success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event.    ## Slots  | Name          | Description  | Bindings |  | ------------- | ------------ | -------- |  | header | Use this slot header |  || footer | Use this slot footer |  |  ---# Home## Section 1Section 1## Section 2Section 2
+
+  # grid
+
+
+  > This is an example of creating a reusable grid component and using it with external data.
+  
+
+  Author: [Rafael](https://github.com/rafaesc92)
+
+  Since: Version 1.0.1
+
+  Version: 1.0.5
+
+
+
+
+
+## Props
+
+  | Prop name     | Description | Type      | Values      | Default     |
+  | ------------- | ----------- | --------- | ----------- | ----------- |
+  | msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text |
+| myF | Function | func | - | (param, param2) => {} |
+| v-model | Model example<br/>`@model` true | string | - |  |
+| data | describe data<br/>`@version` 1.0.5 | array | - |  |
+| columns | get columns list | array | - |  |
+| filterKey | filter key<br/>`@ignore` true | string | - | 'example' |
+
+
+
+## Methods
+
+
+### sortBy
+  > Sets the order
+
+
+#### Params
+
+  | Param name     | Type        | Description  |
+  | ------------- |------------- | -------------|
+  | key | string | Key to order |
+
+
+#### Return
+
+  | Type        | Description  |
+  | ------------- | -------------|
+  | string | Test |
+
+
+
+
+## Events
+
+  | Event name     | Properties     | Description  |
+  | -------------- |--------------- | -------------|
+  | success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event.
+
+
+
+## Slots
+
+  | Name          | Description  | Bindings |
+  | ------------- | ------------ | -------- |
+  | header | Use this slot header |  |
+| footer | Use this slot footer |  |
+
+  ---
+
+# Home
+
+## Section 1
+
+Section 1
+
+## Section 2
+
+Section 2
+
+
+