jason
/
qotnews
forked from tanner/qotnews
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

svelte.

Browse Source
master
Jason Schwarzenberger 4 years ago
parent 35e47c4049
commit 5273c6d3fe
7 changed files with 141 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 89
      webapp/src/components/Comment.svelte
  2. 36
      webapp/src/components/StoryInfo.svelte
  3. 10
      webapp/src/routes/[id].json.js
  4. 103
      webapp/src/routes/[id].svelte
  5. 10
      webapp/src/routes/index.json.js
  6. 4
      webapp/src/routes/index.svelte
  7. 12
      webapp/src/template.html

89
webapp/src/components/Comment.svelte
Unescape View File

@ -7,7 +7,7 @@
export let dateString = formatDistanceToNow(fromUnixTime(comment.date), { export let dateString = formatDistanceToNow(fromUnixTime(comment.date), {
addSuffix: true, addSuffix: true,
}); });
const author = comment.author.replace(" ", ""); const author = (comment.author || "").replace(" ", "");
export let id = `${author}-${comment.date}`; export let id = `${author}-${comment.date}`;
export function toggleComments() { export function toggleComments() {
@ -16,45 +16,98 @@
</script> </script>
<style> <style>
.comment {
margin: 0.5rem 0;
}
.comment:not(:first-of-type) {
margin: 0.5rem 0;
border-top: solid 1px #ddd;
padding: 0.5rem 0 0;
}
.comment-info {
color: #222;
}
.comment-author { .comment-author {
font-weight: 600;
padding: 0 0.4em 0.2em;
border-radius: 0.5em;
background: #f1f1f1;
color: #000;
}
.comment-author.is-op {
background: #333;
color: #fff;
} }
.comment-text { .comment-text {
padding: 0 0.5rem; padding: 0 0.5rem;
color: #333; color: #000;
}
.comment-text.is-collapsed {
height: 3rem;
overflow: hidden;
color: #888;
}
.comment-text.is-collapsed::after {
content: "...";
font-style: italic;
} }
.comment-children { .comment-children {
margin-left: 1rem; margin-left: 0.5rem;
padding-left: 1rem; padding-left: 0.5rem;
border-left: solid 1px #000; border-left: solid 1px #000;
} }
.link-button { .toggle-children {
background: none; background: none;
border: none; border: none;
padding: 0 0.1rem; padding: 0 0.25rem;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
} }
.time-link {
text-decoration: none;
}
.time-link:hover {
text-decoration: underline;
}
.is-lighter {
color: #888;
}
</style> </style>
<div class="comment" id="comment-{id}"> <article class="comment" id="comment-{id}">
<div class="comment-author"> <header class="comment-info">
{comment.author} <span
| class={comment.author === story.author ? 'comment-author is-op' : 'comment-author'}>{comment.author || '[Deleted]'}</span>
<a href="{story.id}#comment-{id}">{dateString}</a> &bull;
<a class="time-link" href="{story.id}#comment-{id}">
<time
datetime={fromUnixTime(comment.date).toISOString()}
title={fromUnixTime(comment.date)}>{dateString}</time>
</a>
{#if comment.comments.length} {#if comment.comments.length}
<button <button
class="link-button" class="toggle-children"
on:click={toggleComments}>[{showComments ? '-' : '+'}]</button> on:click={toggleComments}>[{showComments ? '-' : '+'}]</button>
{/if} {/if}
</div> </header>
<div class="comment-text">
<section class={showComments ? 'comment-text' : 'comment-text is-collapsed'}>
{@html comment.text} {@html comment.text}
</div> </section>
{#if showComments && comment.comments.length}
{#if !showComments}
<div class="comment-children"> <div class="comment-children">
<button
class="toggle-children is-lighter"
on:click={toggleComments}>[expand]</button>
</div>
{/if}
{#if showComments && comment.comments.length}
<footer class="comment-children">
{#each comment.comments as child} {#each comment.comments as child}
<svelte:self {story} comment={child} /> <svelte:self {story} comment={child} />
{/each} {/each}
</div> </footer>
{/if} {/if}
</div> </article>

36
webapp/src/components/StoryInfo.svelte
Unescape View File

@ -2,27 +2,25 @@
import fromUnixTime from "date-fns/fromUnixTime"; import fromUnixTime from "date-fns/fromUnixTime";
import formatDistanceToNow from "date-fns/formatDistanceToNow"; import formatDistanceToNow from "date-fns/formatDistanceToNow";
export let story; export let story;
export let dateString = formatDistanceToNow(fromUnixTime(story.date), { export let dateString = formatDistanceToNow(fromUnixTime(story.date), {
addSuffix: true, addSuffix: true,
}); });
</script> </script>
<style> <div class="info">
</style> <time
datetime={fromUnixTime(story.date).toISOString()}
<time title={fromUnixTime(story.date)}>{dateString}</time>
datetime={fromUnixTime(story.date).toISOString()} {#if story.author && story.author_link}
title={fromUnixTime(story.date)}>{dateString}</time> by
{#if story.author && story.author_link} <a href={story.author_link}>{story.author}</a>
by {:else if story.author}by {story.author}{/if}
<a href={story.author_link}>{story.author}</a> on
{:else if story.author}by {story.author}{/if} <a href={story.url}>{story.source}</a>
on {#if story.score}&bull; {story.score} points{/if}
<a href={story.url}>{story.source}</a> {#if story.num_comments}
{#if story.score}&bull; {story.score} points{/if} &bull;
{#if story.num_comments} <a rel="prefetch" href="/{story.id}#comments">{story.num_comments}
&bull; comments</a>
<a rel="prefetch" href="/{story.id}#comments">{story.num_comments} {/if}
comments</a> </div>
{/if}

10
webapp/src/routes/[id].json.js
Unescape View File

@ -1,9 +1,9 @@
import fetch from 'node-fetch'; import fetch from 'isomorphic-fetch';
const API_URL = process.env.API_URL || 'http://news.1j.nz';
export async function get(req, res) { export async function get(req, res) {
const response = await fetch(`http://localhost:33842/api/${req.params.id}`); const response = await fetch(`${API_URL}/api/${req.params.id}`);
res.writeHead(200, { res.writeHead(response.status, { 'Content-Type': 'application/json' });
'Content-Type': 'application/json'
});
res.end(await response.text()); res.end(await response.text());
} }

103
webapp/src/routes/[id].svelte
Unescape View File

@ -1,7 +1,5 @@
<script context="module"> <script context="module">
export async function preload({ params }) { 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 res = await this.fetch(`${params.id}.json`);
const data = await res.json(); const data = await res.json();
@ -14,6 +12,7 @@
</script> </script>
<script> <script>
import fromUnixTime from "date-fns/fromUnixTime";
import Comment from "../components/Comment.svelte"; import Comment from "../components/Comment.svelte";
import StoryInfo from "../components/StoryInfo.svelte"; import StoryInfo from "../components/StoryInfo.svelte";
export let story; export let story;
@ -24,44 +23,6 @@
</script> </script>
<style> <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 { .spacer {
margin: 3rem 0; margin: 3rem 0;
} }
@ -69,33 +30,49 @@
<svelte:head> <svelte:head>
<title>{story.title}</title> <title>{story.title}</title>
<meta property="og:title" content={story.title} />
<meta property="og:type" content="article" />
<meta
property="article:published_time"
content={fromUnixTime(story.date).toISOString()} />
<meta property="article:author" content={story.author || story.source} />
</svelte:head> </svelte:head>
<h1>{story.title}</h1> <article class="article">
<StoryInfo {story} /> <header class="article-header">
<h1 class="article-title">{story.title}</h1>
<StoryInfo class="article-byline" {story} />
</header>
<div class="content"> <section class="article-body">
{@html story.text} {@html story.text}
</div> </section>
</article>
{#if hasComments} {#if hasComments}
<hr class="spacer" /> <hr class="spacer" />
<h2 id="comments">Comments</h2>
{#if others.length} <section class="comments" id="comments">
<h3> <header>
Other discussions: <h2>Comments</h2>
{#each others as r}
{#if r.num_comments} {#if others.length}
<a href="/{r.id}#comments" rel="prefetch">{r.source}</a> <h3>
{/if} Other discussions:
{/each} {#each others as r}
</h3> {#if r.num_comments}
{/if} <a href="/{r.id}#comments" rel="prefetch">{r.source}</a>
{#if story.comments.length} {/if}
<div class="comments"> {/each}
{#each story.comments as comment} </h3>
<Comment {story} {comment} /> {/if}
{/each} </header>
</div> {#if story.comments.length}
{/if} <div class="comments">
{#each story.comments as comment}
<Comment {story} {comment} />
{/each}
</div>
{/if}
</section>
{/if} {/if}

10
webapp/src/routes/index.json.js
Unescape View File

@ -1,9 +1,9 @@
import fetch from 'node-fetch'; import fetch from 'isomorphic-fetch';
const API_URL = process.env.API_URL || 'http://news.1j.nz';
export async function get(req, res) { export async function get(req, res) {
const response = await fetch(`http://localhost:33842/api`); const response = await fetch(`${API_URL}/api`);
res.writeHead(200, { res.writeHead(response.status, { 'Content-Type': 'application/json' });
'Content-Type': 'application/json'
});
res.end(await response.text()); res.end(await response.text());
} }

4
webapp/src/routes/index.svelte
Unescape View File

@ -22,7 +22,9 @@
</style> </style>
<svelte:head> <svelte:head>
<title>News</title> <title>QotNews</title>
<meta property="og:title" content="QotNews" />
<meta property="og:type" content="website" />
</svelte:head> </svelte:head>
<section> <section>

12
webapp/src/template.html
Unescape View File

@ -11,23 +11,11 @@
<link rel="manifest" href="manifest.json" crossorigin="use-credentials"> <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<!-- Sapper creates a <script> tag containing `src/client.js`
and anything else it needs to hydrate the app and
initialise the router -->
%sapper.scripts% %sapper.scripts%
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages -->
%sapper.styles% %sapper.styles%
<!-- This contains the contents of the <svelte:head> component, if
the current page has one -->
%sapper.head% %sapper.head%
</head> </head>
<body> <body>
<!-- The application will be rendered inside this element,
because `src/client.js` references it -->
<div id="sapper">%sapper.html%</div> <div id="sapper">%sapper.html%</div>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save