migrate on nuxt3

pages/books/[titlesSlug]/[titlesSlug].vue

@@ -0,0 +1,172 @@
+<template>
+  <div v-if="titles" class="relative z-50 min-h-screen text-white mb-[208px]">
+    <section class="flex flex-col relative z-40 mt-40 ml-18">
+      <UiHeading
+        tag="H1"
+        class="whitespace-pre-line [&]:font-normal mb-10 -ml-5"
+        size="500"
+      >
+        {{ titles.title }}
+      </UiHeading>
+
+      <div class="flex flex-col gap-6">
+        <div
+          v-for="(section, index) in titles.sections"
+          :key="index"
+          class="flex flex-col gap-4"
+        >
+          <!-- Main section title -->
+          <UiHeading tag="H2" size="300" class="text-three [&]:font-normal">
+            {{ section.title }}
+          </UiHeading>
+
+          <!-- Subsections -->
+          <div v-if="section.subsections" class="ml-6 flex flex-col gap-4">
+            <div
+              v-for="(subsection, subIndex) in section.subsections"
+              :key="subIndex"
+              class="flex flex-col gap-2"
+            >
+              <!-- Subsection with image -->
+              <div
+                v-if="typeof subsection.title === 'object'"
+                class="flex items-center gap-3 -ml-10"
+              >
+                <img
+                  v-if="subsection.title.img"
+                  :src="subsection.title.img"
+                  :alt="subsection.title.text"
+                  class="w-6 h-6"
+                />
+                <UiHeading tag="H3" size="300" class="[&]:font-normal">
+                  {{ subsection.title.text }}
+                </UiHeading>
+              </div>
+              <!-- Regular subsection -->
+              <UiHeading
+                v-else
+                tag="H3"
+                size="300"
+                class="[&]:text-gray-200 [&]:font-normal"
+              >
+                {{ subsection.title }}
+              </UiHeading>
+
+              <!-- Items list -->
+              <ul
+                v-if="subsection.items"
+                class="ml-6 flex flex-col gap-2 list-decimal"
+              >
+                <li
+                  v-for="(item, itemIndex) in subsection.items"
+                  :key="itemIndex"
+                >
+                  <UiParagraph
+                    size="300"
+                    class="[&]:text-gray-200 [&]:font-normal"
+                    >&nbsp;{{ item }}</UiParagraph
+                  >
+                </li>
+              </ul>
+
+              <!-- Nested subsections -->
+              <div v-if="subsection.subsections" class="flex flex-col gap-2">
+                <div
+                  v-for="(nestedSub, nestedIndex) in subsection.subsections"
+                  :key="nestedIndex"
+                >
+                  <UiHeading
+                    tag="H4"
+                    size="300"
+                    class="[&]:text-gray-200 [&]:font-normal"
+                  >
+                    {{ nestedSub.title }}
+                  </UiHeading>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+  <div v-else class="text-white text-center py-20">Содержание не найдено.</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useRoute } from "vue-router";
+import UiHeading from "@/components/Typography/UiHeading.vue";
+import UiParagraph from "@/components/Typography/UiParagraph.vue";
+// import { useHead } from '@vueuse/head'
+
+interface SubsectionTitle {
+  text: string;
+  img?: string;
+}
+
+interface Subsection {
+  title: string | SubsectionTitle;
+  items?: string[];
+  subsections?: Array<{
+    title: string;
+  }>;
+}
+
+interface Section {
+  title: string;
+  subsections?: Subsection[];
+}
+
+interface TitlesData {
+  title: string;
+  titleMeta: string;
+  sections: Section[];
+}
+
+const route = useRoute();
+
+const currentTitlesData = ref<TitlesData | null>(null);
+
+const titles = computed(() => currentTitlesData.value);
+
+const loadTitlesData = async (slug: string) => {
+  try {
+    const module = await import(`./_data/${slug}.json`);
+    currentTitlesData.value = module.default as TitlesData;
+  } catch (error) {
+    console.error(`Ошибка при загрузке содержания с slug '${slug}':`, error);
+    currentTitlesData.value = null;
+  }
+};
+
+watch(
+  () => route.params.titlesSlug,
+  async (newSlug) => {
+    if (newSlug) {
+      await loadTitlesData(newSlug as string);
+    }
+  },
+  { immediate: true }
+);
+
+watch(titles, (newTitles) => {
+  if (newTitles) {
+    useHead({
+      title: `${newTitles.titleMeta} | Vino Galante`,
+      meta: [
+        {
+          name: "description",
+          content: "Содержание книги Vino Galante",
+        },
+      ],
+      link: [
+        {
+          rel: "canonical",
+          href: `https://ebook.miduway.space/books/${route.params.slug}/${route.params.titlesSlug}`,
+        },
+      ],
+    });
+  }
+});
+</script>