Add normal

public/build-and-deploy.md

@@ -0,0 +1 @@
+# Build and Deploy

public/debug.md

@@ -0,0 +1 @@
+# Debug

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"
+  }
+]

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

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>

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;

src/router/index.ts

@@ -1,10 +1,10 @@
-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"
@@ -43,15 +43,15 @@ const router = createRouter({
 
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
-			return savedPosition
+      return savedPosition;
     } else if (to.hash) {
       return {
         el: to.hash,
         behavior: "smooth",
-			}
+      };
     }
   },
-})
+});
 
 router.beforeEach((to, from, next) => {
   // if (to.meta.Auth) {
@@ -73,7 +73,7 @@ router.beforeEach((to, from, next) => {
   // } else {
   // 	next()
   // }
-	next()
-})
+  next();
+});
 
-export default router
+export default router;

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("/pages.json").then((r) => r.json());
+    menuList.value.push(...data);
+  }
 });
 
 const downloadFile = () => {