210709 edit md frontmatters / add youtube element

backstage/static/js/editor.js

@@ -63,6 +63,19 @@ axios.get(contentApiUrl).then(({ data }) => {
       img.src = tmpsrc;
       odiv.appendChild(img);
     }
+    else if (blocks[i]['type'] == "youtube") {
+      ampimg = blocks[i]['text'];
+      vid = ampimg.substr(ampimg.indexOf("data-videoid=\"") +14, ampimg.indexOf("\"", ampimg.indexOf("data-videoid=\"") + 14) - ampimg.indexOf("data-videoid=\"") - 14)
+      editorBlocks.push({
+        type: "embed", data: {
+          service: 'youtube',
+          source: 'https://www.youtube.com/watch?'+ vid,
+          embed: 'https://www.youtube.com/embed/'+ vid,
+          width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
+          height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+        }
+      });
+    }
     else if (blocks[i]['type'] == "title") {
       blocks[i]['text'] = blocks[i]['text'].replace("### **", "").replace("**", "")
       editorBlocks.push({ type: "header", data: { text: blocks[i]['text'] } });
@@ -111,7 +124,8 @@ axios.get(contentApiUrl).then(({ data }) => {
       }
       ,
       code: CodeTool,
-      delimiter: Delimiter
+      delimiter: Delimiter,
+      embed: Embed,
     }
     ,
     data: { blocks: editorBlocks }
@@ -138,9 +152,22 @@ submitButton.onclick = function () {
     console.log('Article data: ', outputData);
 
     var mdContent = '';
+    /*
     for (var frontMatter of frontMatters) {
       mdContent += frontMatter + '\n';
     }
+    */
+    mdContent += '---\n';
+    mdContent += 'title: "' + $('#ctitle').val() + '"\n';
+    mdContent += 'date: ' + $('#cdate').val() + '\n';
+    mdContent += 'draft: ' + $('#cdraft').val() + '\n';
+    mdContent += 'type: "' + $('#ctype').val() + '"\n';
+    mdContent += 'url: "' + $('#curl').val() + '"\n';
+    mdContent += 'image: "' + $('#cimage').val() + '"\n';
+    mdContent += 'description: "' + $('#cdescription').val() + '"\n';
+    mdContent += 'weight: ' + $('#cweight').val() + '\n';
+    mdContent += 'tag: "' + $('#ctag').val() + '"\n';
+    mdContent += '---\n\n';
 
     for (i = 0; i < outputData.blocks.length; i++) {
       //alert(block.type);
@@ -155,8 +182,8 @@ submitButton.onclick = function () {
         mdContent += '\n---\n';
       }
       else if (block.type == "image") {
-        console.log(block.data.file.url);
-        console.log(JSON.parse(document.getElementById('url').textContent).url);
+        //console.log(block.data.file.url);
+        //console.log(JSON.parse(document.getElementById('url').textContent).url);
         iurl = block.data.file.url.split('/');
         mdContent += '\n<amp-img\n  alt="' + block.data.caption
           + '"\n  src="' + iurl[iurl.length - 2] + '/' + iurl[iurl.length - 1]
@@ -167,6 +194,14 @@ submitButton.onclick = function () {
       else if (block.type == "delimiter") {
         mdContent += '\n{{% chuz-div class="mt-5" %}}\n';
       }
+      else if (block.type == "embed") {
+        mdContent += '\n<amp-youtube'
+        + '\n  data-videoid="' + block.data.embed.replace('https://www.youtube.com/embed/','')
+        + '"\n  layout="responsive'
+        + '"\n  width="' + block.data.width
+        + '"\n  height="' + block.data.height 
+        + '">\n</amp-youtube>\n';
+      }
     }
     //alert(mdContent);
 
@@ -180,10 +215,10 @@ submitButton.onclick = function () {
     console.log('Saving failed: ', error)
   });
 
-  var mdContent = '';
+/*   var mdContent = '';
   for (var frontMatter of frontMatters) {
     mdContent += frontMatter + '\n';
-  }
+  } */
 
   //alert(bb);
   /*     for(var eBlock in outputData.blocks)
@@ -224,10 +259,6 @@ for (var idx = 0; idx < blockArray.length; idx++) {
     url: (JSON.parse(document.getElementById('url').textContent)).url
   }; */
 
-  if (aa != postData['content']) {
-    //alert(postData['content']);
-    alert(mdContent);
-  }
   //axios.post(contentApiUrl, json = postData);
 
 }

backstage/static/js/yo.js

@@ -11,12 +11,49 @@ function parseMd(content) {
     var blocks = new Array();
     lineIdx = 1;
     foundImg = false;
+    foundYT = false;
     crossLine = "";
 
-    for (const line of content.split('\n')) {
+    for (var line of content.split('\n')) {
         lineIdx++;
         if (isNotFrontMatterCount < 2) {
             frontMatters.push(line)
+            if (line.includes('title: ')) {
+                $('#ctitle').val(line.replace('title: ','').replaceAll('\"',''));
+            }
+            if (line.includes('date: ')) {
+                //alert(line);
+                $('#cdate').val(line.replace('date: ','').replaceAll('\"',''));
+            }
+            if (line.includes('draft: ')) {
+                //alert(line);
+                $('#cdraft').val(line.replace('draft: ','').replaceAll('\"',''));
+            }
+            if (line.includes('type: ')) {
+                //alert(line);
+                $('#ctype').val(line.replace('type: ','').replaceAll('\"',''));
+            }
+            if (line.includes('url: ')) {
+                //alert(line);
+                $('#curl').val(line.replace('url: ','').replaceAll('\"',''));
+            }
+            if (line.includes('image: ')) {
+                //alert(line);
+                $('#cimage').val(line.replace('image: ','').replaceAll('\"',''));
+            }
+            if (line.includes('description: ')) {
+                //alert(line);
+                $('#cdescription').val(line.replace('description: ','').replaceAll('\"',''));
+            }
+            if (line.includes('weight: ')) {
+                //alert(line);
+                $('#cweight').val(line.replace('weight: ','').replaceAll('\"',''));
+            }
+            if (line.includes('tag: ')) {
+                //alert(line);
+                $('#ctag').val(line.replace('tag: ','').replaceAll('\"',''));
+            }
+
             if (line.includes('---')) {
                 isNotFrontMatterCount += 1;
             }
@@ -55,6 +92,18 @@ function parseMd(content) {
             continue;
         }
 
+        if (line.includes('<amp-youtube') || foundYT) {
+            crossLine += line;
+            foundYT = true;
+            if (line.includes('</amp-youtube>'))
+            {
+                blocks.push({ 'type': 'youtube', 'text': crossLine });
+                foundYT = false;
+                crossLine = "";
+            }
+            continue;
+        }
+
         blocks.push({ 'type': 'para', 'text': line });
     }
     

backstage/templates/editor.html

@@ -2,10 +2,20 @@
 {% block main %}
 <div class="ui segment">
   <div class="ui two column very relaxed grid">
-    <div class="column column__edit">
+    <!-- <div class="column column__edit"> -->
+    <div style='width:100%'>
       <h3 class="h3 column__h3"><i class="fas fa-user-edit mr-2"></i>編輯</h3>
       <div class="mb-2">
-        <button class="btn__arTitle mb-2" id="title_button">標題修改</button>
+        title:<input id="ctitle" type="text" /><br />
+        date:<input id="cdate" type="text" /><br />
+        draft:<input id="cdraft" type="text" /><br />
+        type:<input id="ctype" type="text" /><br />
+        url:<input id="curl" type="text" /><br />
+        image:<input id="cimage" type="text" /><br />
+        description:<input id="cdescription" type="text" /><br />
+        weight:<input id="cweight" type="text" /><br />
+        tag:<input id="ctag" type="text" /><br />
+        <!-- <button class="btn__arTitle mb-2" id="title_button">標題修改</button> -->
       </div>
       <button id='submit_button' class="btn__submit">修改完成</button>
       <div id="editorjs"></div>
@@ -16,12 +26,12 @@
             id="add_hr_button">+換行</button></span><span><button class="btn__arTitle mb-2"
             id="add_mt5_button">+mt5</button></span>
       </div>
-      
+
     </div>
-    <div class="column column__preview">
+    <!-- <div class="column column__preview">
       <h3 class="h3 column__h3"><i class="fas fa-eye mr-2"></i>預覽頁面</h3>
       <iframe src='{{ bhouse_server }}{{ url }}/' width="100%" height="100%"></iframe>
-    </div>
+    </div> -->
   </div>
 </div>
 <script type="text/json" id="url">{"url": "{{ url }}"}</script>
@@ -40,6 +50,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
 <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
 
 <script type="text/javascript" src="{{url_for('static', filename='js/yo.js')}}"></script>
 <script type="text/javascript" src="{{url_for('static', filename='js/editor.js')}}"></script>