diff --git a/README.md b/README.md index 44fb8bf..a05817d 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ Do you want to make your own theme different from the light or dark themes? Sinc Wanna quickly try out theming without installing anything or just explore our build environment? -[![Try on Repl.it](https://repl-badge.jajoosam.repl.co/try.png)](https://repl.it/@Kognise/watercss-node?ref=button) +[![Try on repl.it](https://repl-badge.jajoosam.repl.co/edit.png)](https://repl.it/github/https://github.com/amasad/water.css?lang=nodejs&ref=button) ### Based on an existing theme @@ -124,4 +124,5 @@ You can also only import parts you want, but this is not recommended. See the `s - [Blockquotes](https://github.com/kognise/water.css/issues/13) - Add a screenshot -- Jekyll theme +- [Jekyll theme](https://github.com/kognise/water.css/issues/18) +- [Radio buttons](https://github.com/kognise/water.css/issues/22) diff --git a/index.js b/index.js new file mode 100644 index 0000000..7223e11 --- /dev/null +++ b/index.js @@ -0,0 +1,75 @@ +const express = require('express') +const app = express() +const http = require('http').Server(app) +const io = require('socket.io')(http) +const fs = require('fs-extra') +const chokidar = require('chokidar') +const sass = require('node-sass') + +const script = ` +const socket = io() +socket.on('reload', () => location.reload()) +` + +app.get('/', async (req, res) => { + console.log('> Serving index') + const html = await fs.readFile('index.html') + const injected = html.toString().replace('', ``) + res.send(injected) +}) + +app.get('/script.js', async (req, res) => { + console.log('> Serving script') + const script = await fs.readFile('script.js') + res.contentType('javascript') + res.send(script) +}) + +app.use('/dist', (req, res, next) => { + console.log('> Serving a stylesheet') + next() +}, express.static('dist')) + +function reload() { + console.log('> Reloading') + io.emit('reload') +} + +chokidar.watch('index.html', { ignoreInitial: true }).on('all', () => { + console.log('> Index changed') + reload() +}) + +chokidar.watch('script.js', { ignoreInitial: true }).on('all', () => { + console.log('> Script changed') + reload() +}) + +function buildSass(file) { + sass.render({ file, outputStyle: 'compressed' }, async (errors, result) => { + if (errors) { + console.log('> Sass errors!') + console.log(errors) + return + } + const outFile = file.replace('src', 'dist').replace('.scss', '.css') + await fs.outputFile(outFile, result.css) + reload() + }) +} + +chokidar.watch('src/*.scss', { ignoreInitial: true }).on('all', (event, file) => { + console.log('> Stylesheet changed') + buildSass(file) +}) + +chokidar.watch('src/parts/*.scss', { ignoreInitial: true }).on('all', async () => { + console.log('> Stylesheet part changed') + const src = await fs.readdir('src') + const files = src.filter(file => file !== 'parts').map(file => `src/${file}`) + for (let file of files) { + buildSass(file) + } +}) + +http.listen(3000, () => console.log('> Ready at http://localhost:3000/')) \ No newline at end of file