Tailwind, side barr, add new component button, layour of route
This commit is contained in:
Rotimi-Best
@@ -0,0 +1,30 @@
|
||||
import _discussions from './_discussions.js';
|
||||
|
||||
const lookup = new Map();
|
||||
_discussions.forEach(discussion => {
|
||||
lookup.set(`${discussion.id}`, JSON.stringify(discussion));
|
||||
});
|
||||
|
||||
export function get(req, res, next) {
|
||||
// the `id` parameter is available because
|
||||
// this file is called [id].json.js
|
||||
const { id } = req.params;
|
||||
|
||||
if (lookup.has(id)) {
|
||||
res.writeHead(200, {
|
||||
"Content-Type": "application/json"
|
||||
});
|
||||
|
||||
res.end(lookup.get(id));
|
||||
} else {
|
||||
res.writeHead(404, {
|
||||
"Content-Type": "application/json"
|
||||
});
|
||||
|
||||
res.end(
|
||||
JSON.stringify({
|
||||
message: `Not found`
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
// the `id` parameter is available because
|
||||
// this file is called [id].svelte
|
||||
const res = await this.fetch(`discussion/${params.id}.json`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.status === 200) {
|
||||
return { discussion: data };
|
||||
} else {
|
||||
this.error(res.status, data.message);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let discussion;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<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="#">
|
||||
<img alt="Placeholder" class="block rounded-full" src="https://picsum.photos/32/32/?random">
|
||||
<p class="ml-2 text-sm">
|
||||
Author Name
|
||||
</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>
|
||||
|
||||
</article>
|
||||
<!-- END Article -->
|
||||
|
||||
</div>
|
||||
<!-- END Column -->
|
||||
@@ -0,0 +1,150 @@
|
||||
// Ordinarily, you'd generate this data from markdown files in your
|
||||
// repo, or fetch them from a database of some kind. But in order to
|
||||
// avoid unnecessary dependencies in the starter template, and in the
|
||||
// service of obviousness, we're just going to leave it here.
|
||||
|
||||
// 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.
|
||||
|
||||
export default [
|
||||
{
|
||||
title: "What is Sapper?",
|
||||
id: 1,
|
||||
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.",
|
||||
createdAt: Date.now(),
|
||||
comments: [
|
||||
{
|
||||
name: "babdraa",
|
||||
avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
|
||||
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",
|
||||
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",
|
||||
comment:
|
||||
"getStaticProps must always be called from a page located in pages/*"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: "How to use Sapper",
|
||||
id: 2,
|
||||
|
||||
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.",
|
||||
createdAt: Date.now(),
|
||||
comments: [
|
||||
{
|
||||
name: "rawe",
|
||||
avatar: "https://avatars1.githubusercontent.com/u/31749594?s=60&v=4",
|
||||
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",
|
||||
comment:
|
||||
"getStaticProps must always be called from a page located in pages/*"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: "Why the name?",
|
||||
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.",
|
||||
createdAt: Date.now(),
|
||||
comments: [
|
||||
{
|
||||
name: "babdraa",
|
||||
avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
|
||||
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",
|
||||
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",
|
||||
comment:
|
||||
"getStaticProps must always be called from a page located in pages/*"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: "How is Sapper different from Next.js?",
|
||||
id: 4,
|
||||
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.",
|
||||
createdAt: Date.now(),
|
||||
comments: [
|
||||
{
|
||||
name: "babdraa",
|
||||
avatar: "https://avatars3.githubusercontent.com/u/24832873?s=60&v=4",
|
||||
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",
|
||||
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",
|
||||
comment:
|
||||
"getStaticProps must always be called from a page located in pages/*"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: "How can I get involved?",
|
||||
id: 5,
|
||||
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.",
|
||||
createdAt: Date.now(),
|
||||
comments: [
|
||||
{
|
||||
name: "gbenga",
|
||||
avatar: "https://avatars3.githubusercontent.com/u/11896398?s=60&v=4",
|
||||
comment:
|
||||
"getStaticProps must always be called from a page located in pages/*"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user