More styling improvement and example button

notkaramel · Jul 9, 2024 · b33c10f · b33c10f
1 parent a66826d
commit b33c10f
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -16,15 +16,15 @@ <h1>Markdown editor</h1>
   </div>
 
   <div id="utils">
-      <!-- <button type="button">
+    <!-- <button type="button">
         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 20">
           <path stroke="currentColor" stroke-linejoin="round" stroke-width="2"
             d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6" />
         </svg>
         <span class="sr-only"> Attach file </span>
       </button> -->
 
-      <!-- <button type="button">
+    <!-- <button type="button">
         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
           viewBox="0 0 16 20">
           <path
@@ -33,7 +33,7 @@ <h1>Markdown editor</h1>
         <span class="sr-only">Embed map</span>
       </button> -->
 
-      <!-- <button type="button" id="upload-image-button">
+    <!-- <button type="button" id="upload-image-button">
         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
           viewBox="0 0 16 20">
           <path
@@ -43,7 +43,7 @@ <h1>Markdown editor</h1>
         <span>Upload image</span>
       </button> -->
 
-      <!-- <button type="button">
+    <!-- <button type="button">
         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
           viewBox="0 0 16 20">
           <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
@@ -52,47 +52,56 @@ <h1>Markdown editor</h1>
         </svg>
         <span class="sr-only">Format code</span>
       </button> -->
-      
-      <!-- <button type="button">
+
+    <!-- <button type="button">
         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
           viewBox="0 0 20 20">
           <path
             d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z" />
         </svg>
-        <span class="sr-only">Settings</span>
+        <span> Settings</span>
       </button> -->
-      <button type="button" id="download-md-button">
-        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-          viewBox="0 0 20 20">
-          <path
-            d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
-          <path
-            d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
-        </svg>
-        <span>Download Markdown </span>
-      </button>
 
+    <button type="button" id="example-markdown-button">
+      <!-- <?xml version="1.0" encoding="utf-8"?> -->
+      <!-- License: MIT. Made by Microsoft: https://github.com/microsoft/vscode-codicons -->
+      <svg class="button-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M4.708 5.578L2.061 8.224l2.647 2.646-.708.708-3-3V7.87l3-3 .708.708zm7-.708L11 5.578l2.647 2.646L11 10.87l.708.708 3-3V7.87l-3-3zM4.908 13l.894.448 5-10L9.908 3l-5 10z" />
+      </svg>
+      <span> Example </span>
+    </button>
+
+    <button type="button" id="download-md-button">
+      <svg class="button-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path
+          d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
+        <path
+          d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
+      </svg>
+      <span> Download Markdown </span>
+    </button>
 
-      <button type="button" id="download-pdf-button" disabled>
-        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-          viewBox="0 0 20 20">
-          <path
-            d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
-          <path
-            d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
-        </svg>
-        <span>Download as PDF </span>
-      </button>
 
-      <!-- Full screen button -->
-      <!-- <button type="button" id="full-screen-button">
+    <button type="button" id="download-pdf-button" disabled>
+      <svg class="button-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path
+          d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
+        <path
+          d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
+      </svg>
+      <span> Download as PDF </span>
+    </button>
+
+    <!-- Full screen button -->
+    <!-- <button type="button" id="full-screen-button">
         <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             d="M13 1h5m0 0v5m0-5-5 5M1.979 6V1H7m0 16.042H1.979V12M18 12v5.042h-5M13 12l5 5M2 1l5 5m0 6-5 5" />
         </svg>
         <span>Full screen</span>
       </button> -->
-    </div>
+  </div>
 
   <div class="flex gap-8 m-8">
     <div class="island">

diff --git a/public/example.md b/public/example.md
@@ -0,0 +1,43 @@
+# Heading 1
+1. First item
+2. Second item
+3. Third item
+---
+**bold text**
+
+## Heading 2
+
+
+*italicized text*
+
+Things are working
+
+> blockquote
+
+- First item
+  -  [title](https://www.example.com)
+- Second item
+   - ![alt text](https://picsum.photos/300)
+ - Third item
+
+---
+# Extended syntax
+| Syntax | Description |
+| ----------- | ----------- |
+| Header | Title |
+| Paragraph | Text |
+
+```json
+{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}
+```
+
+~~The world is flat.~~
+
+I need to highlight these ==very important words==.
+
+H~2~O and X^2^
+
diff --git a/src/main.js b/src/main.js
@@ -59,4 +59,12 @@ function downloadFile(blob, fileName) {
   aElement.target = "_blank";
   aElement.click();
   URL.revokeObjectURL(href);
-};
+};
+
+const exampleMarkdown = document.getElementById("example-markdown-button");
+
+exampleMarkdown.addEventListener("click", async () => {
+  // Getting the example markdown file from `public` folder
+  inputText.value = await fetch("/example.md").then((response) => response.text());
+  outputText.innerHTML = marked(inputText.value);
+});
diff --git a/src/style.pcss b/src/style.pcss
@@ -18,11 +18,18 @@ button {
 #output {
     @apply prose prose-base *:my-2;
     @apply prose-li:my-0 prose-ul:my-0;
-    @apply prose-h1:border-b-2 prose-h1:pb-3;
     @apply prose-hr:my-4;
+    /* Text styling */
+    @apply prose-h1:border-b-2 prose-h1:pb-3 prose-h1:font-bold; 
+    @apply prose-a:text-blue-600;
     /* @apply dark:prose-invert; */
 }
 
 button {
     @apply flex flex-row gap-2 items-center;
+
+    .button-svg {
+        @apply w-4 h-4;
+        @apply fill-current;
+    }
 }