Refactor: Posts Page and Preview

src/routes/(app)/+layout.svelte

@@ -23,6 +23,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
+    padding: 32px;
   }
 </style>
 

src/routes/(app)/posts/[name]/+page.svelte

@@ -1,9 +1,7 @@
 <script>
-    import Comment from "$comp/comment.svelte";
-    import Mention from "$comp/mention.svelte";
-    import UserItem from "$comp/useritem.svelte";
+    import Post from "$comp/page/post.svelte";
     import { buildCommentTree } from "$lib/client/nodetree";
-    import { getNamedId, gotoNamedId } from "$lib/util";
+    import { gotoNamedId } from "$lib/util";
     import { onMount } from "svelte";
 
   /**
@@ -15,36 +13,11 @@
   export let data;
 
   $: post = data.post;
-
   $: commentTree = buildCommentTree(data.comments);
 
   onMount(() => {
     gotoNamedId(post.id, post.name);
-  })
+  });
 </script>
 
-<style>
-  .post {
-    display: flex;
-    flex-direction: column;
-  }
-
-  h1 {
-    margin: 0;
-    text-align: center;
-  }
-</style>
-
-<div class="post">
-  <h1 class="taviraj-light">{post.name}</h1>
-
-  <UserItem user={post.author}></UserItem>
-
-  <p>{post.content}</p>
-
-  <div>
-    {#each commentTree as reply}
-      <Comment commentNode={reply}></Comment>
-    {/each}
-  </div>
-</div>
+<Post post={post} commentTree={commentTree}></Post>