forked from tanner/qotnews
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.2 KiB
101 lines
2.2 KiB
<script context="module"> |
|
export async function preload({ params }) { |
|
// the `slug` parameter is available because |
|
// this file is called [slug].svelte |
|
const res = await this.fetch(`${params.id}.json`); |
|
const data = await res.json(); |
|
|
|
if (res.status === 200) { |
|
return { story: data.story, related: data.related }; |
|
} else { |
|
this.error(res.status, data.message); |
|
} |
|
} |
|
</script> |
|
|
|
<script> |
|
import Comment from "../components/Comment.svelte"; |
|
import StoryInfo from "../components/StoryInfo.svelte"; |
|
export let story; |
|
export let related; |
|
|
|
let others = related.filter((r) => r.id !== story.id && r.num_comments); |
|
let hasComments = related.some((r) => r.num_comments); |
|
</script> |
|
|
|
<style> |
|
/* |
|
By default, CSS is locally scoped to the component, |
|
and any unused styles are dead-code-eliminated. |
|
In this page, Svelte can't know which elements are |
|
going to appear inside the {{{post.html}}} block, |
|
so we have to use the :global(...) modifier to target |
|
all elements inside .content |
|
*/ |
|
.content :global(h2) { |
|
font-size: 1.4em; |
|
font-weight: 500; |
|
} |
|
|
|
.content :global(pre) { |
|
background-color: #f9f9f9; |
|
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05); |
|
padding: 0.5em; |
|
border-radius: 2px; |
|
overflow-x: auto; |
|
} |
|
|
|
.content :global(pre) :global(code) { |
|
background-color: transparent; |
|
padding: 0; |
|
} |
|
|
|
.content :global(ul) { |
|
line-height: 1.5; |
|
} |
|
|
|
.content :global(li) { |
|
margin: 0 0 0.5em 0; |
|
} |
|
|
|
.content :global(img) { |
|
max-width: 100%; |
|
} |
|
|
|
.spacer { |
|
margin: 3rem 0; |
|
} |
|
</style> |
|
|
|
<svelte:head> |
|
<title>{story.title}</title> |
|
</svelte:head> |
|
|
|
<h1>{story.title}</h1> |
|
<StoryInfo {story} /> |
|
|
|
<div class="content"> |
|
{@html story.text} |
|
</div> |
|
|
|
{#if hasComments} |
|
<hr class="spacer" /> |
|
<h2 id="comments">Comments</h2> |
|
{#if others.length} |
|
<h3> |
|
Other discussions: |
|
{#each others as r} |
|
{#if r.num_comments} |
|
<a href="/{r.id}#comments" rel="prefetch">{r.source}</a> |
|
{/if} |
|
{/each} |
|
</h3> |
|
{/if} |
|
{#if story.comments.length} |
|
<div class="comments"> |
|
{#each story.comments as comment} |
|
<Comment {story} {comment} /> |
|
{/each} |
|
</div> |
|
{/if} |
|
{/if}
|
|
|