Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • websites/monnaie-libre-fr
  • midiland/monnaie-libre-fr
  • websites/moneda-libre-org
  • atlasan/g1-monetalibera-it
  • Processus42/monnaie-libre-fr
  • diablade/monnaie-libre-fr
  • Spiranne/monnaie-libre-fr
7 results
Show changes
Commits on Source (125)
25 additional commits have been omitted to prevent performance issues.
Hide whitespace changes
Inline Side-by-side
Showing
with 963 additions and 92 deletions
README.md
View file @ a37c5282
......@@ -53,6 +53,7 @@ Sur cette page, vous pouvez copier une class css en cliquant sur le nom, ou maj+
### Icônes
https://fontawesome.com/icons?m=free
https://www.figma.com/file/Gof5rulCCUMvwk3WDKlgVY/H%C3%A9ro-monnaie-libre.fr?node-id=30%3A0
## Docs
......
TODO.md
View file @ a37c5282
......@@ -7,3 +7,15 @@
## A corriger quand ce sera fixé
- Remove postcss 7 when nuxt/tailwindcss will be updated (See [here](https://tailwindcss.nuxtjs.org/setup#tailwind-2))
- Remove `resolutions` in package.json (See [here](https://github.com/nuxt/nuxt.js/issues/8639#issuecomment-767552372))
# Détection browser
https://github.com/ivodolenc/nuxt-bowser
# Nuxt image
https://github.com/bencodezen/nuxt-image-demo
# Site map
https://redfern.dev/articles/adding-a-sitemap-using-nuxt-content/
# Gitlab
https://github.com/jdalrymple/gitbeaker
\ No newline at end of file
components/app/AppA11y.vue 0 → 100644
View file @ a37c5282
<template>
<div class="flex items-center text-gray-400">
<div class="flex items-end">
<fa
icon="font"
class="text-xs hover:text-hover cursor-pointer"
@click="onChangeSize(documentFontSize - 0.1)"
/>
<fa
icon="font"
class="text-sm px-1 hover:text-hover cursor-pointer"
@click="onChangeSize(1)"
/>
<fa
icon="font"
class="text-base hover:text-hover cursor-pointer"
@click="onChangeSize(documentFontSize + 0.1)"
/>
</div>
<div class="hover:text-hover mx-3 cursor-pointer" @click="onA11y">
<fa icon="wheelchair" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
documentFontSize: 1,
}
},
methods: {
onChangeSize(size) {
this.documentFontSize = size < 0.8 ? 0.8 : size > 1.2 ? 1.2 : size
document.documentElement.style.fontSize = this.documentFontSize + 'em'
},
onA11y() {
console.log('a11y')
},
},
}
</script>
<style lang="scss" scoped></style>
components/app/AppReadingTime.vue 0 → 100644
View file @ a37c5282
<template>
<div class="flex items-center mb-8">
<fa :icon="['far', 'clock']" class="text-gray-400 text-lg mr-2" />
<div>
<span>{{ readingTimeToStr }}</span>
<span class="text-gray-400 text-sm pl-1">
{{ `(${readingTime.words} mots)` }}
</span>
</div>
</div>
</template>
<script>
export default {
props: {
readingTime: {
type: Object,
required: true,
},
},
computed: {
readingTimeToStr() {
const minutes = this.readingTime.minutes
if (minutes > 1) {
return (
'Environ ' +
Math.round(minutes) +
' minute' +
(Math.round(minutes) > 1 ? 's' : '')
)
}
return "Moins d'une minute"
},
},
}
</script>
<style lang="scss" scoped></style>
components/app/MiniMap.vue
View file @ a37c5282
<template>
<div>
<div class="relative">
<Regions id="regionSVG" ref="regionSVG" class="text-gray-500" />
<span
v-show="hovered"
id="tooltip-mini-map"
class="bg-white fixed pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 dark:bg-gray-700"
class="absolute whitespace-nowrap pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 bg-white dark:bg-gray-700"
>
{{ hovered && hovered.name }}
</span>
......@@ -207,8 +207,8 @@ export default {
const tooltip = this.$el.querySelector('#tooltip-mini-map')
this.$refs.regionSVG.addEventListener('mousemove', (evt) => {
tooltip.style.left = evt.clientX + 15 + 'px'
tooltip.style.top = evt.clientY - 20 + 'px'
tooltip.style.left = evt.offsetX + 15 + 'px'
tooltip.style.top = evt.offsetY - 20 + 'px'
})
regionsPath.forEach((region) => {
......@@ -279,8 +279,9 @@ Allemagne: '#3AB54A',
<style lang="postcss" scoped>
#regionSVG >>> path {
opacity: 0.6;
transition: opacity ease 150ms;
opacity: 0.7;
/* // removed cause glitch effect
transition: opacity ease 150ms; */
cursor: pointer;
}
#regionSVG >>> path:hover {
......
components/blog/BlogMeta.vue
View file @ a37c5282
<template>
<div class="px-4 pt-3 pb-4 border-t border-gray-300">
<div class="pb-4 mb-4 border-b border-gray-300">
<div class="text-xs uppercase font-bold text-gray-600 tracking-wide">
AUTEUR
</div>
......
components/home/HomeHero.vue
View file @ a37c5282
<template>
<div class="hero container flex items-center justify-evenly px-20">
<div class="w-full lg:items-start max-w-2xl">
<div class="hero container flex">
<div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
<nuxt-content :document="hero" />
</div>
<HomeHeroSky class="fill-current text-white absolute" />
<HeroSvg
class="hero-svg w-full h-2/3 xl:w-3/5 py-6 overflow-y-hidden hidden lg:block"
/>
<LazyHomeHeroParticles v-if="isDesktop" />
</div>
</template>
<script>
import HeroSvg from '~/static/img/hero.svg?inline'
export default {
components: { HeroSvg },
props: {
hero: {
type: Object,
required: true,
},
},
data() {
return {
isDesktop: false,
}
},
mounted() {
if (window.innerWidth > 640) this.isDesktop = true
},
}
</script>
<style lang="postcss" scoped>
.hero {
min-height: 50vh;
}
.hero-svg >>> svg path:first-child {
background: green;
animation: zou 1s cubic-bezier(0.27, -0.5, 0.89, 1.74);
animation-delay: 2s;
}
@keyframes zou {
0% {
transform: rotate(370deg);
}
80% {
transform: rotate(359deg);
}
90% {
transform: rotate(361deg);
}
100% {
transform: rotate(360deg);
}
padding-top: 15vh;
}
.hero >>> .svg-inline--fa {
......
components/home/HomeHeroParticles.vue 0 → 100644
View file @ a37c5282
<template>
<div>
<div
id="tsparticles-limit"
class="absolute bg-blue-50 dark:bg-black left-0 top-0"
/>
<Particles
id="tsparticles"
:options="$options.config"
class="h-screen absolute right-0 top-0 opacity-70 dark:opacity-50"
/>
</div>
</template>
<script>
import Vue from 'vue'
import Particles from 'particles.vue'
Vue.use(Particles)
const links = {
color: {
value: '#ccc',
},
distance: 250,
enable: true,
frequency: 0.8,
opacity: 0.8,
width: 3,
}
export default {
config: {
pauseOnBlur: true,
pauseOnOutsideViewport: true,
detectRetina: true,
fpsLimit: 10,
background: {
color: {
value: 'transparent',
},
},
interactivity: {
detectsOn: 'canvas',
events: {
onDiv: {
enabled: true,
selectors: '#tsparticles-limit',
mode: 'repulse',
type: 'circle',
},
onClick: {
enable: true,
mode: 'push',
},
onHover: {
enable: true,
mode: 'grab',
parallax: {
enable: true,
force: 400,
},
},
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 1,
size: 40,
},
grab: {
distance: 400,
},
push: {
quantity: 2,
},
repulse: { distance: 200, duration: 0.4, speed: 0.1 },
},
},
particles: {
color: {
value: ['#5bc0eb', '#fde74c', '#9bc53d', '#e55934'],
},
move: {
enable: true,
direction: 'top-right',
random: true,
speed: 0.5,
outModes: 'out',
},
number: {
density: {
enable: false,
},
value: 100,
},
size: {
random: {
enable: true,
minimumValue: 20,
},
value: 40,
minimumValue: 20,
animation: {
enable: false,
speed: 4,
minimumValue: 10,
},
},
shape: {
type: Array(16).fill('circle').fill('image', 1, 16),
options: {
circle: {
particles: {
links,
size: {
value: 20,
minimumValue: 4,
},
},
},
image: [
...Array(40).fill({
src: '/particles/g.svg',
particles: {
links,
},
}),
...Array(3).fill({
src: '/particles/duniter.svg',
particles: {
links: {
distance: 350,
enable: true,
frequency: 1,
opacity: 1,
width: 6,
},
},
}),
...Array(1).fill({
src: '/particles/cesium.svg',
particles: {
links: {
distance: 350,
enable: true,
frequency: 1,
opacity: 1,
width: 6,
},
},
}),
...Array(1).fill({
src: '/particles/geconomicus1.png',
particles: {
links: {
distance: 350,
enable: true,
frequency: 1,
opacity: 1,
width: 6,
},
},
}),
...Array(1).fill({
src: '/particles/geconomicus2.png',
particles: {
links: {
distance: 350,
enable: true,
frequency: 1,
opacity: 1,
width: 6,
},
},
}),
{
src: '/particles/bomb.svg',
width: 32,
height: 32,
particles: {
links: {
enabled: false,
},
},
},
{
src: '/particles/nyan-cat.png',
width: 160,
height: 120,
particles: {
links: {
color: {
value: '#FF9900',
},
distance: 500,
enable: true,
frequency: 1,
opacity: 0.8,
width: 1,
},
size: {
value: 120,
minimumValue: 100,
},
},
},
...[].concat(
...Array(4).fill(
Array.from({ length: 8 }, (v, k) => ({
src: `/particles/avatars/avatar${k}.svg`,
particles: {
links,
},
}))
)
),
],
},
},
},
},
data() {
return {}
},
beforeMount() {
// this.$options.config.particles.links.distance = window.innerWidth / 6
},
}
</script>
<style lang="postcss" scoped>
#tsparticles {
width: 100vw;
}
#tsparticles-limit {
box-shadow: rgb(239 246 255) 0px 0px 80px 100px;
width: 60vw;
height: 60vh;
border-radius: 0 0 40vh;
z-index: 1;
}
.dark #tsparticles-limit {
box-shadow: black 0px 0px 80px 100px;
}
</style>
components/home/HomeHeroSky.vue 0 → 100644
View file @ a37c5282
<template>
<div id="sky" class="absolute inset-0 h-screen">
<div v-if="$colorMode.value !== 'dark'" id="clouds">
<div v-for="cloud in 5" :key="cloud" :class="'x' + cloud">
<div class="cloud" />
</div>
</div>
<div v-else>
<div class="stars absolute inset-0 h-screen z-0" />
<div class="twinkling absolute inset-0 h-screen z-1 opacity-75" />
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="postcss" scoped>
#clouds {
padding: 20vh 0;
}
/* Day */
@keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}
.x1 {
animation: animateCloud 70s linear infinite;
transform: scale(0.65);
}
.x2 {
animation: animateCloud 40s linear infinite;
transform: scale(0.3) rotateY(180deg);
}
.x3 {
animation: animateCloud 60s linear infinite;
transform: scale(0.5);
opacity: 0.7;
}
.x4 {
animation: animateCloud 36s linear infinite;
transform: scale(0.4);
opacity: 0.5;
}
.x5 {
animation: animateCloud 50s linear infinite;
transform: scale(0.55) rotateY(180deg);
opacity: 0.4;
}
.cloud {
background: #fff;
border-radius: 100px;
height: 100px;
position: relative;
width: 350px;
}
.cloud:after,
.cloud:before {
background: #fff;
content: '';
position: absolute;
z-index: -1;
}
.cloud:after {
border-radius: 100px;
height: 100px;
left: 50px;
top: -50px;
width: 100px;
}
.cloud:before {
border-radius: 200px;
width: 180px;
height: 180px;
right: 50px;
top: -90px;
}
/* Night */
@keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
@-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
@-moz-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
@-ms-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
.stars {
background: black url(/particles/stars.png) repeat top center;
}
.twinkling {
background: transparent url(/particles/twinkling.png) repeat top center;
animation: move-twink-back 200s linear infinite;
}
</style>
components/home/HomeNextEvents.vue
View file @ a37c5282
<template>
<aside>
<h1 class="text-3xl uppercase text-gray-400 font-bold ml-2 mb-2 md:ml-1.5">
Événements à venir...
</h1>
<template v-if="!loading">
<section id="agenda" class="container py-12">
<div class="border-b-2 container flex items-end mb-3 pb-2">
<JuneCalendar class="w-12 mr-3 fill-current dark:text-gray-100" />
<a
v-for="(event, index) in events"
:key="index"
:href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
targe="_blank"
class="block dark-hover:bg-gray-700 hover:bg-gray-100 p-2 mt-1 rounded-lg transition-colors"
href="https://forum.monnaie-libre.fr/calendar"
target="_blank"
class="group bg-clip-text bg-gradient-to-r font-extrabold from-purple-800 hover:underline text-4xl text-transparent to-blue-600 uppercase"
>
<div class="text-sm text-gray-500">
{{ $d(Date.parse(event.event.start), 'long') }}
</div>
<div>{{ event.title }}</div>
Agenda
<fa
icon="external-link-alt"
class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
/>
</a>
</template>
</div>
<aside v-if="!loading" class="lg:flex">
<div
v-for="(column, num) in columns"
:key="num"
class="flex-1"
:class="num === 1 && 'lg:ml-4'"
>
<a
v-for="(event, index) in column"
:key="index"
:href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
targe="_blank"
class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
>
<div class="event-date text-sm text-gray-500">
{{ prettyDate(event.event.start) }}
<div v-for="(tag, i) in event.tag" :key="i">{{ tag }}</div>
</div>
<div>{{ event.title }}</div>
</a>
</div>
</aside>
<div v-else class="h-80 flex items-center">
<span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
</div>
</aside>
</section>
</template>
<script>
import JuneCalendar from '~/static/img/june-calendar.svg?inline'
import { fetchNextEvents } from '~/libs/api-forum'
export default {
name: 'HomeNextEvents',
components: {
JuneCalendar,
},
data() {
return {
events: [],
loading: false,
cols: 2,
}
},
computed: {
columns() {
const columns = []
const mid = Math.ceil(this.events.length / this.cols)
for (let col = 0; col < this.cols; col++) {
columns.push(this.events.slice(col * mid, col * mid + mid))
}
return columns
},
},
async mounted() {
this.loading = true
this.events = await fetchNextEvents()
this.events = await fetchNextEvents(`?start=${this.formatDateForParams()}`)
this.loading = false
},
methods: {
formatDateForParams(date = new Date()) {
const offset = date.getTimezoneOffset()
date = new Date(date.getTime() - offset * 60 * 1000)
return date.toISOString().split('T')[0]
},
prettyDate(date) {
const formatter = new Intl.DateTimeFormat(
this.$i18n.locale,
this.$i18n.dateTimeFormats[this.$i18n.locale].full
)
return formatter
.formatToParts(Date.parse(date))
.map(({ type, value }) => {
switch (type) {
case 'literal':
return value === ', ' ? ' à ' : value === ':' ? 'h' : value
default:
return value
}
})
.reduce((string, part) => string + part)
},
},
}
</script>
<style lang="postcss" scoped>
.event-date:first-letter {
text-transform: uppercase;
}
</style>
components/home/HomeSearch.vue
View file @ a37c5282
<template>
<section class="relative">
<section class="overflow-hidden relative z-10">
<div
class="absolute inset-0 z-0 opacity-70 bg-gradient-to-br from-purple-100 to-blue-200 pt-10 pb-12 dark:from-purple-900 dark:to-blue-900 -z-1"
class="absolute inset-0 mt-10 z-0"
style="backdrop-filter: blur(2px)"
/>
<div class="container pt-10 pb-12 relative">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="700"
preserveAspectRatio="none"
viewBox="0 0 3000 700"
class="absolute inset-0 -top-28"
>
<g transform="translate(1500,350) scale(1,1) translate(-1500,-350)">
<linearGradient id="lg-0.351604754756625" x1="0" x2="1" y1="0" y2="0">
<stop stop-color="#5b21b6" offset="0"></stop>
<stop stop-color="#2563eb" offset="1"></stop>
</linearGradient>
<path d="" fill="url(#lg-0.351604754756625)" opacity="0.1">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
keyTimes="0;0.333;0.667;1"
calcmod="spline"
keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
begin="0s"
values="M0 0M 0 538.6197230687883Q 500 574.6819201141337 1000 574.575666670496T 2000 528.2190300776177T 3000 527.9222284268443L 3000 115.4395609622847Q 2500 122.11205254010194 2000 112.64297809895902T 1000 141.3855421925954T 0 166.56344278918195Z;M0 0M 0 588.7850739966284Q 500 593.4766386389036 1000 589.7625799078935T 2000 551.7945119708431T 3000 578.5077673498635L 3000 169.7675721459745Q 2500 125.67810753789244 2000 116.51196847367086T 1000 126.5496708214944T 0 168.4786767549831Z;M0 0M 0 531.1090348755101Q 500 557.1270943668658 1000 554.5419554069241T 2000 545.9865154592908T 3000 569.5619790716728L 3000 126.52765717058406Q 2500 154.4510819017288 2000 145.51367313923492T 1000 173.5431781037003T 0 152.16935842768572Z;M0 0M 0 538.6197230687883Q 500 574.6819201141337 1000 574.575666670496T 2000 528.2190300776177T 3000 527.9222284268443L 3000 115.4395609622847Q 2500 122.11205254010194 2000 112.64297809895902T 1000 141.3855421925954T 0 166.56344278918195Z"
></animate>
</path>
<path d="" fill="url(#lg-0.351604754756625)" opacity="0.1">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
keyTimes="0;0.333;0.667;1"
calcmod="spline"
keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
begin="-3.3333333333333335s"
values="M0 0M 0 590.6448658165359Q 500 559.7529084945777 1000 557.6861681027829T 2000 561.5267270090096T 3000 593.9178925323536L 3000 114.18322607589454Q 2500 166.66199791810573 2000 162.8315286347745T 1000 160.3215475477619T 0 107.78843290213965Z;M0 0M 0 585.7333909305496Q 500 544.8442474547807 1000 537.1154758997013T 2000 552.1278283483364T 3000 540.760640040708L 3000 146.52147135465333Q 2500 113.81907823669863 2000 111.7307131744789T 1000 115.35203072555836T 0 110.67481984112672Z;M0 0M 0 543.131818899705Q 500 589.9945665811799 1000 586.6098547370501T 2000 584.5365631772061T 3000 581.8427322344887L 3000 145.84962300077729Q 2500 154.00891194415192 2000 149.856911020101T 1000 115.72184159380231T 0 138.76577509540138Z;M0 0M 0 590.6448658165359Q 500 559.7529084945777 1000 557.6861681027829T 2000 561.5267270090096T 3000 593.9178925323536L 3000 114.18322607589454Q 2500 166.66199791810573 2000 162.8315286347745T 1000 160.3215475477619T 0 107.78843290213965Z"
></animate>
</path>
<path d="" fill="url(#lg-0.351604754756625)" opacity="0.1">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
keyTimes="0;0.333;0.667;1"
calcmod="spline"
keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
begin="-6.666666666666667s"
values="M0 0M 0 577.3279699785157Q 500 596.5194960333786 1000 591.0515207168066T 2000 580.7438383793185T 3000 559.5043698739771L 3000 106.40480611640268Q 2500 158.55578293506778 2000 155.42053618954887T 1000 125.62767807693737T 0 122.13819191110474Z;M0 0M 0 549.1585595469946Q 500 576.0564903157024 1000 572.0145684353647T 2000 536.8811706818898T 3000 539.2410439119517L 3000 150.739380000344Q 2500 122.68200223973729 2000 117.80547834149974T 1000 130.7528253401447T 0 114.62861752105474Z;M0 0M 0 544.9971494193371Q 500 591.2702407207314 1000 586.3395289570205T 2000 535.4362929322266T 3000 559.0140529154019L 3000 137.58917569157174Q 2500 135.2633200441013 2000 129.28903611617616T 1000 160.0439061679986T 0 161.57296247749883Z;M0 0M 0 577.3279699785157Q 500 596.5194960333786 1000 591.0515207168066T 2000 580.7438383793185T 3000 559.5043698739771L 3000 106.40480611640268Q 2500 158.55578293506778 2000 155.42053618954887T 1000 125.62767807693737T 0 122.13819191110474Z"
></animate>
</path>
</g>
</svg>
<div class="container pt-20 pb-12 relative">
<h1
class="font-bold mb-8 text-3xl text-center text-gray-700 dark:text-white dark:text-opacity-50"
>
......
components/layout/LayoutFooter.vue
View file @ a37c5282
......@@ -21,7 +21,7 @@
class="flex"
>
<template #button="{ onClick }">
<t-button @click="onClick" class="w-full lg:w-max">
<t-button class="w-full lg:w-max" @click="onClick">
<fa icon="heart"></fa><span class="ml-2">Je participe !</span>
</t-button>
</template>
......@@ -59,7 +59,10 @@
<li v-for="category in categories" :key="category.title">
<nuxt-link
class="hover:underline"
:to="`/ressources?cat=${category.title}`"
:to="{
path: 'ressources',
query: { filters: category.title },
}"
>
{{ category.title }}
</nuxt-link>
......
components/layout/LayoutHeader.vue
View file @ a37c5282
......@@ -9,7 +9,7 @@
<div class="flex justify-end items-center relative">
<LayoutHeaderMenu />
<AppDarkMode class="ml-2 mr-4" />
<AppDarkMode />
<LayoutHeaderMenuAvatar />
</div>
......
components/layout/LayoutHeaderMenu.vue
View file @ a37c5282
<template>
<div class="flex">
<div class="flex mr-3">
<template v-for="(item, index) of menu">
<nuxt-link
v-if="item.url.startsWith('/')"
:key="index"
class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 hover:bg-hover-light dark-hover:bg-hover-dark rounded-full focus:outline-none focus:ring-2 transition-shadow"
class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
:to="item.url"
>
{{ item.title }}
......@@ -15,18 +15,21 @@
toggle-on-hover
:classes="{
dropdown:
'origin-top-left absolute left-0 w-80 rounded-md shadow bg-white mt-1 dark:bg-gray-600',
'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',
}"
>
<a
slot="trigger"
class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 hover:bg-hover-light dark-hover:bg-hover-dark rounded-full focus:outline-none focus:ring-2 transition-shadow"
class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
href="https://forum.monnaie-libre.fr/"
target="_blank"
rel="noopener noreferrer"
>
Forum
<fa icon="external-link-alt" class="w-3 ml-1 text-gray-500" />
<fa
icon="external-link-alt"
class="w-3 ml-1.5 text-gray-500 opacity-75"
/>
</a>
<LayoutHeaderMenuForum />
</t-dropdown>
......
components/layout/LayoutHeaderMenuAvatar.vue
View file @ a37c5282
<template functional>
<button
type="button"
class="inline-flex items-center relative px-2 dark:border-gray-500 border-2 rounded-full hover:shadow-lg focus:outline-none focus:ring-2 transition-shadow"
aria-label="User menu"
<template>
<t-dropdown
toggle-on-hover
:hide-on-leave-timeout="0"
:show.sync="show"
:classes="{
dropdown:
'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',
}"
>
<fa icon="bars" class="ml-2 text-gray-500" />
<div slot="trigger" class="flex items-center ml-5">
<button
type="button"
aria-label="User menu"
aria-haspopup="true"
class="h-8 w-8 focus:ring-2 focus:outline-none rounded-full"
>
<img v-if="user" :src="user.avatar_url" class="rounded-full" />
<fa v-else icon="user-circle" class="text-3xl" />
</button>
<fa icon="caret-down" class="pl-1.5" />
</div>
<div class="my-1" style="min-width: 15rem">
<template v-if="user">
<div class="px-3 py-2">
<div>{{ user.name }}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
@{{ user.username }}
</div>
</div>
<hr class="border-t dark:border-gray-500 my-1" />
<a class="menu-item" href="/admin/#/" target="_blank"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="fill-current text-gray-400 mr-1"
>
<path
d="m13.366 3 5.625 5.493L19 19.169C19 20.176 18.156 21 17.125 21H5.865C4.836 21 4 20.176 4 19.17V4.83C4 3.825 4.834 3 5.866 3h7.5zM6.94 12.11a.94.94 0 1 0 0 1.88h9.12a.94.94 0 0 0 0-1.88H6.94zm0 3.89a.94.94 0 1 0 0 1.88h9.12a.94.94 0 1 0 0-1.88H6.94zm5.073-6h5.139l-5.14-5.053V10z"
></path></svg
>Contenus
</a>
<a
class="menu-item justify-between"
href="/admin/#/workflow"
target="_blank"
>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="fill-current text-gray-400 mr-1.5"
>
<path
d="M10 4h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm7 0h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM3 4h3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"
></path></svg
>Flux
</div>
<div v-if="git">
<span
class="bg-purple-200 text-purple-800 font-medium py-0.5 px-1 text-sm rounded"
v-text="git.draft.count"
/>
<span
class="bg-yellow-200 text-yellow-800 font-medium py-0.5 px-1 text-sm rounded"
v-text="git.pending_review.count"
/>
<span
class="bg-green-200 text-green-800 font-medium py-0.5 px-1 text-sm rounded"
v-text="git.pending_publish.count"
/>
</div>
</a>
<hr class="border-t dark:border-gray-500 my-1" />
<div class="flex items-center h-10 w-10 pl-3">
<fa icon="user-circle" class="text-3xl" />
<a
class="menu-item justify-between"
href="https://git.duniter.org/websites/monnaie-libre-fr"
target="_blank"
>
<div>Dépôt gitlab</div>
<span
v-if="isLoading === true"
class="loading-state h-6 w-6 border-gray-500"
/>
<fa
v-if="isLoading === 'error'"
icon="exclamation-triangle"
class="w-3 ml-1.5 text-gray-500 opacity-75"
/>
</a>
<template v-if="git">
<div class="flex text-xs">
<a
class="menu-item whitespace-nowrap"
href="https://git.duniter.org/websites/monnaie-libre-fr/-/issues"
target="_blank"
v-text="`${git.issueStatusCounts.opened} tickets`"
/>
<a
class="menu-item whitespace-nowrap"
href="https://git.duniter.org/websites/monnaie-libre-fr/-/merge_requests"
target="_blank"
v-text="`${git.mergeRequests.count} demandes de fusion`"
/>
</div>
<a
class="menu-item justify-between"
:href="`https://git.duniter.org/websites/monnaie-libre-fr/-/issues?scope=all&utf8=%E2%9C%93&state=opened&author_username=${user.username}`"
target="_blank"
>
<div>Mes tickets</div>
<div
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
v-text="git.my_issues.count"
/>
</a>
<a
class="menu-item justify-between"
:href="`https://git.duniter.org/websites/monnaie-libre-fr/-/merge_requests?scope=all&utf8=%E2%9C%93&state=opened&author_username=${user.username}`"
target="_blank"
>
<div>Mes demandes de fusion</div>
<div
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
v-text="git.my_merge_requests.count"
/>
</a>
</template>
</template>
<template v-else>
<a
href="/admin/#/"
target="_blank"
class="menu-item group"
@click="fetchLocalStorageChange"
>
<span>Se connecter</span>
<fa
icon="external-link-alt"
class="w-3 ml-1.5 text-gray-500 opacity-75"
/>
</a>
<nuxt-link to="/contribuer" class="menu-item">
<span>Contribuer</span>
</nuxt-link>
</template>
<hr class="border-t dark:border-gray-500 my-1" />
<div class="flex">
<nuxt-link to="/aide" class="menu-item">
<fa icon="info-circle" class="text-gray-400 mr-2" />
<span>Aide</span>
</nuxt-link>
<AppA11y class="ml-2" />
</div>
</div>
</button>
</t-dropdown>
</template>
<script>
export default {
name: 'LayoutHeaderMenuAvatar',
data() {
return {
show: false,
user: null,
git: null,
lastFetch: null,
isLoading: false,
}
},
watch: {
show(newVal) {
// Debounce fetch under 10s
if (newVal && this.user && Date.now() - this.lastFetch > 10000) {
// Fetch gitlab data
this.fetchGitlab()
}
},
},
mounted() {
this.fetchCmsUser()
},
methods: {
fetchCmsUser() {
if (localStorage.getItem('netlify-cms-user')) {
this.user = JSON.parse(localStorage.getItem('netlify-cms-user'))
}
},
// if User click on "Connect" link, wait for authentification
fetchLocalStorageChange() {
setInterval(() => {
this.fetchCmsUser()
}, 1000)
},
fetchGitlab() {
this.isLoading = true
this.$axios
.$post('https://git.duniter.org/api/graphql', {
query: `#graphql
query projectML($authorUsername: String) {
project(fullPath: "websites/monnaie-libre-fr") {
lastActivityAt
issueStatusCounts {
opened
}
mergeRequests(state: opened) {
count
}
my_issues: issues(authorUsername: $authorUsername, state: opened) {
count
}
my_merge_requests:mergeRequests(authorUsername: $authorUsername, state: opened) {
count
}
draft: mergeRequests(labels: "netlify-cms/draft", state: opened) {
count
}
pending_review: mergeRequests(labels: "netlify-cms/pending_review", state: opened) {
count
}
pending_publish: mergeRequests(labels: "netlify-cms/pending_publish", state: opened) {
count
}
}
}
`,
variables: {
authorUsername: this.user.username,
},
})
.then(({ data }) => {
this.git = data.project
this.lastFetch = Date.now()
this.isLoading = false
})
.catch(() => {
this.isLoading = 'error'
})
},
},
}
</script>
<style lang="postcss" scoped>
.menu-item {
@apply flex items-center text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 px-3 py-1 w-full;
}
</style>
components/layout/LayoutHeaderMenuForum.vue
View file @ a37c5282
<template>
<div v-if="!loading">
<div class="text-left text-xs py-1">
<div v-if="!loading" class="flex items-center">
<MiniMap class="mx-4" style="min-width: 440px" />
<div class="text-left text-xs py-1 w-80 border-l dark:border-gray-500">
<a
v-for="(cat, index) in categories"
:key="index"
class="block hover:bg-hover-light hover:text-gray-700 p-2 text-gray-600 dark:text-gray-200 w-full"
:href="`https://forum.monnaie-libre.fr${cat.topic_url}`"
class="block text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 p-2 w-full"
:href="`https://forum.monnaie-libre.fr/c/${cat.slug}/${cat.id}`"
target="_blank"
rel="noopener noreferrer"
>
......
components/page/PageContainer.vue
View file @ a37c5282
......@@ -10,7 +10,6 @@
<div
class="sticky h-full top-12 lg:w-1/4 lg:ml-12 mt-8 lg:mt-0 border-t pt-8 lg:pt-0 lg:border-none"
>
<PageToc v-if="toc" :document="document" class="mb-8" />
<slot name="sidebar" />
</div>
</div>
......@@ -29,10 +28,6 @@ export default {
type: Object,
required: true,
},
toc: {
type: Boolean,
default: true,
},
},
}
</script>
components/search/SearchContainer.vue
View file @ a37c5282
......@@ -108,6 +108,14 @@ export default {
type: Function,
required: true,
},
getQueryUrl: {
type: Function,
default(q) {
return new URLSearchParams({
q,
})
},
},
},
data() {
return {
......@@ -136,10 +144,8 @@ export default {
methods: {
async search(force) {
const query = this.query.trim()
let queryUrl = null
if (query.length || force) {
queryUrl = encodeURIComponent(query)
const results = await this.searchFunction(this.query)
if (results.length) {
......@@ -154,10 +160,12 @@ export default {
this.hasNoResult = false
}
// Replace url with query string
const queryUrl = this.getQueryUrl(query).toString()
history.replaceState(
{},
null,
this.$route.path + (queryUrl ? `?q=${queryUrl}` : '')
this.$route.path + (queryUrl.length ? `?${queryUrl}` : '')
)
},
},
......
content/faq/a-quoi-ça-sert-dêtre-référent.md 0 → 100644
View file @ a37c5282
---
title: A quoi ça sert d'être référent ?
description: Les référents renforcent la toile de confiance.
---
## A rien
Les cocréateurs <lexique>référents</lexique> n'ont aucun droit supplémentaire, aucun privilège, ils ne sont pas non plus des références en connaissance de la monnaie libre.
On peut juste supposer qu'ils sont plus actifs dans la toile de confiance, car il ont reçu **et** émis un certain nombres de certifications.
## Pour la règle de distance.
La [règle de distance](/faq/regle-de-distance) se mesure en passant par les certifications émise. Il est donc impossible de mesurer une distance à partir de quelqu'un qui n'a pas émis de certifications. C'est difficile de respecter cette règle si la personne n'a émis qu'une seule certification.
Pour mesurer la règle distance, le logiciel ne le fait que à partir des personnes ayant émis et reçus un certain nombre de certification, sinon cette règle serait impossible à appliquer.
Voir le lexique pour connaître le nombre de certifications pour être <lexique>référent</lexique>
\ No newline at end of file
content/faq/comment-devenir-cocréateur.md
View file @ a37c5282
---
title: Comment devenir cocréateur ?
description: 'Procédure à suivre pour cocréer sa part de monnaie. '
description: "Procédure à suivre pour cocréer sa part de monnaie. "
---
## Pas d'urgence
Devenir cocréateur de monnaie n'est pas indispensable pour utiliser la monnaie libre.
......@@ -11,13 +10,23 @@ Il est tout aussi important de faire vivre la Ğ1 que de la créer.
## D'abord faire des rencontres
Pour devenir cocréateur il faut être identifié en tant qu'humain vivant unique, par des cocréateurs qui vous connaissent.
Le meilleur moyen de connaître quelqu'un est de le rencontrer plusieurs fois.
Donc commencez par venir aux rencontres pour discuter et faire des échanges.
Quand les cocréateurs vous connaissent ils vous proposeront de vous certifier.
Pour devenir cocréateur il faut être identifié en tant qu'humain vivant unique, par des cocréateurs qui vous connaissent.
Le meilleur moyen de connaître quelqu'un est de le rencontrer plusieurs fois.
Donc commencez par venir aux rencontres pour discuter et faire des échanges.
Quand les cocréateurs vous connaissent vous pouvez leur demander de vous certifier.
## S'engager
Le futur cocréateur doit avoir pris le temps de lire et bien comprendre la [licence Ğ1](https://duniter.org/fr/monnaie-libre-g1/licence-g1/).
Il doit s'engager à respecter et faire respecter cette licence.
Il s'engage entre autre à ne pas certifier ni re-certifier quelqu'un qui ne respecterait pas cette licence
## Cinq certifications
Pour devenir membre il faut recevoir 5 certifications et respecter la <lexique>règle de distance</lexique>.
Il faut donc avoir cinq cocréateur prêts à vous certifier avant de commencer la procédure.
Pour devenir membre il faut recevoir au moins 5 certifications et respecter la <lexique>règle de distance</lexique>.
Il est préférable d'avoir cinq cocréateur prêts à vous certifier (5 promesses) avant de commencer la procédure.
Pour respecter la règle de distance il est préférable d'avoir des connaissances venant de communautés différentes.
## Continuer à faire des rencontres.
Devenir cocréateur n'est pas un but, c'est un début. Il est important de continuer à participer aux rencontres pour faire circuler la monnaie, pour rencontrer des nouveaux membres et continuer de recevoir des certifications.
\ No newline at end of file