Skip to content

Commit 52f5a22

Browse files
author
Rich Harris
authored
Realworld update (#290)
* store user info in JWT. yeah, yeah, i know * use prefetching promise if available, reload on query change * inject credentials in server-side fetch * start updating realworld example * always supply a body when posting * swap tabs * simplify setup * simplify settings page * replace/pushState on goto * handle redirects * update lockfile * add preloading indicator * fix prettier config * remove double layout * update manifest/logo * remove unwanted segment * fix settings page * fix following logic * various * only insist on a body for GET requests * only attempt 304s for get requests * allow empty responses for non-GET requests * allow forms to override method with ?_method=delete etc * fix comment submission/deleting, including progressive enhancement * some changes i apparently made before christmas * update imports * minor fixes * fix imports
1 parent 531cf0c commit 52f5a22

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1037
-637
lines changed

‎.prettierrc

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@
22
"useTabs": true,
33
"singleQuote": true,
44
"trailingComma": "none",
5-
"printWidth": 100
5+
"printWidth": 100,
6+
"svelteSortOrder": "scripts-markup-styles",
7+
"svelteBracketNewLine": true
68
}

‎examples/hn.svelte.dev/src/lib/PreloadingIndicator.svelte

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
let p = 0;
44
let visible = false;
55
onMount(() => {
6+
visible = true;
67
function next() {
7-
visible = true;
88
p += 0.1;
99
const remaining = 1 - p;
1010
if (remaining > 0.15) setTimeout(next, 500 / remaining);
@@ -13,16 +13,6 @@
1313
});
1414
</script>
1515

16-
{#if visible}
17-
<div class="progress-container">
18-
<div class="progress" style="width: {p * 100}%"></div>
19-
</div>
20-
{/if}
21-
22-
{#if p >= 0.4}
23-
<div class="fade"></div>
24-
{/if}
25-
2616
<style>
2717
.progress-container {
2818
position: absolute;
@@ -46,18 +36,32 @@
4636
position: fixed;
4737
width: 100%;
4838
height: 100%;
49-
background-color: rgba(255,255,255,0.3);
39+
background-color: rgba(255, 255, 255, 0.3);
5040
pointer-events: none;
5141
z-index: 998;
5242
animation: fade 0.4s;
5343
}
5444
5545
:global(html).dark .fade {
56-
background-color: rgba(0,0,0,0.3);
46+
background-color: rgba(0, 0, 0, 0.3);
5747
}
5848
5949
@keyframes fade {
60-
from { opacity: 0 }
61-
to { opacity: 1 }
50+
from {
51+
opacity: 0;
52+
}
53+
to {
54+
opacity: 1;
55+
}
6256
}
63-
</style>
57+
</style>
58+
59+
{#if visible}
60+
<div class="progress-container">
61+
<div class="progress" style="width: {p * 100}%" />
62+
</div>
63+
{/if}
64+
65+
{#if p >= 0.4}
66+
<div class="fade" />
67+
{/if}

‎examples/realworld.svelte.dev/jsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
6+
"$lib/*": ["src/lib/*"]
7+
}
8+
},
9+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
10+
}

‎examples/realworld.svelte.dev/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"svelte": "^3.35.0"
1616
},
1717
"dependencies": {
18+
"cookie": "^0.4.1",
1819
"node-fetch": "^2.6.1"
1920
}
2021
}

‎examples/realworld.svelte.dev/src/lib/ArticleList/ArticlePreview.svelte

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
export let article;
55
export let user;
66
7-
async function toggleFavorite() {
7+
async function toggle_favorite() {
88
// optimistic UI
99
if (article.favorited) {
1010
article.favoritesCount -= 1;
@@ -22,37 +22,36 @@
2222

2323
<div class="article-preview">
2424
<div class="article-meta">
25-
<a href='/profile/@{article.author.username}'>
25+
<a href="/profile/@{article.author.username}">
2626
<img src={article.author.image} alt={article.author.username} />
2727
</a>
2828

2929
<div class="info">
30-
<a class="author" href='/profile/@{article.author.username}'> {article.author.username}
31-
</a>
32-
<span class="date">
33-
{new Date(article.createdAt).toDateString()}
34-
</span>
30+
<a class="author" href="/profile/@{article.author.username}"> {article.author.username} </a>
31+
<span class="date"> {new Date(article.createdAt).toDateString()} </span>
3532
</div>
3633

3734
{#if user}
3835
<div class="pull-xs-right">
39-
<button class='btn btn-sm {article.favorited ? "btn-primary" : "btn-outline-primary"}' on:click={toggleFavorite}>
40-
<i class="ion-heart"></i> {article.favoritesCount}
36+
<button
37+
class="btn btn-sm {article.favorited ? 'btn-primary' : 'btn-outline-primary'}"
38+
on:click={toggle_favorite}
39+
>
40+
<i class="ion-heart" />
41+
{article.favoritesCount}
4142
</button>
4243
</div>
4344
{/if}
4445
</div>
4546

46-
<a href='/article/{article.slug}' rel='prefetch' class="preview-link">
47+
<a href="/article/{article.slug}" rel="prefetch" class="preview-link">
4748
<h1>{article.title}</h1>
4849
<p>{article.description}</p>
4950
<span>Read more...</span>
5051
<ul class="tag-list">
5152
{#each article.tagList as tag}
52-
<li class="tag-default tag-pill tag-outline">
53-
{tag}
54-
</li>
53+
<li class="tag-default tag-pill tag-outline"><a href="/?tag={tag}">{tag}</a></li>
5554
{/each}
5655
</ul>
5756
</a>
58-
</div>
57+
</div>

‎examples/realworld.svelte.dev/src/lib/ArticleList/ListPagination.svelte

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎examples/realworld.svelte.dev/src/lib/ArticleList/index.svelte

Lines changed: 10 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,16 @@
11
<script>
2-
import { session, page } from '$app/stores';
3-
import * as api from '$lib/api.js';
2+
import { session } from '$app/stores';
43
import ArticlePreview from './ArticlePreview.svelte';
5-
import ListPagination from './ListPagination.svelte';
64
7-
export let tab, username = false;
8-
export let favorites = false;
9-
export let tag;
10-
export let p;
11-
12-
let query;
13-
let articles;
14-
let articlesCount;
15-
16-
$: {
17-
const endpoint = tab === 'feed' ? 'articles/feed' : 'articles';
18-
const page_size = tab === 'feed' ? 5 : 10;
19-
20-
let params = `limit=${page_size}&offset=${(p - 1) * page_size}`;
21-
if (tab === 'tag') params += `&tag=${tag}`;
22-
if (tab === 'profile') params += `&${favorites ? 'favorited' : 'author'}=${encodeURIComponent(username)}`;
23-
24-
query = `${endpoint}?${params}`;
25-
}
26-
27-
$: query && getData();
28-
29-
async function getData() {
30-
articles = null;
31-
32-
// TODO do we need some error handling here?
33-
({ articles, articlesCount } = await api.get(query, $session.user && $session.user.token));
34-
}
5+
export let articles;
356
</script>
367

37-
{#if articles}
38-
{#if articles.length === 0}
39-
<div class="article-preview">
40-
No articles are here... yet.
41-
</div>
42-
{:else}
43-
<div>
44-
{#each articles as article (article.slug)}
45-
<ArticlePreview {article} user={$session.user}/>
46-
{/each}
47-
48-
<ListPagination {articlesCount} page={parseInt($page.params.user, 10)} />
49-
</div>
50-
{/if}
8+
{#if articles.length === 0}
9+
<div class="article-preview">No articles are here... yet.</div>
5110
{:else}
52-
<div class="article-preview">Loading...</div>
53-
{/if}
11+
<div>
12+
{#each articles as article (article.slug)}
13+
<ArticlePreview {article} user={$session.user} />
14+
{/each}
15+
</div>
16+
{/if}

‎examples/realworld.svelte.dev/src/lib/Home.svelte

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎examples/realworld.svelte.dev/src/lib/MainView/index.svelte

Lines changed: 0 additions & 54 deletions
This file was deleted.

0 commit comments

Comments
 (0)