added recent posts to home page

4 files changed, 41 insertions, 8 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 662f841..fa7219a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,6 +8,7 @@ import '../styles/layout.css';
 import '../styles/navbar.css';
 import '../styles/search.css';
 import '../styles/tags.css';
+import '../styles/card.css';
 
 export default function Blog({ Component, pageProps }) {
 	return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 65b53cb..746405a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,9 +1,13 @@
+import Button from '../components/button';
 import Chapters, { chapter } from '../components/chapters';
 import Navbar, { NavbarItem } from '../components/navbar';
 import Seperator from '../components/seperator';
-
+import PostCard from '../components/card';
+import { PostsInfo } from './search';
 import { ArticleMeta, getStaticProps as getBlogPage, RenderedArticle } from './post/[id]';
 
+import { useEffect, useState } from 'react';
+
 var posts = ['index', 'index', 'index'];
 
 export default function Home(props: {
@@ -14,6 +18,16 @@ export default function Home(props: {
 		};
 	}>;
 }) {
+	var [posts, setPosts] = useState<PostsInfo>({ posts: [], valid_tags: [] });
+
+	useEffect(() => {
+		(async () => {
+			var posts = await fetch('/posts.json');
+			var postsJson: PostsInfo = await posts.json();
+			setPosts(postsJson);
+		})();
+	}, []);
+
 	return <div>
 		<div className='centeredPage'>
 			<div className='titleWrapper'>
@@ -39,9 +53,24 @@ export default function Home(props: {
 			<div className='contentWrapper'>
 				{props.posts.map((post, index) => {
 					return <>
-						{index != 0 && <h1>{post.props.meta.title}</h1>}
+						{ index != 0 && <h1>{post.props.meta.title}</h1> }
 						<RenderedArticle content={post.props.content} />
-						{index + 1 != props.posts.length && <Seperator />}
+						{ index + 1 != props.posts.length && <Seperator /> }
+						{
+							index == 0 && <>
+								<h2>Recent posts</h2>
+								<div className="recentPosts">
+								{
+									posts.posts.slice(0, 4).map(post => {
+										return <PostCard post={post}/>;
+									})
+								}
+								</div>
+
+								<div><Button text="Go to all posts" href="/search"/></div>
+								<Seperator />
+							</>
+						}
 					</>;
 				})}
 			</div>
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
index c0d4e9d..eed1429 100644
--- a/pages/post/[id].tsx
+++ b/pages/post/[id].tsx
@@ -18,6 +18,7 @@ export interface ArticleMeta {
 	tags?: Array<string>;
 	date?: string;
 	chapters?: Array<chapter>;
+	cover?: string;
 	id?: string;
 }
 
@@ -78,6 +79,7 @@ var parseTag = {
 	'title': (val: string) => val,
 	'subtitle': (val: string) => val,
 	'author': (val: string) => val,
+	'cover': (val: string) => val,
 	'tags': (val: string) => val.split(',').map(i => i.trim()),
 	'date': (val: string) => new Date(val).toDateString(),
 };
diff --git a/pages/search.tsx b/pages/search.tsx
index db5cc89..8daff50 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -22,22 +22,23 @@ function SearchBar(props: { searchFunction: () => void; }) {
 	</div>;
 }
 
-interface Post {
+export interface Post {
 	title: string;
 	subtitle: string;
 	author: string;
 	date: string;
-	urlname: string;
+	id: string;
+	cover: string;
 	tags: Array<string>;
 }
 
-interface PostsInfo {
+export interface PostsInfo {
 	valid_tags: Array<string>;
 	posts: Array<Post>;
 }
 
 function Post(props: { post: Post; }) {
-	return <a className='post' href={'/post/' + props.post.urlname}>
+	return <a className='post' href={'/post/' + props.post.id}>
 		<b className='title'>{props.post.title}</b>
 		{props.post.subtitle && <p className='subtitle'>{props.post.subtitle}</p>}
 		<p className='authordate'>
@@ -96,7 +97,7 @@ export default function SearchPage() {
 			'subtitle',
 			'author',
 			'date',
-			'urlname',
+			'id',
 			'tags',
 		],
 		isCaseSensitive: false,