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

.prettierrc

@@ -2,5 +2,7 @@
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",
-	"printWidth": 100
+	"printWidth": 100,
+	"svelteSortOrder": "scripts-markup-styles",
+	"svelteBracketNewLine": true
 }

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

@@ -3,8 +3,8 @@
 	let p = 0;
 	let visible = false;
 	onMount(() => {
+		visible = true;
 		function next() {
-			visible = true;
 			p += 0.1;
 			const remaining = 1 - p;
 			if (remaining > 0.15) setTimeout(next, 500 / remaining);
@@ -13,16 +13,6 @@
 	});
 </script>
 
-{#if visible}
-	<div class="progress-container">
-		<div class="progress" style="width: {p * 100}%"></div>
-	</div>
-{/if}
-
-{#if p >= 0.4}
-	<div class="fade"></div>
-{/if}
-
 <style>
 	.progress-container {
 		position: absolute;
@@ -46,18 +36,32 @@
 		position: fixed;
 		width: 100%;
 		height: 100%;
-		background-color: rgba(255,255,255,0.3);
+		background-color: rgba(255, 255, 255, 0.3);
 		pointer-events: none;
 		z-index: 998;
 		animation: fade 0.4s;
 	}
 
 	:global(html).dark .fade {
-		background-color: rgba(0,0,0,0.3);
+		background-color: rgba(0, 0, 0, 0.3);
 	}
 
 	@keyframes fade {
-		from { opacity: 0 }
-		to { opacity: 1 }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
-</style>
+</style>
+
+{#if visible}
+	<div class="progress-container">
+		<div class="progress" style="width: {p * 100}%" />
+	</div>
+{/if}
+
+{#if p >= 0.4}
+	<div class="fade" />
+{/if}

examples/realworld.svelte.dev/jsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

examples/realworld.svelte.dev/package.json

@@ -15,6 +15,7 @@
 		"svelte": "^3.35.0"
 	},
 	"dependencies": {
+		"cookie": "^0.4.1",
 		"node-fetch": "^2.6.1"
 	}
 }

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

@@ -4,7 +4,7 @@
 	export let article;
 	export let user;
 
-	async function toggleFavorite() {
+	async function toggle_favorite() {
 		// optimistic UI
 		if (article.favorited) {
 			article.favoritesCount -= 1;
@@ -22,37 +22,36 @@
 
 <div class="article-preview">
 	<div class="article-meta">
-		<a href='/profile/@{article.author.username}'>
+		<a href="/profile/@{article.author.username}">
 			<img src={article.author.image} alt={article.author.username} />
 		</a>
 
 		<div class="info">
-			<a class="author" href='/profile/@{article.author.username}'> {article.author.username}
-			</a>
-			<span class="date">
-				{new Date(article.createdAt).toDateString()}
-			</span>
+			<a class="author" href="/profile/@{article.author.username}"> {article.author.username} </a>
+			<span class="date"> {new Date(article.createdAt).toDateString()} </span>
 		</div>
 
 		{#if user}
 			<div class="pull-xs-right">
-				<button class='btn btn-sm {article.favorited ? "btn-primary" : "btn-outline-primary"}' on:click={toggleFavorite}>
-					<i class="ion-heart"></i> {article.favoritesCount}
+				<button
+					class="btn btn-sm {article.favorited ? 'btn-primary' : 'btn-outline-primary'}"
+					on:click={toggle_favorite}
+				>
+					<i class="ion-heart" />
+					{article.favoritesCount}
 				</button>
 			</div>
 		{/if}
 	</div>
 
-	<a href='/article/{article.slug}' rel='prefetch' class="preview-link">
+	<a href="/article/{article.slug}" rel="prefetch" class="preview-link">
 		<h1>{article.title}</h1>
 		<p>{article.description}</p>
 		<span>Read more...</span>
 		<ul class="tag-list">
 			{#each article.tagList as tag}
-				<li class="tag-default tag-pill tag-outline">
-					{tag}
-				</li>
+				<li class="tag-default tag-pill tag-outline"><a href="/?tag={tag}">{tag}</a></li>
 			{/each}
 		</ul>
 	</a>
-</div>
+</div>

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

@@ -1,53 +1,16 @@
 <script>
-	import { session, page } from '$app/stores';
-	import * as api from '$lib/api.js';
+	import { session } from '$app/stores';
 	import ArticlePreview from './ArticlePreview.svelte';
-	import ListPagination from './ListPagination.svelte';
 
-	export let tab, username = false;
-	export let favorites = false;
-	export let tag;
-	export let p;
-
-	let query;
-	let articles;
-	let articlesCount;
-
-	$: {
-		const endpoint = tab === 'feed' ? 'articles/feed' : 'articles';
-		const page_size = tab === 'feed' ? 5 : 10;
-
-		let params = `limit=${page_size}&offset=${(p - 1) * page_size}`;
-		if (tab === 'tag') params += `&tag=${tag}`;
-		if (tab === 'profile') params += `&${favorites ? 'favorited' : 'author'}=${encodeURIComponent(username)}`;
-
-		query = `${endpoint}?${params}`;
-	}
-
-	$: query && getData();
-
-	async function getData() {
-		articles = null;
-
-		// TODO do we need some error handling here?
-		({ articles, articlesCount } = await api.get(query, $session.user && $session.user.token));
-	}
+	export let articles;
 </script>
 
-{#if articles}
-	{#if articles.length === 0}
-		<div class="article-preview">
-			No articles are here... yet.
-		</div>
-	{:else}
-		<div>
-			{#each articles as article (article.slug)}
-				<ArticlePreview {article} user={$session.user}/>
-			{/each}
-
-			<ListPagination {articlesCount} page={parseInt($page.params.user, 10)}  />
-		</div>
-	{/if}
+{#if articles.length === 0}
+	<div class="article-preview">No articles are here... yet.</div>
 {:else}
-	<div class="article-preview">Loading...</div>
-{/if}
+	<div>
+		{#each articles as article (article.slug)}
+			<ArticlePreview {article} user={$session.user} />
+		{/each}
+	</div>
+{/if}