Merge pull request #120 from rishabh7923/v2

Implemented Markdown Support
jinx-vi-0 · Nov 4, 2024 · 8491d78 · 8491d78
2 parents 63da240 + 0c7ba8d
commit 8491d78
Show file tree

Hide file tree

Showing 3 changed files with 270 additions and 10 deletions.
diff --git a/views/admin/add-post.ejs b/views/admin/add-post.ejs
@@ -9,7 +9,7 @@
       padding: 0 10px;
     }
 
-    button {
+    button[type='submit'] {
       width: 100%;
       padding: 14px;
       background-color: #ff5f6d;
@@ -21,7 +21,7 @@
       margin-top: 20px;
     }
 
-    button:hover {
+    button[type='submit']:hover {
       background-color: #ff4e50;
     }
 
@@ -60,6 +60,79 @@
       outline: 1px dashed #000;
     }
 
+        .editor-container {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    }
+
+    .tab-container {
+      display: flex;
+      border: 1px solid #d0d7de;
+      border-bottom: none;
+
+      background-color: #f6f8fa;
+    }
+
+    .tab {
+      padding: 8px 16px;
+      cursor: pointer;
+      border-right: 1px solid #d0d7de;
+      color: #24292f;
+      background: none;
+      border: none;
+      font-size: 14px;
+    }
+
+    .tab:first-child {
+      border-radius: 6px 0 0 0;
+    }
+
+    .tab.active {
+      background-color: #ffffff;
+      border-bottom: 2px solid #0969da;
+    }
+
+    .toolbar-button {
+      padding: 4px 8px;
+      background: none;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .toolbar-button:hover {
+      background-color: #eaeef2;
+      border-color: #d0d7de;
+    }
+
+    .content-area {
+      width: 100%;
+      min-height: 200px;
+      padding: 16px;
+      border: 1px solid #d0d7de;
+      border-radius: 0 0 6px 6px;
+      font-family: inherit;
+      font-size: 14px;
+      line-height: 1.5;
+      resize: vertical;
+      box-sizing: border-box;
+    }
+
+    .preview-area {
+      display: none;
+      width: 100%;
+      min-height: 300px;
+      padding: 16px;
+      border: 1px solid #d0d7de;
+      background-color: #ffffff;
+      box-sizing: border-box;
+    }
+
+    .helper-text {
+      margin-top: 8px;
+      color: #57606a;
+      font-size: 12px;
+    }
+
     /* Responsive styles */
     @media (max-width: 768px) {
       .blog-form {
@@ -109,7 +182,18 @@
         <input name="title" type="text" id="blog-title" placeholder="Enter your blog title..." />
 
         <label for="blog-content"><b>Blog Content</b></label>
-        <textarea id="blog-content" rows="10" name="body" placeholder="Write your blog content here..."></textarea>
+
+        <div class="editor-container">
+          <div class="tab-container">
+            <button type="button" class="tab active" onclick="switchTab('write')">Write</button>
+            <button type="button" class="tab" onclick="switchTab('preview')">Preview</button>
+          </div>
+
+          <textarea id="editor" rows="10" name="body" placeholder="Write your blog content here..."></textarea>
+          <div id="preview" class="preview-area"></div>
+
+          <div class="helper-text">Markdown is supported</div>
+        </div>
   </div>
 
   <div class="prop-container">
@@ -128,10 +212,42 @@
   </div>
 </form>
 
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.0/markdown-it.min.js"
+  integrity="sha256-3mv+NUxFuBg26MtcnuN2X37WUxuGunWCCiG2YCSBjNc=" crossorigin="anonymous"></script>
+
+
 <script>
-  var loadFile = function (event) {
+  let mdit = new markdownit({ breaks: true });
+
+  function loadFile(event) {
     var image = document.getElementById('blogImage');
     image.src = URL.createObjectURL(event.target.files[0]);
     image.style.display = 'block';
   };
+
+  function switchTab(tab) {
+    var editor = document.getElementById('editor');
+    var preview = document.getElementById('preview');
+    var tabs = document.querySelectorAll('.tab');
+
+    // Remove active class from all tabs
+    tabs.forEach(function (t) {
+      t.classList.remove('active');
+    });
+
+    // Add active class to clicked tab
+    if (tab === 'write') {
+      tabs[0].classList.add('active');
+      editor.style.display = 'block';
+      preview.style.display = 'none';
+    } else {
+      tabs[1].classList.add('active');
+      editor.style.display = 'none';
+      preview.style.display = 'block';
+      let parsedHtml = mdit.render(editor.value)
+      preview.innerHTML = parsedHtml
+    }
+  }
+
 </script>
diff --git a/views/admin/edit-post.ejs b/views/admin/edit-post.ejs
@@ -5,7 +5,8 @@
     padding: 0 10px;
   }
 
-  button {
+
+  button[type='submit'] {
     width: 100%;
     padding: 14px;
     background-color: #ff5f6d;
@@ -17,7 +18,7 @@
     margin-top: 20px;
   }
 
-  button:hover {
+  button[type='submit']:hover {
     background-color: #ff4e50;
   }
 
@@ -56,6 +57,79 @@
     outline: 1px dashed #000;
   }
 
+  .editor-container {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  .tab-container {
+    display: flex;
+    border: 1px solid #d0d7de;
+    border-bottom: none;
+
+    background-color: #f6f8fa;
+  }
+
+  .tab {
+    padding: 8px 16px;
+    cursor: pointer;
+    border-right: 1px solid #d0d7de;
+    color: #24292f;
+    background: none;
+    border: none;
+    font-size: 14px;
+  }
+
+  .tab:first-child {
+    border-radius: 6px 0 0 0;
+  }
+
+  .tab.active {
+    background-color: #ffffff;
+    border-bottom: 2px solid #0969da;
+  }
+
+  .toolbar-button {
+    padding: 4px 8px;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .toolbar-button:hover {
+    background-color: #eaeef2;
+    border-color: #d0d7de;
+  }
+
+  .content-area {
+    width: 100%;
+    min-height: 200px;
+    padding: 16px;
+    border: 1px solid #d0d7de;
+    border-radius: 0 0 6px 6px;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    resize: vertical;
+    box-sizing: border-box;
+  }
+
+  .preview-area {
+    display: none;
+    width: 100%;
+    min-height: 300px;
+    padding: 16px;
+    border: 1px solid #d0d7de;
+    background-color: #ffffff;
+    box-sizing: border-box;
+  }
+
+  .helper-text {
+    margin-top: 8px;
+    color: #57606a;
+    font-size: 12px;
+  }
+
   /* Responsive styles */
   @media (max-width: 768px) {
     .blog-form {
@@ -109,8 +183,18 @@
           value="<%= data.title %>" />
 
         <label for="blog-content"><b>Blog Content</b></label>
-        <textarea id="blog-content" rows="10" name="body"
-          placeholder="Write your blog content here..."><%= data.body %></textarea>
+        <div class="editor-container">
+          <div class="tab-container">
+            <button type="button" class="tab active" onclick="switchTab('write')">Write</button>
+            <button type="button" class="tab" onclick="switchTab('preview')">Preview</button>
+          </div>
+
+          <textarea id="editor" rows="10" name="body"
+            placeholder="Write your blog content here..."><%= data.body %></textarea>
+          <div id="preview" class="preview-area"></div>
+
+          <div class="helper-text">Markdown is supported</div>
+        </div>
   </div>
 
   <div class="prop-container">
@@ -129,9 +213,41 @@
   </div>
 </form>
 
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.0/markdown-it.min.js"
+  integrity="sha256-3mv+NUxFuBg26MtcnuN2X37WUxuGunWCCiG2YCSBjNc=" crossorigin="anonymous"></script>
+
 <script>
-  var loadFile = function (event) {
+  let mdit = new markdownit();
+
+  function loadFile(event) {
     var image = document.getElementById('blogImage');
     image.src = URL.createObjectURL(event.target.files[0]);
+    image.style.display = 'block';
   };
+
+  function switchTab(tab) {
+    var editor = document.getElementById('editor');
+    var preview = document.getElementById('preview');
+    var tabs = document.querySelectorAll('.tab');
+
+    // Remove active class from all tabs
+    tabs.forEach(function (t) {
+      t.classList.remove('active');
+    });
+
+    // Add active class to clicked tab
+    if (tab === 'write') {
+      tabs[0].classList.add('active');
+      editor.style.display = 'block';
+      preview.style.display = 'none';
+    } else {
+      tabs[1].classList.add('active');
+      editor.style.display = 'none';
+      preview.style.display = 'block';
+      let parsedHtml = mdit.render(editor.value)
+      preview.innerHTML = parsedHtml
+    }
+  }
+
 </script>
diff --git a/views/post.ejs b/views/post.ejs
@@ -3,11 +3,39 @@
         max-height: 500px;
         border-radius: 10px;
     }
+
+    .article h1, h2, h3, h4, p, ul, ol {
+        margin: 0
+    }
 </style>
 
 <!-- HTML structure -->
 <img class="poster" src="<%= data.poster %>" />
 <h1>
     <%= data.title %>
 </h1>
-<article class="article"><%= data.body %></article>
+<div class="article">
+    <%= data.body %>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.0/markdown-it.min.js"
+    integrity="sha256-3mv+NUxFuBg26MtcnuN2X37WUxuGunWCCiG2YCSBjNc=" crossorigin="anonymous"></script>
+
+<script>
+    // Initialize Markdown-it
+    let mdit = new markdownit({
+        breaks: true,
+        quotes: '“”‘’'
+    }).disable(['image'])
+
+    // Select the article element
+    let articleElement = document.getElementsByClassName('article')[0];
+
+    console.log(articleElement.textContent.trim())
+
+    // Parse Markdown from the article's content and render as HTML
+    let parsedHtml = mdit.render(articleElement.textContent.trim());
+
+    // Set the inner HTML of the article element to the parsed HTML
+    articleElement.innerHTML = parsedHtml;
+</script>