Use supabase

9 files changed, 54 insertions, 80 deletions

diff --git a/src/lib/components/footer/footer.svelte b/src/lib/components/footer/footer.svelte
index e2db937..f24c54b 100644
--- a/src/lib/components/footer/footer.svelte
+++ b/src/lib/components/footer/footer.svelte
@@ -7,10 +7,10 @@
 </script>
 
 <footer
-	class="col-start-1 col-span-12 border-t-2 border-t-black border-solid"
+	class="col-start-1 col-span-12 border-t border-t-black border-solid"
 	title={$_('footer.title')}
 >
-	<ul class="p-0">
+	<ul class="py-2">
 		<li class="inline m-1">{@html $_('footer.license', { values: { licenseUrl } })}</li>
 		<li class="inline m-1">{$_('footer.choose_language')}: <LanguageSelector /></li>
 	</ul>
diff --git a/src/lib/components/forum/forum.svelte b/src/lib/components/forum/forum.svelte
index bcd23a3..e9841a9 100644
--- a/src/lib/components/forum/forum.svelte
+++ b/src/lib/components/forum/forum.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Forum } from '$lib/data/types';
+	import { topicsForForum } from '$lib/stores/topics';
 
 	export let forum: Forum;
 
@@ -7,9 +8,11 @@
 	import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
 </script>
 
-<h1>{forum.glyph} {$_(forum.label)}</h1>
-<ul>
-	{#each forum.topics as topic}
-		<TopicSummary {topic} />
-	{/each}
+<h1 class="py-4 font-bold text-3xl">{forum.glyph} {$_(forum.label)}</h1>
+<ul class="list-disc list-inside pl-2">
+  {#if forum.topics}
+    {#each forum.topics as topic}
+      <TopicSummary {topic} />
+    {/each}
+  {/if}
 </ul>
diff --git a/src/lib/components/forum_list/forum_list.svelte b/src/lib/components/forum_list/forum_list.svelte
index 250e36e..d1518bd 100644
--- a/src/lib/components/forum_list/forum_list.svelte
+++ b/src/lib/components/forum_list/forum_list.svelte
@@ -4,14 +4,16 @@
 	export let forums: Forum[];
 
 	import { _ } from 'svelte-i18n';
-	$: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+  $: sortedForums = forums
+  .slice()
+  .sort((a, b) => a.position - b.position);
 </script>
 
-<ul>
+<ul class="p-0 pl-2">
 	{#each sortedForums as forum}
-		<li>
-			<a href="/f/{forum.id}">
-				<span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
+		<li class="block text-left mb-5">
+			<a class="no-underline text-blue-600 visited:text-purple-500" href="/f/{forum.id}">
+				<span aria-hidden="true" class="block text-2xl {forum.glyph}">{forum.glyph}</span>
 				<span class="navigation-label">{$_(forum.label)}</span>
 			</a>
 		</li>
@@ -19,26 +21,7 @@
 </ul>
 
 <style>
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: block;
-		text-align: left;
-		margin-bottom: 20px;
-	}
-
-	.navigation-glyph {
-		font-size: 1.5rem;
-		display: block;
-	}
-
 	.☽ {
 		font-size: 2rem;
 	}
-
-	a {
-		text-decoration: none;
-	}
 </style>
diff --git a/src/lib/components/glyph/glyph.svelte b/src/lib/components/glyph/glyph.svelte
index 0559b98..0726752 100644
--- a/src/lib/components/glyph/glyph.svelte
+++ b/src/lib/components/glyph/glyph.svelte
@@ -5,9 +5,9 @@
 	export let uuid: string;
 </script>
 
-<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
+<div class="inline-block w-12 h-12 mt-1 bg-white border border-black border-solid p-0.5 box-content glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
 	{#each getGlyphHash(uuid) as fragment}
-		<span class={fragment.glyph} style="color: {fragment.color} ">
+		<span class="block text-2xl float-left w-6 h-6 text-center leading-6 {fragment.glyph}" style="color: {fragment.color} ">
 			{fragment.glyph}
 		</span>
 	{/each}
@@ -16,22 +16,6 @@
 <style>
 	.glyphicon {
 		border: 1px solid black;
-		display: inline-block;
-		font-size: 1.4rem;
-		height: 48px;
-		margin-top: 5px;
-		width: 48px;
-		background-color: white;
-		padding: 2px;
-	}
-
-	span {
-		display: block;
-		float: left;
-		width: 24px;
-		height: 24px;
-		text-align: center;
-		line-height: 24px;
 	}
 
 	.☽ {
diff --git a/src/lib/components/header/header.svelte b/src/lib/components/header/header.svelte
index 3d08913..93f828b 100644
--- a/src/lib/components/header/header.svelte
+++ b/src/lib/components/header/header.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <header
-	class="col-start-1 col-span-12 border-b-2 border-b-black border-solid"
+	class="col-start-1 col-span-12 border-b border-b-black border-solid"
 	title={$_('header.title')}
 >
 	<ul class="p-0">
diff --git a/src/lib/components/post/post.svelte b/src/lib/components/post/post.svelte
index 535f7ac..b0f99e4 100644
--- a/src/lib/components/post/post.svelte
+++ b/src/lib/components/post/post.svelte
@@ -15,26 +15,30 @@
 	class="post-meta"
 	title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
 >
-	<Glyph uuid={post.author.id} />
-	<span class="h-card">
-		{$_('post.author_credit')}
-		<a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
-	</span>
+	<Glyph uuid={post.author_id} />
+  {#if post.author}
+    <span class="h-card">
+      {$_('post.author_credit')}
+      <a href="/a/{post.author.handle}" class="p-nickname u-url underline text-blue-600 visited:text-purple-500">{post.author.handle}</a>.
+    </span>
+  {:else}
+    <span>????</span>
+  {/if}
 	<time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
-		<a title={$_('post.permalink_title')} href="/p/{post.id}">
+		<a title={$_('post.permalink_title')} class="underline text-blue-600 visited:text-purple-500" href="/p/{post.id}">
 			{timestampToISO(post.created_at)}
 		</a>
 	</time>
 	{#if post.topic}
 		<span>
-			({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
+			({$_('post.topic_location')} <a class="text-blue-600 underline visited:text-purple-500" href="/t/{post.topic.id}">{post.topic.title}</a>.)
 		</span>
 	{/if}
 </aside>
 <article
-	class="e-content"
+	class="e-content whitespace-pre"
 	title={$_('post.title', {
-		values: { count: index + 1, total: count, author: post.author.handle }
+    values: { count: index + 1, total: count, author: post.author?.handle || '????' }
 	})}
 >
 	{post.text}
diff --git a/src/lib/components/tag/tag.svelte b/src/lib/components/tag/tag.svelte
index b3fe806..1744094 100644
--- a/src/lib/components/tag/tag.svelte
+++ b/src/lib/components/tag/tag.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import type { Tag } from '$lib/data/types';
+	import type { Tag, Topic } from '$lib/data/types';
 
 	export let tag: Tag;
+	export let topics: Topic[];
 
 	import { _ } from 'svelte-i18n';
 	import TopicSummary from '$lib/components/topic_summary/topic_summary.svelte';
 </script>
 
-<h1>{$_('tag.title')}: {tag.id}</h1>
-<ul>
-	{#each tag.topics as topic}
+<h1 class="py-4 font-bold text-3xl">{$_('tag.title')}: {tag}</h1>
+<ul class="list-disc list-inside pl-2">
+	{#each topics as topic}
 		<TopicSummary {topic} />
 	{/each}
 </ul>
diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte
index ec89876..0715857 100644
--- a/src/lib/components/topic/topic.svelte
+++ b/src/lib/components/topic/topic.svelte
@@ -7,41 +7,43 @@
 	import Post from '$lib/components/post/post.svelte';
 	import { readableTime } from '$lib/utils/readable_time';
 
-	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
+	$: remainingTime = new Date(topic.updated_at).getTime() + topic.ttl - Date.now();
 	$: remaining = readableTime(remainingTime);
 </script>
 
 <div class="h-entry" title={$_('topic.title')}>
-	<h1 class="p-name">{topic.title}</h1>
+	<h1 class="py-4 font-bold text-3xl p-name">{topic.title}</h1>
 	<aside class="topic-meta" title={$_('topic.metadata_title')}>
 		{#if topic.forum}
 			<span class="topic-location">
 				{$_('topic.category_location')}
-				<a href="/f/{topic.forum.id}" class="p-category">
+				<a href="/f/{topic.forum.id}" class="p-category underline text-blue-600 visited:text-purple-500">
 					{topic.forum.glyph}
 					{$_(topic.forum.label)}
 				</a>.
 			</span>
 		{/if}
 		<span class="topic-ttl">
-			<a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+			<a class="u-url u-uid underline text-blue-600 visited:text-purple-500" title={$_('topic.permalink_title')} href="/t/{topic.id}">
 				({$_('topic.remaining_time', {
 					values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
 				})})
-			</a>.
+			</a>
 		</span>
 	</aside>
-	{#if topic.tags.length > 0}
+	{#if topic.tags}
 		<aside class="topic-tags" title={$_('topic.tags_title')}>
 			{$_('topic.tags_location')}
 			{#each topic.tags as tag}
-				<a href="/g/{tag.id}" class="p-category">
-					{tag.id}<span class="tag-weight">({tag.weight})</span>
-				</a>{' '}
+				<a href="/g/{tag.tag}" class="p-category underline text-blue-600 visited:text-purple-500">
+					{tag.tag}<span class="tag-weight">({tag.count})</span></a
+      >{' '}
 			{/each}
 		</aside>
 	{/if}
-	{#each topic.posts as post, index}
-		<Post {post} {index} count={topic.posts.length} />
-	{/each}
+	{#if topic.posts}
+    {#each topic.posts as post, index}
+      <Post {post} {index} count={topic.posts.length} />
+    {/each}
+	{/if}
 </div>
diff --git a/src/lib/components/topic_summary/topic_summary.svelte b/src/lib/components/topic_summary/topic_summary.svelte
index 337a064..d54a195 100644
--- a/src/lib/components/topic_summary/topic_summary.svelte
+++ b/src/lib/components/topic_summary/topic_summary.svelte
@@ -6,13 +6,13 @@
 	import { _ } from 'svelte-i18n';
 	import { readableTime } from '$lib/utils/readable_time';
 
-	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
+	$: remainingTime = new Date(topic.updated_at).getTime() + topic.ttl - Date.now();
 	$: remaining = readableTime(remainingTime);
 </script>
 
 <li class="h-entry" title={$_('topic.title')}>
 	<span class="p-name">
-		<a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+		<a class="u-url u-uid underline text-blue-600 visited:text-purple-500" title={$_('topic.permalink_title')} href="/t/{topic.id}">
 			{topic.title}
 		</a></span
 	>
@@ -22,6 +22,3 @@
 		})})
 	</span>
 </li>
-
-<style>
-</style>