From 7d07fb071b781ca3bfbd145fb83cac75ad3db0eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Asko=20N=C3=B5mm?= Date: Thu, 15 Jul 2021 21:55:38 -0300 Subject: [PATCH] bump --- README.md | 35 ++++++++++++++++++++++++++++++++++- build.sh | 22 +++++++++++++++++++--- npm-package.json | 28 ++++++++++++++++++++++++++++ package.json | 2 +- shadow-cljs.edn | 14 ++++++++++---- 5 files changed, 92 insertions(+), 9 deletions(-) create mode 100644 npm-package.json diff --git a/README.md b/README.md index c874846..ed95201 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,41 @@ Blocko is a block-based WYSIWYG editor written in ClojureScript and compiled to ![Animated gif of Blocko in action](https://github.com/askonomm/blocko/blob/master/demo.gif?raw=true) +## Install + +### NPM + +1. Run: `npm i blocko-editor` +2. Import it: `import blocko from 'blocko';` + +### Browser + +1. Download the latest [release](https://github.com/askonomm/blocko/releases) +2. Include `blocko.css` and `blocko.js` in your HTML + +## Usage + +```javascript +blocko.core.init({ + container: '#editor', + initialContent: [], + onChange: (content) => { + // store `content` in your database here. + } +}); +``` + +## API + +- `container`: any JS element that can be targeted via `querySelector` +- `initialContent`: a JS or JSON object representing the data +- `onChange`: a callback function called when content changes + ## Development To develop Blocko simply run `./build.sh dev`, which will then compile to `public/js/blocko.js` a development version of Blocko that also auto-reloads as you make changes. After that is done, open `public/index.html` in your browser and have fun! -Once you're done with development and want to get production version run `./build.sh release` and check inside `dist` for a brand new `blocko.js` and a `blocko.css` file. +Once you're done with development and want to get production version, then: +- To get the browser production build, run `./build.sh release-browser` and check inside `dist/browser` for a brand new `blocko.js` and a `blocko.css` file. +- To get the NPM production build, run `./build.sh release-npm` and check inside `dist/npm` for a brand new `blocko.js` and a `blocko.css` file. Note that you have to import the CSS file in your project manually. + \ No newline at end of file diff --git a/build.sh b/build.sh index eb2c5f2..eb8ba2b 100755 --- a/build.sh +++ b/build.sh @@ -5,9 +5,25 @@ if [ "$1" == "dev" ]; then $buildcmd fi -if [ "$1" == "release" ]; then - buildcmd="npx shadow-cljs release prod" +if [ "$1" == "release-browser" ]; then + buildcmd="npx shadow-cljs release prod-browser" $buildcmd - copycsscmd="cp public/blocko.css dist/" + copycsscmd="cp public/blocko.css dist/browser" $copycsscmd +fi + +if [ "$1" == "release-npm" ]; then + buildcmd="npx shadow-cljs release prod-npm" + $buildcmd + copycsscmd="cp public/blocko.css dist/npm" + $copycsscmd +fi + +if [ "$1" == "prepare-npm-dist" ]; then + copypackagecmd="cp npm-package.json dist/npm" + $copypackagecmd + renamepackagecmd="mv dist/npm/npm-package.json dist/npm/package.json" + $renamepackagecmd + copyreadmecmd="cp README.md dist/npm" + $copyreadmecmd fi \ No newline at end of file diff --git a/npm-package.json b/npm-package.json new file mode 100644 index 0000000..beed70e --- /dev/null +++ b/npm-package.json @@ -0,0 +1,28 @@ +{ + "name": "blocko-editor", + "version": "0.0.1", + "description": "A block-based WYSIWYG editor.", + "keywords": [ + "editor", + "block-editor", + "wysiwyg" + ], + "homepage": "https://github.com/askonomm/blocko", + "author": { + "name": "Asko Nõmm", + "email": "asko@bien.ee", + "url": "https://bien.ee" + }, + "repository": { + "type": "git", + "url": "https://github.com/askonomm/blocko.git" + }, + "bugs": { + "url": "https://github.com/askonomm/blocko/issues" + }, + "main": "blocko.js", + "license": "MIT", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + } +} diff --git a/package.json b/package.json index 137bd47..2d780c8 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "editor", + "name": "blocko", "version": "0.0.1", "private": true, "devDependencies": { diff --git a/shadow-cljs.edn b/shadow-cljs.edn index 5002175..8ba4521 100644 --- a/shadow-cljs.edn +++ b/shadow-cljs.edn @@ -4,8 +4,7 @@ :dependencies [[reagent "1.1.0"] - [re-frame "1.2.0"] - [hickory "0.7.1"]] + [re-frame "1.2.0"]] :builds {:dev @@ -14,9 +13,16 @@ :modules {:blocko {:entries [blocko.core]}}} - :prod + :prod-browser {:target :browser - :output-dir "dist" + :output-dir "dist/browser" + :modules + {:blocko + {:entries [blocko.core]}}} + :prod-npm + {:target :node-library + :exports-fn blocko.core/init + :output-to "dist/npm/blocko.js" :modules {:blocko {:entries [blocko.core]}}}}}