refactoring: rename and move flat plan component

components/app/AppFlatPlan.vue

-<template>
-  <nav>
-    <nuxt-link
-      v-if="showNext && nextPage"
-      class="text-3xl pb-3 mb-3 block group"
-      :to="nextPage.to"
-    >
-      <span class="opacity-75">Page suivante</span>
-      <fa icon="arrow-right" class="mx-4"></fa>
-      <span class="font-semibold group-hover:underline">
-        {{ nextPage.title }}
-      </span>
-    </nuxt-link>
-
-    <section
-      class="section-flatplan gap-6 grid lg:grid-cols-4 md:grid-cols-2 group"
-    >
-      <nuxt-link
-        v-for="(section, i) in sections"
-        :key="i"
-        :to="section.to"
-        class="bg-blue-100 dark:bg-blue-900 px-4 py-4 pb-3 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
-        :class="
-          showNext &&
-          (nextPage && nextPage.to === section.to
-            ? 'ring-4 ring-blue-200 dark:ring-blue-800'
-            : 'bg-opacity-80 dark:bg-opacity-80 group-hover:bg-opacity-100')
-        "
-      >
-        <div class="flex items-center justify-between">
-          <h2 class="font-semibold text-lg">{{ section.title }}</h2>
-          <fa icon="arrow-right" class="ml-4"></fa>
-        </div>
-        <ul class="mt-1 font-light list-flatplan">
-          <li v-for="(item, ii) in section.children" :key="ii">
-            {{ item }}
-          </li>
-        </ul>
-      </nuxt-link>
-    </section>
-  </nav>
-</template>
-
-<script>
-export default {
-  props: {
-    plan: {
-      type: String,
-      required: true,
-    },
-    showNext: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      sections: [],
-    }
-  },
-  async fetch() {
-    const document = await this.$content(this.plan).fetch()
-
-    // This is ugly, but I don't found another way to extract title, link and li elements.
-    // It's work with 'content:file:beforeParse' nuxt-content hook. See in config.nuxt.js
-    this.sections = document.body.children
-      .filter((item) => item.tag === 'section')
-      .map((item) => {
-        const title = item.children.filter((item) => item.type === 'element')[0]
-          .children[1]
-        const children = item.children
-          .filter((item) => item.type === 'element')[1]
-          .children.filter((item) => item.type === 'element')
-          .map((li) => li.children[0].value)
-        return {
-          children,
-          title: title.children[0].value,
-          to: title.props.to,
-        }
-      })
-  },
-  computed: {
-    nextPage() {
-      const index = this.sections.findIndex(
-        (index) => index.to === this.$route.fullPath
-      )
-      return this.sections[index + 1] ? this.sections[index + 1] : null
-    },
-  },
-}
-</script>
-
-<style lang="postcss" scoped>
-.list-flatplan > li {
-  position: relative;
-  padding-left: 1.75em;
-  margin: 0.5em 0;
-  line-height: 1.2em;
-}
-.list-flatplan > li::before {
-  content: '';
-  position: absolute;
-  background-color: #3b82f6;
-  border-radius: 50%;
-  width: 0.375em;
-  height: 0.375em;
-  top: 0.375em;
-  left: 0.25em;
-}
-
-.section-flatplan .svg-inline--fa {
-  animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
-  animation-delay: 5s;
-}
-.section-flatplan > a:nth-child(2) .svg-inline--fa {
-  animation-delay: 5.5s;
-}
-.section-flatplan > a:nth-child(3) .svg-inline--fa {
-  animation-delay: 6s;
-}
-.section-flatplan > a:nth-child(4) .svg-inline--fa {
-  animation-delay: 6.5s;
-}
-@keyframes shake {
-  0% {
-    -webkit-transform: translate(2px, 1px) rotate(0deg);
-  }
-
-  1% {
-    -webkit-transform: translate(-1px, -2px) rotate(-3deg);
-  }
-
-  2% {
-    -webkit-transform: translate(-3px, 0px) rotate(3deg);
-  }
-
-  3% {
-    -webkit-transform: translate(0px, 2px) rotate(0deg);
-  }
-
-  4% {
-    -webkit-transform: translate(1px, -1px) rotate(3deg);
-  }
-
-  5% {
-    -webkit-transform: translate(-1px, 2px) rotate(-3deg);
-  }
-
-  6% {
-    -webkit-transform: translate(-3px, 1px) rotate(0deg);
-  }
-
-  7% {
-    -webkit-transform: translate(2px, 1px) rotate(-3deg);
-  }
-
-  8% {
-    -webkit-transform: translate(-1px, -1px) rotate(3deg);
-  }
-
-  9% {
-    -webkit-transform: translate(2px, 2px) rotate(0deg);
-  }
-
-  10% {
-    -webkit-transform: translate(1px, -2px) rotate(-3deg);
-  }
-
-  11% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-}
-</style>

pages/_slug.vue

@@ -10,7 +10,7 @@
     </template>
 
     <template #footer>
-      <AppFlatPlan
+      <PageFlatPlan
         v-if="document.plan"
         :plan="document.plan"
         class="border-t mt-20 py-6"

pages/index.vue

@@ -2,7 +2,7 @@
   <div>
     <HomeHero :document="hero" />
 
-    <AppFlatPlan class="container mb-12" plan="ui/main-flatplan" />
+    <PageFlatPlan class="container mb-12" plan="ui/main-flatplan" />
 
     <HomeSearchInput />