Skip to content
This repository was archived by the owner on Jan 9, 2022. It is now read-only.

Commit 45ac19a

Browse files
MichaelGitArtMichaelGitArt
committed
feat(docs): add docs section
1 parent be13ebd commit 45ac19a

15 files changed

+1778
-0
lines changed

‎docs/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
src/.vitepress/dist

‎docs/package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "vitepress-starter",
3+
"version": "1.0.0",
4+
"description": "Vite press starter",
5+
"main": "index.js",
6+
"repository": "https://www.github.com/bekaku",
7+
"author": "bekaku",
8+
"license": "MIT",
9+
"scripts": {
10+
"dev": "vitepress dev src",
11+
"build": "vitepress build src",
12+
"serve": "vitepress serve src"
13+
},
14+
"devDependencies": {
15+
"vitepress": "^0.16.1"
16+
}
17+
}

‎docs/src/.vitepress/config.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
module.exports = {
2+
title: "Gitart Vue Dialog",
3+
description: "Documentaion for Gitart Vue Dialog. Docs",
4+
lang: "en-US",
5+
vite: {
6+
server: {
7+
port: 3001,
8+
}
9+
},
10+
head: [
11+
['link', { rel: 'icon', href: '/favicon.png' }],
12+
],
13+
14+
themeConfig: {
15+
lastUpdated: "Last Updated",
16+
displayAllHeaders: true,
17+
activeHeaderLinks: false,
18+
19+
nav: [
20+
{ text: "Home", link: "/" },
21+
{ text: "Guide", link: "/guide/" },
22+
{ text: "API", link: "/api/" },
23+
{
24+
text: "npm",
25+
link: "https://www.npmjs.com/package/gitart-vue-dialog",
26+
target: "_blank",
27+
rel: false,
28+
},
29+
{
30+
text: "Github",
31+
link: "https://github.com/MichaelGitArt/gitart-vue-dialog",
32+
target: "_blank",
33+
rel: false,
34+
},
35+
],
36+
37+
sidebar: {
38+
'/guide/': getGuideSidebar(),
39+
'/': getGuideSidebar(),
40+
},
41+
},
42+
};
43+
44+
function getGuideSidebar() {
45+
return [
46+
{
47+
text: 'Introduction',
48+
children: [
49+
{ text: 'Getting Started', link: '/guide/' },
50+
]
51+
},
52+
// {
53+
// text: 'Guide',
54+
// children: [
55+
// { text: 'Chapter One', link: '/guide/getting-start' },
56+
// { text: 'Chapter two', link: '/guide/two' },
57+
// { text: 'API', link: '/api/' },
58+
// ]
59+
// },
60+
// {
61+
// text: 'Advanced',
62+
// children: [
63+
// { text: 'Frontmatter', link: '/guide/frontmatter' },
64+
// { text: 'Global Computed', link: '/guide/global-computed' },
65+
// { text: 'Global Component', link: '/guide/global-component' },
66+
// { text: 'Customization', link: '/guide/customization' },
67+
// {
68+
// text: 'Differences from Vuepress',
69+
// link: '/guide/differences-from-vuepress'
70+
// }
71+
// ]
72+
// },
73+
{
74+
text: 'API',
75+
link: '/api/'
76+
},
77+
]
78+
}

‎docs/src/.vitepress/theme/custom.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:root {
2+
--c-brand: #8f6cf9;
3+
--c-brand-light: #9271f4;
4+
}

‎docs/src/.vitepress/theme/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import './custom.css'
3+
4+
export default DefaultTheme

‎docs/src/api/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Coming soon

‎docs/src/guide/_.md

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!-- ## Table of Contents
2+
[[toc]] -->
3+
4+
<!-- ![Tux, the Linux mascot](/logo.png) -->
5+
6+
<iframe src="https://codesandbox.io/embed/friendly-sun-nbd4d?autoresize=1&fontsize=14&hidenavigation=1&theme=dark&hidedevtools=1"
7+
style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;"
8+
title="friendly-sun-nbd4d"
9+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
10+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
11+
></iframe>
12+
13+
14+
15+
<a href="https://www.youtube.com/watch?v=ojLrp2rmh0I
16+
" target="_blank"><img src="http://img.youtube.com/vi/ojLrp2rmh0I/0.jpg"
17+
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
18+
19+
## Reference
20+
1. [Vitepress official docs](https://vitepress.vuejs.org/)
21+
2. [markdown-it](https://markdown-it.github.io/)
22+
3. [Guthub vitepress docs Example](https://github.com/vuejs/vitepress/tree/master/docs)
23+
4. [Guthub markdown cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
24+
5. [Markdown basic syntax](https://www.markdownguide.org/basic-syntax/)
25+
6. [Markdown extended syntax](https://www.markdownguide.org/extended-syntax/)
26+
7. [A list of emojis](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json)
27+
7. [A list of Code syntax highlighting](https://prismjs.com/#languages-list)
28+
29+
## Routing!
30+
31+
<!-- [docs/index.md](/) -> /
32+
33+
[docs/guide/one.md](/guide/getting-start) -> /one
34+
35+
[docs/api/index.md](/api/) -> /api/
36+
37+
[docs/guide/two.md](/guide/two) -> /guide/two -->
38+
39+
### All these options work!
40+
41+
<!-- [docs/guide/one.md](/guide/getting-start) |
42+
[docs/api/index.md](/api/) |
43+
[docs/guide/two.md](/guide/two) -->
44+
45+
'# Hello VitePress'
46+
| Tables | Are | Cool |
47+
| ------------- |:-------------:| -----:|
48+
| col 3 is | right-aligned | $1600 |
49+
| col 2 is | centered | $12 |
50+
| zebra stripes | are neat | $1
51+
52+
| Headings | Are | Centered |
53+
| ------------- |:-------------:| -----: |
54+
| left align | centered | right align |
55+
| zebra striped | rows | easy |
56+
57+
### Blogging Like a Hacker
58+
---
59+
60+
head:
61+
- - meta
62+
- name: description
63+
content: hello
64+
- - meta
65+
- name: keywords
66+
content: super duper SEO
67+
68+
### Emoji
69+
---
70+
:tada: :100:
71+
72+
73+
74+
## Custom Containers
75+
76+
::: tip
77+
This is a tip
78+
:::
79+
80+
::: warning
81+
This is a warning
82+
:::
83+
84+
::: danger
85+
This is a dangerous warning
86+
:::
87+
88+
::: danger STOP
89+
Danger zone, do not proceed
90+
:::
91+
92+
Syntax Highlighting in Code Blocks
93+
---
94+
```js
95+
export default {
96+
name: 'MyComponent',
97+
// ...
98+
}
99+
```
100+
101+
```html
102+
<ul>
103+
<li v-for="todo in todos" :key="todo.id">
104+
{{ todo.text }}
105+
</li>
106+
</ul>
107+
```
108+
109+
```json{5}
110+
{
111+
"role": {
112+
"name": "develop",
113+
"expiredAt": "2021-05-01",
114+
"description": "Highlighted!",
115+
"status": true
116+
}
117+
}
118+
```
119+
120+
```js{4}
121+
export default {
122+
data () {
123+
return {
124+
msg: 'Highlighted!'
125+
}
126+
}
127+
}
128+
```
129+
130+
- Line ranges: for example {5-8}, {3-10}, {10-17}
131+
- Multiple single lines: for example {4,7,9}
132+
- Line ranges and single lines: for example {4,7-13,16,23-27,40}
133+
134+
```js{1,4,6-7}
135+
export default { // Highlighted
136+
data () {
137+
return {
138+
msg: `Highlighted!
139+
This line isn't highlighted,
140+
but this and the next 2 are.`,
141+
motd: 'VitePress is awesome',
142+
lorem: 'ipsum',
143+
}
144+
}
145+
}
146+
```
147+
148+
### Docs
149+
150+
::: v-pre
151+
`{{ This will be displayed as-is }}`
152+
:::
153+
154+
### text `<Tag/>`
155+
156+
---
157+
head:
158+
- - meta
159+
- name: description
160+
content: hello
161+
- - meta
162+
- name: keywords
163+
content: super duper SEO
164+
---

‎docs/src/guide/index.md

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
2+
![Tux, the Linux mascot](/gitart-dialog-logo.svg)
3+
4+
5+
::: warning Vue 3 only
6+
Remember that the package only works with **Vue 3**
7+
:::
8+
9+
## Package installation
10+
11+
```bash
12+
yarn add gitart-vue-dialog
13+
npm install gitart-vue-dialog
14+
```
15+
16+
Then you should add somewhere in your script file or component the import of Dialog component:
17+
18+
```js
19+
import "gitart-vue-dialog/dist/style.css";
20+
import { GDialog } from "gitart-vue-dialog";
21+
```
22+
23+
After that register this component locally or globally
24+
25+
## Minimal working example
26+
27+
```js
28+
// main.js
29+
import "gitart-vue-dialog/dist/style.css";
30+
```
31+
32+
```js
33+
// App.vue
34+
import { GDialog } from "gitart-vue-dialog";
35+
36+
export default {
37+
components: {
38+
GDialog,
39+
},
40+
data: () => ({
41+
dialogState: false,
42+
}),
43+
44+
methods: {
45+
onOpen() {
46+
this.dialogState = true;
47+
},
48+
},
49+
}
50+
```
51+
52+
```html
53+
<GDialog v-model="dialogState">
54+
Content
55+
</GDialog>
56+
57+
<button @click="onOpen">Open Dialog</button>
58+
```

‎docs/src/guide/two.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
'# guide two.md'

‎docs/src/index.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
home: true
3+
heroImage: /gitart-dialog-logo.svg
4+
heroAlt: Gitart Vue Dialog
5+
heroText: Gitart Vue Dialog
6+
tagline: Beautiful dialogs (Vue 3 only)
7+
8+
actionText: View Docs
9+
actionLink: /guide/
10+
11+
altActionText: Demo
12+
altActionLink: https://michaelgitart.github.io/gitart-vue-dialog
13+
14+
features:
15+
- title: Customizable
16+
details: Stylize your dialogues as you wish. By default, there is only a frame to minimize the size of the package
17+
18+
- title: Launch Programmatically
19+
details: Run your dialogs from any method without inserting them into the template
20+
21+
- title: Typescript Support
22+
details: Take full advantage of typescript
23+
24+
25+
footer: MIT Licensed | Copyright © 2021-present Michael Gitart
26+
---
27+
28+
```bash
29+
# gitart-vue-dialog
30+
yarn add gitart-vue-dialog
31+
npm install gitart-vue-dialog
32+
```
33+
34+
```js
35+
import "gitart-vue-dialog/dist/style.css";
36+
import { GDialog } from "gitart-vue-dialog";
37+
```

‎docs/src/public/_headers

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/assets/*
2+
cache-control: max-age=31536000
3+
cache-control: immutable

‎docs/src/public/favicon.ico

15 KB
Binary file not shown.

‎docs/src/public/favicon.png

26.5 KB
Loading

0 commit comments

Comments
 (0)