hrms-manual/src/modules/01_manual/MainPage.vue

<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import { useRoute } from "vue-router";
import MarkdownIt, { type Token } from "markdown-it";
import hljs from "highlight.js";

// @ts-expect-error
import mditFigureWithPCaption from "markdown-it-image-figures";
import mditAnchor from "markdown-it-anchor";
import mditHighlight from "markdown-it-highlightjs";
import { useManualStore } from "@/stores/manual";
import { storeToRefs } from "pinia";
// @ts-expect-error
import mditVideo from "markdown-it-video";

const md = new MarkdownIt()
  .use(mditAnchor)
  .use(mditVideo, {
    youtube: { width: "70%", height: "auto", autoplay: false },
  })
  .use(mditFigureWithPCaption, {
    figcaption: "alt",
    html: true,
    linkify: true,
    typography: true,
  })
  .use(mditHighlight, { hljs });
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(`/documents/${route.params.name}.md`);
    if (res && res.ok) {
      const pattern = /chapter-(\d+)/;
      const match = pattern.exec(route.params.name);

      if (!match) return;

      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);
});
</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;
}
.markdown :deep(iframe) {
  display: block;
  margin: 0 auto;
  height: 50vh; /* Adjust this value as needed */
}
</style>