From 607f28ee0e724b00f7eab45469cbc839536a1a83 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Mon, 24 Jun 2024 13:07:27 +0700
Subject: [PATCH] Add normal

---
 public/build-and-deploy.md            |   1 +
 public/debug.md                       |   1 +
 public/pages.json                     |  14 ++
 src/modules/01_manual/MainPage.vue    |   2 +-
 src/modules/02_pages/MainPage.vue     | 263 ++++++++++++++++++++++++++
 src/modules/{01_manual => }/router.ts |  11 +-
 src/router/index.ts                   | 136 ++++++-------
 src/views/MainLayout.vue              |  10 +-
 8 files changed, 365 insertions(+), 73 deletions(-)
 create mode 100644 public/build-and-deploy.md
 create mode 100644 public/debug.md
 create mode 100644 public/pages.json
 create mode 100644 src/modules/02_pages/MainPage.vue
 rename src/modules/{01_manual => }/router.ts (50%)

diff --git a/public/build-and-deploy.md b/public/build-and-deploy.md
new file mode 100644
index 00000000..39e7fc0f
--- /dev/null
+++ b/public/build-and-deploy.md
@@ -0,0 +1 @@
+# Build and Deploy
diff --git a/public/debug.md b/public/debug.md
new file mode 100644
index 00000000..2fab5925
--- /dev/null
+++ b/public/debug.md
@@ -0,0 +1 @@
+# Debug
diff --git a/public/pages.json b/public/pages.json
new file mode 100644
index 00000000..b330d1a6
--- /dev/null
+++ b/public/pages.json
@@ -0,0 +1,14 @@
+[
+  {
+    "icon": "mdi-file-outline",
+    "activeIcon": "mdi-file",
+    "label": "การตรวจสอบและแก้ไขปัญหา",
+    "path": "/debug"
+  },
+  {
+    "icon": "mdi-file-outline",
+    "activeIcon": "mdi-file",
+    "label": "Build and Deploy",
+    "path": "/build-and-deploy"
+  }
+]
diff --git a/src/modules/01_manual/MainPage.vue b/src/modules/01_manual/MainPage.vue
index ec9436d6..167fb44c 100644
--- a/src/modules/01_manual/MainPage.vue
+++ b/src/modules/01_manual/MainPage.vue
@@ -25,7 +25,7 @@ const active = ref("");
 
 function onScroll() {
   let current = "";
-  document.querySelectorAll("h2,h3").forEach((v) => {
+  document.querySelectorAll<HTMLElement>("h2,h3").forEach((v) => {
     if (
       window.top &&
       window.top.scrollY + window.innerHeight / 2 > v.offsetTop
diff --git a/src/modules/02_pages/MainPage.vue b/src/modules/02_pages/MainPage.vue
new file mode 100644
index 00000000..f730365b
--- /dev/null
+++ b/src/modules/02_pages/MainPage.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import MarkdownIt, { type Token } from "markdown-it";
+
+// @ts-expect-error
+import mditFigureWithPCaption from "markdown-it-image-figures";
+import mditAnchor from "markdown-it-anchor";
+import { useManualStore } from "@/stores/manual";
+import { storeToRefs } from "pinia";
+
+const md = new MarkdownIt().use(mditAnchor).use(mditFigureWithPCaption, {
+  figcaption: "alt",
+});
+
+const route = useRoute();
+const manual = useManualStore();
+const { toc } = storeToRefs(manual);
+
+const text = ref("");
+const parsed = ref<Token[]>([]);
+const chapter = ref(0);
+const found = ref(false);
+const active = ref("");
+
+function onScroll() {
+  let current = "";
+  document.querySelectorAll<HTMLElement>("h2,h3").forEach((v) => {
+    if (
+      window.top &&
+      window.top.scrollY + window.innerHeight / 2 > v.offsetTop
+    ) {
+      current = v.id;
+    }
+  });
+  active.value = current;
+}
+
+function onResize() {
+  if (window.innerWidth > 1024) {
+    toc.value = true;
+  }
+}
+
+async function scrollTo(id: string) {
+  const pos = document.getElementById(id)?.offsetTop;
+  await nextTick(() => {
+    if (window.innerWidth < 1024) toc.value = false;
+  });
+  if (pos)
+    window.scrollTo({
+      top: pos,
+      behavior: "smooth",
+    });
+}
+
+onMounted(async () => {
+  window.addEventListener("scroll", onScroll);
+  window.addEventListener("resize", onResize);
+
+  if (typeof route.params.name === "string") {
+    const res = await fetch(`/${route.params.name}.md`);
+    if (res && res.ok) {
+      text.value = await res.text();
+      found.value = true;
+      parsed.value = md.parse(text.value, {});
+    }
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", onScroll);
+  window.removeEventListener("resize", onResize);
+});
+</script>
+
+<template>
+  <div v-if="found" style="display: flex" class="markdown">
+    <div
+      style="
+        width: 100%;
+        flex: 1;
+        background-color: white;
+        border-radius: 0.5rem;
+        border: 1px solid #e1e1e9;
+        padding: 1rem;
+      "
+      v-html="md.render(text.replaceAll('images/', '/images/'))"
+    ></div>
+  </div>
+
+  <q-drawer
+    v-if="toc"
+    side="right"
+    class="bg-grey-2"
+    show-if-above
+    v-model="toc"
+    :width="250"
+    :behavior="$q.screen.width > 1024 ? 'desktop' : 'mobile'"
+  >
+    <q-scroll-area class="fit">
+      <q-list padding>
+        <template v-for="(token, idx) in parsed">
+          <q-item
+            class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="active === token.attrGet('id')"
+            @click="scrollTo(token.attrGet('id') || '')"
+            v-if="token.tag === 'h2' && token.type === 'heading_open'"
+            clickable
+            v-ripple
+            dense
+            exact
+          >
+            <q-item-section>
+              <q-item-label>
+                <q-icon size="11px" name="mdi-circle-medium" />
+                <span class="q-pl-xs">{{ parsed[idx + 1].content }}</span>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item
+            v-if="token.tag === 'h3' && token.type === 'heading_open'"
+            class="tabNative child-tab"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="active === token.attrGet('id')"
+            @click="scrollTo(token.attrGet('id') || '')"
+            clickable
+            v-ripple
+            dense
+            exact
+          >
+            <q-item-section>
+              <q-item-label>
+                <span class="q-pl-xl">{{ parsed[idx + 1].content }}</span>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-list>
+    </q-scroll-area>
+  </q-drawer>
+</template>
+
+<style scoped>
+.toc {
+  top: 4rem;
+}
+.active {
+  color: red;
+}
+.markdown {
+  counter-set: h1 v-bind(chapter);
+  counter-reset: h1;
+}
+.markdown :deep(:where(h1, h2, h3, h4, h5, h6)) {
+  line-height: 1.5;
+  padding-block: 1rem !important;
+}
+
+.markdown :deep(h1) {
+  counter-reset: h2;
+}
+
+.markdown :deep(h2) {
+  counter-reset: h3;
+}
+
+.markdown :deep(h3) {
+  counter-reset: h4;
+}
+
+.markdown :deep(h1:before) {
+  counter-increment: h1;
+  content: counter(h1) ". ";
+}
+
+.markdown :deep(h2:before) {
+  counter-increment: h2;
+  content: counter(h1) "." counter(h2) " ";
+}
+
+.markdown :deep(h3:before) {
+  counter-increment: h3;
+  content: counter(h1) "." counter(h2) "." counter(h3) " ";
+}
+
+.markdown :deep(h4:before) {
+  counter-increment: h4;
+  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " ";
+}
+
+.markdown :deep(blockquote) {
+  background-color: #ecebeb;
+  border-radius: 8px;
+  padding: 8px;
+  margin-bottom: 1rem;
+}
+
+.markdown :deep(blockquote > p:last-child) {
+  margin-bottom: 0;
+}
+
+.markdown :deep(img) {
+  vertical-align: middle;
+}
+
+.markdown :deep(p img) {
+  padding-inline: 0.25rem;
+}
+
+.markdown :deep(figure) {
+  margin: 0;
+  text-align: center;
+  padding: 1rem;
+  width: 100%;
+}
+
+.markdown :deep(figure img) {
+  max-width: 90%;
+}
+
+.markdown :deep(p:has(img:only-child) img) {
+  max-width: 100%;
+}
+
+.markdown :deep(.abc) {
+  color: green;
+}
+
+.markdown :deep(h1) {
+  text-align: left;
+  margin-top: -1rem;
+  margin-inline: -1rem;
+  font-size: 24px;
+  font-weight: 700;
+  background-color: #ecebeb;
+  border-radius: 8px 8px 0px 0px;
+  padding: 0px 16px;
+}
+
+.markdown :deep(figcaption) {
+  text-align: center;
+}
+
+.markdown :deep(h2) {
+  text-align: left;
+  margin-block: 0;
+  font-size: 18px;
+  font-weight: 600;
+  padding: 0px 16px;
+  color: #02a998;
+}
+
+.markdown :deep(h3) {
+  text-align: left;
+  margin-block: 0;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0px 16px;
+  color: #02a998;
+}
+</style>
diff --git a/src/modules/01_manual/router.ts b/src/modules/router.ts
similarity index 50%
rename from src/modules/01_manual/router.ts
rename to src/modules/router.ts
index 1ec79225..79622bae 100644
--- a/src/modules/01_manual/router.ts
+++ b/src/modules/router.ts
@@ -1,9 +1,16 @@
 import type { RouteRecordRaw } from "vue-router";
 
-export default [
+const route: RouteRecordRaw[] = [
   {
     path: "/manual/:name",
     name: "Manual",
     component: () => import("@/modules/01_manual/MainPage.vue"),
   },
-] satisfies RouteRecordRaw[];
+  {
+    path: "/:name",
+    name: "Pages",
+    component: () => import("@/modules/02_pages/MainPage.vue"),
+  },
+];
+
+export default route;
diff --git a/src/router/index.ts b/src/router/index.ts
index 5093c23b..6c0813f9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,79 +1,79 @@
-import { createRouter, createWebHistory } from "vue-router"
+import { createRouter, createWebHistory } from "vue-router";
 
-const MainLayout = () => import("@/views/MainLayout.vue")
-const Dashboard = () => import("@/views/Dashboard.vue")
-const Error404NotFound = () => import("@/views/Error404NotFound.vue")
+const MainLayout = () => import("@/views/MainLayout.vue");
+const Dashboard = () => import("@/views/Dashboard.vue");
+const Error404NotFound = () => import("@/views/Error404NotFound.vue");
 
-import ModuleManual from "@/modules/01_manual/router"
+import ModuleManual from "@/modules/router";
 
 // TODO: ใช้หรือไม่?
 // import keycloak from "@/plugins/keycloak"
 
 const router = createRouter({
-	history: createWebHistory(import.meta.env.BASE_URL),
-	routes: [
-		{
-			path: "/",
-			name: "home",
-			component: MainLayout,
-			children: [
-				{
-					path: "/",
-					name: "dashboard",
-					component: Dashboard,
-					meta: {
-						Auth: true,
-						Key: [7],
-						Role: "dashboard",
-					},
-				},
-				...ModuleManual,
-			],
-		},
-		/**
-		 * 404 Not Found
-		 * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
-		 */
-		{
-			// path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
-			path: "/:pathMatch(.*)*",
-			component: Error404NotFound,
-		},
-	],
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: MainLayout,
+      children: [
+        {
+          path: "/",
+          name: "dashboard",
+          component: Dashboard,
+          meta: {
+            Auth: true,
+            Key: [7],
+            Role: "dashboard",
+          },
+        },
+        ...ModuleManual,
+      ],
+    },
+    /**
+     * 404 Not Found
+     * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
+     */
+    {
+      // path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
+      path: "/:pathMatch(.*)*",
+      component: Error404NotFound,
+    },
+  ],
 
-	scrollBehavior(to, from, savedPosition) {
-		if (savedPosition) {
-			return savedPosition
-		} else if (to.hash) {
-			return {
-				el: to.hash,
-				behavior: "smooth",
-			}
-		}
-	},
-})
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: "smooth",
+      };
+    }
+  },
+});
 
 router.beforeEach((to, from, next) => {
-	// if (to.meta.Auth) {
-	// 	if (!keycloak.authenticated) {
-	// 		keycloak.login({
-	// 			redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
-	// 			locale: "th",
-	// 		})
-	// 	} else {
-	// 		//   keycloak.updateToken(60);
-	// 		const role = keycloak.tokenParsed?.role
-	// 		if (role.includes(to.meta.Role)) {
-	// 			next()
-	// 		} else {
-	// 			next({ path: "" })
-	// 			// next();
-	// 		}
-	// 	}
-	// } else {
-	// 	next()
-	// }
-	next()
-})
+  // if (to.meta.Auth) {
+  // 	if (!keycloak.authenticated) {
+  // 		keycloak.login({
+  // 			redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
+  // 			locale: "th",
+  // 		})
+  // 	} else {
+  // 		//   keycloak.updateToken(60);
+  // 		const role = keycloak.tokenParsed?.role
+  // 		if (role.includes(to.meta.Role)) {
+  // 			next()
+  // 		} else {
+  // 			next({ path: "" })
+  // 			// next();
+  // 		}
+  // 	}
+  // } else {
+  // 	next()
+  // }
+  next();
+});
 
-export default router
+export default router;
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 0acd3a2a..b10f0e8d 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -37,8 +37,14 @@ const toggleBtnLeft = () => {
 };
 
 onMounted(async () => {
-  const data = await fetch("/toc.json").then((r) => r.json());
-  menuList.value[1].children = data;
+  {
+    const data = await fetch("/toc.json").then((r) => r.json());
+    menuList.value[1].children = data;
+  }
+  {
+    const data = await fetch("/pages.json").then((r) => r.json());
+    menuList.value.push(...data);
+  }
 });
 
 const downloadFile = () => {