Update list styling

index.html

@@ -15,7 +15,16 @@
     <h1>Markdown editor</h1>
   </div>
 
-  <div id="utils" class="py-1">
+  <div id="utils">
+    <button type="button" id="folder-button">
+      <!-- License: MIT. Made by Microsoft: https://github.com/microsoft/vscode-codicons -->
+      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+        <path
+          d="M14.5 3H7.71l-.85-.85L6.51 2h-5l-.5.5v11l.5.5h13l.5-.5v-10L14.5 3zm-.51 8.49V13h-12V7h4.49l.35-.15.86-.86H14v1.5l-.01 4zm0-6.49h-6.5l-.35.15-.86.86H2v-3h4.29l.85.85.36.15H14l-.01.99z" />
+      </svg>
+      <span> My Files </span>
+    </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">
@@ -52,15 +61,15 @@ <h1>Markdown editor</h1>
         <path fill-rule="evenodd" clip-rule="evenodd"
           d="M7 13.992H4v-9h8v2h1v-2.5l-.5-.5H11v-1h-1a2 2 0 0 0-4 0H4.94v1H3.5l-.5.5v10l.5.5H7v-1zm0-11.2a1 1 0 0 1 .8-.8 1 1 0 0 1 .58.06.94.94 0 0 1 .45.36 1 1 0 1 1-1.75.94 1 1 0 0 1-.08-.56zm7.08 9.46L13 13.342v-5.35h-1v5.34l-1.08-1.08-.71.71 1.94 1.93h.71l1.93-1.93-.71-.71zm-5.92-4.16h.71l1.93 1.93-.71.71-1.08-1.08v5.34h-1v-5.35l-1.08 1.09-.71-.71 1.94-1.93z" />
       </svg>
-      <span id="clipboard-message" hidden> YAY! </span>
       <span>Copy to clipboard</span>
+      <span id="clipboard-message" hidden> COPIED! </span>
     </button>
 
     <!-- View project on GitHub -->
     <button type="button" id="view-on-github-button">
       <svg class="button-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
         <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M7.976 0A7.977 7.977 0 0 0 0 7.976c0 3.522 2.3 6.507 5.431 7.584.392.049.538-.196.538-.392v-1.37c-2.201.49-2.69-1.076-2.69-1.076-.343-.93-.881-1.175-.881-1.175-.734-.489.048-.489.048-.489.783.049 1.224.832 1.224.832.734 1.223 1.859.88 2.3.685.048-.538.293-.88.489-1.076-1.762-.196-3.621-.881-3.621-3.964 0-.88.293-1.566.832-2.153-.05-.147-.343-.978.098-2.055 0 0 .685-.196 2.201.832.636-.196 1.322-.245 2.007-.245s1.37.098 2.006.245c1.517-1.027 2.202-.832 2.202-.832.44 1.077.146 1.908.097 2.104a3.16 3.16 0 0 1 .832 2.153c0 3.083-1.86 3.719-3.62 3.915.293.244.538.733.538 1.467v2.202c0 .196.146.44.538.392A7.984 7.984 0 0 0 16 7.976C15.951 3.572 12.38 0 7.976 0z" />
+          d="M7.976 0A7.977 7.977 0 0 0 0 7.976c0 3.522 2.3 6.507 5.431 7.584.392.049.538-.196.538-.392v-1.37c-2.201.49-2.69-1.076-2.69-1.076-.343-.93-.881-1.175-.881-1.175-.734-.489.048-.489.048-.489.783.049 1.224.832 1.224.832.734 1.223 1.859.88 2.3.685.048-.538.293-.88.489-1.076-1.762-.196-3.621-.881-3.621-3.964 0-.88.293-1.566.832-2.153-.05-.147-.343-.978.098-2.055 0 0 .685-.196 2.201.832.636-.196 1.322-.245 2.007-.245s1.37.098 2.006.245c1.517-1.027 2.202-.832 2.202-.832.44 1.077.146 1.908.097 2.104a3.16 3.16 0 0 1 .832 2.153c0 3.083-1.86 3.719-3.62 3.915.293.244.538.733.538 1.467v2.202c0 .196.146.44.538.392A7.984 7.984 0 0 0 16 7.976C15.951 3.572 12.38 0 7.976 0z" />
       </svg>
       <span>View project on GitHub</span>
     </button>
@@ -76,6 +85,17 @@ <h1>Markdown editor</h1>
     </button> -->
   </div>
 
+  <div id="folder-files" hidden>
+    <div id="folder-files-options">
+      <input type="radio" name="files" value="file-1" id="folder-files-1">
+      <label for="folder-files-1"> File 1 </label>
+      <input type="radio" name="files" value="file-2" id="folder-files-2">
+      <label for="folder-files-2"> File 2 </label>
+      <input type="radio" name="files" value="file-2" id="folder-files-3">
+      <label for="folder-files-3"> File 3 </label>
+    </div>
+  </div>
+
   <div class="flex gap-8 m-8">
     <div class="island">
       <textarea id="input" rows="8" class="textarea" placeholder="Write an article..." required></textarea>

package.json

@@ -9,13 +9,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.4",
-    "vite": "^5.3.1"
+    "@tailwindcss/typography": "^0.5.16",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.4.11"
   },
   "dependencies": {
-    "marked": "^14.1.1"
+    "marked": "^14.1.4"
   }
 }

src/index.css

@@ -1,3 +1,41 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+button, input[type="radio"] {
+    @apply p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600;
+}
+
+#utils, #folder-files-options {
+    @apply flex flex-row items-center justify-center border-b border-t mt-4 py-1;
+}
+
+.island {
+    @apply w-1/2 mb-4 border border-gray-600 rounded-lg bg-white p-4 shadow-md;
+}
+
+#input {
+    @apply w-full px-4 py-2 bg-white rounded-b-lg text-base text-gray-800 border-0 focus:ring-0;
+    @apply resize-y h-full;
+}
+
+#output {
+    @apply prose prose-base *:my-2;
+    /* Text styling */
+    @apply prose-li:my-0 prose-ul:my-0;
+    @apply prose-hr:my-4;
+    @apply prose-h1:border-b-2 prose-h1:pb-3 prose-h1:font-bold; 
+    @apply prose-a:text-blue-600;
+    @apply prose-code:bg-gray-100 prose-code:rounded prose-code:px-1 prose-code:py-0.5;
+    @apply prose-li:prose-p:py-1; 
+    /* @apply dark:prose-invert; */
+}
+
+button {
+    @apply flex flex-row gap-2 items-center;
+
+    .button-svg {
+        @apply w-4 h-4;
+        @apply fill-current;
+    }
+}

src/main.js

@@ -1,5 +1,4 @@
 import './index.css'
-import './style.pcss'
 import { marked } from "marked";
 
 const inputText = document.getElementById("input");
@@ -15,6 +14,13 @@ document.addEventListener("DOMContentLoaded", async () => {
   outputText.innerHTML = await marked(inputText.value);
 });
 
+const folderButton = document.getElementById('folder-button');
+const folderFilesView = document.getElementById('folder-files')
+let folderOpen = false;
+folderButton.addEventListener("click", () => {
+  folderFilesView.toggleAttribute('hidden');
+})
+
 // const uploadImageButton = document.getElementById("upload-image-button");
 // uploadImageButton.addEventListener("click", () => {
 // });
@@ -32,7 +38,6 @@ downloadMarkdownButton.addEventListener("click", () => {
 })
 
 function extractMarkdown() {
-  console.log(inputText.value)
   return new Blob([inputText.value], {
     type: "text/markdown",
   });
@@ -62,7 +67,7 @@ const exampleMarkdown = document.getElementById("example-markdown-button");
 
 exampleMarkdown.addEventListener("click", async () => {
   // Getting the example markdown file from `public` folder
-  // Hardcoded path for the build, fix later :)
+  // Hardcoded path for the build, fix later :)v
   inputText.value = await fetch("/prosey-editor/example.md").then((response) => response.text());
   outputText.innerHTML = marked(inputText.value);
 });