Skip to content
Snippets Groups Projects
Commit 0e063e14 authored by Emmanuel Salomon's avatar Emmanuel Salomon :fist:
Browse files

Chemin de fer (flatPlan)

parents d577a984 756093de
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/app/AppFlatPlan.vue 0 → 100644
+ 140
− 0
View file @ 0e063e14
<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>
components/home/HomeCTA.vue
+ 1
− 81
View file @ 0e063e14
...@@ -15,84 +15,4 @@ export default { ...@@ -15,84 +15,4 @@ export default {
} }
</script> </script>
<style lang="postcss"> <style lang="postcss"></style>
.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>
content/ui/home-cta.md
+ 1
− 54
View file @ 0e063e14
<section class="grid grid-cols-4 gap-6"> Introduction : 3min en vidéo !
<nuxt-link \ No newline at end of file
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
content/ui/main-flatplan.md 0 → 100644
+ 31
− 0
View file @ 0e063e14
---
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
nuxt.config.js
+ 14
− 3
View file @ 0e063e14
...@@ -206,9 +206,20 @@ export default { ...@@ -206,9 +206,20 @@ export default {
hooks: { 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. // 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) => { 'content:file:beforeParse': (file) => {
if (file.extension !== '.json' || !/.*ressources.json$/.test(file.path)) if (file.extension === '.json' && !/.*ressources.json$/.test(file.path)) {
return file.data = JSON.stringify(JSON.parse(file.data).ressources)
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) { async 'content:file:beforeInsert'(document) {
if (document.extension === '.md') { if (document.extension === '.md') {
......
pages/index.vue
+ 3
− 0
View file @ 0e063e14
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div> <div>
<HomeHero :document="hero" /> <HomeHero :document="hero" />
<HomeCTA :document="cta" /> <HomeCTA :document="cta" />
<AppFlatPlan :document="flatPlan" />
<section class="bg-gray-100 dark:bg-gray-800"> <section class="bg-gray-100 dark:bg-gray-800">
<div class="container py-12 relative prose"> <div class="container py-12 relative prose">
...@@ -52,11 +53,13 @@ export default { ...@@ -52,11 +53,13 @@ export default {
async asyncData({ $content }) { async asyncData({ $content }) {
const hero = await $content('ui/home-hero').fetch() const hero = await $content('ui/home-hero').fetch()
const cta = await $content('ui/home-cta').fetch() const cta = await $content('ui/home-cta').fetch()
const flatPlan = await $content('ui/main-flatplan').fetch()
const document = await $content('ui/home').fetch() const document = await $content('ui/home').fetch()
return { return {
hero, hero,
cta, cta,
flatPlan,
document, document,
} }
}, },
......
pages/test.vue
+ 29
− 0
View file @ 0e063e14
...@@ -18,6 +18,25 @@ ...@@ -18,6 +18,25 @@
du site! du site!
</p> </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> <h2 class="mt-8">Crowdfunding Ğ1</h2>
Base : Base :
<pre v-text="crowdfundingPre" /> <pre v-text="crowdfundingPre" />
...@@ -98,6 +117,16 @@ export default { ...@@ -98,6 +117,16 @@ export default {
return { return {
toggle: false, toggle: false,
lexiquePre: '<lexique title="test">test en props</lexique>', 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: crowdfundingPre:
'<G1Crowdfunding pubkey="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8" />', '<G1Crowdfunding pubkey="78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8" />',
crowdfundingPreHOC: `<G1Crowdfunding crowdfundingPreHOC: `<G1Crowdfunding
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment