bump

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

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

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"
+  }
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "editor",
+  "name": "blocko",
   "version": "0.0.1",
   "private": true,
   "devDependencies": {

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