https://github.com/demosify/demosify

Create a playground to show the demos of your projects.
https://github.com/demosify/demosify

demo github-pages playground samples vue

Last synced: 3 months ago
JSON representation

Create a playground to show the demos of your projects.

• Host: GitHub
• URL: https://github.com/demosify/demosify
• Owner: demosify
• License: mit
• Created: 2019-06-25T11:35:19.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-05-18T17:09:30.000Z (over 2 years ago)
• Last Synced: 2024-05-02T12:41:25.046Z (7 months ago)
• Topics: demo, github-pages, playground, samples, vue
• Language: Vue
• Homepage: https://www.demosify.com
• Size: 815 KB
• Stars: 156
• Watchers: 4
• Forks: 15
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
👉🏻 [website](https://www.demosify.com) | 👉🏻 [online demo](https://demosify.github.io/demosify-demo/)

# DEMOSIFY

Create a playground to show the demos of your project.

![](docs/banner-s.jpg)

## Quick start

1. install @demosify/core

```bash

npm install @demosify/core --save-dev

```

2. Create `.demosrc.js` file in your project root.

```js

module.exports = {

  name: 'YOUR PROJECT NAME',

}

```

3. Create `demos` directory in your project root. Add your demos in `demos` directory.

```bash

mkdir demos

mkdir demos/demo1

```

4. Create a `config.js` file in each of your demos, e.g. `demos/demo1`.

```js

// config.js

const javascript = `console.log('this is a demo')`;

export default {

  javascript,

}

```

5. Create a `.demoList.json` file in your `demos` directory. Specify all your demos show in sidebar. 

```js

[

  "demo1",

  // ...

]

```

6. Add NPM scripts in your `package.json`:

```json

  "scripts": {

    "demo:dev": "demosify --serve",

    "demo:prod": "demosify --prod"

  }

```

7. Run `npm run demo:dev`, visit `http://localhost:3000`. You will see the playground. ✌🏻

## Load sample files

You can load sample files though config.js.

```js

export default async () => {

  const [javascript, html, css] = await Promise.all([

    import('!raw-loader!./index.js'),

    import('!raw-loader!./index.html'),

    import('!raw-loader!./style.css'),

  ]);

  return {

    javascript,

    html,

    css,

  }

}

```

Add `index.js`, `index.html` and `style.css` files in your demo directory.

```js

console.log('This is a demo.');

```

```html

  

  

  

  DEMO

  


```

```css

/* demo stylesheet */

body {

  background-color: red;

}

```

These files will be loaded to your playground.

## Deploy

Run `npm run demo:prod`.

All the demos will be deploy to production into `dist` directory of your project.

## Thanks to

Special thanks to [Poi](https://github.com/egoist/poi).

Demosify is inspired and powered by [Poi](https://poi.js.org/).