parse front matter and integrate with api, then make preview work

backstage/static/js/editor.js

@@ -18,7 +18,8 @@ const submitButton = document.getElementById('submit_button');
 const contentApiUrl = `${PORTAL_SERVER}contents?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
 axios.get(contentApiUrl).then(({ data }) => {
   const content = _.get(data, 'content', '');
-  var {blockArray, blockCount} = parseMd(content);
+  const url = 'http://localhost:1313' + (JSON.parse(document.getElementById('url').textContent)).url + '/';
+  var {frontMatters, blockArray, blockCount} = parseMd(content)
   var dataIndex;
   titleButton.onclick = function() {
     dataIndex = 0;
@@ -53,35 +54,37 @@ axios.get(contentApiUrl).then(({ data }) => {
                                    width: widthInput.value,
                                    alt: 'image field',
                                    layout: 'responsive'}};
-        blockArray = handleImgInputClick(img, imgObject, blockArray, blockIndex, imgDataIndex);
+        blockArray = handleImgInputClick(img, imgObject, blockArray, blockIndex, imgDataIndex, url);
       }
     }
   }
 
   submitButton.onclick = function() {
     var mdContent = '';
+    for (var frontMatter of frontMatters) {
+      mdContent += frontMatter + '\n';
+    }
     for (var idx=0; idx<blockArray.length; idx++) {
-      mdContent += `## **${_.get(blockArray[idx], 'title', '')}**\n`
+      mdContent += `\n## **${_.get(blockArray[idx], 'title', '')}**`
       for (var data of _.get(blockArray[idx], 'data', [])) {
         if (_.get(_.keys(data), 0) === 'description') {
-          mdContent += _.get(data, 'description.text', '') + '\n';
+          mdContent += '\n' + _.get(data, 'description.text', '');
         } else if (_.get(_.keys(data), 0) === 'image') {
-          ampImgForm = `<amp-img\
+          ampImgForm = `\n<amp-img\
 \n  alt="${_.get(data, 'image.alt', '小寶優居')}"\
 \n  src="${_.get(data, 'image.src', '')}"\
 \n  height="${_.get(data, 'image.height', 300)}"\
 \n  width="${_.get(data, 'image.width', 400)}"\
 \n  layout="${_.get(data, 'image.layout', 'responsive')}">\
-\n</amp-img>\n`;
+\n</amp-img>`;
           mdContent += ampImgForm;
         }
       }
     }
-    console.log(mdContent);
-    console.log(blockArray);
+
     const postData = {
       content: mdContent,
-      path: '家具規劃作品/test_post_index.md',
+      path: '家具規劃作品/公仔與爵士鼓/index.md',
       title: 'test_post_index',
       url: '/collection/test_post_index'
     }

backstage/static/js/parsers.js

@@ -1,25 +1,35 @@
 function parseMd(content) {
+  var frontMatters = [];
   var blockArray = [{title: ''}];
   var blockCount;
   var preDataIndex, imgDataIndex;
   var parseBlockDiv;
+  var url;
   var preImg, preImgObject;
   var preImgObject = {'image': {}}
   var isNotFrontMatterCount = 0;
   var isAmpImgRange = false;
   for (const line of content.split('\n')) {
     if (isNotFrontMatterCount < 2) {
-        if (line.includes('---')) {
+      frontMatters.push(line)
+      if (line.includes('---')) {
         isNotFrontMatterCount += 1;
       }
+      if (line.includes('url:')) {
+        url = 'http://localhost:1313/' + line.replace(/url:| |"/g, '') + '/';
+      }
       continue;
     }
 
     if (isAmpImgRange === true && !(line.includes('</amp-img>'))) {
-      imgParamObject = parseAmpImg(line);
+      imgParamObject = parseAmpImg(line, url);
       preImgObject.image = {...preImgObject.image, ...imgParamObject};
       const key = _.get(_.keys(imgParamObject), 0);
-      preImg.setAttribute(key, _.get(imgParamObject, `${key}`));
+      if (key === 'src') {
+        preImg.setAttribute(key, url + _.get(imgParamObject, `${key}`));
+      } else {
+        preImg.setAttribute(key, _.get(imgParamObject, `${key}`));
+      }
       continue;
     }
 
@@ -53,7 +63,7 @@ function parseMd(content) {
                                      width: widthInput.value,
                                      alt: 'image field',
                                      layout: 'responsive'}};
-          blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex);
+          blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex, url);
         }
       }
     } else if (line.includes('amp-img')) {
@@ -75,9 +85,13 @@ function parseMd(content) {
                                    width: widthInput.value,
                                    alt: 'image field',
                                    layout: 'responsive'}};
-        blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex);
+        blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex, url);
       }
     } else {
+      if (parseBlockDiv === undefined){
+        // for skipping space before first title
+        continue
+      }
       const preBlockindex = blockCount;
       const ownDataIndex = preDataIndex;
       preDataIndex += 1;
@@ -90,7 +104,7 @@ function parseMd(content) {
       }
     }
   }
-  return {blockArray: blockArray, blockCount: blockCount}
+  return {frontMatters: frontMatters, blockArray: blockArray, blockCount: blockCount}
 }
 
 const parseTitle = line => {
@@ -120,11 +134,11 @@ const parseAmpImg = line => {
 
 function handleDescInputClick(p, desc, blockArray, blockIndex, ownDataIndex) {
   p.textContent = desc;
-  return addDataToBlockArray({description: {text: desc}}, blockArray, blockIndex, ownDataIndex)
+  return addDataToBlockArray({description: {text: desc + '\n'}}, blockArray, blockIndex, ownDataIndex)
 }
 
-function handleImgInputClick(img, imgObject, blockArray, blockIndex, ownDataIndex) {
-  img.setAttribute('src', _.get(imgObject, 'image.src'));
+function handleImgInputClick(img, imgObject, blockArray, blockIndex, ownDataIndex, url) {
+  img.setAttribute('src', url + _.get(imgObject, 'image.src'));
   img.setAttribute('width', _.get(imgObject, 'image.width'));
   img.setAttribute('height', _.get(imgObject, 'image.height'));
   img.setAttribute('alt', _.get(imgObject, 'image.alt'));