Added KeepSec blog

Author: JCoupalK

package-lock.json

@@ -5,10 +5,11 @@
         <router-link to="/" class="nav-link">Home</router-link>
         <router-link to="/projects" class="nav-link">Projects</router-link>
         <router-link to="/blog" class="nav-link">Blog</router-link>
+        <router-link to="/blog-ks" class="nav-link">KeepSec Blog</router-link>
       </nav>
     </header>
     <main>
-      <router-view/>
+      <router-view />
     </main>
   </div>
 </template>

src/App.vue

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '@/views/HomePage.vue'
 import MyProjects from '@/views/MyProjects.vue'
 import MyBlog from '@/views/MyBlog.vue'
+import KeepSecBlog from '@/views/KeepSecBlog.vue'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -21,6 +22,11 @@ const router = createRouter({
       name: 'MyBlog',
       component: MyBlog
     },
+    {
+      path: '/blog-ks',
+      name: 'KeepSecBlog',
+      component: KeepSecBlog
+    },
   ]
 })
 

src/router/index.js

@@ -1,8 +1,8 @@
 <template>
   <div class="home-container">
     <h1>Hi, I'm Jordan Coupal</h1>
-    <p>I'm a MLOps Engineer and Open Source Developper with experience programming all sort of tools and maintainer of
-      some projects on GitHub.</p>
+    <p>I'm a MLOps Engineer, Co-Founder of KeepSec Technologies and Open Source Developper with experience building
+      multiple tools and solutions mainly in cloud computing, cybersecurtiy and data integration.</p>
     <h2>My Skillsets</h2>
     <div class="skills-container">
       <div class="skill" v-for="skill in skills" :key="skill">

src/views/HomePage.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="blog-container">
+    <h2>Posts</h2>
+    <div class="category-filter">
+      <button v-for="category in allCategories" :key="category" @click="selectedCategory = category"
+        :class="{ active: selectedCategory === category }">
+        {{ category }}
+      </button>
+    </div>
+    <br>
+    <div class="post" v-for="post in filteredPosts" :key="post.guid">
+      <h3><a :href="post.link" target="_blank" rel="noopener noreferrer">{{ post.title }}</a></h3>
+      <div v-html="post.shortContent" class="post-content"></div>
+      <br>
+      <div class="post-categories">
+        <span v-for="category in post.categories" :key="category">{{ category }}</span>
+      </div>
+      <p class="post-meta">Published on {{ post.formattedPubDate }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      posts: [],
+      selectedCategory: 'All',
+      allCategories: [],
+    };
+  },
+  async mounted() {
+    await this.fetchPosts();
+  },
+  methods: {
+    async fetchPosts() {
+      // Using my cors-anywhere instance as a CORS proxy
+      const corsProxyUrl = 'https://cors-anywhere.jcoupal.com/';
+      const mediumRssUrl = 'https://www.keepsec.ca/blog/rss';
+      const proxyUrl = `${corsProxyUrl}${mediumRssUrl}`;
+      try {
+        const response = await fetch(proxyUrl);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch blog posts: ${response.statusText}`);
+        }
+        const text = await response.text();
+        this.posts = this.parseRSSFeed(text);
+        this.allCategories = ['All', ...new Set(this.posts.flatMap(post => post.categories))];
+      } catch (error) {
+        console.error('Error fetching blog posts:', error);
+      }
+    },
+    parseRSSFeed(rssText) {
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(rssText, "application/xml");
+      const items = xmlDoc.querySelectorAll("item");
+      const posts = [];
+
+      items.forEach(item => {
+        const title = item.querySelector("title").textContent;
+        const link = item.querySelector("link").textContent;
+        const guid = item.querySelector("guid").textContent;
+        const pubDate = item.querySelector("pubDate").textContent;
+        const formattedPubDate = this.formatPubDate(pubDate);
+        const categories = Array.from(item.querySelectorAll("category")).map(c => c.textContent);
+
+        const contentEncodedElements = item.getElementsByTagNameNS("http://purl.org/rss/1.0/modules/content/", "encoded");
+        let contentEncoded = "";
+        contentEncoded = contentEncodedElements[0].textContent;
+        const shortContent = this.createShortContent(contentEncoded);
+        posts.push({ title, link, guid, shortContent, categories, formattedPubDate });
+      });
+      return posts;
+    },
+    formatPubDate(pubDateStr) {
+      const date = new Date(pubDateStr);
+      const options = { day: 'numeric', month: 'short', year: 'numeric' };
+      return date.toLocaleDateString('en-US', options);
+    },
+    createShortContent(htmlContent) {
+      const div = document.createElement("div");
+      div.innerHTML = htmlContent;
+      // Get text content for the first paragraph or a text slice
+      const textContent = div.querySelector("p") ? div.querySelector("p").textContent.slice(0, 155) + "..." : div.textContent.slice(0, 200) + "...";
+      return textContent;
+    },
+  },
+  computed: {
+    filteredPosts() {
+      if (this.selectedCategory === 'All') {
+        return this.posts;
+      }
+      return this.posts.filter(post => post.categories.includes(this.selectedCategory));
+    }
+  },
+}
+</script>
+
+<style scoped>
+.category-filter button {
+  margin: 2px;
+  color: #e0e0e0;
+  background-color: #333;
+  padding: 1px 5px;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.category-filter button.active,
+.category-filter button:hover {
+  background-color: #4DBA87;
+}
+
+.blog-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.post {
+  background-color: #1e1e1e;
+  color: #e0e0e0;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+}
+
+.post:hover {
+  background-color: #292929;
+}
+
+.post h3 a {
+  color: #4DBA87;
+  text-decoration: none;
+}
+
+.post-meta {
+  margin-bottom: -0px;
+}
+
+.post-categories span {
+  margin: 2px;
+  background-color: #333;
+  padding: 1px 5px;
+  border-radius: 5px;
+}
+
+.post-categories span:hover {
+  background-color: #4DBA87;
+}
+</style>

src/views/KeepSecBlog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="blog-container">
-    <h2>Blog Posts</h2>
+    <h2>Posts</h2>
     <div class="category-filter">
       <button v-for="category in allCategories" :key="category" @click="selectedCategory = category"
         :class="{ active: selectedCategory === category }">