I’m building up a simple blog from scratch. I’ve noticed that the blog needs JS to update the new posts section and to update some descriptive meta tags. I like to set up meta tags properly so when somebody shares the page, they get some details along with the URL.
So the two functions I’ve written are supposed to solve the previous issues, and are named:
- updatePosts
- setCurrentPostMetaTags
Both functions take an input object named posts. This object is modified by hand when a new post is created. The newest posts are on the start of the object. (new to old).
It with be impossible to share a working code, but the code is properly updating everything.
What I’m looking for is any advice on the way I’m writing the JS, or setting things up.
I’d be happy to update this post with any extra requirement. Below it’s the posts object plus the two functions.
//posts object containing metadata for posts.
//New posts should be added on the top of the object
const posts = (
{
title:"Mr. Nobody: The Concept of Temperature",
brief:"Mr. Nobody takes the thermometer into apart to answer. What is Temperature?",
publishIn:"July 6th, 2020",
folder:"post3"
},
{
title:"Mr. Nobody: Pink Floyd Cover",
brief:"Guitar cover of Wish You Were Here By Mister Nobody",
publishIn:"May 24th, 2020",
folder:"post2" //this isn't strictly necessary.
}, {
title:"Mr. Nobody: Thoughts on Web Dev",
brief:"Let's tell the story from the looser point of view. And Mr. Nobody comes in.",
publishIn:"May 16th, 2020",
folder:"post1" //this isn't strictly necessary.
}
)
const updatePosts = (posts) => {
//index.html file is a directory up, I'm taking
// care of that fact using setStartDir
let ul = document.getElementsByClassName("newposts")(0).getElementsByTagName("ul")(0)
ul.innerHTML=""
let setStartDir=".."
if(window.location.pathname.endsWith("dist/")){
setStartDir="."
}
for (let i=0; i<5 && i<posts.length; i++){
//we only want 4 posts in the new posts section
ul.innerHTML += `
<li><a href="${setStartDir}/post${posts.length - i}/">
${posts(i).publishIn}: ${posts(i).title}
</a></li>n
`
}
return 1
}
const setCurrentPostMetaTags = (posts) => {
//next element contains all properties that vary between posts
//and can be set using posts object information.
let metaProps = {
page:{
description:'meta(name="description")'
},
og:{
title:'meta(property="og:title")',
description:'meta(property="og:description")',
image:'meta(property="og:image")'
},
twitter:{
title:'meta(name="twitter:title")'
}
}
for(let i = 0; i<posts.length; i++){
if(window.location.pathname.endsWith(`post${posts.length - i}`))
{
document.querySelector(metaProps.page.description).setAttribute("content", `${posts(i).title}`)
console.log("updated")
document.querySelector(metaProps.og.title).setAttribute("content", `${posts(i).title}`)
console.log("updated")
document.querySelector(metaProps.og.description).setAttribute("content", `${posts(i).brief}`)
console.log("updated")
document.querySelector(metaProps.og.image).setAttribute( "content", "../images/cartoon-min.jpg")
console.log("updated")
document.querySelector(metaProps.twitter.title).setAttribute("content", `${posts(i).title}`)
console.log("updated")
return 1
}
}
return -1
}
updatePosts(posts)
setCurrentPostMetaTags(posts)
