Added front page, moved shelf navigation to header.

pages/account/create.page.vue

@@ -121,7 +121,9 @@ async function signup() {
 <style scoped>
 .content {
 	display: flex;
+	flex-direction: column;
 	justify-content: center;
+	flex-grow: 1;
 	align-items: center;
 }
 

pages/account/login.page.vue

@@ -91,6 +91,8 @@ async function signup() {
 <style scoped>
 .content {
 	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 }

pages/index/index.page.server.js

@@ -1,10 +1,12 @@
-import { fetchShelves } from '../../src/shelves';
+import { fetchUserPosts, fetchAllPosts } from '../../src/posts';
 
-async function getPageData() {
-	const shelves = await fetchShelves();
+async function getPageData(pageContext) {
+	const posts = pageContext.session.user
+		? await fetchUserPosts(pageContext.session.user)
+		: await fetchAllPosts();
 
 	return {
-		shelves,
+		posts,
 	};
 }
 

pages/index/index.page.vue

@@ -1,37 +1,20 @@
 <template>
 	<div class="content">
-		<ul>
-			<li><a
-				href="/shelf/create"
-				class="link"
-			>Create new shelf</a></li>
-
-			<li v-if="!me"><a
-				href="/account/login"
-				class="link"
-			>Log in</a></li>
-
-			<li><a
-				href="/account/create"
-				class="link"
-			>Sign up</a></li>
-		</ul>
-
-		<ul>
+		<ul class="posts nolist">
 			<li
-				v-for="shelf in shelves"
-				:key="shelf.id"
-			><a
-				:href="`/s/${shelf.slug}`"
-				class="link"
-			>{{ shelf.slug }}</a></li>
+				v-for="post in posts"
+				:key="post.id"
+			>
+				<Post :post="post" />
+			</li>
 		</ul>
 	</div>
 </template>
 
 <script setup>
 import { usePageContext } from '../../renderer/usePageContext';
+import Post from '../../components/posts/post.vue';
 
-const { me, pageData } = usePageContext();
-const { shelves } = pageData;
+const { pageData } = usePageContext();
+const { posts } = pageData;
 </script>

pages/posts/post.page.route.js

@@ -1 +1 @@
-export default '/s/@shelfId/post/@postId';
+export default '/s/@shelfId/post/@postId/@postSlug?';

pages/posts/post.page.vue

@@ -65,7 +65,7 @@ const {
 
 <style scoped>
 .content {
-	width: 100%;
+	padding: 0;
 }
 
 .body {

pages/shelves/shelf.page.server.js

@@ -3,7 +3,7 @@ import { fetchShelf } from '../../src/shelves';
 import { fetchShelfPosts } from '../../src/posts';
 
 async function getPageData(pageContext) {
-	const shelf = await fetchShelf(pageContext.routeParams.id);
+	const shelf = await fetchShelf(pageContext.routeParams.id, { user: pageContext.session.user });
 	const posts = await fetchShelfPosts(pageContext.routeParams.id, { user: pageContext.session.user, limit: 50 });
 
 	if (!shelf) {

pages/shelves/shelf.page.vue

@@ -33,6 +33,7 @@ const {
 .posts {
 	width: 100%;
 	display: flex;
+	flex-direction: column;
 	margin-bottom: 1rem;
 }