Added page editor with side by side preview (wip).

zuixjs · Apr 16, 2022 · 2536e55 · 2536e55
1 parent 4ca9df3
commit 2536e55
Show file tree

Hide file tree

Showing 9 changed files with 308 additions and 21 deletions.
diff --git a/.eleventy-zuix.js b/.eleventy-zuix.js
@@ -84,6 +84,7 @@ function getZuixConfig() {
 
 let wrappedCssIds = [];
 let io;
+
 function startWatcher(eleventyConfig, browserSync) {
   // Watch zuix.js folders and files (`./source/lib`, `./source/app`, zuixConfig.copy), ignored by 11ty
   const watchEvents = {add: true, change: true, unlink: true};
@@ -119,10 +120,25 @@ function startWatcher(eleventyConfig, browserSync) {
       forceRebuild();
     }
   });
+  setupSocketApi(browserSync);
+}
+
+function setupSocketApi(browserSync) {
   // WebSocket API
   if (browserSync && !io) {
     io = browserSync.instance.io;
     io.on('connection', (socket) => {
+      socket.on('zuix:loadContent', (request) => {
+        const content = fs.readFileSync(request.path);
+        request.content = content.toString('utf8');
+        io.emit('zuix:loadContent:done', request);
+        console.log('zuix:loadContent', request.path);
+      });
+      socket.on('zuix:saveContent', (request) => {
+        fs.writeFileSync(request.path, request.content);
+        io.emit('zuix:saveContent:done', {path: request.path});
+        console.log('zuix:saveContent', request.path);
+      });
       socket.on('zuix:addPage', (data) => {
         browserSync.notify('Adding new page...');
         addPage(data);
@@ -182,7 +198,10 @@ function initEleventyZuix(eleventyConfig) {
   const postProcessFiles = [];
   const changedFiles = [];
   let rebuildAll = true;
-  copyDependencies();
+  // Copy node_modules dependencies
+  copyDependencies(zuixConfig.build.dependencies);
+  // Auto-generated config.js
+  generateAppConfig(zuixConfig);
   // zUIx.js specific code and life-cycle hooks
   zuixConfig.app.environment = process.env.NODE_ENV || 'default';
   eleventyConfig.addGlobalData("app", zuixConfig.app);
@@ -263,21 +282,19 @@ function initEleventyZuix(eleventyConfig) {
   eleventyConfig.setDataDeepMerge(true);
 }
 
-function copyDependencies() {
-  // Copy last zUIx release
-  copyFolder(`${process.cwd()}/node_modules/zuix-dist/js`, `${buildFolder}/js/zuix`, (err) => {
-    if (err) console.log(err);
-  });
-  // Auto-generated config.js
-  generateAppConfig(zuixConfig);
-  // Copy other dependencies
-  // - elasticlurn search engine
-  copyFolder(`${process.cwd()}/node_modules/elasticlunr/release`, `${buildFolder}/js/elasticlunr`, (err) => {
-    if (err) console.log(err);
-  });
-  // - Flex Layout Attribute
-  copyFolder(`${process.cwd()}/node_modules/flex-layout-attribute/css`, `${buildFolder}/css/fla`, (err) => {
-    if (err) console.log(err);
+function copyDependencies(dependencyList) {
+  const nodeFolder = `${process.cwd()}/node_modules`;
+  Object.keys(dependencyList).forEach((sourcePath) => {
+    const destinationPath = dependencyList[sourcePath];
+    sourcePath = path.join(nodeFolder, sourcePath);
+    if (fs.lstatSync(sourcePath).isDirectory()) {
+      copyFolder(sourcePath, path.join(buildFolder, destinationPath), (err) => {
+        if (err) console.log(err);
+      });
+    } else {
+      const destinationFile = path.basename(sourcePath);
+      fs.copyFileSync(sourcePath, path.join(buildFolder, destinationPath, destinationFile));
+    }
   });
 }
 

diff --git a/config/default.json b/config/default.json
@@ -27,6 +27,25 @@
       "includesFolder": "_inc",
       "componentsFolders": [ "app", "lib" ],
       "contentFolder": "content",
+      "dependencies": {
+        "zuix-dist/js": "js/zuix",
+        "elasticlunr/release": "js/elasticlunr",
+        "flex-layout-attribute/css": "css/fla",
+        "codemirror/lib": "js/codemirror",
+        "codemirror/mode/markdown": "js/codemirror",
+        "codemirror/mode/gfm": "js/codemirror",
+        "codemirror/mode/yaml": "js/codemirror",
+        "codemirror/mode/yaml-frontmatter": "js/codemirror",
+        "codemirror/mode/javascript": "js/codemirror",
+        "codemirror/mode/htmlmixed": "js/codemirror",
+        "codemirror/mode/css": "js/codemirror",
+        "codemirror/mode/xml": "js/codemirror",
+        "codemirror/addon/mode/overlay.js": "js/codemirror",
+        "codemirror/theme/blackboard.css": "js/codemirror",
+        "codemirror/theme/darcula.css": "js/codemirror",
+        "codemirror/theme/abcdef.css": "js/codemirror",
+        "codemirror/theme/ayu-dark.css": "js/codemirror"
+      },
       "bundle": {
         "js": false,
         "css": false,

diff --git a/config/production.json b/config/production.json
@@ -27,6 +27,11 @@
       "includesFolder": "_inc",
       "componentsFolders": [ "app", "lib" ],
       "contentFolder": "content",
+      "dependencies": {
+        "zuix-dist/js": "js/zuix",
+        "elasticlunr/release": "js/elasticlunr",
+        "flex-layout-attribute/css": "css/fla"
+      },
       "bundle": {
         "js": true,
         "css": true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@11ty/eleventy-server-browsersync": "^1.0.2",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
+    "codemirror": "^5.65.2",
     "compression": "^1.7.4",
     "config": "^3.3.7",
     "eslint": "^8.13.0",

diff --git a/source/app/cms/zuix-editor.css b/source/app/cms/zuix-editor.css
@@ -10,10 +10,6 @@ input {
     width: auto;
     display: inline-flex;
 }
-.menu-item-disabled {
-    opacity: 0.6;
-    cursor: not-allowed!important;
-}
 
 .container  {
     position: fixed;

diff --git a/source/app/cms/zuix-editor.html b/source/app/cms/zuix-editor.html
@@ -2,7 +2,7 @@
      data-o-position="right" data-o-button-color="darkgreen">
 
     <div #items>
-        <div #edit-page layout="row center-right" class="menu-item-disabled">
+        <div #edit-page layout="row center-right">
             <span>Edit page</span>
             <svg height="40px" viewBox="0 0 24 24" width="40px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
         </div>

diff --git a/source/app/cms/zuix-editor.js b/source/app/cms/zuix-editor.js
@@ -45,6 +45,10 @@ function zuixEditor(cp) {
       createComponentDialog.open(_data);
     });
 
+    cp.field('edit-page').on('click', function() {
+      parent.location.replace('/editor/#' + location.pathname);
+    });
+
     cp.expose({
       data: {
         get() {