From 38cf193b7cbb90a40db6687443ab5a8a9a8c6d0d Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 4 Jul 2024 16:16:29 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20align=20center=20=E0=B8=82=E0=B8=AD=E0=B8=87=20video?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_manual/MainPage.vue | 346 ++++++++++++++---------------
 1 file changed, 166 insertions(+), 180 deletions(-)

diff --git a/src/modules/01_manual/MainPage.vue b/src/modules/01_manual/MainPage.vue
index 2c0c1e76..a36ade9d 100644
--- a/src/modules/01_manual/MainPage.vue
+++ b/src/modules/01_manual/MainPage.vue
@@ -1,277 +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";
+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";
+import mditFigureWithPCaption from "markdown-it-image-figures"
+import mditAnchor from "markdown-it-anchor"
+import { useManualStore } from "@/stores/manual"
+import { storeToRefs } from "pinia"
 // @ts-expect-error
-import mditVideo from "markdown-it-video";
+import mditVideo from "markdown-it-video"
 
 const md = new MarkdownIt()
-  .use(mditAnchor)
-  .use(mditVideo)
-  .use(mditFigureWithPCaption, {
-    figcaption: "alt",
-    html: true,
-    linkify: true,
-    typography: true,
-  });
+	.use(mditAnchor)
+	.use(mditVideo, {
+		youtube: { width: "50%", height: "auto", autoplay: false },
+	})
+	.use(mditFigureWithPCaption, {
+		figcaption: "alt",
+		html: true,
+		linkify: true,
+		typography: true,
+	})
 
-const route = useRoute();
-const manual = useManualStore();
-const { toc } = storeToRefs(manual);
+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("");
+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;
+	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;
-  }
+	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",
-    });
+	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);
+	window.addEventListener("scroll", onScroll)
+	window.addEventListener("resize", onResize)
 
-  if (typeof route.params.name === "string") {
-    const res = await fetch(`/documents/${route.params.name}.md`);
-    if (res && res.ok) {
-      const pattern = /chapter-(\d+)/;
-      const match = pattern.exec(route.params.name);
+	if (typeof route.params.name === "string") {
+		const res = await fetch(`/documents/${route.params.name}.md`)
+		if (res && res.ok) {
+			const pattern = /chapter-(\d+)/
+			const match = pattern.exec(route.params.name)
 
-      if (!match) return;
+			if (!match) return
 
-      text.value = await res.text();
-      found.value = true;
-      chapter.value = +match[1] - 1;
-      parsed.value = md.parse(text.value, {});
-    }
-  }
-});
+			text.value = await res.text()
+			found.value = true
+			chapter.value = +match[1] - 1
+			parsed.value = md.parse(text.value, {})
+		}
+	}
+})
 
 onUnmounted(() => {
-  window.removeEventListener("scroll", onScroll);
-  window.removeEventListener("resize", onResize);
-});
+	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>
+	<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>
+	<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;
+	top: 4rem;
 }
 .active {
-  color: red;
+	color: red;
 }
 .markdown {
-  counter-set: h1 v-bind(chapter);
-  counter-reset: h1;
+	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;
+	line-height: 1.5;
+	padding-block: 1rem !important;
 }
 
 .markdown :deep(h1) {
-  counter-reset: h2;
+	counter-reset: h2;
 }
 
 .markdown :deep(h2) {
-  counter-reset: h3;
+	counter-reset: h3;
 }
 
 .markdown :deep(h3) {
-  counter-reset: h4;
+	counter-reset: h4;
 }
 
 .markdown :deep(h1:before) {
-  counter-increment: h1;
-  content: counter(h1) ". ";
+	counter-increment: h1;
+	content: counter(h1) ". ";
 }
 
 .markdown :deep(h2:before) {
-  counter-increment: h2;
-  content: counter(h1) "." counter(h2) " ";
+	counter-increment: h2;
+	content: counter(h1) "." counter(h2) " ";
 }
 
 .markdown :deep(h3:before) {
-  counter-increment: h3;
-  content: counter(h1) "." counter(h2) "." counter(h3) " ";
+	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) " ";
+	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;
+	background-color: #ecebeb;
+	border-radius: 8px;
+	padding: 8px;
+	margin-bottom: 1rem;
 }
 
 .markdown :deep(blockquote > p:last-child) {
-  margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 .markdown :deep(img) {
-  vertical-align: middle;
+	vertical-align: middle;
 }
 
 .markdown :deep(p img) {
-  padding-inline: 0.25rem;
+	padding-inline: 0.25rem;
 }
 
 .markdown :deep(figure) {
-  margin: 0;
-  text-align: center;
-  padding: 1rem;
-  width: 100%;
+	margin: 0;
+	text-align: center;
+	padding: 1rem;
+	width: 100%;
 }
 
 .markdown :deep(figure img) {
-  max-width: 90%;
+	max-width: 90%;
 }
 
 .markdown :deep(p:has(img:only-child) img) {
-  max-width: 100%;
+	max-width: 100%;
 }
 
 .markdown :deep(.abc) {
-  color: green;
+	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;
+	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;
+	text-align: center;
 }
 
 .markdown :deep(h2) {
-  text-align: left;
-  margin-block: 0;
-  font-size: 18px;
-  font-weight: 600;
-  padding: 0px 16px;
-  color: #02a998;
+	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;
+	text-align: left;
+	margin-block: 0;
+	font-size: 16px;
+	font-weight: 600;
+	padding: 0px 16px;
+	color: #02a998;
+}
+.markdown :deep(iframe) {
+	display: block;
+	margin: 0 auto;
+	height: 50vh; /* Adjust this value as needed */
 }
 </style>