Update blog page . .

package.json

@@ -11,10 +11,13 @@
 		"deploy": "gh-pages -d dist"
 	},
 	"dependencies": {
+		"markdown-it": "^14.0.0",
+		"marked": "^12.0.0",
 		"moment": "^2.29.4",
 		"pinia": "^2.1.6",
 		"sweetalert": "^2.1.2",
 		"vue": "^3.3.4",
+		"vue-code-highlight": "^0.7.8",
 		"vue-powerglitch": "^1.0.0",
 		"vue-router": "^4.2.4"
 	},

public/data_user.json

@@ -318,5 +318,20 @@
 				"url": "https://www.blobmaker.app"
 			}
 		]
+	},
+	"blog": {
+		"title": "Sample <span class=\"text-primary\">Projects</span> from Some Technologies",
+		"description": "",
+		"articles": [
+			{
+				"id": "0",
+				"title": "WebSocket Example Project",
+				"description": "WebSocket Service project using Express.js, WebSocket (Node Library), and PostgresQL.",
+				"url": {
+					"github": "https://github.com/krlan2789/express-ws-app",
+					"images": []
+				}
+			}
+		]
 	}
 }

src/assets/css/tailwind.css

@@ -87,4 +87,40 @@
 	.lan-textfield-primary {
 		@apply p-2 mt-1 rounded-lg bg-quaternary text-dark transition duration-1000 focus:duration-300 focus:outline-none focus:ring-primary focus:ring-1 focus:border-primary focus:border-2 min-h-[40px];
 	}
+
+	/* Markdown */
+	#markdown #markdown-content > * {
+		@apply w-full;
+	}
+
+	#markdown h1,
+	#markdown h2,
+	#markdown h3 {
+		@apply my-6 font-bold text-lg border-b-[1px] border-b-secondary pb-1;
+	}
+
+	#markdown h1 {
+		@apply my-10 text-2xl border-b-2 pb-2;
+	}
+
+	#markdown h2 {
+		@apply text-xl;
+	}
+
+	#markdown p > code {
+		@apply bg-quaternary rounded-lg p-1;
+	}
+
+	#markdown pre > code {
+		@apply w-full block overflow-x-auto bg-secondary rounded-lg p-4 text-tertiary;
+	}
+
+	#markdown pre:has(> code) {
+		@apply mb-5 mt-2;
+	}
+
+	/* #markdown pre:has(> code[class*="language"]) {
+		@apply bg-secondary rounded-lg p-4;
+	} */
+	/* Markdown */
 }

src/components/MarkdownComponent.vue

@@ -0,0 +1,12 @@
+<template>
+	<section v-if="sourceMarkdown" id="markdown" class="w-full pt-8 pb-6 lg:pb-0 max-xs:min-h-screen">
+		<div id="markdown-content" class="flex-row w-full p-4" v-highlight v-html="sourceMarkdown"></div>
+	</section>
+</template>
+
+<script>
+export default {
+	name: "MarkdownComponent",
+	props: ["sourceMarkdown"],
+};
+</script>

src/helper/tools.js

@@ -0,0 +1,6 @@
+export default {
+	async getDataUser() {
+		const res = await fetch("/data_user.json");
+		return await res.json();
+	},
+};

src/main.js

@@ -1,9 +1,11 @@
 import { createApp } from "vue";
+import VueCodeHighlight from "vue-code-highlight";
 import App from "./App.vue";
 import router from "./router";
 import "./assets/css/tailwind.css";
 
 const app = createApp(App);
 
 app.use(router);
+app.use(VueCodeHighlight);
 app.mount("#app");

src/router/index.js

@@ -2,7 +2,8 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import AboutView from "../views/AboutView.vue";
 import CreditView from "../views/CreditView.vue";
-import ActivityView from "../views/ActivityView.vue";
+import BlogView from "../views/BlogView.vue";
+import ArticleView from "../views/ArticleView.vue";
 import NotFoundView from "../views/NotFoundView.vue";
 
 const router = createRouter({
@@ -26,12 +27,18 @@ const router = createRouter({
 			component: CreditView,
 			meta: { hideNavbar: false },
 		},
-		// {
-		// 	path: "/activity",
-		// 	name: "activity",
-		// 	component: ActivityView,
-		// 	meta: { hideNavbar: false },
-		// },
+		{
+			path: "/blog",
+			name: "blog",
+			component: BlogView,
+			meta: { hideNavbar: false },
+		},
+		{
+			path: "/article/:id",
+			name: "article",
+			component: ArticleView,
+			meta: { hideNavbar: false },
+		},
 		{
 			path: "/:pathMatch(.*)*",
 			name: "not-found",

src/views/ArticleView.vue

@@ -0,0 +1,62 @@
+<template>
+	<section v-if="dataArticle != null && dataArticle.title" id="profile" class="pt-24 pb-16 lg:pb-0 max-xs:min-h-screen">
+		<div class="container">
+			<div class="flex flex-wrap">
+				<div class="w-full px-4 pt-4 pb-0 text-center">
+					<h4 class="mb-3 lan-section-title" v-html="dataArticle.title"></h4>
+				</div>
+
+				<div
+					class="w-full px-4 py-0 mb-0 lg:w-1/2"
+					v-if="dataArticle.url && dataArticle.url.image && dataArticle.url.image.length > 0"
+				>
+					<div class="relative mt-10 lg:mt-9 lg:right-0">
+						<img :src="dataArticle.url.image[0]" alt="Generated by https://www.fotor.com" class="w-full mx-auto" />
+					</div>
+				</div>
+
+				<MarkdownComponent v-if="dataReadme" :sourceMarkdown="dataReadme"></MarkdownComponent>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+import { inject, ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import markdownit from "markdown-it";
+import MarkdownComponent from "../components/MarkdownComponent.vue";
+import tools from "../helper/tools";
+
+const { dataUser } = inject("dataUser");
+const dataArticle = ref({});
+const dataReadme = ref("");
+const mdit = markdownit({
+	typographer: true,
+	linkify: true,
+});
+
+async function setup() {
+	const route = useRoute();
+
+	if (dataUser.value == null || typeof dataUser.value.blog == "undefined" || dataUser.value.blog == null) {
+		dataUser.value = await tools.getDataUser();
+	}
+
+	for (let article of dataUser.value.blog.articles) {
+		if ("" + article.id == "" + route.params.id) {
+			dataArticle.value = article;
+			break;
+		}
+	}
+
+	const readmeUrl = ("" + dataArticle.value.url.github).replace("github.com", "raw.githubusercontent.com") + "/main/README.md";
+	// console.log(readmeUrl);
+	const res = await fetch(readmeUrl);
+	const resText = await res.text();
+	dataReadme.value = mdit.render(resText);
+	// console.log(dataReadme.value);
+}
+
+onMounted(setup);
+</script>

src/views/BlogView.vue

@@ -0,0 +1,50 @@
+<template>
+	<section v-if="dataUser != null && dataUser.blog" id="credit" class="pt-24 pb-16">
+		<div class="container">
+			<div class="w-full pt-4 text-center">
+				<h4 class="mb-3 lan-section-title">Blog</h4>
+			</div>
+
+			<!-- Articles -->
+			<div class="flex flex-wrap" v-if="dataUser.blog.title">
+				<div class="w-full mb-8 text-center">
+					<h2 class="lan-section-subtitle" v-html="dataUser.blog.title"></h2>
+					<p
+						class="font-medium text-md text-secondary md:text-lg"
+						v-if="dataUser.blog.description"
+						v-html="dataUser.blog.description"
+					></p>
+				</div>
+				<div class="w-full max-w-4xl px-4 mx-auto sm:px-8">
+					<ul class="flex flex-col gap-6">
+						<li v-for="(data, index) in dataUser.blog.articles" :key="index" class="flex flex-col w-full h-auto">
+							<RouterLink :to="'/article/' + data.id" class="mb-2 text-xl font-bold text-primary"
+								><h4 v-html="data.title"></h4
+							></RouterLink>
+							<p
+								class="text-sm text-secondary"
+								v-if="data.description"
+								v-html="('' + data.description).substring(0, data.description.length > 64 ? 64 : data.description.length)"
+							></p>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<!-- Articles -->
+		</div>
+	</section>
+</template>
+
+<script>
+import { inject } from "vue";
+
+export default {
+	name: "BlogView",
+	setup() {
+		const { dataUser } = inject("dataUser");
+		return {
+			dataUser,
+		};
+	},
+};
+</script>

src/views/CreditView.vue

@@ -5,22 +5,25 @@
 				<h4 class="mb-3 lan-section-title">References</h4>
 			</div>
 
-			<!-- Software -->
+			<!-- Attribution -->
 			<div class="flex flex-wrap" v-if="dataUser.reference.title">
-				<div class="w-full text-center mb-8">
+				<div class="w-full mb-8 text-center">
 					<h2 class="lan-section-subtitle" v-html="dataUser.reference.title"></h2>
 					<p class="font-medium text-md text-secondary md:text-lg" v-html="dataUser.reference.description"></p>
 				</div>
-				<div class="w-full px-4 max-w-4xl mx-auto">
+				<div class="w-full max-w-4xl px-4 mx-auto">
 					<ul class="flex flex-col gap-4">
-						<li v-for="(data, index) in dataUser.reference.credit" :key="index" class="w-full h-auto flex flex-col">
-							<a class="text-primary font-bold" target="_blank" :href="data.url"><h4 v-html="data.title"></h4></a>
+						<li v-for="(data, index) in dataUser.reference.credit" :key="index" class="flex flex-col w-full h-auto">
+							<a class="flex font-bold text-primary" target="_blank" :href="data.url">
+								<h4 v-html="data.title"></h4>
+								<NewTabIcon class="w-auto h-[18px] pl-[2px] pt-[6px]"></NewTabIcon>
+							</a>
 							<p class="text-sm text-secondary" v-html="data.description"></p>
 						</li>
 					</ul>
 				</div>
 			</div>
-			<!-- Software -->
+			<!-- Attribution -->
 		</div>
 	</section>
 </template>