show posts in recent order in PostList

source/generate.ts

@@ -116,16 +116,21 @@ function recursiveParser(fileOrFolderPath: string) {
 		if (!result.posts[urlPath].date) {
 			throw Error(`Date does not exist in file: ${urlPath}`)
 		}
-		result.posts[urlPath].date = new Date(
-			parsedMarkdown.data.date
-		).toLocaleString("default", {
+		const postDate = new Date(parsedMarkdown.data.date)
+		result.posts[urlPath].date = postDate.toLocaleString("default", {
 			month: "short",
 			day: "numeric",
 			year: "numeric",
 		})
-		if (result.date[result.posts[urlPath].date])
-			result.date[result.posts[urlPath].date].push(urlPath)
-		else result.date[result.posts[urlPath].date] = [urlPath]
+
+		const YYYYMMDD = new Date(
+			postDate.getTime() - postDate.getTimezoneOffset() * 60 * 1000
+		)
+			.toISOString()
+			.split("T")[0]
+
+		if (result.date[YYYYMMDD]) result.date[YYYYMMDD].push(urlPath)
+		else result.date[YYYYMMDD] = [urlPath]
 
 		//tags
 		if (result.posts[urlPath].tags) {
@@ -164,6 +169,20 @@ if (fs.lstatSync(dirPath).isDirectory()) {
 	throw Error("Initial path given does not lead to a directory")
 }
 
+let dateKeys: string[] = []
+for (const dateKey in result.date) {
+	dateKeys.push(dateKey)
+}
+
+dateKeys = dateKeys.sort()
+
+const resultDate = result.date
+result.date = {}
+
+dateKeys.forEach(
+	(sortedDateKey) => (result.date[sortedDateKey] = resultDate[sortedDateKey])
+)
+
 /** Step 3
  *  write to src/data/posts.json
  */

source/src/pages/PostList.tsx

@@ -1,3 +1,7 @@
+/** PostList.tsx
+ *  show posts in recent order
+ */
+
 import React from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
@@ -83,17 +87,28 @@ export default class PostList extends React.Component<
 
 	async componentDidMount() {
 		const PostCards: Array<unknown> = []
-		let howMany = this.state.howMany
+		const recentPosts = {}
 
-		for (const postPath in posts.posts) {
-			if (this.state.isLimited && howMany <= 0) continue
+		let postIndex = 0
+		for (const date in posts.date) {
+			if (postIndex == this.state.howMany) continue
 
-			const post = posts.posts[postPath]
+			const length = posts.date[date].length
+			for (let i = 0; i < length; i++) {
+				if (postIndex == this.state.howMany) continue
+				postIndex++
+				const url = posts.date[date][length - i - 1]
+				recentPosts[postIndex] = [url, posts.posts[url]]
+			}
+		}
+
+		for (const postIndex in recentPosts) {
+			const [url, post] = recentPosts[postIndex]
 
 			PostCards.push(
-				<StyledPostCard key={postPath} className="card main-content">
+				<StyledPostCard key={url} className="card main-content">
 					<StyledTitle>
-						<StyledLink to={postPath}>
+						<StyledLink to={`${process.env.PUBLIC_URL}${url}`}>
 							{post?.title ? post.title : "Unknown title"}
 						</StyledLink>
 					</StyledTitle>
@@ -108,12 +123,14 @@ export default class PostList extends React.Component<
 						}}
 					></div>
 					<small>
-						<StyledLink to={postPath}>Read more</StyledLink>
+						<StyledLink to={`${process.env.PUBLIC_URL}${url}`}>
+							Read more
+						</StyledLink>
 					</small>
 				</StyledPostCard>
 			)
-			howMany--
 		}
+
 		this.setState({
 			PostCards: PostCards,
 		})