@demosify/core

v0.7.6

Published

3 years ago

Create a playground to show demos of your projects.

Downloads

0High
0Medium
0Low

spritejs

👉🏻 website | 👉🏻 online demo

DEMOSIFY

Create a playground to show the demos of your project.

Quick start

install @demosify/core

npm install @demosify/core --save-dev

Create .demosrc.js file in your project root.

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

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

mkdir demos
mkdir demos/demo1

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,
}

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

[
  "demo1",
  // ...
]

Add NPM scripts in your package.json:

  "scripts": {
    "demo:dev": "demosify --serve",
    "demo:prod": "demosify --prod"
  }

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

DEMOSIFY

Quick start

Load sample files

Deploy

Thanks to