raymon/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dynamic post loading

Browse Source
This commit is contained in:
Raymonzut
2020-06-16 21:37:05 +02:00
parent b0cd041fd9
commit c096acdf7d
2 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/public/posts.html
+6
View File
@@ -13,6 +13,9 @@
<link defer rel="stylesheet" href="css/themes.css" media="all"> <link defer rel="stylesheet" href="css/themes.css" media="all">
<link defer rel="stylesheet" href="css/general.css" media="all"> <link defer rel="stylesheet" href="css/general.css" media="all">
<script defer type="module" src="js/remote.mjs"></script>
<script defer type="module" src="posts.mjs"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
@@ -27,6 +30,9 @@
<a href="/posts">Posts</a>| <a href="/posts">Posts</a>|
<a href="/qa">QA</a> <a href="/qa">QA</a>
</nav> </nav>
<!-- Placeholder for posts -->
<div id="posts"></div>
</div> </div>
</body> </body>
</html> </html>
client/public/posts.mjs
+33
View File
@@ -0,0 +1,33 @@
import { getPosts } from "./lib/remote.mjs"
function toMonthYearString(str) {
const date = new Date(str)
return `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`
}
async function updatePosts() {
const posts = await getPosts()
const months = posts.map(post => toMonthYearString(post.date))
const uniques = Array.from(new Set(posts.map(post => toMonthYearString(post.date))))
const month_lists = uniques.map(month =>
posts.filter(
post => toMonthYearString(post.date) === month
)
)
const postsDOM = document.getElementById("posts")
uniques.forEach((month, i) => {
const month_DOM = document.createElement("h1")
month_DOM.textContent = month
month_lists[i].forEach((post, i) => {
const post_DOM = document.createElement("h6")
post_DOM.textContent = `${post.date.substring(0, 10)} - ${post.title}`
month_DOM.appendChild(post_DOM)
})
postsDOM.appendChild(month_DOM)
})
}
updatePosts()