1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import Button from '../components/button';
import PostCard from '../components/card';
import Chapters, { chapter } from '../components/chapters';
import Navbar, { MobileNavbar, NavbarItem } from '../components/navbar';
import Seperator from '../components/seperator';
import { ArticleMeta, getStaticProps as getBlogPage, RenderedArticle } from './post/[id]';
import { PostsInfo } from './search';
import { useEffect, useState } from 'react';
// edit this to change the post displayed on the home page and the pinned posts
var posts = ['index', 'connect4', 'software', 'git'];
export default function Home(props: {
posts: Array<{
props: {
content: string;
meta: ArticleMeta;
};
}>;
}) {
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'>
<h1>{props.posts[0].props.meta.title}</h1>
</div>
<div className='navAreaWrapper'>
<div className='sticky'>
<Navbar page='home' />
<NavbarItem title='Pinned posts:' classList={['pinned']} />
<Chapters
chapters={[
...props.posts.slice(1).map(post => {
return {
children: post.props.meta.chapters,
name: post.props.meta.title,
sectionLink: '/post/' + post.props.meta.id,
} as chapter;
}),
]}
/>
</div>
</div>
<MobileNavbar />
<div className='contentWrapper'>
{props.posts.map((post, index) => {
return <>
{index != 0 && <h1>{post.props.meta.title}</h1>}
<RenderedArticle content={post.props.content} />
{index + 1 != props.posts.length && <Seperator />}
{index == 0 && <>
<h2>Recent posts</h2>
<div className='recentPosts'>
{posts.posts.reverse().slice(0, 4).map(post => {
return <PostCard post={post} />;
})}
</div>
<div>
<Button text='Go to all posts' href='/search' />
</div>
<Seperator />
</>}
</>;
})}
</div>
</div>
</div>;
}
export function getStaticProps() {
var postsContent = [];
posts.forEach(id => {
postsContent.push(getBlogPage({ params: { id } }));
});
var staticProps = { props: { posts: postsContent } };
return staticProps;
}
|