Discussion page
This commit is contained in:
rotimi_best
@@ -21,49 +21,25 @@
|
||||
|
||||
<style>
|
||||
.sidebar-root {
|
||||
padding: 16px;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
width: 200px;
|
||||
width: 250px;
|
||||
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">
|
||||
<h4>Most helpful</h4>
|
||||
<div class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md mt-12">
|
||||
<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&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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
|
||||
<!-- Article -->
|
||||
<article class="overflow-hidden rounded-lg shadow-lg">
|
||||
|
||||
<a href="#">
|
||||
<img alt="Placeholder" class="block h-auto w-full" src="https://picsum.photos/600/400/?random">
|
||||
</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="#">
|
||||
<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
|
||||
<div class="flex items-start">
|
||||
<Vote value="{discussion.votes}" />
|
||||
<h1 class="text-4xl mb-8">{discussion.title}</h1>
|
||||
</div>
|
||||
<div class="my-1 px-1 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" 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="#">
|
||||
<span class="hidden">Like</span>
|
||||
<i class="fa fa-heart"></i>
|
||||
</a>
|
||||
</footer>
|
||||
</header>
|
||||
<section class="p-2">
|
||||
{@html marked(discussion.question)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
<!-- END Article -->
|
||||
<div class="my-8">
|
||||
<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 -->
|
||||
|
||||
@@ -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/*"
|
||||
}
|
||||
|
||||
+1
-12
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user