aboutsummaryrefslogtreecommitdiff
path: root/pages/search.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'pages/search.tsx')
-rw-r--r--pages/search.tsx52
1 files changed, 44 insertions, 8 deletions
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
-