Got keywords from text using rake-php-plus and then stored in the DB, then used it to append the keywords to the meta tag.

Signed-off-by: rodude123 <rodude123@gmail.com>

src/blog/css/blogPosts.css

@@ -73,6 +73,10 @@ article {
     padding: 0 2em;
 }
 
+article a {
+    padding: 0 1em;
+}
+
 article a::before,
 article a::after {
     visibility: hidden;
@@ -81,7 +85,7 @@ article a::after {
 }
 
 article a::before {
-    content: '<';
+    content: ' <';
     margin-left: -0.5em;
 }
 
@@ -158,6 +162,7 @@ div.feeds .icons {
     justify-content: space-around;
     align-items: flex-start;
     gap: 0.5em;
+    flex-wrap: wrap-reverse;
 }
 
 div.feeds h2 {

src/blog/css/main.css

@@ -166,9 +166,6 @@
         grid-row: 2;
     }
 
-    div.feeds .icons {
-        flex-wrap: wrap;
-    }
 }
 
 @media screen and (max-width: 30em) {

src/blog/js/index.js

@@ -156,7 +156,7 @@ function createLargePost(post)
                     <h2>${post.title}</h2>
                     <h3>Last updated: ${dateModifiedString} | ${categories}</h3>
                     <p>${post.abstract}</p>
-                    <a href="/blog/post/${post.title}#disqus_thread" class="btn btnPrimary">See Post</a>
+                    <a href="/blog/post/${post.title}" class="btn btnPrimary">See Post</a>
                 `;
 	content.appendChild(postContent);
 	outerContent.appendChild(content);
@@ -384,6 +384,54 @@ async function createSideContent()
 	return sideContent;
 }
 
+function createMetaTag(nameOrProperty, attribute, value)
+{
+	let existingTag = document.querySelector(`meta[name="${nameOrProperty}"], meta[property="${nameOrProperty}"]`);
+	
+	if (!existingTag)
+	{
+		// If the meta tag doesn't exist, create it
+		let newTag = document.createElement('meta');
+		newTag.setAttribute(nameOrProperty.includes('name') ? 'name' : 'property', nameOrProperty);
+		newTag.setAttribute(attribute, value);
+		document.head.appendChild(newTag);
+		return;
+	}
+	
+	existingTag.setAttribute(attribute, value);
+}
+
+/**
+ * inserts the meta tags
+ * @param json - the json
+ */
+function insertMetaTags(json)
+{
+	let metaDesc = document.querySelector('meta[name="description"]');
+	metaDesc.setAttribute('content', json.abstract);
+	
+	// Twitter meta tags
+	createMetaTag('twitter:title', 'content', json.title);
+	createMetaTag('twitter:description', 'content', json.abstract);
+	createMetaTag('twitter:image', 'content', json.headerImg);
+	
+	// Open Graph (Facebook) meta tags
+	createMetaTag('og:title', 'content', json.title);
+	createMetaTag('og:description', 'content', json.abstract);
+	createMetaTag('og:image', 'content', json.headerImg);
+	createMetaTag('og:url', 'content', window.location.href);
+	createMetaTag('og:type', 'content', 'blog');
+	createMetaTag('og:site_name', 'content', 'Rohit Pai\'s Blog');
+	createMetaTag('og:locale', 'content', 'en_GB');
+	
+	//Keywords
+	let metKeywords = document.querySelector('meta[name="keywords"]');
+	let keywords = metKeywords.getAttribute('content');
+	keywords += `, ${json.keywords}`;
+	metKeywords.setAttribute('content', keywords);
+	
+}
+
 /**
  * Trys to load the individual post if not runs the 404 function
  * @param title
@@ -401,6 +449,8 @@ async function loadIndividualPost(title)
 		
 		await res.json().then(async json =>
 		{
+			//replace meta description
+			insertMetaTags(json);
 			// create the post
 			let post = document.createElement('section');
 			post.classList.add('post');
@@ -413,7 +463,9 @@ async function loadIndividualPost(title)
                                 <div class="byLine">
                                     <h3>Published: ${createFormattedDate(json.dateCreated)} | Last updated: ${createFormattedDate(json.dateModified)}</h3>
                                     <h3>${createButtonCategories([csvToArray(json.categories.replace(/\s*,\s*/g, ','))])}</h3>
-                                    <div class="sharethis-inline-share-buttons"></div>
+                                    <div class="sharethis-inline-share-buttons" data-url="https://rohitpai.co.uk/blog/post/${title}"
+                                    	data-title="${json.title}" data-description="${json.abstract}"
+                                    	data-image="https://rohitpai.co.uk/${json.headerImg}" data-username="@rohitpai123"></div>
                                 </div>
                                 <div class="cover" style="background-image: url('${json.headerImg}')"></div>
                                 ${json.body}