posts fetched from server

5 files changed, 87 insertions, 15 deletions

diff --git a/components/tag.tsx b/components/tag.tsx
index 6cacb89..48c75ce 100644
--- a/components/tag.tsx
+++ b/components/tag.tsx
@@ -12,7 +12,7 @@ export default function Tags(props: {
 export function Tag(props: {
 	name: string;
 }) {
-	return <a className="tag" href={"/search?tag=" + props.name} style={{
+	return <a className="tag" href={"/search?q=" + props.name} style={{
 		"--tag-hue": props.name
 			.split("")
 			.map(char => char.charCodeAt(0))
diff --git a/pages/search.tsx b/pages/search.tsx
index 11cfe2c..8053d4a 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,6 +1,9 @@
+import { useState, useEffect } from 'react';
+
 import Navbar from '../components/navbar';
 import { FormEvent } from 'react';
 import { ArticleMeta } from './post/[id]';
+import Tags from '../components/tag'
 
 import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
 
@@ -16,13 +19,47 @@ function SearchBar(props: {
 	</div>
 }
 
-export default function SearchPage(props: {
-	posts: Array<{
-		props: {
-			meta: ArticleMeta
+interface Post {
+	title: string
+	subtitle: string
+	author: string
+	date: string
+	urlname: string
+	tags: Array<string>
+}
+
+interface PostsInfo {
+	valid_tags: Array<string>
+	posts: Array<Post>
+}
+
+function Post(props: { post: Post }) {
+	return <a className="post" href={"/post/" + props.post.urlname}>
+		<b className="title">{props.post.title}</b>
+		{props.post.subtitle && <p className="subtitle">{props.post.subtitle}</p>}
+		<p className="authordate">Written by {props.post.author} on {new Date(props.post.date).toLocaleString("en-us", {
+			month: "long", day: "numeric"
+		})}</p>
+		<Tags tags={props.post.tags}/>
+	</a>;
+}
+
+function Posts(props: { posts: Array<Post> }) {
+	return <div className="searchResults">
+		{
+			props.posts.map(post => <Post post={post} key={Math.random().toString()}/>)
 		}
-	}>
-}) {
+	</div>;
+}
+
+export default function SearchPage() {
+	var [posts, setPosts] = useState<PostsInfo>({ posts: [], valid_tags: [] });
+
+	useEffect(() => {(async () => {
+		var posts = await fetch("/posts.json");
+		setPosts(await posts.json());
+	})()}, []);
+
 	return <div>
 		<div className="centeredPage">
 			<div className="titleWrapper">
@@ -37,10 +74,9 @@ export default function SearchPage(props: {
 				<SearchBar searchFunction={(event?: FormEvent<HTMLFormElement>) => {
 					event?.preventDefault();
 				}}/>
+				<Posts posts={posts.posts}/>
 			</div>
 		</div>
 	</div>
 }
 
-// grep -Por "^\[meta\]:\s+<tags>\s+\(\K(.+)(?=\)$)" posts
-
diff --git a/styles/layout.css b/styles/layout.css
index f648634..c4c3694 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -30,7 +30,7 @@
 	position: sticky;
 	top: var(--page-margins);
 	bottom: var(--page-margins);
-	height: calc(100vh - 2 * var(--page-margins));
+	max-height: calc(100vh - 2 * var(--page-margins));
 
 	overflow-y: scroll;
 
diff --git a/styles/search.css b/styles/search.css
index 5a63500..af6d3a4 100644
--- a/styles/search.css
+++ b/styles/search.css
@@ -2,6 +2,7 @@
 	background-color: var(--heliotrope-gray);
 	border-radius: 8px;
 	padding: 12px;
+	margin-bottom: 24px;
 }
 
 .searchBar .input {
@@ -36,3 +37,36 @@
 	color: var(--heliotrope-gray) !important;
 }
 
+.searchResults .post::after {
+	display: none;
+}
+
+.searchResults .post {
+	display: block;
+	border-radius: 8px;
+
+	padding: 8px;
+	margin-bottom: 12px;
+	background-color: var(--oxford-blue);
+
+	color: var(--fg);
+}
+
+.searchResults .post .title,
+.searchResults .post .subtitle,
+.searchResults .post .authordate {
+	margin: 4px 0;
+}
+
+.searchResults .post .authordate {
+	font-style: italic;
+	opacity: .75;
+}
+
+@media (prefers-color-scheme: light) {
+	.searchBar { background-color: var(--fg); }
+	.searchBar .button { color: var(--fg) !important; }
+
+	.searchResults .post { background-color: var(--heliotrope-gray); }
+}
+
diff --git a/styles/tags.css b/styles/tags.css
index 95ce012..5e6af11 100644
--- a/styles/tags.css
+++ b/styles/tags.css
@@ -1,8 +1,8 @@
-.titleWrapper .tags {
+.tags {
 	margin-top: 12px;
 }
 
-.titleWrapper .tags .tag {
+.tags .tag {
 	--tag-color: hsl(var(--tag-hue), 75%, 70%);
 
 	padding: 4px 12px;
@@ -18,12 +18,14 @@
 }
 
 @media (prefers-color-scheme: light) {
-	.titleWrapper .tags .tag {
+	.tags .tag {
 		--tag-color: hsl(var(--tag-hue), 50%, 40%);
 	}
 }
 
-.titleWrapper .tags .tag::before {
+.tags .tag::after { display: none; }
+
+.tags .tag::before {
 	content: '';
 	position: absolute;
 	top: 0;
@@ -37,4 +39,4 @@
 	opacity: .25;
 }
 
-.titleWrapper .tags > * { margin-right: 6px; }
+.tags > * { margin-right: 6px; }