feat: add view page

src/pages/00_manual/ViewPage.vue

@@ -1,5 +1,253 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import 'highlight.js/styles/magula.min.css';
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+// @ts-expect-error
+import mditFigureWithPCaption from 'markdown-it-image-figures';
+import mditAnchor from 'markdown-it-anchor';
+import mditHighlight from 'markdown-it-highlightjs';
+import { initLang, initTheme } from 'src/utils/ui';
+
+const ROUTE = useRoute();
+
+const md = new MarkdownIt()
+  .use(mditAnchor)
+  .use(mditHighlight, { hljs })
+  .use(mditFigureWithPCaption, { figcaption: 'alt' });
+
+const category = ref('');
+const page = ref('');
+const content = ref('');
+const contentParsed = ref<ReturnType<typeof md.parse>>();
+const active = ref('');
+const toc = ref(true);
+const ts = ref(Date.now());
+
+onMounted(async () => {
+  if (typeof ROUTE.params['category'] === 'string') {
+    category.value = ROUTE.params['category'];
+  }
+
+  if (typeof ROUTE.params['page'] === 'string') {
+    page.value = ROUTE.params['page'];
+  }
+
+  initLang();
+  initTheme();
+
+  await getContent();
+
+  window.addEventListener('scroll', onScroll);
+  window.addEventListener('resize', onResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll);
+  window.removeEventListener('resize', onResize);
+});
+
+async function getContent() {
+  if (!category.value || !page.value) return;
+
+  const res = await fetch(`/manual/${category.value}/${page.value}.md`);
+
+  if (res && res.ok) {
+    const text = await res.text();
+    content.value = text;
+    contentParsed.value = md.parse(text, {});
+  }
+}
+
+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',
+    });
+}
+</script>
 
 <template>
-  <div></div>
+  <div class="col full-height scroll rounded">
+    <div v-if="content" style="display: flex" class="markdown">
+      <div
+        :key="ts"
+        style="
+          width: 100%;
+          flex: 1;
+          border-radius: 0.5rem;
+          border: 1px solid var(--border-color);
+          padding: 1rem;
+        "
+        class="surface-1"
+        v-html="
+          md.render(
+            content.replaceAll('images/', `/manual/${category}/images/`),
+          )
+        "
+      ></div>
+    </div>
+
+    <div>
+      <q-scroll-area class="fit">
+        <q-list padding>
+          <template v-for="(token, idx) in contentParsed">
+            <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">
+                    {{ contentParsed?.[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">
+                    {{ contentParsed?.[idx + 1].content }}
+                  </span>
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
+      </q-scroll-area>
+    </div>
+  </div>
 </template>
+
+<style lang="css" scoped>
+.toc {
+  top: 4rem;
+}
+
+.active {
+  color: red;
+}
+
+.markdown :deep(:where(h1, h2, h3, h4, h5, h6)) {
+  line-height: 1.5;
+  padding-block: 1rem !important;
+}
+
+.markdown :deep(blockquote) {
+  background-color: var(--surface-2);
+  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(h1) {
+  text-align: left;
+  margin-top: -1rem;
+  margin-inline: -1rem;
+  font-size: 24px;
+  font-weight: 700;
+  background-color: var(--surface-2);
+  border-radius: 8px 8px 0px 0px;
+  padding: 0px 16px;
+}
+
+.markdown :deep(.hljs) {
+  border-radius: 8px;
+}
+
+.markdown :deep(a) {
+  color: hsla(var(--info-bg));
+}
+
+.markdown :deep(figcaption) {
+  text-align: center;
+}
+
+.markdown :deep(h2) {
+  text-align: left;
+  margin-block: 0;
+  font-size: 18px;
+  font-weight: 600;
+  padding: 0px 16px;
+}
+
+.markdown :deep(h3) {
+  text-align: left;
+  margin-block: 0;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0px 16px;
+}
+</style>