#100DAYSOFCODE Day78

Create the blog page(personal website)

• used hashnode API
• used template element to show the blog cards

const query = `{
    user(username: "haorong") {
      publication {
        posts(page: 1) {
          title
          brief
          slug
          dateAdded
          coverImage
        }
      }
    }
  }`
async function gql(query, variables = {}) {
  const data = await fetch("https://api.hashnode.com/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "xxxx",
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  })
  return data.json()
}

if ("content" in document.createElement("template")) {
  gql(query)
    .then((response) => response.data.user.publication.posts)
    .then((data) => {
      data.forEach((element) => {
        let contianer = document.querySelector(".container")
        var template = document.getElementById("blogCard")

        let blogCard = template.content.cloneNode(true)
        blogCard.querySelector("img").src = element.coverImage
        blogCard.querySelector("h5").textContent = element.title
        blogCard.querySelector("p").textContent = element.brief
        contianer.appendChild(blogCard)
      })
    })
}