Add journey date . .

erlankurnia · Jun 19, 2024 · f5ec32c · f5ec32c
1 parent fbc6eef
commit f5ec32c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/public/data_user.json b/public/data_user.json
@@ -323,6 +323,7 @@
 				"id": "0",
 				"title": "Portfolio",
 				"description": "Projects / applications I'm working on.",
+				"date": "2024-02-17",
 				"source": {
 					"url": "https://github.com/krlan2789/apps-link",
 					"type": "github",
@@ -333,6 +334,7 @@
 				"id": "1",
 				"title": "WebSocket Example Project",
 				"description": "WebSocket Service project using Express.js, WebSocket (Node Library), and PostgresQL.",
+				"date": "2024-02-17",
 				"source": {
 					"url": "https://github.com/krlan2789/express-ws-app",
 					"type": "github",
@@ -343,6 +345,7 @@
 				"id": "2",
 				"title": "WebSocket Service on VPS",
 				"description": "Setup Websocket Service (Node.js) and Subdomain on VPS",
+				"date": "2024-06-11",
 				"source": {
 					"url": "/journey/Setup Websocket Service (Node.js) and Subdomain on VPS.md",
 					"type": "local",

diff --git a/src/views/JourneyView.vue b/src/views/JourneyView.vue
@@ -12,16 +12,20 @@
 					<p class="font-medium text-md text-secondary md:text-lg" v-if="dataUser.journey.description"
 						v-html="dataUser.journey.description"></p>
 				</div>
-				<div class="w-full max-w-4xl px-4 mx-auto sm:px-8">
-					<ul class="flex flex-col gap-6">
+				<div class="w-full max-w-4xl px-3 mx-auto sm:px-6">
+					<ul class="flex flex-col gap-8">
 						<li v-for="(data, index) in dataUser.journey.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>
+							class="flex flex-col w-full h-auto px-4 py-3 rounded-xl hover:bg-quaternary">
+							<RouterLink :to="'/article/' + data.id">
+								<div class="mb-2 text-xl font-bold text-primary">
+									<h4 v-html="data.title"></h4>
+								</div>
+								<p class="text-sm text-secondary" v-if="data.description"
+									v-html="('' + data.description).substring(0, data.description.length > 128 ? 128 : data.description.length)">
+								</p>
+								<p v-if="data.date" class="text-xs font-light text-right text-secondary">{{ data.date }}
+								</p>
 							</RouterLink>
-							<p class="text-sm text-secondary" v-if="data.description"
-								v-html="('' + data.description).substring(0, data.description.length > 128 ? 128 : data.description.length)">
-							</p>
 						</li>
 					</ul>
 				</div>
@@ -32,12 +36,22 @@
 </template>
 
 <script>
-import { inject } from "vue";
+import { inject, watchEffect } from "vue";
 
 export default {
 	name: "JourneyView",
 	setup() {
 		const { dataUser } = inject("dataUser");
+		watchEffect(() => {
+			if (dataUser?.journey?.articles != null && Array.isArray(dataUser.journey.articles)) {
+				dataUser.journey.articles.sort((a, b) => {
+					const dateA = new Date(a.date);
+					const dateB = new Date(b.date);
+					return dateA.getTime() - dateB.getTime();
+				});
+				dataUser.journey.articles.reverse();
+			}
+		});
 		return {
 			dataUser,
 		};