add pages

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

@@ -1,20 +1,12 @@
 <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"
-      >
+      <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"
-        >
+        <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 }}
@@ -43,27 +35,14 @@
                 </UiHeading>
               </div>
               <!-- Regular subsection -->
-              <UiHeading
-                v-else
-                tag="H3"
-                size="300"
-                class="[&]:text-gray-200 [&]:font-normal"
-              >
+              <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"
+              <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>
@@ -71,15 +50,8 @@
 
               <!-- 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"
-                  >
+                <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>
@@ -94,61 +66,60 @@
 </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'
+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'
 
 interface SubsectionTitle {
-  text: string;
-  img?: string;
+  text: string
+  img?: string
 }
 
 interface Subsection {
-  title: string | SubsectionTitle;
-  items?: string[];
+  title: string | SubsectionTitle
+  items?: string[]
   subsections?: Array<{
-    title: string;
-  }>;
+    title: string
+  }>
 }
 
 interface Section {
-  title: string;
-  subsections?: Subsection[];
+  title: string
+  subsections?: Subsection[]
 }
 
 interface TitlesData {
-  title: string;
-  titleMeta: string;
-  sections: Section[];
+  title: string
+  titleMeta: string
+  sections: Section[]
 }
 
-const route = useRoute();
+const route = useRoute()
 
-const currentTitlesData = ref<TitlesData | null>(null);
+const currentTitlesData = ref<TitlesData | null>(null)
 
-const titles = computed(() => currentTitlesData.value);
+const titles = computed(() => currentTitlesData.value)
 
 const loadTitlesData = async (slug: string) => {
   try {
-    const module = await import(`./_data/${slug}.json`);
-    currentTitlesData.value = module.default as TitlesData;
+    const module = await import(`./_data/${slug}.json`)
+    currentTitlesData.value = module.default as TitlesData
   } catch (error) {
-    console.error(`Ошибка при загрузке содержания с slug '${slug}':`, error);
-    currentTitlesData.value = null;
+    console.error(`Ошибка при загрузке содержания с slug '${slug}':`, error)
+    currentTitlesData.value = null
   }
-};
+}
 
 watch(
   () => route.params.titlesSlug,
   async (newSlug) => {
     if (newSlug) {
-      await loadTitlesData(newSlug as string);
+      await loadTitlesData(newSlug as string)
     }
   },
-  { immediate: true }
-);
+  { immediate: true },
+)
 
 watch(titles, (newTitles) => {
   if (newTitles) {
@@ -156,17 +127,17 @@ watch(titles, (newTitles) => {
       title: `${newTitles.titleMeta} | Vino Galante`,
       meta: [
         {
-          name: "description",
-          content: "Содержание книги Vino Galante",
+          name: 'description',
+          content: 'Содержание книги Vino Galante',
         },
       ],
       link: [
         {
-          rel: "canonical",
+          rel: 'canonical',
           href: `https://ebook.miduway.space/books/${route.params.slug}/${route.params.titlesSlug}`,
         },
       ],
-    });
+    })
   }
-});
+})
 </script>