1 | 👉🏻 [website](https://www.demosify.com) | 👉🏻 [online demo](https://demosify.github.io/demosify-demo/)
|
2 |
|
3 | # DEMOSIFY
|
4 |
|
5 | Create a playground to show the demos of your project.
|
6 |
|
7 | ![](docs/banner-s.jpg)
|
8 |
|
9 | ## Quick start
|
10 |
|
11 | 1. install @demosify/core
|
12 |
|
13 | ```bash
|
14 | npm install @demosify/core --save-dev
|
15 | ```
|
16 |
|
17 | 2. Create `.demosrc.js` file in your project root.
|
18 |
|
19 | ```js
|
20 | module.exports = {
|
21 | name: 'YOUR PROJECT NAME',
|
22 | }
|
23 | ```
|
24 |
|
25 | 3. Create `demos` directory in your project root. Add your demos in `demos` directory.
|
26 |
|
27 | ```bash
|
28 | mkdir demos
|
29 | mkdir demos/demo1
|
30 | ```
|
31 |
|
32 | 4. Create a `config.js` file in each of your demos, e.g. `demos/demo1`.
|
33 |
|
34 | ```js
|
35 | // config.js
|
36 | const javascript = `console.log('this is a demo')`;
|
37 |
|
38 | export default {
|
39 | javascript,
|
40 | }
|
41 | ```
|
42 |
|
43 | 5. Create a `.demoList.json` file in your `demos` directory. Specify all your demos show in sidebar.
|
44 |
|
45 | ```js
|
46 | [
|
47 | "demo1",
|
48 | // ...
|
49 | ]
|
50 | ```
|
51 |
|
52 | 6. Add NPM scripts in your `package.json`:
|
53 |
|
54 | ```json
|
55 | "scripts": {
|
56 | "demo:dev": "demosify --serve",
|
57 | "demo:prod": "demosify --prod"
|
58 | }
|
59 | ```
|
60 |
|
61 | 7. Run `npm run demo:dev`, visit `http://localhost:3000`. You will see the playground. ✌🏻
|
62 |
|
63 | ## Load sample files
|
64 |
|
65 | You can load sample files though config.js.
|
66 |
|
67 | ```js
|
68 | export default async () => {
|
69 | const [javascript, html, css] = await Promise.all([
|
70 | import('!raw-loader!./index.js'),
|
71 | import('!raw-loader!./index.html'),
|
72 | import('!raw-loader!./style.css'),
|
73 | ]);
|
74 |
|
75 | return {
|
76 | javascript,
|
77 | html,
|
78 | css,
|
79 | }
|
80 | }
|
81 | ```
|
82 |
|
83 | Add `index.js`, `index.html` and `style.css` files in your demo directory.
|
84 |
|
85 | ```js
|
86 | console.log('This is a demo.');
|
87 | ```
|
88 |
|
89 | ```html
|
90 | <!DOCTYPE html>
|
91 | <html lang="en">
|
92 | <head>
|
93 | <meta charset="UTF-8">
|
94 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
95 | <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
96 | <title>DEMO</title>
|
97 | </head>
|
98 | <body>
|
99 | <div id="app"></div>
|
100 | </body>
|
101 | </html>
|
102 | ```
|
103 |
|
104 | ```css
|
105 | /* demo stylesheet */
|
106 |
|
107 | body {
|
108 | background-color: red;
|
109 | }
|
110 | ```
|
111 |
|
112 | These files will be loaded to your playground.
|
113 |
|
114 | ## Deploy
|
115 |
|
116 | Run `npm run demo:prod`.
|
117 |
|
118 | All the demos will be deploy to production into `dist` directory of your project.
|
119 |
|
120 | ## Thanks to
|
121 |
|
122 | Special thanks to [Poi](https://github.com/egoist/poi).
|
123 |
|
124 | Demosify is inspired and powered by [Poi](https://poi.js.org/).
|