Add comment box + select answer icon

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "Unidiscuss",
+  "name": "unidiscuss",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
@@ -1146,6 +1146,12 @@
         "picomatch": "^2.2.2"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.3.1.tgz",
+      "integrity": "sha512-HyZ+3Eay8SGaPq7kcFoANZLr4EjeXQ19yjjb9fp6B0PHHpvZoe00jdsnpnooMEbx9J5rQ93nxPUG3MQmXVxGMQ==",
+      "dev": true
+    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",

package.json

@@ -24,6 +24,7 @@
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@rollup/plugin-replace": "^2.2.0",
+    "@tailwindcss/typography": "^0.3.1",
     "carbon-icons-svelte": "^10.21.0",
     "postcss": "^8.0.9",
     "postcss-load-config": "^2.1.0",

src/components/Hoverable.svelte

@@ -0,0 +1,15 @@
+<script>
+  let hovering;
+
+  function enter() {
+    hovering = true;
+  }
+
+  function leave() {
+    hovering = false;
+  }
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+  <slot></slot>
+</div>

src/components/TextEditor.svelte

@@ -0,0 +1,86 @@
+<script>
+  import marked from 'marked';
+
+  let isWriteMode = true;
+  let value = ``;
+  const activeClassName = 'border-b-2 border-blue-700';;
+
+  const handleTabClick = tab => event => {
+    isWriteMode = tab === 1
+  }
+</script>
+
+<style>
+  .root {
+    width: 100%;
+    min-height: 200px;
+  }
+
+  textarea {
+    width: 100%;
+    height: 150px;
+  }
+
+  .preview {
+    min-height: 150px;
+  }
+
+  .octicon {
+    display: inline-block;
+    vertical-align: text-top;
+    fill: currentColor;
+  }
+</style>
+
+<div class="root mt-5 border border-gray rounded-md">
+  <div class="p-2 pb-0">
+    <button
+      on:click={handleTabClick(1)}
+      class="p-2 {isWriteMode && `${activeClassName}`}"
+    >
+      Write
+    </button>
+    <button
+      on:click={handleTabClick(2)}
+      class="p-2 {!isWriteMode && `${activeClassName}`}"
+    >
+      Preview
+    </button>
+  </div>
+
+  <div class="m-2 mb-0 p-0">
+    {#if isWriteMode}
+      <textarea
+        bind:value
+        placeholder="Предлогайте ваш ответ"
+        class="border border-gray rounded-md p-2"
+      ></textarea>
+    {:else}
+      <article class="preview prose prose-sm sm:prose lg:prose-lg xl:prose-2xl p-2">
+        {@html marked(value)}
+      </article>
+    {/if}
+  </div>
+  {#if !isWriteMode}
+    <hr>
+  {/if}
+  <div class="flex justify-between items-center px-2 pb-1">
+    <div class="flex items-center text-sm">
+      <svg
+        class="octicon mr-2"
+        height="16"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        aria-hidden="true"
+      >
+        <path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
+      </svg>
+      <span>Styling with Markdown is supported</span>
+    </div>
+
+    <button class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded">
+      Answer
+    </button>
+  </div>
+</div>

src/routes/discussion/[id].svelte

@@ -1,7 +1,9 @@
 <script context="module">
     import marked from 'marked'
     import Vote from "../../components/Vote.svelte";
-	import HashTags from "../../components/HashTags.svelte";
+    import HashTags from "../../components/HashTags.svelte";
+    import TextEditor from "../../components/TextEditor.svelte";
+    import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
 
 	export async function preload({ params }) {
 		// the `id` parameter is available because
@@ -46,7 +48,7 @@
                 </p>
             </a>
         </header>
-        <section class="p-2">
+        <section class="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl p-2">
             {@html marked(discussion.question)}
         </section>
         <section class="p-2">
@@ -62,21 +64,32 @@
         <div class="my-5 px-1 flex items-start">
             <Vote value="{comment.votes}" />
             <div class="w-full rounded-lg border border-1 border-gray">
-                <header class="flex items-center justify-between leading-none p-2">
+              <header class="flex items-center justify-between leading-none p-2">
-                    <a class="flex items-center no-underline hover:underline text-black" href="/">
+                <a class="flex items-center no-underline hover:underline text-black" href="/">
-                    <img alt="Placeholder" class="block rounded-full" width="24" height="20" src="{comment.avatar}">
+                  <img
-                        <p class="ml-2 text-sm">
+                    alt="Placeholder"
-                            {comment.name}
+                    class="block rounded-full"
-                        </p>
+                    width="24"
-                        <p class="ml-2 text-sm text-gray-500">
+                    height="20"
-                            12h ago
+                    src="{comment.avatar}"
-                        </p>
+                  >
-                    </a>
+                  <p class="ml-2 text-sm">
-                </header>
+                    {comment.name}
-                <section class="p-2">
+                  </p>
-                    {@html marked(comment.comment)}
+                  <p class="ml-2 text-sm text-gray-500">
-                </section>
+                    12h ago
+                  </p>
+                </a>
+
+                <CheckmarkOutline20 />
+              </header>
+              <article class="prose prose-sm sm:prose p-2">
+                  {@html marked(comment.comment)}
+              </article>
             </div>
         </div>
     {/each}
+
+    <hr>
+    <TextEditor />
 </div>

src/routes/discussion/_discussions.js

@@ -19,7 +19,7 @@ export default [
     tags: [
       'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
     ],
-    question,
+    question: '# Problem\n\nThere is a problem with my code please help me check it out.\n\n```js\nconst name = "dfdf";\n```',
       createdAt: Date.now(),
     comments: [
       {

src/template.html

@@ -7,7 +7,7 @@
 
 	%sapper.base%
 
-	<link rel="stylesheet" href="global.css">
+	<!-- <link rel="stylesheet" href="global.css"> -->
 	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
 	<link rel="icon" type="image/png" href="favicon.ico">
     <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png">

static/global.css

@@ -6,16 +6,6 @@ body {
 	color: #333;
 }
 
-h1, h2, h3, h4, h5, h6 {
-	margin: 0 0 0.5em 0;
-	font-weight: 400;
-	line-height: 1.2;
-}
-
-h1 {
-	font-size: 2em;
-}
-
 code {
 	font-family: menlo, inconsolata, monospace;
 	font-size: calc(1em - 2px);

tailwind.config.js

@@ -1,16 +1,16 @@
 module.exports = {
   purge: {
-    mode: 'all',
+    mode: "all",
-    content: ['./**/**/*.html', './**/**/*.svelte'],
+    content: ["./**/**/*.html", "./**/**/*.svelte"],
 
     options: {
-      whitelistPatterns: [/svelte-/],
+      whitelistPatterns: [/svelte-/]
-    },
+    }
   },
 
   theme: {
-    extend: {},
+    extend: {}
   },
   variants: {},
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")]
 };