feat(github ci): ready to user

ymg-team · Sep 2, 2023 · 3126552 · 3126552
1 parent 86cee27
commit 3126552
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 41 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,18 @@
+name: Deploy Production
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    name: Deployment via SSH
+    runs-on: ubuntu-latest
+    steps:
+      - name: SSH Comands to Server
+        uses: fifsky/ssh-action@master
+        with:
+          host: ${{ secrets.PROD_SSH_HOST }}
+          user: ${{ secrets.PROD_SSH_USER }}
+          key: ${{ secrets.PROD_SSH_KEY}}
+          args: -tt
+          command: cd /home/webdev/Web/maucoding-web-v2 && git pull origin main && npm install && npm run build && pm2 stop mcdg-web-v2 && pm2 start mcdg-web-v2
diff --git a/components/commons/cards/CardPost/index.vue b/components/commons/cards/CardPost/index.vue
@@ -2,7 +2,7 @@
   <div>
     <q-card class="q-mb-lg" flat bordered>
       <NuxtLink :to="`/post/${toSlug(`${data.nospace_title} ${data._id}`)}`">
-        <q-img height="200px" alt="data.title" :src="data.image['600']" />
+        <q-img height="200px" :alt="data.title" :src="data.image['600']" />
       </NuxtLink>
       <q-card-section>
         <div
@@ -25,11 +25,12 @@
         <NuxtLink :to="targetLink">
           <div
             style="
-              height: 100px;
+              height: 90px;
               overflow: hidden;
               display: -webkit-box;
               -webkit-line-clamp: 3;
               -webkit-box-orient: vertical;
+              line-height: 1.5;
             "
             class="text-h6 q-mt-sm q-mb-xs"
           >

diff --git a/components/commons/lists/ListPostsSidebar/index.vue b/components/commons/lists/ListPostsSidebar/index.vue
@@ -4,7 +4,7 @@
       <q-item v-for="n in data.result" class="no-padding q-mb-lg">
         <q-item-section>
           <NuxtLink :to="`/post/${toSlug(`${n.nospace_title} ${n._id}`)}`">
-            <q-item-label>{{ n.title }}</q-item-label>
+            <q-item-label class="text-bold">{{ n.title }}</q-item-label>
             <q-item-label caption lines="2"
               >{{ truncate(stripTags(n.content), 150, "...") }}.</q-item-label
             >

diff --git a/components/commons/seo/MetaData/index.vue b/components/commons/seo/MetaData/index.vue
@@ -1,6 +1,7 @@
 <template>
   <Head>
-    <Title>{{ data.title || DEFAULT_TITLE }}</Title>
+    <Title>{{ data.title }}</Title>
+    <Meta name="description" :content="data.description" />
   </Head>
 </template>
 

diff --git a/helpers/clientApiCaller/index.js b/helpers/clientApiCaller/index.js
@@ -2,13 +2,16 @@ import SealMiddleware from "@helpers/sealMiddleware";
 import { baseApiCaller } from "../baseApiCaller";
 import { RESPONSE_GENERAL_ERROR } from "~/consts/responses/responses";
 
-export const clientApiCaller = (params) => {
+export const sealGenerator = () => {
   const { APP_KEY } = useRuntimeConfig().public;
   const Seal = new SealMiddleware(APP_KEY, 10000);
+  return Seal.generateSeal();
+};
 
+export const clientApiCaller = (params) => {
   params.baseURL = process.env.MCDG_WEB_HOST || "";
   params.headers = {
-    seal: Seal.generateSeal(),
+    seal: sealGenerator(),
   };
   return new Promise(async (resolve) => {
     const Request = await baseApiCaller(params);

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "start": "PORT=20231 node .output/server/index.mjs"
+    "start": "PORT=20231 MCDG_BE_HOST=http://159.65.1.114:9091 MCDG_WEB_HOST=http://localhost:20231 APP_KEY=oopsreview-development node .output/server/index.mjs"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

diff --git a/pages/post/[title]/index.vue b/pages/post/[title]/index.vue
@@ -1,36 +1,34 @@
 <template>
   <default-layout>
     <MetaData :data="metaData" />
-    <Spiner v-if="!postData.status" />
+    <Spiner v-if="!data.status" />
     <div v-else>
-      <div v-if="!postData._id" class="text-center text-grey-9 q-pa-lg">
-        Post tidak ditemukan
+      <div v-if="!data?._id" class="text-center text-grey-9 q-pa-lg">
+        {{ data?.message || "Post tidak ditemukan" }}
       </div>
       <div v-else>
         <Breadcrumb :data="breadcrumbData" />
-        <h1 class="text-weight-bold" fontSize="md">{{ postData.title }}</h1>
+        <h1 class="text-weight-bold" fontSize="md">
+          {{ data?.title }}
+        </h1>
         <div class="text-grey q-mb-lg">
           <strong>Posted by</strong>&nbsp;
-          <NuxtLink :to="`/author/${postData.author.username}`">{{
-            postData.author.username
+          <NuxtLink :to="`/author/${data?.author.username}`">{{
+            data?.author.username
           }}</NuxtLink>
           •
-          {{ postData.views }} Views •
-          {{ dayJS(postData.updated_on * 1000).fromNow() }}
+          {{ data?.views }} Views •
+          {{ dayJS(data?.updated_on * 1000).fromNow() }}
           <br />
           <strong>Tags</strong>&nbsp;
-          <NuxtLink v-for="(tag, key) in postData.tags" :to="`/tag/${tag}`"
-            >{{ tag }}{{ key < postData.tags.length && ", " }}</NuxtLink
+          <NuxtLink v-for="(tag, key) in data?.tags" :to="`/tag/${tag}`"
+            >{{ tag }}{{ key < data?.tags.length && ", " }}</NuxtLink
           >
         </div>
         <div class="q-pt-sd q-pb-md">
-          <img
-            style="max-width: 100%"
-            :alt="postData.title"
-            :src="postData.image.original"
-          />
+          <q-img :alt="data?.title" :src="data?.image.original" />
         </div>
-        <article v-html="postData.content" />
+        <article v-html="data?.content" />
       </div>
     </div>
   </default-layout>
@@ -42,6 +40,8 @@ import { useRouter, useRoute } from "vue-router";
 
 // helpers
 import dayJS from "@helpers/dateTime";
+import { sealGenerator } from "@helpers/clientApiCaller";
+import { stripTags, truncate } from "@helpers/stringManager";
 
 // consts
 import { DEFAULT_TITLE, DEFAULT_DESCRIPTION } from "@consts/meta";
@@ -53,7 +53,7 @@ import MetaData from "@components/commons/seo/MetaData";
 import Spiner from "@components/commons/loaders/GlobalSpiner";
 
 // services
-import { fetchPostDetail } from "@services/posts";
+import { fetchPostDetail, endpointGetPostDetail } from "@services/posts";
 
 const DEFAULT_BREADCRUMB_DATA = [{ to: "/posts", label: "Posts" }];
 
@@ -68,25 +68,27 @@ const postId = computed({
   // }
 });
 const metaData = ref({
-  title: "",
-  description: "",
+  title: "Post",
+  description: "Post by MauCoding",
 });
 const breadcrumbData = ref(DEFAULT_BREADCRUMB_DATA);
 const postData = ref({});
 
-// fetch post detail to api
-const fetchData = async () => {
-  const response = await fetchPostDetail({ postId: postId.value });
-  postData.value = response;
-  if (response._id) {
-    const newBreadcrumbData = [...DEFAULT_BREADCRUMB_DATA];
-    newBreadcrumbData.push({ label: response.title });
-    breadcrumbData.value = newBreadcrumbData;
-  }
-};
-
-// onMounted
-onMounted(() => {
-  fetchData();
+const { data, error } = await useFetch(endpointGetPostDetail(postId.value), {
+  headers: {
+    seal: sealGenerator(),
+  },
 });
+
+// generate metadata and breadcrumb
+if (data.value._id) {
+  metaData.value = {
+    title: data.value.title,
+    description: truncate(stripTags(data.value.content), 300, "..."),
+  };
+  breadcrumbData.value = [
+    ...DEFAULT_BREADCRUMB_DATA,
+    { label: data.value.title },
+  ];
+}
 </script>
diff --git a/services/posts/index.js b/services/posts/index.js
@@ -1,6 +1,10 @@
 import { clientApiCaller } from "@helpers/clientApiCaller";
 import { objToQuery } from "@helpers/stringManager";
 
+export const endpointGetPostDetail = (id) => {
+  return `/api/post/${id}`;
+};
+
 export const fetchPosts = async ({ query }) => {
   const Response = await clientApiCaller({
     endpoint: `/api/posts?${objToQuery(query)}`,
@@ -10,7 +14,7 @@ export const fetchPosts = async ({ query }) => {
 
 export const fetchPostDetail = async ({ postId }) => {
   const Response = await clientApiCaller({
-    endpoint: `/api/post/${postId}`,
+    endpoint: endpointGetPostDetail(postId),
   });
   return Response;
 };