Discussion page

package-lock.json

@@ -1963,6 +1963,11 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "marked": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.7.tgz",
+      "integrity": "sha512-No11hFYcXr/zkBvL6qFmAp1z6BKY3zqLMHny/JN/ey+al7qwCM2+CMBL9BOgqMxZU36fz4cCWfn2poWIf7QRXA=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -2896,6 +2901,12 @@
         "regexparam": "^1.3.0"
       }
     },
+    "typescript": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
+      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.12.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "Unidiscuss",
+  "name": "unidiscuss",
-  "description": "Unidiscuss",
+  "description": "unidiscuss",
   "version": "0.0.1",
   "scripts": {
     "dev": "sapper dev",
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "compression": "^1.7.1",
+    "marked": "^1.2.7",
     "polka": "next",
     "sirv": "^1.0.0"
   },
@@ -32,6 +33,7 @@
     "sapper": "^0.28.0",
     "svelte": "^3.17.3",
     "svelte-preprocess": "^4.3.0",
-    "tailwindcss": "^1.8.10"
+    "tailwindcss": "^1.8.10",
+    "typescript": "^4.1.3"
   }
 }

src/components/SideBar.svelte

@@ -21,49 +21,25 @@
 
 <style>
   .sidebar-root {
-    padding: 16px;
+    width: 250px;
-    border: 1px solid #e1e4e8;
-    border-radius: 6px;
-    width: 200px;
     height: fit-content;
   }
 
-  h4 {
-    font-size: 14px;
-    font-weight: 600;
-    border-bottom: 1px solid #e1e4e8;
-    padding-bottom: 10px;
-  }
-
-  .avatar {
-    border-radius: 50%;
-    display: inline-block;
-    overflow: hidden;
-    line-height: 1;
-    vertical-align: middle;
-    border-radius: 6px;
-    margin-right: 10px;
-  }
-
-  .contributer-link {
-    display: flex;
-    padding: 8px 0;
-  }
 </style>
 
 <!-- markup (zero or more items) goes here -->
-<div class="sidebar-root">
+<div class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md mt-12">
-  <h4>Most helpful</h4>
+  <h4 class="border-b border-gray text-base font-bold pb-1">Most helpful</h4>
   {#each contributors as contributor}
-    <a class="contributer-link" href="/{contributor.name}">
+    <a class="flex pt-3" href="/{contributor.name}">
       <img
-        class="avatar"
+        class="inline-block overflow-hidden rounded-full mr-1 leading-none align-middle"
         src="https://avatars0.githubusercontent.com/u/2854919?s=40&amp;v=4"
-        width="20"
+        width="23"
         height="20"
         alt="@jamesmosier"
       >
-      <span>{contributor.name}</span>
+      <span class="hover:text-blue-600 hover:underline">{contributor.name}</span>
     </a>
 	{/each}
 </div>

src/routes/_layout.svelte

@@ -8,7 +8,6 @@
 
 <style>
 	main {
-    display: flex;
 		background-color: white;
 		padding: 15px 2em;
 		margin: 0 auto;
@@ -28,7 +27,7 @@
 
 <Nav {segment}/>
 
-<main>
+<main class="flex justify-evenly">
   <slot></slot>
 	<SideBar />
 </main>

src/routes/discussion/[id].svelte

@@ -1,4 +1,7 @@
 <script context="module">
+    import marked from 'marked'
+    import Vote from "../../components/Vote.svelte";
+
 	export async function preload({ params }) {
 		// the `id` parameter is available because
 		// this file is called [id].svelte
@@ -25,42 +28,51 @@
 	<title>{discussion.title}</title>
 </svelte:head>
 
-<h1>{discussion.title}</h1>
+<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
-
+    <div class="flex items-start">
-<div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
+        <Vote value="{discussion.votes}" />
-  <!-- Article -->
+        <h1 class="text-4xl mb-8">{discussion.title}</h1>
-  <article class="overflow-hidden rounded-lg shadow-lg">
+    </div>
-
+    <div class="my-1 px-1 rounded-lg border border-1 border-gray">
-      <a href="#">
+        <header class="flex items-center justify-between leading-none p-2">
-          <img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random">
+            <a class="flex items-center no-underline hover:underline text-black" href="/">
-      </a>
-
-      <header class="flex items-center justify-between leading-tight p-2 md:p-4">
-          <h1 class="text-lg">
-              <a class="no-underline hover:underline text-black" href="#">
-                  Article Title
-              </a>
-          </h1>
-        <p class="text-grey-darker text-sm">
-            14/4/19
-          </p>
-        </header>
-
-        <footer class="flex items-center justify-between leading-none p-2 md:p-4">
-            <a class="flex items-center no-underline hover:underline text-black" href="#">
                 <img alt="Placeholder" class="block rounded-full" src="https://picsum.photos/32/32/?random">
                 <p class="ml-2 text-sm">
-                    Author Name
+                    {discussion.author.name}
+                </p>
+                <p class="ml-2 text-sm text-gray-500">
+                    12h ago
                 </p>
             </a>
-            <a class="no-underline text-grey-darker hover:text-red-dark" href="#">
+        </header>
-                <span class="hidden">Like</span>
+        <section class="p-2">
-                <i class="fa fa-heart"></i>
+            {@html marked(discussion.question)}
-            </a>
+        </section>
-        </footer>
+    </div>
 
-    </article>
+    <div class="my-8">
-    <!-- END Article -->
+        <strong>{discussion.comments.length} ответы</strong>
+    </div>
 
+    {#each discussion.comments as comment}
+        <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">
+                    <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}">
+                        <p class="ml-2 text-sm">
+                            {comment.name}
+                        </p>
+                        <p class="ml-2 text-sm text-gray-500">
+                            12h ago
+                        </p>
+                    </a>
+                </header>
+                <section class="p-2">
+                    {@html marked(comment.comment)}
+                </section>
+            </div>
+        </div>
+    {/each}
 </div>
-<!-- END Column -->

src/routes/discussion/_discussions.js

@@ -6,33 +6,37 @@
 // This file is called `_discussions.js` rather than `posts.js`, because
 // we don't want to create an `/blog/posts` route — the leading
 // underscore tells Sapper not to do that.
-
+const question = "\ Hey!\n>\n> I'm working on a dashboard app that's where most things are login only and I like using ### Outlined a draft of the flows\n>\n> ### API Proposals\n> #### Through `getServerSideProps`\n> * Add new return property to `getServerSideProps` called i.e. `fetchPolicy` that can default to `always` being current behaviour and add new option `cache-and-network`/`stale-while-revalidate` as outlined above\n> * Add new router API event, called i.e. `routePropsChanged`, that can be triggered when page props change\n> * Maybe it could also send the `stale-while-revalidate` http header to the browser for instant page reloads?\n> * Problem: needs a way to clear cache when mutating to prevent a flash of unchanged content\n>\n> #### Through router\n> * Add new prop to Link/Router called `fetchPolicy: 'cache-and-network'` which could use a cache of the page's data if it exists and warm it up on load (similar to [`shallow`](https://nextjs.org/docs/routing/shallow-routing).)\n> * If `fetchPolicy: 'cache-and-network` is combined with `prefetch` it could actually preload the data on each page as well and make every route navigation change snappy, even when using getServerSideProps`\n> * This removes the \"flash of unchanged content\" on mutations as you can trigger a route change after a mutation w/o using the cache.\n>\n> Later on, this could be extended to allow for polling as well maybe, which could enable some real-time views without the need of any actual client-side query wiring.\n"
 export default [
   {
     title: "What is Sapper?",
     id: 1,
+    votes: 100,
     author: {
       name: "babdraa",
       avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
     },
-    question: "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+    question,
       createdAt: Date.now(),
     comments: [
       {
         name: "babdraa",
         avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
+        votes: 5,
         comment:
           "getStaticProps must always be called from a page located in pages/*"
       },
       {
         name: "crana",
         avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        votes: 0,
         comment:
-          "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
+          " Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
       },
       {
         name: "loris",
         avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        votes: 100,
         comment:
           "getStaticProps must always be called from a page located in pages/*"
       }
@@ -42,24 +46,27 @@ export default [
   {
     title: "How to use Sapper",
     id: 2,
+    votes: 100,
 
     author: {
       name: "babdraa",
       avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
     },
       question:
-        "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+        question,
       createdAt: Date.now(),
     comments: [
       {
         name: "rawe",
         avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        votes: 10,
         comment:
           "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
       },
       {
         name: "hlaow",
         avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        votes: 5,
         comment:
           "getStaticProps must always be called from a page located in pages/*"
       }
@@ -68,30 +75,34 @@ export default [
 
   {
     title: "Why the name?",
+    votes: 100,
     id: 3,
     author: {
       name: "babdraa",
       avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
     },
     question:
-        "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+        question,
       createdAt: Date.now(),
     comments: [
       {
         name: "babdraa",
         avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
+        votes: 50,
         comment:
           "getStaticProps must always be called from a page located in pages/*"
       },
       {
         name: "crana",
         avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        votes: 9,
         comment:
           "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
       },
       {
         name: "loris",
         avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        votes: 5,
         comment:
           "getStaticProps must always be called from a page located in pages/*"
       }
@@ -101,22 +112,25 @@ export default [
   {
     title: "How is Sapper different from Next.js?",
     id: 4,
+    votes: 10,
     author: {
       name: "babdraa",
       avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
     },
-    question: "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+    question: question,
       createdAt: Date.now(),
     comments: [
       {
         name: "babdraa",
         avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
+        votes: 0,
         comment:
           "getStaticProps must always be called from a page located in pages/*"
       },
       {
         name: "crana",
         avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
+        votes: 1,
         comment:
           "Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
       },
@@ -132,16 +146,18 @@ export default [
   {
     title: "How can I get involved?",
     id: 5,
+    votes: 7,
     author: {
       name: "living",
       avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4"
     },
-    question: "Hello, I was thinking… Is there a way to get static props for non-page components without passing props from page component? Eg. navigation which is shared across many pages.",
+    question: question,
       createdAt: Date.now(),
     comments: [
       {
         name: "gbenga",
         avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
+        votes: 1000,
         comment:
           "getStaticProps must always be called from a page located in pages/*"
       }

src/routes/index.svelte

@@ -115,7 +115,7 @@
 <svelte:head>
 	<title>Unidiscuss - Help students in your university</title>
 </svelte:head>
-<div class="root">
+<div class="w-1/2 mx-auto mb-20">
   <div class="flex justify-end mb-5">
     <NewQuestion />
   </div>
@@ -136,11 +136,6 @@
 </div>
 
 <style>
-	.root {
-    margin: 0 auto 20px;
-    width: 600px;
-	}
-
 	.discussion-box {
 		border-top: 1px solid #eaecef;
 		display: flex;
@@ -167,10 +162,4 @@
   .discussion-comments {
     display: flex;
   }
-
-  @media only screen and (max-width : 768px) {
-    .root {
-      width: 100%;
-    }
-  }
 </style>

static/global.css

@@ -16,10 +16,6 @@ h1 {
 	font-size: 2em;
 }
 
-a {
-	color: inherit;
-}
-
 code {
 	font-family: menlo, inconsolata, monospace;
 	font-size: calc(1em - 2px);