Add dynamic post loading

5 years ago · c096acdf7d
parent b0cd041fd9
commit c096acdf7d
2 changed files with 39 additions and 0 deletions
--- a/client/public/posts.html
+++ b/client/public/posts.html
@ -13,6 +13,9 @@
  <link defer rel="stylesheet" href="css/themes.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>
 <body>
  <noscript>
@ -27,6 +30,9 @@
      <a href="/posts">Posts</a>|
      <a href="/qa">QA</a>
    </nav>
    <!-- Placeholder for posts -->
    <div id="posts"></div>
  </div>
 </body>
 </html>
--- a/client/public/posts.mjs
+++ b/client/public/posts.mjs
@ -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()