Added "activeDataFile" parameter in hbs templates.

generators/block/index.cjs

@@ -60,8 +60,8 @@ module.exports = class extends Generator {
     );
 
     this.fs.copyTpl(
-      this.templatePath('src/scripts/template.mjs'),
+      this.templatePath('src/scripts/template.js'),
-      this.destinationPath(path.join(pathDist, 'src', 'scripts', data.blockFilename + '.mjs')),
+      this.destinationPath(path.join(pathDist, 'src', 'scripts', data.blockFilename + '.js')),
       data
     );
 

generators/block/templates/config/default.cjs

@@ -1,5 +1,6 @@
 module.exports = {
   cssUrl: "https://",
+  jsUrl: "https://",
   blockName: "<%= blockFilename %>",
   baseView: "<%= baseView %>",
   remToPx: <%= remToPx %>,

generators/block/templates/src/styles/template.scss

@@ -1,5 +1,5 @@
 /**
- * Use "rem" instead of pixels. 1rem = 16pixels
+ * Use "rem" instead of pixels. 1rem = <%= remToPx %>pixels
  *    No need to use rem in situations of "1px". (usually used for borders width).
  *
  * Use BEM naming system for class names: http://getbem.com/naming/
@@ -25,7 +25,7 @@
 
   &__visual {
     &-image {
-      // Example of BEM usage.
+
     }
   }
 

generators/block/templates/src/template.template.hbs

@@ -1,4 +1,4 @@
-<section class="<%= blockClassName %>">
+<section class="<%= blockClassName %> <%= blockClassName %>--{{ activeDataFile }}">
 
   {{!
   Remove Everything Below:

layouts/partials/head.hbs

@@ -2,8 +2,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link rel="stylesheet" href="{{ config.cssUrl }}">
+  {{#if config.cssUrl }}<link rel="stylesheet" href="{{ config.cssUrl }}">
-  <link rel="stylesheet" href="styles/page--main.css">
+  {{/if}}<link rel="stylesheet" href="styles/page--main.css">
   <link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
   <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
 </head>

layouts/partials/scripts.hbs

@@ -1,4 +1,5 @@
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
-<script src="scripts/page--toolbar.js"></script>
+<script src="scripts/page--toolbar.js"></script>{{#if config.jsUrl }}
+<script src="{{ config.jsUrl }}"></script>{{/if}}
 <script src="scripts/{{ config.blockName }}.min.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-block-dev-tool",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"scripts": {
 		"start": "component-dev",
 		"dev": "NODE_ENV=development node server.js",

server.js

@@ -20,8 +20,7 @@ import fs from "fs/promises";
 
 const isDev = config.has('mode') && config.get('mode') === 'development';
 const modulePath = 'node_modules/create-block-dev-tool/';
-const projectDir = isDev ? '' : modulePath;
+const projectDir = modulePath;
-console.log('Development Mode:', isDev);
 
 const sass = gulpSass(dartSass);
 
@@ -53,8 +52,11 @@ app.get('/', async (req, res) => {
   const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
 
   Object.assign(data, {
-    config: {
+    config: Object.assign(
+      JSON.parse(JSON.stringify(config)), // The entire config object.
+      {
         projectDir,
+        activeDataFile: jsonFileName,
         dataFiles: dataFiles.map((name) => {
           return {
             name,
@@ -62,9 +64,8 @@ app.get('/', async (req, res) => {
           };
         }),
         remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
-      cssUrl: config.get('cssUrl'),
-      blockName: config.get('blockName')
       }
+    )
   });
 
   data.helpers = {
@@ -159,8 +160,3 @@ function prepareListOfDataFiles(dataFiles) {
     })
     .sort();
 }
-
-// TODO:
-// Breakpoints and data options will come from backend server.
-// [v] Top Panel with options to switch data (select input)
-// - Options to resize the page and test Responsiveness (select input)