@demosify/core

👉🏻 website | 👉🏻 online demo

DEMOSIFY

Create a playground to show the demos of your project.

Quick start

1. install @demosify/core

npm install @demosify/core --save-dev

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

module.exports = {
  name: 'YOUR PROJECT NAME',
}

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

mkdir demos
mkdir demos/demo1

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

// 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.

[
  "demo1",
  // ...
]

6. Add NPM scripts in your package.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.

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.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DEMO</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

/* 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.

Demosify is inspired and powered by Poi.