diff --git a/components/app/AppFlatPlan.vue b/components/app/AppFlatPlan.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1936e27c0652c5d864d2ab774260e8ffe14a48a4
--- /dev/null
+++ b/components/app/AppFlatPlan.vue
@@ -0,0 +1,140 @@
+<template>
+ <div id="container-flatplan" class="container mb-12">
+ <section class="grid grid-cols-4 gap-6">
+ <nuxt-link
+ v-for="(section, i) in sections"
+ :key="i"
+ :to="section.to"
+ class="bg-blue-100 dark:bg-blue-900 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
+ :class="currentPage === i + 1 && 'is-active'"
+ >
+ <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>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ document: {
+ type: Object,
+ required: true,
+ },
+ currentPage: {
+ type: Number,
+ default: null,
+ },
+ },
+ computed: {
+ sections() {
+ return this.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,
+ }
+ })
+ },
+ },
+}
+</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;
+}
+
+#container-flatplan .svg-inline--fa {
+ animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
+ animation-delay: 5s;
+}
+#container-flatplan .grid > a:nth-child(2) .svg-inline--fa {
+ animation-delay: 5.5s;
+}
+#container-flatplan .grid > a:nth-child(3) .svg-inline--fa {
+ animation-delay: 6s;
+}
+#container-flatplan .grid > 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/components/home/HomeCTA.vue b/components/home/HomeCTA.vue
index f55d4d73bc34fbb8092749209608c73737843d1d..e1f473b157399cbb4a61d1720c3328c38c9ee941 100644
--- a/components/home/HomeCTA.vue
+++ b/components/home/HomeCTA.vue
@@ -15,84 +15,4 @@ export default {
}
</script>
-<style lang="postcss">
-.list-cta > li {
- position: relative;
- padding-left: 1.75em;
- margin: 0.5em 0;
- line-height: 1.2em;
-}
-.list-cta > li::before {
- content: '';
- position: absolute;
- background-color: #3b82f6;
- border-radius: 50%;
- width: 0.375em;
- height: 0.375em;
- top: 0.375em;
- left: 0.25em;
-}
-
-#container-cta .svg-inline--fa {
- animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
- animation-delay: 5s;
-}
-#container-cta .grid > a:nth-child(2) .svg-inline--fa {
- animation-delay: 5.5s;
-}
-#container-cta .grid > a:nth-child(3) .svg-inline--fa {
- animation-delay: 6s;
-}
-#container-cta .grid > 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>
+<style lang="postcss"></style>
diff --git a/content/ui/home-cta.md b/content/ui/home-cta.md
index f2dc71f244249eac61c7b0b291d4054d499cff74..86b27499320a633c629ba25c9378e86ff03d20ac 100644
--- a/content/ui/home-cta.md
+++ b/content/ui/home-cta.md
@@ -1,54 +1 @@
-<section class="grid grid-cols-4 gap-6">
- <nuxt-link
- to="/decouvrir"
- class="bg-blue-100 dark:bg-blue-900 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
- >
- <div class="flex items-center justify-between">
- <h2 class="font-semibold text-lg">Découvrir</h2>
- <fa icon="arrow-right" class="ml-4"></fa>
- </div>
- <ul class="mt-1 font-light list-cta">
- <li>D'où vient l'argent ?</li>
- <li>La création monétaire en monnaie libre</li>
- </ul>
- </nuxt-link>
- <nuxt-link
- to="/comprendre"
- class="bg-blue-100 dark:bg-blue-900 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
- >
- <div class="flex items-center justify-between">
- <h2 class="font-semibold text-lg">Comprendre</h2>
- <fa icon="arrow-right" class="ml-4"></fa>
- </div>
- <ul class="mt-1 font-light list-cta">
- <li>La théorie relative de la monnaie</li>
- <li>La toile de confiance et la blockchain de la Äž1</li>
- </ul>
- </nuxt-link>
- <nuxt-link
- to="/debuter"
- class="bg-blue-100 dark:bg-blue-900 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
- >
- <div class="flex items-center justify-between">
- <h2 class="font-semibold text-lg">Débuter</h2>
- <fa icon="arrow-right" class="ml-4"></fa>
- </div>
- <ul class="mt-1 font-light list-cta">
- <li>Ouvrir un compte</li>
- <li>Les outils de la Äž1</li>
- </ul>
- </nuxt-link>
- <nuxt-link
- to="/contribuer"
- class="bg-blue-100 dark:bg-blue-900 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
- >
- <div class="flex items-center justify-between">
- <h2 class="font-semibold text-lg">Contribuer</h2>
- <fa icon="arrow-right" class="ml-4"></fa>
- </div>
- <ul class="mt-1 font-light list-cta">
- <li>Rencontrer des utilisateurs</li>
- <li>Participer</li>
- </ul>
- </nuxt-link>
-</section>
\ No newline at end of file
+Introduction : 3min en vidéo !
\ No newline at end of file
diff --git a/content/ui/main-flatplan.md b/content/ui/main-flatplan.md
new file mode 100644
index 0000000000000000000000000000000000000000..93797b4998f5af1b69f4b091084f2fcd9c4dc306
--- /dev/null
+++ b/content/ui/main-flatplan.md
@@ -0,0 +1,31 @@
+---
+title: Chemin de fer
+description: Parcours de lecture. Affiché sous le héro de la page d'accueil, et dans les pages concernées.
+layout: cdc
+---
+
+# [1. Découvrir](/decouvrir)
+
+- D'où vient l'argent ?
+- La création monétaire en monnaie libre
+
+---
+
+# [2. Comprendre](/comprendre)
+
+- La théorie relative de la monnaie
+- La toile de confiance et la blockchain de la Äž1
+
+---
+
+# [3. Débuter](/debuter)
+
+ - Ouvrir un compte
+ - Les outils de la Äž1
+
+---
+
+# [4. Contribuer](/contribuer)
+
+- Rencontrer des utilisateurs
+- Participer
diff --git a/nuxt.config.js b/nuxt.config.js
index 2703fc7923a4fba7566ed1f9cdce139fea518c94..94c3b7af99259988fbe9a6129ead9ddff72eef1e 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -206,9 +206,20 @@ export default {
hooks: {
// Netlifycms cannot create array in json file at root level and nuxt-content need an array. So, ressources.json is parsed to fetch 'ressources' key.
'content:file:beforeParse': (file) => {
- if (file.extension !== '.json' || !/.*ressources.json$/.test(file.path))
- return
- file.data = JSON.stringify(JSON.parse(file.data).ressources)
+ if (file.extension === '.json' && !/.*ressources.json$/.test(file.path)) {
+ file.data = JSON.stringify(JSON.parse(file.data).ressources)
+ } else if (file.extension === '.md') {
+ if (/^---.*layout:.*---/s.test(file.data)) {
+ let t = 0
+ const data = file.data.replace(/---/g, (match) => {
+ ++t
+ if (t === 2) return '---\n<section>'
+ if (t > 2) return '</section>\n<section>'
+ return match
+ })
+ file.data = data + '\n</section>'
+ }
+ }
},
async 'content:file:beforeInsert'(document) {
if (document.extension === '.md') {
diff --git a/pages/index.vue b/pages/index.vue
index 88a37167c1c251323775ff720c34f3ce68d98356..1c9f33725d5e1fbaf54c024461cdcdeb99369872 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,7 @@
<div>
<HomeHero :document="hero" />
<HomeCTA :document="cta" />
+ <AppFlatPlan :document="flatPlan" />
<section class="bg-gray-100 dark:bg-gray-800">
<div class="container py-12 relative prose">
@@ -52,11 +53,13 @@ export default {
async asyncData({ $content }) {
const hero = await $content('ui/home-hero').fetch()
const cta = await $content('ui/home-cta').fetch()
+ const flatPlan = await $content('ui/main-flatplan').fetch()
const document = await $content('ui/home').fetch()
return {
hero,
cta,
+ flatPlan,
document,
}
},
diff --git a/pages/test.vue b/pages/test.vue
index c83667d714597fc1b5d02509875246746597365a..46531ce3e7b4e1e99197234868cff1d6129b4254 100644
--- a/pages/test.vue
+++ b/pages/test.vue
@@ -18,6 +18,25 @@
du site!
</p>
+ <h2 class="mt-8">List</h2>
+ <pre v-text="listPre" />
+ <List
+ content="pages"
+ limit="2"
+ sort-by="title"
+ direction="desc"
+ description
+ >
+ Liste des pages :
+ </List>
+
+ <h2 class="mt-8">Box</h2>
+ <pre v-text="boxPre" />
+ <Box to="/faq" color="blue">
+ Ceci est une box pour mettre en valeur du <strong>contenu</strong>,
+ signaler du contenu en rapport avec le texte principal...
+ </Box>
+
<h2 class="mt-8">Crowdfunding Äž1</h2>
Base :
<pre v-text="crowdfundingPre" />
@@ -98,6 +117,16 @@ export default {
return {
toggle: false,
lexiquePre: '<lexique title="test">test en props</lexique>',
+ listPre: `<List content="pages" limit="2" sort-by="title" direction="desc">
+ Liste des pages :
+ <template #items="{ items }">
+ <div v-for="(item, i) in items" :key="i">{{ item.slug }}</div>
+ </template>
+</List>`,
+ boxPre: `<Box to="/faq" color="blue">
+ Ceci est une box pour mettre en valeur du <strong>contenu</strong>,
+ signaler du contenu en rapport avec le texte principal...
+</Box>`,
crowdfundingPre:
'<G1Crowdfunding pubkey="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8" />',
crowdfundingPreHOC: `<G1Crowdfunding