From 260bbf908b093afad0bad74c557bcfa942117222 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Wed, 22 Sep 2021 15:08:48 +0200
Subject: [PATCH] refactoring: rename and move flat plan component
---
components/app/AppFlatPlan.vue | 173 ---------------------------------
pages/_slug.vue | 2 +-
pages/index.vue | 2 +-
3 files changed, 2 insertions(+), 175 deletions(-)
delete mode 100644 components/app/AppFlatPlan.vue
diff --git a/components/app/AppFlatPlan.vue b/components/app/AppFlatPlan.vue
deleted file mode 100644
index 6a8e0f05..00000000
--- a/components/app/AppFlatPlan.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<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>
diff --git a/pages/_slug.vue b/pages/_slug.vue
index b460a21d..18cd5220 100644
--- a/pages/_slug.vue
+++ b/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"
diff --git a/pages/index.vue b/pages/index.vue
index ee53c303..7ab591aa 100644
--- a/pages/index.vue
+++ b/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 />
--
GitLab