Update docs

DEVELOP.md

@@ -4,17 +4,14 @@
 
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
-
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
 
-        $ npm install -g yo
-        $ npm install -g @plone/generator-volto
-        $ npm install -g mrs-developer
+        npm install -g yo @plone/generator-volto mrs-developer
 
 1.  Create new volto app
 
-        $ yo @plone/volto my-volto-project --addon @eeacms/volto-block-style
-        $ cd my-volto-project
+        yo @plone/volto my-volto-project --addon @eeacms/volto-block-style --skip-install
+        cd my-volto-project
 
 1.  Add the following to `mrs.developer.json`:
 
@@ -29,25 +26,26 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Install
 
-        $ yarn develop
-        $ yarn
+        yarn develop
+        yarn
 
 1.  Start backend
 
-        $ docker run -d --name plone -p 8080:8080 -e SITE=Plone plone
+        docker pull plone
+        docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
 
     ...wait for backend to setup and start - `Ready to handle requests`:
 
-        $ docker logs -f plone
+        docker logs -f plone
 
     ...you can also check http://localhost:8080/Plone
 
 1.  Start frontend
 
-        $ yarn start
+        yarn start
 
 1.  Go to http://localhost:3000
 
 1.  Happy hacking!
 
-        $ cd src/addons/volto-block-style/
+        cd src/addons/volto-block-style/

README.md

@@ -14,23 +14,39 @@ block types that you want to enable. By default it is enabled for all blocks.
 
 #### IMPORTANT! Because of the way it works, you should always load this addon as the last addon in Volto project configuration.
 
-###
-
 ![Screenshot](https://github.com/eea/volto-block-style/raw/docs/docs/screenshot.png)
 
 ## Getting started
 
-1. Create new volto project if you don't already have one:
+### Try volto-block-style with Docker
+
+1. Get the latest Docker images
 
    ```
-   $ npm install -g yo @plone/generator-volto
-   $ yo @plone/volto my-volto-project --addon @eeacms/volto-block-style
+   docker pull plone
+   docker pull plone/volto
+   ```
 
-   $ cd my-volto-project
-   $ yarn add -W @eeacms/volto-block-style
+1. Start Plone backend
    ```
+   docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
+   ```
+
+1. Start Volto frontend
 
-1. If you already have a volto project, just update `package.json`:
+   ```
+   docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-block-style" plone/volto
+   ```
+
+1. Go to http://localhost:3000
+
+### Add volto-block-style to your Volto project
+
+1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
+
+1. Start Volto frontend
+
+* If you already have a volto project, just update `package.json`:
 
    ```JSON
    "addons": [
@@ -42,11 +58,19 @@ block types that you want to enable. By default it is enabled for all blocks.
    }
    ```
 
+* If not, create one:
+
+   ```
+   npm install -g yo @plone/generator-volto
+   yo @plone/volto my-volto-project --addon @eeacms/volto-block-style
+   cd my-volto-project
+   ```
+
 1. Install new add-ons and restart Volto:
 
    ```
-   $ yarn
-   $ yarn start
+   yarn
+   yarn start
    ```
 
 1. Go to http://localhost:3000

bootstrap

@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const ejs = require('ejs');
 
 const currentDir = path.basename(process.cwd());
 
@@ -8,13 +9,23 @@ const bootstrap = function (ofile) {
         if (err) {
             return console.log(err);
         }
-        var result = data.replace(/volto-addon-template/g, currentDir);
-
-        fs.writeFile(ofile, result, 'utf8', function (err) {
+        const result = ejs.render(data, {
+            addonName: `@eeacms/${currentDir}`,
+            name: currentDir
+        });
+        const output = ofile.replace('.tpl', '');
+        fs.writeFile(output, result, 'utf8', function (err) {
             if (err) {
                 return console.log(err);
             }
         });
+        if (ofile.includes('.tpl')) {
+            fs.unlink(ofile, (err) => {
+                if (err) {
+                    return console.error(err);
+                }
+            });
+        }
     });
 }
 
@@ -23,7 +34,7 @@ fs.readdir(".", { withFileTypes: true }, (err, dirents) => {
         .filter(dirent => dirent.isFile())
         .map(dirent => dirent.name);
     files.forEach(function (file) {
-        if (file != 'bootstrap.js') {
+        if (file != 'bootstrap') {
             bootstrap(file);
         }
     });