added recent posts to home page

9 files changed, 91 insertions, 10 deletions

diff --git a/components/card.tsx b/components/card.tsx
new file mode 100644
index 0000000..ba62d57
--- /dev/null
+++ b/components/card.tsx
@@ -0,0 +1,11 @@
+import { ArticleMeta } from '../pages/post/[id]';
+
+export default function PostCard(props: {
+	post: ArticleMeta
+}) {
+	return <a className="postCard" href={"/post/" + props.post.id}>
+		{ props.post.cover && <img src={props.post.cover} className="cover"/> }
+		<h2 className="title">{props.post.title}</h2>
+		<strong className="subtitle">{props.post.subtitle}</strong>
+	</a>
+}
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,
diff --git a/posts/index.md b/posts/index.md
index f61a35c..aeaf44b 100644
--- a/posts/index.md
+++ b/posts/index.md
@@ -3,6 +3,7 @@
 [meta]: <author> (Loek)
 [meta]: <date> (March 27 2021)
 [meta]: <tags> (test, debug)
+[meta]: <cover> (https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fbarkpost-assets.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2013%2F11%2FplainDoge.jpg&f=1&nofb=1)
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing
 
diff --git a/scripts/postinfo b/scripts/postinfo
index 72c6526..968eb13 100755
--- a/scripts/postinfo
+++ b/scripts/postinfo
@@ -8,13 +8,15 @@ jq -n \
 	--argjson author   "$(./meta author $filename)" \
 	--argjson date     "$(./meta date $filename)" \
 	--argjson tags     "$(./meta tags $filename)" \
-	--argjson urlname  "$(basename $filename .md | jq --raw-input)" \
+	--argjson cover    "$(./meta cover $filename)" \
+	--argjson id  "$(basename $filename .md | jq --raw-input)" \
 '{
 	"title": $title,
 	"subtitle": $subtitle,
 	"author": $author,
 	"date": $date,
 	"tags": $tags,
-	"urlname": $urlname
+	"cover": $cover,
+	"id": $id
 }'
 
diff --git a/styles/card.css b/styles/card.css
new file mode 100644
index 0000000..1510492
--- /dev/null
+++ b/styles/card.css
@@ -0,0 +1,28 @@
+.postCard {
+	background-color: var(--oxford-blue);
+	padding: 12px;
+	border-radius: 8px;
+
+	overflow-x: hidden;
+	color: var(--fg) !important;
+}
+
+.postCard::after {
+	display: none;
+}
+
+.postCard .cover {
+	width: 100%;
+	border-radius: 6px;
+	max-height: 220px;
+	object-fit: cover;
+}
+
+.postCard .title {
+	font-size: 24px;
+}
+
+.postCard .subtitle {
+	font-weight: 500;
+}
+
diff --git a/styles/layout.css b/styles/layout.css
index 188f17a..6715681 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -58,3 +58,9 @@
 	overflow-x: scroll;
 }
 
+.recentPosts {
+	display: grid;
+	grid-gap: 12px;
+	grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
+}
+