demosify / Demosify
Licence: mit
Create a playground to show the demos of your projects.
Stars: ✭ 121
Projects that are alternatives of or similar to Demosify
playground
📚 Examples, projects, webprojects, skeletons for Nette Framework (@nette) from community members. Included @contributte @apitte @nettrine projects.
Stars: ✭ 23 (-80.99%)
Mutual labels: playground, samples
Evnestoreplatform
📱Electronic commerce iOS APP framework
Stars: ✭ 112 (-7.44%)
Mutual labels: github-pages, demo
Androidwithkotlin
🚀 These are android sample projects which are written in Kotlin. It covers video streaming, mp3 player, sqlite, location services, custom camera, o-notifications, simple compass etc.
Stars: ✭ 447 (+269.42%)
Mutual labels: samples, demo
Capsule Samples Collection
A collection of sample Bixby capsules
Stars: ✭ 87 (-28.1%)
Mutual labels: samples, demo
Weex Android Joke
A joke android app,powered by alibaba's weex.
Stars: ✭ 112 (-7.44%)
Mutual labels: demo
Terraform Up And Running Code
Code samples for the book "Terraform: Up & Running" by Yevgeniy Brikman
Stars: ✭ 1,739 (+1337.19%)
Mutual labels: samples
Footer Reveal
A jQuery plugin for easy implementation of the 'fixed/reveal' footer effect. Demo here:
Stars: ✭ 111 (-8.26%)
Mutual labels: demo
Ios Design Patterns
Learning ground for iOS Design Pattern included with sample projects for MVC, MVP, MVVM, and VIPER
Stars: ✭ 120 (-0.83%)
Mutual labels: playground
Preview Email
Automatically opens your browser to preview Node.js email messages sent with Nodemailer. Made for Lad!
Stars: ✭ 112 (-7.44%)
Mutual labels: demo
Cameraxdemo
A sample camera app with CameraX API from Android Jetpack
Stars: ✭ 112 (-7.44%)
Mutual labels: demo
Git Playbook
GIT Playbook is a documentation framework that allows you to create Documentation for your project using Markdown and GH-Pages rapidly
Stars: ✭ 115 (-4.96%)
Mutual labels: github-pages
👉🏻 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.jsfile in your project root.
module.exports = {
name: 'YOUR PROJECT NAME',
}
- Create
demosdirectory in your project root. Add your demos indemosdirectory.
mkdir demos
mkdir demos/demo1
- Create a
config.jsfile 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.jsonfile in yourdemosdirectory. 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, visithttp://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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].