feat: replace some vue pages with md files

app.vue

@@ -31,23 +31,21 @@ router.afterEach((to, _from) => {
 });
 
 const { $mitt } = useNuxtApp();
-const bodyRef = useTemplateRef('mainBody');
+const mainRef = useTemplateRef('mainBody');
+const heightRef = useTemplateRef('dMainBody');
 onMounted(() => {
-  const mutationObserver =
-    window.MutationObserver ||
-    window.WebKitMutationObserver ||
-    window.MozMutationObserver;
-  const observer = new mutationObserver(() => {
-    $mitt.emit('routeSwitching');
-  });
-  observer.observe(bodyRef.value, {
-    childList: true
-  });
+  new ResizeObserver(() => {
+    $mitt.emit('mainDomChange', mainRef.value.clientHeight);
+  }).observe(heightRef.value);
 });
 </script>
 
 <template>
   <NuxtLayout>
-    <div ref="mainBody" class="flex-1 pl-[1px]"><NuxtPage /></div>
+    <div ref="mainBody" class="flex-1 pl-[1px]">
+      <div ref="dMainBody">
+        <NuxtPage />
+      </div>
+    </div>
   </NuxtLayout>
 </template>

app/router.options.ts

@@ -0,0 +1,9 @@
+import type { RouterConfig } from '@nuxt/schema';
+import { useScrollStore } from '~/stores/scroll';
+
+export default <RouterConfig>{
+  scrollBehavior(to, _from, savedPosition) {
+    if (savedPosition) return savedPosition;
+    else if (to.hash) useScrollStore().scrollOrSet(to.hash);
+  }
+};

assets/index.scss

@@ -36,7 +36,7 @@ $common-margin: 24px;
   margin-bottom: $common-margin;
 
   h2 {
-    margin-bottom: $common-margin;
+    margin-block: $common-margin;
   }
 
   h2,
@@ -70,6 +70,7 @@ $common-margin: 24px;
 
   table {
     max-width: calc(100% - 2 * $common-margin);
+    table-layout: auto;
   }
 }
 

components/CommonContent.vue

@@ -1,28 +1,51 @@
 <script lang="ts" setup>
-const props = defineProps<{ category: string }>();
+import { useScrollStore } from '~/stores/scroll';
+
+const props = defineProps<{ path?: string }>();
 
 const route = useRoute();
 const { locale } = useI18n();
+const scrollStore = useScrollStore();
+const contentRef = useTemplateRef('contentRef');
+
+
+const contentPath = computed(() => {
+  if (props.path) return props.path;
 
-const { data: page } = await useAsyncData(
-  computed(() => `${locale.value}:${props.category}:${route.params.slug}`),
-  () => {
-    return queryCollection(locale.value)
-      .path(`/${props.category}/${route.params.slug}`)
-      .first();
-  }
+  // For `prefix_except_default`
+  const prefix = `/${locale.value}`;
+  return route.path.startsWith(prefix)
+    ? route.path.substring(prefix.length) || '/'
+    : route.path;
+});
+
+const { data: page, error } = await useAsyncData(
+  computed(() => `${locale.value}:${contentPath.value}`),
+  () => queryCollection(locale.value).path(contentPath.value).first()
 );
 useHead({ title: page.value?.title });
+
+if (error.value || !page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true
+  });
+}
+
+watch(contentRef, () => {
+  if (route.hash) scrollStore.scrollAndClear();
+});
 </script>
 
 <template>
   <article v-if="page">
     <category-second
-      v-if="page?.body.value[0][0] !== 'h2'"
-      :id="page?.title"
-      :title="page?.title"
-      :right-text="page?.date.substring(0, 10)"
+      v-if="page.body.value[0][0] !== 'h2'"
+      :id="page.title"
+      :title="page.title"
+      :right-text="page.date?.substring(0, 10)"
       :title-url="`${route.path}#${page.title}`" />
-    <ContentRenderer :value="page" class="heti" />
+    <ContentRenderer ref="contentRef" :value="page" class="heti" />
   </article>
 </template>