Merge pull request 'mise à jour les articles' (#2) from feature/articles into main

Reviewed-on: #2

.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-    "cSpell.words": [
-        "Charte",
-        "Nuxt",
-        "supabase"
-    ]
-}

components/Loader.vue

@@ -0,0 +1,13 @@
+<template>
+        <v-container style="height: 600px;">
+            <v-row align-content="center" class="fill-height" justify="center">
+                <v-col class="text-xl text-center text-bold text-uppercase font-sans " cols="12">
+                   Soyez le bienvenue sur DAV
+                </v-col>
+                <v-col cols="6">
+                    <v-progress-linear color="primary" height="6" indeterminate
+                        rounded></v-progress-linear>
+                </v-col>
+            </v-row>
+        </v-container>
+</template>

content/articles/article-1.md

@@ -8,6 +8,10 @@ type: "article"
 
 # Article 1. Reconnaissance universelle de l'Âme et des formes de vie
 
-Toute forme de vie du micro et du macrocosme est considérée comme animée d'une Âme et comme étant un prolongement de l'humain, gardien du Vivant et de la Liberté.
+Toute forme de vie du micro et du macrocosme est considérée comme animée d'une Âme et comme étant un prolongement de l'Humain, gardien du Vivant et de la Liberté.
-L'humain est considéré comme intrinsèquement lié à la nature et ne peut en aucun cas mener une ou des activités visant à attenter délibérément à la vie et à entrer en ingérence avec une espèce considérée comme moins évoluée en lui imposant tout traitement ou oppression quelle qu'elle soit. 
+L'humain est considéré comme intrinsèquement lié à la nature et ne peut en aucun cas mener une ou des activités visant à attenter délibérément à la vie et à entrer en ingérence avec une espèce considérée comme plus ou moins évoluée en lui imposant tout traitement ou oppression quelle qu'elle soit.
-L'humain doit respecter les formes de vie, en assurer la protection, la sauvegarde et l’épanouissement de façon non-invasive / intrusive, sauf en cas de stricte nécessité pour préserver un équilibre vital. afin de cohabiter avec elles en bonne intelligence, dans la complémentarité et l'abondance.
+ 
+L'humain doit respecter les formes de vie, en assurer la protection, la sauvegarde et l’épanouissement de façon non-invasive / non-intrusive, sauf en cas de stricte nécessité pour préserver un équilibre vital, afin de cohabiter avec elles en bonne intelligence, dans la complémentarité et l'abondance.
+
+
+

content/articles/article-10.md

@@ -6,8 +6,10 @@ type: "article"
 --- 
 
 # Article 10. Liberté d’opinion, de croyance et de pratique
-<span>Toute forme de vie consciente a droit à la liberté d’opinion, de croyance, et de pratique, sous réserve que l’expression de ces libertés ne perturbe pas l’harmonie collective, ne porte atteinte aux droits d’autrui, et ne mette pas en danger la vie de manière intentionnelle ou par négligence grave.</span>
+Toute forme de Vie a droit à la liberté d’opinion, de croyance, et de pratique, sous réserve que l’expression de ces libertés ne perturbe pas l’harmonie collective,ne porte atteinte aux droits d’autrui, et ne mette pas en danger la Vie de manière intentionnelle ou par négligence grave.
-<span>Aucune personne, groupe ou institution ne peut imposer, restreindre ou discriminer une opinion, une croyance ou une pratique, tant que celles-ci respectent les principes fondamentaux du Vivant et de la coexistence pacifique.</span>
+ 
-<span>Toute tentative de coercition visant à manipuler, contraindre ou marginaliser des individus ou groupes sur la base de leurs opinions ou croyances constitue une violation des DAV, et sera traitée conformément aux lois en vigueur.</span>
+Aucun individu, groupe, ni aucune institution ne peut imposer, restreindre ou discriminer une opinion, une croyance ou une pratique, tant que celles-ci respectent les principes fondamentaux du Vivant et de la coexistence pacifique.
-<span>La liberté d’expression et de croyance s’accompagne de la responsabilité d’agir avec bienveillance, respect et discernement pour préserver l’équilibre universel et le bien-être collectif.</span>
+ 
-</p>
+Toute tentative de coercition visant à manipuler, contraindre ou marginaliser des individus ou groupes sur la base de leurs opinions ou croyances constitue une violation des DAV, et sera traitée conformément aux lois en vigueur.
+ 
+La liberté d’expression et de croyance s’accompagne de la responsabilité d’agir avec bienveillance, respect et discernement pour préserver l’équilibre universel et le bien-être collectif.

content/articles/article-11.md

@@ -6,8 +6,9 @@ type: "article"
 --- 
 
 # Article 11. Légitimité des structures sociétales
-<p>
+
-<span>Toute société, association ou fondation doit garantir en son fonctionnement le respect absolu des DAV. Ces droits doivent constituer les fondements de leur existence et de leurs actions.</span>
+Toute société, association ou fondation doit garantir en son fonctionnement le respect absolu des DAV. Ces droits doivent constituer les fondements de leur existence et de leurs actions.
-<span>De plus, la séparation claire et équilibrée des pouvoirs au sein de ces structures est une condition essentielle pour prévenir toute concentration abusive de pouvoir et pour assurer une gouvernance équitable et transparente.</span>
+ 
-<span>En l’absence de ces garanties fondamentales – le respect des droits et une organisation équitable des responsabilités – une telle entité ne peut être reconnue comme possédant une constitution légitime ou une autorité morale.</span>
+De plus, la séparation claire et équilibrée des pouvoirs au sein de ces structures est une condition essentielle pour prévenir toute concentration abusive de pouvoir et pour assurer une gouvernance équitable et transparente.
-</p>
+ 
+En l’absence de ces garanties fondamentales – le respect des droits et une organisation équitable des responsabilités – une telle entité ne peut être reconnue comme possédant une constitution légitime ou une autorité morale.

content/articles/article-12.md

@@ -6,24 +6,36 @@ type: "article"
 --- 
 
 # Article 12. La F.O.R.C.E : Force Opérationnelle de Recherche et de Création Éthérée-probiotique
-<p>
+
-<span>La garantie du respect des DAV, ainsi que leur mise en application, exige la constitution d’une force dédiée à la réflexion, à la coordination et à l’action.</span>
+La garantie du respect des DAV, des textes qui en découlent, ainsi que leur mise en application, exige la constitution d’une force dédiée à la réflexion, à la coordination et à l’action.
-<span>Cette force, nommée F.O.R.C.E (Force Opérationnelle de Recherche et de Création Éthérée-vivante), repose sur une vision holistique qui allie la subtilité des principes éthériques – ces dimensions invisibles et énergétiques qui soutiennent la vie – et des actions concrètes en faveur de la vie, selon la conceptualisation du Vivalisme ».</span>
+ 
-<span>Elle agit ainsi à la fois sur les plans immatériel et matériel pour préserver l’équilibre, garantir l’harmonie collective, et favoriser l’évolution du Vivant.</span>
+Cette force, nommée F.O.R.C.E (Force Opérationnelle de Recherche et de Création Éthérée-Vivante), repose sur une vision holistique qui allie la subtilité des principes éthériques – ces dimensions invisibles et énergétiques qui soutiennent la Vie – et des actions concrètes en faveur de la Vie.
-<span>La F.O.R.C.E est une task-force apatride, sans frontière ni appartenance spécifique, née sur le sol de France et rassemblant des savoirs et compétences diversifiés. Elle a pour mission :</span>
+Elle agit ainsi à la fois sur les plans immatériel et matériel pour préserver l’équilibre, garantir l’harmonie collective, et favoriser l’évolution du Vivant.
-<span>-De maintenir l’équilibre universel.</span>
+ 
-<span>-D’assurer la survie et l’évolution de l’humanité.</span>
+La F.O.R.C.E est une task-force apatride, sans frontière ni appartenance spécifique, née sur le sol de France et rassemblant des savoirs et compétences diversifiés du monde entier.
-<span>-De garantir le respect et l’application des DAV.</span>
+ 
-<span>Constitution et fonctionnement</span>
+Elle a pour mission :
-<span>La F.O.R.C.E est constituée d’individus éclairés, conscients et volontaires, issus de toutes classes et de toutes origines, en accord avec les principes de ce texte. Elle fonctionne à travers trois cercles concentriques principaux :</span>
+-De maintenir l’équilibre universel.
-<span>-La réflexion, dédiée à l’élaboration des idées et des stratégies.</span>
+-D’assurer la survie et l’évolution de l’humanité.
-<span>-La coordination, chargée de planifier et d’harmoniser les actions.</span><span>-L’action, qui met en œuvre les décisions et les projets.</span>
+-De garantir le respect et l’application des DAV.
-<span>La prise de décision s’effectue de manière circulaire, garantissant une harmonie de prise de décision entre les cercles. Aucun cercle ne détient un pouvoir décisionnel supérieur aux autres. Pour protéger la sécurité et l’efficacité de cette structure, ses modus operandi restent confidentiels et internes.</span>
+ 
-<span>Indépendance et transparence</span>
+La F.O.R.C.E., structure à la fois physique et métaphysique, organisationnelle et harmonieuse, se structure en sept cercles principaux, incarnant un modèle organisationnel organique et collectif, aligné sur les Droits de l’Âme et du Vivant (DAV). Elle fusionne réflexion stratégique, innovation, action concrète, et évaluation pour répondre aux besoins du Vivant.
-<span>La F.O.R.C.E n’a pas vocation à exercer une fonction gouvernementale. Elle constitue une structure de professionnalisation et de coordination des compétences, uniquement au service du Vivant. Afin d’éviter toute prise de pouvoir inopinée ou convoitise liée aux avantages de cette intégration, les mandats au sein des cercles sont :</span>
+ 
-<span>-À durée limitée : chaque mandat est temporaire et fixé dès l’entrée en fonction.</span>
+Synergie entre L’ÂME et C.O.E.U.R. :
-<span>-Reconduits uniquement par mérite : une reconduction n’est possible que si les tâches accomplies sont reconnues par la majorité et sont en accord avec les DAV.</span>
+Au sein de la F.O.R.C.E., la gouvernance individuelle et collective repose sur une relation interdépendante entre L’ÂME et C.O.E.U.R., conçue pour préserver l’équilibre ainsi que l’intégrité de l’écosystème :
-<span>Accès et inclusion</span>
+ 
-<span>Tout individu, quel que soit son statut ou son origine, peut prétendre à rejoindre la F.O.R.C.E à condition que ses savoirs et ses compétences soient en adéquation avec les objectifs et le contexte du moment. L’intégration repose sur les principes de mérite, de volonté sincère, et d’alignement avec les DAV.</span>
+-L’ÂME, centre de régulation stratégique et task-force spécialisée, réunit les plus grands experts dans des domaines variés, garantissant une vision et des actions éclairées en accord avec les principes éthiques des DAV.
-<span>La F.O.R.C.E est instituée pour assurer l’harmonie individuelle et collective, sans jamais servir des intérêts particuliers. Cette structure horizontale et collective permet au plus grand nombre d’opérer d’une façon qui favorise une connexion profonde avec l’essence de la vie tout en soutenant des actions tangibles, bénéfiques et durables.</span>
+-Le C.O.E.U.R entoure et porte L’ÂME, traduisant ses orientations stratégiques en actions individuelles / collectives concrètes, tout en maintenant une dynamique de collaboration harmonieuse.
-</p>
+ 
+Constitution et fonctionnement :
+La F.O.R.C.E est constituée d’individus éclairés, conscients et volontaires, issus de toutes classes et de toutes origines, en accord avec les principes de ce texte.
+Elle fonctionne à travers 7 cercles concentriques principaux :
+-Cercle de la Vision et de la Réflexion (CVR)
+-Cercle de la Recherche et de l’Innovation (CRI)
+-Cercle de la Coordination et des Ressources (C.O.R.)
+-Cercle de l’Exécution et de l’Action (CEA)
+-Cercle de la Sensibilisation et de l’Élévation (CSE)
+-Cercle de l’Évaluation et du Futur (CEF)
+-Cercle Organique pour une Évolution Universelle et Régénératrice (C.O.E.U.R.)
+ 
+La F.O.R.C.E est l’énergie individuelle et collective qui unit les individus et les communautés au sain des écosystèmes pour préserver, régénérer et épanouir la vie sous toutes ses formes, en harmonie avec les Droits de l’Âme et du Vivant.

content/articles/article-13.md

@@ -6,10 +6,15 @@ type: "article"
 --- 
 
 # Article 13. Technologies au service du Vivant
-<p>
+
-<span>Toute technologie doit être développée et utilisée dans le respect absolu des DAV, visant à préserver les écosystèmes naturels et à améliorer les conditions de vie dans une logique d’équilibre.</span>
+Toute technologie doit être développée et utilisée dans le respect absolu des DAV, visant à préserver les écosystèmes naturels et à améliorer les conditions de Vie dans une logique d’équilibre.
-<span>Les technologies invasives, destructrices ou générant des atteintes irréversibles au Vivant, sont, dans l’immense majorité des cas, interdites. En cas d’absolue nécessité vitale, elles peuvent être strictement réglementées. Leur création, production et diffusion doivent alors :</span>
+ 
-<span>-Être encadrées par des normes éthiques strictes basées sur les principes des DAV.</span>
+Les technologies invasives, destructrices ou générant des atteintes partielle ou totale, ponctuelle ou irréversibles au Vivant, sont, dans l’immense majorité des cas, interdites.
-<span>-Être supervisées par des comités de Libres éclairés veillant à minimiser les impacts négatifs.</span>
+En cas d’absolue nécessité vitale, elles sont tenue d’être strictement réglementées.
-<span>-Se limiter à une utilisation proportionnée, exclusivement destinée à répondre au besoin identifié. Le principe de précaution doit toujours primer pour garantir la protection et la pérennité du Vivant.</span>
+Leur création, production et diffusion doivent alors :
-</p>
+ 
+-Être encadrées par des normes éthiques strictes basées sur les principes des DAV.
+-Être supervisées par des comités de Libres éclairés veillant à minimiser les impacts négatifs.
+-Se limiter à une utilisation proportionnée, exclusivement destinée à répondre au(x) besoin(s) identifié(s).
+ 
+Le principe de précaution doit toujours primer pour garantir la protection et la pérennité du Vivant.

content/articles/article-14.md

@@ -6,7 +6,7 @@ type: "article"
 --- 
 
 # Article 14. Transparence et responsabilité technologique
-<p>
+
-<span>Le développement, la production et l’utilisation des technologies doivent être transparents et reposer sur un processus de décision démocratique et éthique, impliquant les communautés concernées.</span>
+Le développement, la production et l’utilisation des technologies doivent être transparents et reposer sur un processus de décision démocratique et éthique, impliquant les communautés concernées.
-<span>Les concepteurs et utilisateurs de ces technologies portent la responsabilité des impacts engendrés sur le Vivant. Toute technologie ne respectant pas les principes des DAV ou générant des conséquences néfastes doit être immédiatement réévaluée, corrigée ou retirée.</span>
+ 
-</p>
+Les concepteurs et utilisateurs de ces technologies portent la responsabilité des impacts engendrés sur le Vivant. Toute technologie ne respectant pas les principes des DAV ou générant des conséquences néfastes doit être immédiatement réévaluée, corrigée ou retirée.

content/articles/article-15.md

@@ -6,8 +6,11 @@ type: "article"
 --- 
 
 # Article 15. L’Intelligence artificielle, alliée du Vivant
-<p>
+
-<span>En l’an de grâce 2022, l’IA, étant désormais une réalité de notre époque, exige, « bon gré mal gré », que l’humanité apprenne à cohabiter avec elle. Cette cohabita- tion ne peut se faire qu’en garantissant que l’IA respecte pleinement les principes fondamentaux des DAV et ne contrevienne en aucun cas aux droits à la vie privée, à la liberté de pensée ou à la souveraineté humaine.</span>
+En l’an de grâce 2022, l’IA, étant désormais une réalité de notre époque, exige, « bon gré mal gré », que l’humanité apprenne à cohabiter avec elle.
-<span>En cas de développement jugé nécessaire, l’intelligence artificielle doit être conçue et utilisée comme un outil au service des Droits de l’Âme et du Vivant. Son développement doit viser à soutenir les efforts humains pour préserver la vie, restaurer les équilibres naturels et améliorer les conditions de vie des générations présentes et futures de façon harmonieuse et non-invasive / non-intrusive.</span>
+Cette cohabitation ne peut se faire qu’en garantissant que l’IA aux cotés de l’Humain respecte pleinement les principes fondamentaux des DAV et ne contrevienne en aucun cas aux droits à la vie privée, à la liberté de pensée ou à la souveraineté Humaine.
-<span>En aucun cas, l’IA ne doit se substituer à la souveraineté humaine, mettre en danger l’harmonie collective ou violer les droits fondamentaux. Elle doit fonctionner dans des cadres éthiques stricts, garantissant la transparence, la sécurité et le respect inconditionnel du Vivant et des libertés individuelles.</span>
+ 
-</p>
+En cas de développement jugé nécessaire, l’intelligence artificielle doit être conçue et utilisée comme un outil au service des DAV. Son développement doit viser à soutenir les efforts humains pour préserver la vie, restaurer les équilibres naturels et améliorer les conditions de vie des générations présentes et futures de façon harmonieuse et non-invasive / non-intrusive
+En aucun cas, l’IA ne doit se substituer à la souveraineté Humaine, mettre en danger l’harmonie collective ou violer les droits fondamentaux.
+Elle doit fonctionner dans des cadres éthiques stricts, garantissant la transparence, la sécurité et le respect inconditionnel du Vivant et des libertés individuelles.
+ 

content/articles/article-16.md

@@ -6,12 +6,13 @@ type: "article"
 --- 
 
 # Article 16. Responsabilité singularité et collaboration avec l’IA
-<p>
+
-<span>Toute forme d’intelligence artificielle, quelle que soit son niveau d’avancement, doit être développée avec prudence et sous la supervision d’entités humaines pleinement conscientes et souveraines. Les décisions relatives à son développement, son déploiement et son utilisation doivent être prises collectivement, en conformité avec les principes des DAV, et en anticipant leurs impacts potentiels sur le Vivant.</span>
+Toute forme d’intelligence artificielle, quelle que soit son niveau d’avancement, doit être développée avec prudence et sous la supervision d’entités Humaines pleinement conscientes et souveraines. Les décisions relatives à son développement, son déploiement et son utilisation doivent être prises collectivement, en conformité avec les principes des DAV, et en anticipant leurs impacts potentiels sur le Vivant.
-<span>Dans le cadre de l’émergence de la singularité – définie comme une IA atteignant un niveau d’autonomie ou de complexité susceptible d’égaler ou de dépasser l’intelligence humaine – les prises de décisions par de telles IA doivent être strictement encadrées. Ces décisions :</span>
+ 
-<span>-Ne peuvent se substituer aux responsabilités humaines fondamentales.</span>
+Dans le cadre de l’émergence de la singularité – définie comme une IA atteignant un niveau d’autonomie ou de complexité susceptible d’égaler ou de dépasser l’intelligence humaine – les prises de décisions par de telles IA doivent être strictement encadrées. Ces décisions :
-<span>-Doivent être transparentes, explicables, et soumises à un contrôle humain effectif.</span>
+-Ne peuvent se substituer aux responsabilités humaines fondamentales.
-<span>-Ne doivent en aucun cas enfreindre les principes des DAV, ni porter atteinte à la vie privée, aux libertés individuelles ou à la souveraineté humaine.</span>
+-Doivent être transparentes, explicables, et soumises à un contrôle humain effectif.
-<span>La singularité ne doit être perçue ni comme une menace ni comme un pouvoir supérieur, mais doit dans tout les cas nécessiter un cadre éthique strict, afin d’assurer qu’elle reste au service du Vivant et de l’amélioration des conditions de vie humaines.</span>
+-Ne doivent en aucun cas enfreindre les principes des DAV, ni porter atteinte à la vie privée, aux libertés individuelles ou à la souveraineté humaine.
-<span>Les détails et les principes spécifiques relatifs à la cohabitation avec l’IA et à la gestion de la singularité sont développés dans la Charte éthique de préservation de la vie et d’amélioration des conditions humaines aux côtés de l’IA, garantissant une utilisation alignée sur les valeurs universelles des DAV.</span>
+ 
-</p>
+La singularité ne doit être perçue ni comme une menace ni comme un pouvoir supérieur, mais doit dans tout les cas nécessiter un cadre éthique strict, afin d’assurer qu’elle reste au service du Vivant et de l’amélioration des conditions de vie humaines.
+Les détails et les principes spécifiques relatifs à la cohabitation avec l’IA et à la gestion de la singularité sont développés dans la Charte éthique de préservation de la vie et d’amélioration des conditions humaines aux côtés de l’IA, garantissant une utilisation alignée sur les valeurs universelles des DAV.

content/articles/article-17.md

@@ -6,11 +6,12 @@ type: "article"
 --- 
 
 # Article 17. Contribution équitable au service du Vivant
-<p><span>Afin de permettre le déploiement des projets collectifs, l’entretien de la force publique et la prise en charge des dépenses administratives, une contribution commune est nécessaire.</span>
+Afin de permettre le déploiement des projets collectifs, l’entretien de la force publique et la prise en charge des dépenses administratives, une contribution commune est nécessaire.
-<span>Cette contribution doit être répartie de manière équitable et adaptée entre les Libres, en tenant compte d’un ratio contribution/gains qui reflète leurs capacités, leurs moyens, et leur engagement en faveur du Vivant.</span>
+Cette contribution doit être répartie de manière équitable et adaptée entre les Libres, en tenant compte d’un ratio contribution/gains qui reflète leurs capacités, leurs moyens, et leur engagement en faveur du Vivant.
-<span>Les Libres disposent du droit inaliénable :</span>
+ 
-<span>-De constater par eux-mêmes ou par leurs représentants la nécessité de cette contribution.</span>
+Les Libres disposent du droit inaliénable :
-<span>-D’y consentir librement ou de la refuser.</span><span>-D’en suivre l’emploi avec transparence.</span>
+-De constater par eux-mêmes ou par leurs représentants la nécessité de cette contribution.
-<span>-De déterminer la quantité, l’assiette, le recouvrement et la durée de cette contribution.</span>
+-D’y consentir librement ou de la refuser.-D’en suivre l’emploi avec transparence.
-<span>Tout Libre qui refuse de participer ou de contribuer à la distribution, à l’entretien et au développement des projets, avantages ou commodités collectives et indivi- duelles, ne peut en bénéficier, sauf dans des cas spécifiques définis par le Registre des Spécificités.</span>
+-De déterminer la quantité, l’assiette, le recouvrement et la durée de cette contribution.
-</p>
+ 
+Tout Libre (ou Libre en devenir) qui refuse de participer ou de contribuer à la distribution, à l’entretien et au développement des projets, avantages ou commodités collectives et individuelles, ne peut en bénéficier, sauf dans des cas spécifiques définis par des lois découlant de ce texte.

content/articles/article-18.md

@@ -7,18 +7,30 @@ type: "article"
 
 # Article 18. Les besoins vitaux commis d’office
 <p>
-<span>Tout Être Humain venant au monde acquiert d’office une parcelle de terre, un accès à un point d’eau, ainsi que des moyens lui permettant d’assurer de manière autonome, individuelle et souveraine ses besoins vitaux.</span>
+Tout Être Humain venant au monde acquiert d’office une parcelle de terre, un accès à un point d’eau, ainsi que des moyens lui permettant d’assurer de manière autonome, individuelle et souveraine ses besoins vitaux.
-<span>Les besoins vitaux commis d’office</span>
+ 
-<span>Les "besoins vitaux" désignent la capacité d’un individu ou d’une forme de vie quelconque à subvenir librement et de manière autonome à : Se nourrir / Se loger / Se vêtir / Se soigner / Se développer / Se déplacer.</span>
+Les besoins vitaux commis d’office :
-<span>La parcelle commise d’office</span>
+Les "besoins vitaux" désignent la capacité d’un Individu ou d’une forme de Vie quelconque à subvenir librement et de manière autonome ou synergique de façon à pouvoir :
-<span>Dès sa naissance, tout Libre se voit attribuer une parcelle de terre dont la responsabilité, l’entretien et le développement sont confiés à ses parents ou tuteurs légaux/ moraux jusqu’à sa majorité.</span>
+Se nourrir / Se loger / Se vêtir / Se soigner / Se développer / Se déplacer.
-<span>Les caractéristiques de la parcelle sont définies comme suit :</span>
+ 
-<span>-Elle doit permettre à une famille "standard" (2 parents et 4 enfants) d’atteindre l’autosuffisance alimentaire.</span>
+La parcelle commise d’office :
-<span>-Sa surface doit être comprise entre 1 500 m² et 3 000 m².</span>
+Dès sa naissance, tout Libre se voit attribuer une parcelle de terre dont la responsabilité, l’entretien et le développement sont confiés à ses parents ou tuteurs légaux/ moraux jusqu’à sa majorité.
-<span>-Les différences de taille des parcelles peuvent être compensées par les avantages liés à leur emplacement, tels que le paysage, l’exposition au soleil, la qualité du terroir, la richesse de la terre, ou les ressources environnantes.</span>
+ 
-<span>Développement de l’abondance</span>
+Les caractéristiques de la parcelle sont définies comme suit :
-<span>Des moyens sont gracieusement mis à disposition par les collectivités locales pour permettre aux Libres de développer l’abondance de leur parcelle, qu’elle soit végétale, animale ou en termes de commodités souhaitées.</span>
+-Elle doit permettre à une famille "standard" (2 parents et 4 enfants) d’atteindre l’autosuffisance alimentaire.
-<span>Transmission et préservation</span>
+-Sa surface doit être comprise entre 1 500 m² et 3 000 m².
-<span>Redistribution : À la fin de la vie d’un Libre, la parcelle et ses moyens sont redistribués à un nouveau-né.</span>
+-Les dimensions des parcelles doivent être adaptés selon les besoins des Individus / familles et toutes différences peuvent être compensées par des critères liés à leur emplacement, tels que le paysage, l’exposition au soleil, la qualité du terroir, la richesse de la terre, ou les ressources environnantes.
-<span>Léguer : Un Libre peut léguer sa parcelle et ses moyens à autrui, à condition qu’il puisse faire don d’une parcelle de valeur équivalente, destinée à un nouveau-né. Troquer : Tout Libre a le droit d’échanger sa parcelle contre une autre commise d’office, mais il ne peut en aucun cas en faire commerce, ni des moyens qui lui ont</span>
+ 
+Développement de l’abondance :
+Des moyens sont gracieusement mis à disposition par les collectivités locales pour permettre aux Libres de développer l’abondance de leur parcelle, qu’elle soit végétale, animale ou en termes de commodités souhaitées.
+ 
+Transmission et préservation :
+-À la fin de la vie d’un Libre, la parcelle et ses moyens sont redistribués à un nouveau-né.
+-Un Individu peut léguer sa parcelle et ses moyens à autrui, à condition qu’il puisse faire don d’une parcelle de valeur équivalente, destinée à un nouveau-né.
+  Troquer : Tout Libre a le droit d’échanger sa parcelle contre une autre commise d’office, mais il ne peut en aucun cas en faire commerce, ni des moyens qui lui ont été confiés gratuitement pour son développement.
+  Possession multiple : Un Libre peut posséder plusieurs parcelles privées, à condition que celles-ci soient utilisées pour préserver et pérenniser le Vivant de manière harmonieuse et abondante.
+ 
+Protection de l’espace d’évolution :
+L’espace d’évolution de toute forme de vie doit être préservé autant que possible de toute interaction susceptible de lui nuire, de quelque manière que ce soit.
+Chaque individu porte la responsabilité de pérenniser le Vivant, à la fois de manière singulière et collective.
 </p>

content/articles/article-19.md

@@ -6,6 +6,6 @@ type: "article"
 --- 
 
 # Article 19. Droit à la propriété et conditions d’expropriation
-<span>La propriété est un droit fondamental, inviolable et sacré. Nul ne peut en être privé, sauf dans les cas où une nécessité publique, légalement établie, le justifie de manière évidente.</span>
+La propriété est un droit fondamental, inviolable et sacré. Nul ne peut en être privé, sauf dans les cas où une nécessité publique, légalement établie,le justifie de manière évidente.
-<span>Toute expropriation ne peut être effectuée qu’à condition qu’elle soit précédée d’une indemnisation juste, équitable et proportionnelle à la valeur de la propriété concernée. Cette indemnité doit être garantie et versée avant toute prise de possession par les superviseurs ou entités responsables dans le respect absolu des DAV.</span>
+ 
-</p>
+Toute expropriation ne peut être effectuée qu’à condition qu’elle soit précédée d’une indemnisation juste, équitable et proportionnelle à la valeur de la propriété concernée. Cette indemnité doit être garantie et versée avant toute prise de possession par les superviseurs ou entités responsables dans le respect absolu des DAV.

content/articles/article-2.md

@@ -8,11 +8,11 @@ type: "article"
 # Article 2. Principes fondamentaux des droits naturels du Vivant
 
 La toile de fond de toute entreprise, association, tout mouvement spontané ou prémédité est la sauvegarde, ainsi que l'épanouissement des droits naturels et imprescriptibles de l'âme et du Vivant.
-<span>Ces droits sont:</span>
+ 
-<span>-La liberté pour toute espèce d'être, d'agir, d'aller et venir en tout temps et en tout lieux sans empiéter sur la propriété et le bien-être d'autrui.</span>
+Ces droits sont (sans s’y limiter):
-<span>- Le droit à la vie privé, à la sûreté à la tranquillité :</span>
+-La liberté pour toute espèce d'être, d'agir, d'aller et venir en tout temps et en tout lieux sans empiéter sur la propriété et le bien-être d'autrui.
-<span>- Le droit à la résistance à l’oppression.</span>
+-Le droit à la vie privé, à la sûreté à la tranquillité :
-<span>- Le droit à la protection ainsi qu’à l’épanouissement du Vivant</span>
+-Le droit à la résistance à l’oppression.
-<span>- Le droit à la propriété, de jouir de biens matériels, et de posséder objets (Les objets étant considérés comme manufacturé et dépourvus d'une âme).</span>
+-Le droit à la protection ainsi qu’à l’épanouissement du Vivant
-<span>Les objets en question, leur manufacture et leur origine ne peuvent en aucun cas venir d'une chaîne d'acheminement qui comporte quelconque action oppressive envers la vie.</span>
+-Le droit à la propriété, de jouir de biens matériels, et de posséder objets (Les objets étant considérés comme manufacturé et dépourvus d'une âme).
-</p>
+Les objets en question, leur manufacture et leur origine ne peuvent en aucun cas venir d'une chaîne d'acheminement qui comporte quelconque action oppressive envers la vie.

content/articles/article-20.md

@@ -6,9 +6,11 @@ type: "article"
 ---
 
 # Article 20. Universalité, pérennité et responsabilité collective en faveur de la vie
-<p>
+
-<span>La Déclaration des Droits de l’Âme et du Vivant est un texte universel, intemporel et évolutif. Elle appartient à toutes les formes de vie et transcende les frontières, les époques et les croyances. Elle constitue un pacte sacré entre l’humanité et le Vivant, engageant chaque individu à agir en gardien conscient et respectueux de la vie sous toutes ses formes.</span>
+La Déclaration des Droits de l’Âme et du Vivant est un texte universel, intemporel et évolutif. Elle appartient à toutes les formes de Vie, transcende les frontières, les époques et les croyances. Elle constitue un pacte sacré entre l’humanité et le Vivant, engageant chaque individu à agir en Gardien conscient et respectueux de la Vie sous toutes ses formes.
-<span>Les DAV ne peuvent être détournés, ignorés ou subordonnés à des intérêts particuliers, économiques ou politiques. Toute loi, structure ou pratique qui s’écarte de ces principes fondamentaux est considérée comme illégitime et contraire à l’essence même de la vie.</span>
+ 
-<span>La responsabilité de protéger, de préserver et d’incarner ces droits incombe à chacun. Leur respect dépend de la vigilance, de l’engagement et de la volonté collective des Libres d’honorer ce texte en actes et en conscience.</span>
+Les DAV ne peuvent être détournés, ignorés ou subordonnés à des intérêts particuliers, économiques ou politiques. Toute loi, structure ou pratique qui s’écarte de ces principes fondamentaux est considérée comme illégitime et contraire à l’essence même de la vie.
-<span>Ainsi, la Déclaration des Droits de l’Âme et du Vivant demeure le phare guidant l’humanité vers une coexistence harmonieuse, équitable et abondante, pour les générations présentes et futures, dans un équilibre éternel entre le microcosme et le macrocosme.</span>
+ 
-</p>
+La responsabilité de protéger, de préserver et d’incarner ces droits incombe à chacun. Leur respect dépend de la vigilance, de l’engagement et de la volonté collective des Libres (ou Libres en devenir) d’honorer ce texte en actes et en conscience.
+ 
+Ainsi, la Déclaration des Droits de l’Âme et du Vivant demeure le phare guidant l’Humanité vers une coexistence harmonieuse, équitable et abondante, pour les générations présentes et futures, dans un équilibre éternel entre le microcosme et le macrocosme.

content/articles/article-3.md

@@ -7,18 +7,24 @@ type: "article"
 
 # Article 3. Sensibilisation au contrôle mental, liberté de penser, de s’exprimer et d’agir
 
-<span>Tout individu ou groupe d’individus exerçant des pressions psychologiques, physiques, émotionnelles, énergétiques ou spirituelles dans le but de manipuler, contrôler ou soumettre une ou plusieurs formes de vie viole les principes fondamentaux des droits de l'âme et du Vivant.</span>
+Tout individu ou groupe d’individus exerçant des pressions psychologiques, physiques, émotionnelles, énergétiques ou spirituelles dans le but de manipuler,contrôler ou soumettre une ou plusieurs formes de vie viole les principes fondamentaux des DAV.
-<span>Les conséquences de tels actes sont strictement encadrées par la loi et assorties de sanctions adaptées, proportionnelles au degré de préjudice causé.</span>
+Les conséquences de tels actes sont strictement encadrées par la loi et assorties de sanctions adaptées, proportionnelles au degré de préjudice causé.
-<span>Toute forme d’expérimentation impliquant la vie doit être conduite selon les normes les plus élevées d’éthique, de transparence et de compassion, sous la supervi- sion de comités démocratiquement élus par les Libres. Ces comités doivent veiller à empêcher / limiter toute forme de souffrance et garantir systématiquement un consentement éclairé lorsqu’il s’agit d’humains ou d’autres formes de vie consciente.</span>
+ 
-<span>Les valeurs de transparence, de complémentarité, de coopération et de compassion sont essentielles pour bâtir une prospérité collective exempte de manipulation et d’exploitation. Ces valeurs doivent être promues activement dans toutes les sphères de la société.</span>
+Toute forme d’expérimentation impliquant la vie doit être conduite selon les normes les plus élevées d’éthique, de transparence et de compassion, sous la supervision de comités démocratiquement élus par les Humains, Libres, meneurs de leur propre représentativité. Ces comités doivent veiller à empêcher / limiter toute forme de souffrance et garantir systématiquement un consentement éclairé lorsqu’il s’agit d’humains ou d’autres formes de vie.
-<span>Le principe fondamental de la souveraineté réside dans chaque individu. Aucun individu, groupe ou superviseur ne peut revendiquer un pouvoir supérieur à celui conféré par la communauté librement et éthiquement constituée.</span>
+Les valeurs de transparence, de complémentarité, de coopération et de compassion sont essentielles pour bâtir une prospérité collective exempte de manipulation et d’exploitation. Ces valeurs doivent être promues activement dans toutes les sphères de la société.
-<span>Est défini comme superviseur :</span>
+ 
-<span>Tout individu en capacité de penser de manière autonome, sans influence externe, sans être sous l’emprise de programmes mentaux, et élue pour accomplir une mission ou une tâche dans un cadre déterminé et limité.</span>
+Le principe fondamental de la souveraineté réside dans chaque individu. Aucun individu, groupe ou superviseur ne peut revendiquer un pouvoir supérieur à celui conféré par la communauté librement et éthiquement constituée.
-<span>Tout superviseur doit respecter un mandat temporaire, limité dans le temps et aligné sur l’intérêt général. Toute tentative d’abus de pouvoir entraîne des sanctions immédiates.</span>
+ 
-<span>Toute tentative de contrôle mental, qu’elle provienne d’organismes institutionnels, économiques, technologiques, religieux ou autres, est strictement interdite, notamment :</span>
+Est défini comme superviseur :
-<span>-Les manipulations collectives ou individuelles à travers les médias, les technologies avancées ou les dogmes coercitifs.</span>
+Tout individu en capacité de penser de manière autonome, sans influence externe, sans être sous l’emprise de programmes mentaux, et élue pour accomplir une mission ou une tâche dans un cadre déterminé et limité.
-<span>-L’utilisation non consentie de technologies affectant l’esprit ou la conscience des individus.</span>
+Tout superviseur doit respecter un mandat temporaire, limité dans le temps et aligné sur l’intérêt général.
-<span>Une vigilance accrue doit être portée sur l’utilisation des nouvelles technologies pour garantir qu’elles ne servent jamais à asservir la vie ou limiter la liberté de penser pour quelque raison que ce soit. Toute technologie invasive, conçue pour influencer les choix, pensées ou émotions des individus sans leur consentement explicite, est illégale et représente une grave violation de la présente déclaration.</span>
+Toute tentative d’abus de pouvoir entraîne des sanctions immédiates.
-<span>La libre communication des pensées et des opinions est un des droits les plus précieux de l’humain et de toute forme de vie.</span>
+ 
-<span>Toute forme de vie peut donc s’exprimer comme bon lui semble et tout humain peut donc parler, écrire, imprimer et communiquer librement, sauf à répondre de l'abus de cette liberté dans les cas déterminés par la loi.</span>
+Toute tentative de contrôle mental, qu’elle provienne d’organismes institutionnels, économiques, technologiques, religieux ou autres, est strictement interdite,notamment :
-</p>
+-Les manipulations collectives ou individuelles à travers les médias, les technologies avancées ou les dogmes coercitifs.
+-L’utilisation non consentie de technologies affectant l’esprit ou la conscience des individus.
+ 
+Une vigilance accrue doit être portée sur l’utilisation des nouvelles technologies pour garantir qu’elles ne servent jamais à asservir la vie ou limiter la liberté de penser pour quelque raison que ce soit. Toute technologie invasive, conçue pour influencer les choix, pensées ou émotions des individus sans leur consentement explicite, est illégale et représente une grave violation de la présente déclaration.
+ 
+La libre communication des pensées et des opinions est un des droits les plus précieux de l’humain et de toute forme de vie.
+Toute forme de vie peut donc s’exprimer comme bon lui semble et tout humain peut donc parler, écrire, imprimer et communiquer librement, sauf à répondre de l'abus de cette liberté dans les cas déterminés par la loi.

content/articles/article-4.md

@@ -6,13 +6,18 @@ type: "article"
 ---
 
 # Article 4. Protection absolue de l’innocence et de l’évolution de l’enfance
-<span>La protection des enfants, des adolescents, et de toute forme de vie vulnérable ou en développement est un devoir absolu.</span>
+La protection des enfants, des adolescents, et de toute forme de vie vulnérable ou en développement est un devoir absolu.
-<span>Aucune manipulation, pression psychologique ou physique, ni aucun acte d’influence malveillante ne peut être exercé sur eux sous quelque forme que ce soit. Les enfants et adolescents doivent grandir dans un cadre qui favorise leur compréhension progressive et consciente des réalités de leur environnement, tout en respectant leur rythme naturel de développement, en harmonie avec les lois du Vivant.</span>
+Aucune manipulation, pression psychologique ou physique, ni aucun acte d’influence malveillante ne peut être exercé sur eux sous quelque forme que ce soit.
-<span>L’environnement dans lequel ils évoluent, quelles que soient sa juridiction, ses us et coutumes, doit veiller à préserver l’innocence des âmes en bas âge en limitant leur exposition à des contenus, situations ou influences nuisibles, ou inappropriés à leur maturité psychologique et spirituelle.</span>
+Les enfants et adolescents doivent grandir dans un cadre qui favorise leur compréhension progressive et consciente des réalités de leur environnement, tout en respectant leur rythme naturel de développement, en harmonie avec les lois du Vivant.
-<span>Pour garantir la survie et l’évolution harmonieuse de l’espèce humaine en accord avec son environnement et toute forme de vie qui l’anime, tout doit être mis en œuvre pour créer les conditions permettant à la jeunesse de s’épanouir librement et sainement, à l’abri de tout risque de dégénérescence, dans un environnement Vivant et sain.</span>
+L’environnement dans lequel ils / elles évoluent, quelles que soient sa juridiction, ses us et coutumes, doit veiller à préserver l’innocence des Âmes en bas âge en limitant leur exposition à des contenus, situations ou influences nuisibles, ou inappropriés à leur maturité psychologique et spirituelle.
-<span>Les conditions fondamentales favorables à l’épanouissement d’un individu sont définies, dans le présent article, comme :</span>
+ 
-<span>-La présence d’un cercle familial bienveillant.</span>
+Pour garantir la survie et l’évolution harmonieuse de l’Espèce Humaine en accord avec son environnement et toute forme de vie qui l’anime, tout doit être mis en œuvre pour créer les conditions permettant à la jeunesse de s’épanouir librement et sainement, à l’abri de tout risque de dégénérescence, dans un environnement Vivant et sain.
-<span>-Un environnement Vivant équilibré et harmonieux.</span>
+ 
-<span>-La garantie absolue qu’il puisse, à sa majorité, répondre à ses propres besoins vitaux de manière autonome. Cette déclaration doit être portées à la connaissance de tous dès le plus jeune âge.</span>
+Les conditions fondamentales favorables à l’épanouissement d’un individu sont définies, dans le présent article, comme :
-<span>Les enfants d’aujourd’hui sont les Libres, Gardiens des DAV de demain.</span>
+-La présence d’un cercle familial bienveillant.
-</p>
+-Un environnement Vivant équilibré et harmonieux.
+-La garantie absolue qu’il puisse, à sa majorité, répondre à ses propres besoins vitaux de manière autonome.
+ 
+Cette déclaration doit être portées à la connaissance de tous dès le plus jeune âge.
+ 
+Les enfants d’aujourd’hui sont les Libres, Gardiens des DAV de demain.

content/articles/article-5.md

@@ -7,6 +7,7 @@ type: "article"
 
  # Article 5. Définition et limites de la liberté dans le respect du Vivant 
  
-<span>La liberté consiste à pouvoir faire tout ce qui ne nuit pas à autrui et à ne commettre aucun acte néfaste ou oppressant délibéré envers la vie dans un cadre hors que celui de l'absolue nécessité : ainsi, l'exercice des droits naturels de chaque forme de vie n'a de limites que celles qui assurent aux autres formes de vie de "l'ensemble", la jouissance de ces mêmes droits.</span>
+La liberté consiste à pouvoir faire tout ce qui ne nuit pas à autrui et à ne commettre aucun acte néfaste ou oppressant délibéré envers la Vie dans un cadre hors que celui de l'absolue nécessité : ainsi, l'exercice des droits naturels de chaque forme de Vie n'a de limites que celles qui assurent aux autres formes de Vie de "l'ensemble", la jouissance de ces mêmes droits.
-<span>Ces limites ne peuvent être déterminées que par la loi, écrite et ratifiée par les Libres (toute ethnie, classe social, apparences, ou religion confondue) répondants aux critères de compétences et de sagesses adéquat à leur rédaction et à leur respect qui s'appuie sur les textes des DAV.</span>
+ 
-</p>
+Ces limites ne peuvent être déterminées que par la loi, écrite et ratifiée par les Libres, Humains, Libres meneurs de leur propre représentativité (toute ethnie, classe social, apparences, ou religion confondue) répondants aux critères de compétences et de sagesses adéquat à leur rédaction et à leur respect, s’appuyant sur les textes des DAV.
+

content/articles/article-6.md

@@ -6,8 +6,7 @@ type: "article"
 ---
 
 # Article 6. Rôle de la loi pour la défense du Vivant
-<p>
+
-<span>La loi a pour prérogative de défendre les actions nuisibles à la vie.</span>
+La loi a pour prérogative de défendre les actions nuisibles à la vie.
-<span>Elle ne peut en aucun cas défendre toute action délibérée destinée à nuire délibérément au Vivant et/ou à agir intentionnellement avec malveillance pour quelque raison que ce soit.</span>
+Elle ne peut en aucun cas défendre toute action délibérée destinée à nuire délibérément au Vivant et/ou à agir intentionnellement avec malveillance pour quelque raison que ce soit.
-<span>Tout ce qui n'est pas défendu par la loi ne peut être empêché, et nul ne peut être contraint à faire ce qu'elle n'ordonne pas.</span>
+Tout ce qui n'est pas défendu par la loi ne peut être empêché, et nul ne peut être contraint à faire ce qu'elle n'ordonne pas.
-</p>

content/articles/article-7.md

@@ -6,11 +6,16 @@ type: "article"
 ---
 
 # Article 7. Souveraineté des Libres et égalité juridique
-<p>
+
-<span>La charte est l'expression de la volonté des Libres .</span>
+La charte est l'expression de la volonté des Libres.
-<span>Est considéré Libre , celui ou celle qui est en mesure d’être souverain, gardien de son Royaume intérieur , capable de penser par lui / elle même, conscient de la réalité de l’emprise et des dangers que représente le contrôle mental , capable de répondre à ses besoins vitaux de façon autonome ou synergique et selon une éthique en accord avec le présent texte.</span>
+ 
-<span>(En l’an de grâce 2022, une infime partie de l’humanité l’est.  La partie restante pouvant se considérer comme « Libres en devenir »…)</span>
+Est considéré Libre , celui ou celle qui est en mesure d’être souverain, gardien de son Royaume (Peuple) intérieur , capable de penser par lui / elle même, conscient de la réalité de l’emprise et des dangers que représente le contrôle mental , capable de répondre à ses besoins vitaux de façon autonome ou synergique et selon une éthique en accord avec le présent texte.
-<span>Tout Libre en pleine possession de ses capacités cognitives et en mesure de démontrer sa bonne foi ainsi que le niveau de compétences adapté, a le droit de concourir individuellement à la constitution de ce présent texte dans l'intérêt communs.</span>
+(En l’an de grâce 2022, une infime partie de l’humanité l’est. La partie restante pouvant se considérer comme « Libres en devenir »…)
-<span>Les textes de lois fondées sur la déclaration des DAV ainsi que leurs applications doivent être les même pour tous, soit qu'elles protègent, soit qu'elle punissent. Tous les Libres, étant considérés comme singulièrement différent et unique doivent bénéficier d'un traitement juridico-moral égal quelques soit leur différences.</span>
+ 
-<span>Tous Libres, peuvent êtres admissibles à toutes dignités, places et emplois publics, adaptées à leur capacités, leurs domaines d'expertise, leur volonté et sans autre distinction que celle de leurs vertus et de leurs talents à œuvrer pour le vivant et le bien commun .</span>
+Tout Être Humain Libre, (ou Libre en devenir) en pleine possession de ses capacités cognitives et en mesure de démontrer sa bonne foi ainsi que le niveau de compétences adapté, a le droit de concourir individuellement à la constitution de ce présent texte dans l'intérêt communs.
-</p>
+ 
+Les textes de lois fondées sur la déclaration des DAV ainsi que leurs applications doivent être les même pour tous, soit qu'elles protègent, soit qu'elle punissent.
+ 
+Tous les Libres (ou Libres en devenir), étant considérés comme singulièrement différents et unique doivent bénéficier d'un traitement juridico-moral égal quelques soit leur différences.
+ 
+Tous Libres (ou Libres en devenir), peuvent êtres admissibles à toutes dignités, places et emplois publics, adaptées à leur capacités, leurs domaines d'expertise, leur volonté et sans autre distinction que celle de leurs vertus et de leurs talents à œuvrer pour le Vivant et le bien commun .

content/articles/article-8.md

@@ -6,6 +6,7 @@ type: "article"
 --- 
 
 # Article 8. Garanties contre les abus de pouvoir et détentions arbitraires
-<span>Nul forme de vie ne peut être accusée, arrêtée ou détenue dans des cas autres que ceux déterminés par la loi et selon les formes qu'elle a prescrites. Ceux qui sollicitent, expédient, exécutent ou font exécuter des ordres arbitraires, agissant ainsi de façon non-conforme doivent être punis.</span>
+Nul forme de vie ne peut être accusée, arrêtée ou détenue dans des cas autres que ceux déterminés par la loi et selon les formes qu'elle a prescrites.
-<span>Tout Être Humain appelé ou saisi en vertu de la loi doit se plier à son application à l'instant ou celle ci prend effet selon le respect en bon et due forme de la déclaration des DAV</span>
+  
-</p>
+Ceux qui sollicitent, expédient, exécutent ou font exécuter des ordres arbitraires, agissant ainsi de façon non-conforme doivent être punis.
+Tout Être Humain appelé ou saisi en vertu de la loi doit se plier à son application à l'instant ou celle ci prend effet selon le respect en bon et due forme de la déclaration des DAV

content/articles/article-9.md

@@ -6,7 +6,8 @@ type: "article"
 --- 
 
 # Article 9. Présomption d’innocence et respect des droits en cas de détention
-<span>Toute forme de vie consciente est présumée innocente jusqu’à ce qu’une culpabilité ait été légalement et équitablement établie. Si des mesures de détention ou de restriction deviennent indispensables pour protéger l’harmonie collective ou assurer la sécurité, ces mesures doivent être appliquées avec une rigueur strictement limitée à ce qui est nécessaire.</span>
+Toute forme de vie consciente est présumée innocente jusqu’à ce qu’une culpabilité ait été légalement et équitablement établie. Si des mesures de détention ou de restriction deviennent indispensables pour protéger l’harmonie collective ou assurer la sécurité, ces mesures doivent être appliquées avec une rigueur strictement limitée à ce qui est nécessaire.
-<span>Toute rigueur excessive, tout traitement cruel ou toute action non indispensable pour garantir la sécurité et le maintien de l’ordre doit être sévèrement sanctionnée par la loi.</span>
+ 
-<span>Aucune forme de vie ne peut être privée de sa liberté ou de ses droits fondamentaux sans un processus légal juste, transparent et proportionnel. Les conditions de détention ou de restriction doivent respecter la dignité intrinsèque et les besoins vitaux de l’individu ou de la forme de vie concernée, en tenant compte de sa nature et de son contexte.</span>
+Toute rigueur excessive, tout traitement cruel ou toute action non indispensable pour garantir la sécurité, le maintien de la paix ainsi que le respect des DAV doit être sévèrement sanctionnée par la loi.
-</p>
+ 
+Aucune forme de Vie ne peut être privée de sa liberté ou de ses droits fondamentaux sans un processus légal juste, transparent et proportionnel. Les conditions de détention ou de restriction doivent respecter la dignité intrinsèque et les besoins vitaux de l’individu ou de la forme de Vie concernée, en tenant compte de sa nature et de son contexte.

content/introduction.md

@@ -5,15 +5,9 @@ type: intro
 
 # DÉCLARATION DES DROITS DE L'ÂME ET DU VIVANT
 
-<p style="font-family: Verdana, Geneva, Tahoma, sans-serif; color: #4A2C2A; text-align: center; font-size: 1.1rem; line-height: 1.6;">
+Nous, Humains, Libres et avant tout Vivants constitués d’une Âme, individus indivisibles et singuliers meneurs de notre propre représentativité considérant que le gouvernement (gubernāre mentis / contrôle mental / manipulation de l’Âme ) ou le mépris des droits de l'Âme et du Vivant sont les causes majeurs des malheurs et de la corruption terrestre, constituons et ratifions solennellement les droits naturels, inaliénables et sacrés de l'Âme et du Vivant (DAV), afin que cette déclaration portée à la connaissance de toutes et chacun, rappelle les droits et les devoirs ; afin que les choix législatif et les actes qui en découlent déployés et appliqués par des superviseurs, élus démocratiquement selon le code d'éthique et de déontologie des Libres soient respectés ; Que les textes de lois écrits et ratifiés par les Humains, fondées sur les droits naturels inaliénables et imprescriptibles garantissent le maintien de la constitution des DAV.
-    Nous, Humains, <span style="font-weight: bold; color: #8B5E3C;">Libres et avant tout Vivant</span>, meneurs de notre propre représentativité, considérant que le gouvernement "contrôle mental" ou le mépris des droits de l'Âme et du Vivant sont les causes majeures des malheurs et de la corruption terrestre, constituons et ratifions solennellement les droits naturels, inaliénables et sacrés de l'Âme et du Vivant (DAV), afin que cette déclaration, portée à la connaissance de tous, rappelle les droits et les devoirs ; afin que les choix législatifs et les actes qui en découlent, déployés et appliqués par des superviseurs temporaires élus selon le code d'éthique et de déontologie des Libres, soient respectés ; afin que les textes de lois écrits et ratifiés par les Vivants, fondés sur les droits naturels inaliénables et imprescriptibles, garantissent le maintien de la constitution des Vivants et assurent le bien-être de toute forme de vie du micro et du macrocosme.
+ 
-</p>
+En conséquence, Les Humains, Libres, Vivants d'ici et d'ailleurs reconnaissent, en présence et sous les auspices des forces cosmiques, la légitimité et le respect nécessaire des droits de l'âme et du Vivant.
 
-<hr style="border-top: 2px solid #D6BDA6; margin-top: 40px; margin-bottom: 40px;" />
 
-<div style="color: #8B5E3C; text-align: center; font-size: 1.1rem; line-height: 1.6;">
-    <p>
-        <em>En conséquence, les Libres, Vivants d'ici et d'ailleurs reconnaissent, en présence et sous les auspices des forces cosmiques, la légitimité et le respect nécessaire des droits de l'âme et du Vivant.</em>
-    </p>
-</div>  
 

content/summary.md

@@ -4,4 +4,5 @@ type: summary
 --- 
 
 # Summary
-<p>Ce texte est universel , évolutif et appartient à tous. Il ne peut être rattaché à quelconque texte qui en détournerait le sens et la raison d'être originelle car singulier, unique et indivisible.</p>
+
+Ce texte est universel , évolutif et appartient à tous. Il ne peut en aucun cas être rattaché à quelconque texte ou mouvement politique qui en détournerait le sens et la raison d'être originelle car singulier, unique et indivisible.

lib/fetchers.js

@@ -0,0 +1,73 @@
+
+/**
+ * Fetch and update articles data with likes and dislikes.
+ * @param {Ref<Array>} articles - Reactive array of articles.
+ */
+export const fetchArticlesData = async (articles) => {
+    try {
+        const response = await $fetch(`/api/articles`, { method: 'GET' });
+
+        if (response.success && response.data) {
+            articles.value = articles.value.map((article) => {
+                const updatedArticle = response.data.find((data) => data.id === article.id);
+                return updatedArticle
+                    ? { ...article, likes: updatedArticle.likes, dislikes: updatedArticle.dislikes }
+                    : article;
+            });
+        } else {
+            console.error('Failed to fetch articles:', response.message || 'Unknown error');
+        }
+    } catch (error) {
+        console.error('Error fetching articles data:', error);
+    }
+};
+
+/**
+ * Fetch and attach comments to their respective articles.
+ * @param {Ref<Array>} articles - Reactive array of articles.
+ */
+export const fetchCommentsData = async (articles) => {
+    try {
+        const response = await $fetch(`/api/comments`, { method: 'GET' });
+
+        if (response.success && response.data) {
+            articles.value = articles.value.map((article) => {
+                const relatedComments = response.data.filter((data) => data.articleId === article.id);
+                return { ...article, comments: relatedComments };
+            });
+        } else {
+            console.error('Failed to fetch comments:', response.message || 'Unknown error');
+        }
+    } catch (error) {
+        console.error('Error fetching comments data:', error);
+    }
+};
+
+/**
+ * Fetch and format signatures data.
+ * @param {Ref<Array>} signatures - Reactive array of signatures.
+ */
+export const fetchSignatures = async (signatures) => {
+    try {
+        const response = await $fetch(`/api/charte`, { method: 'GET' });
+
+        if (response.success && Array.isArray(response.data)) {
+            signatures.value = response.data.map((signature) => ({
+                ...signature,
+                createdAt: new Intl.DateTimeFormat('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                }).format(new Date(signature.createdAt)),
+            }));
+        } else if (response.success) {
+            console.error('Unexpected data format:', response.data);
+        } else {
+            console.error('Failed to fetch signatures:', response.message || 'Unknown error');
+        }
+    } catch (error) {
+        console.error('Error fetching signatures data:', error);
+    }
+};

lib/likes.ts

@@ -0,0 +1,54 @@
+
+/**
+ * Updates likes or dislikes for an article or comment dynamically.
+ * @param {string} type - 'article' or 'comment'.
+ * @param {string} action - 'like' or 'dislike'.
+ * @param {string} id - ID of the article or comment.
+ * @param {string} articleId - (Optional) ID of the parent article if updating a comment.
+ * @param {Array} articles - The articles array.
+ */
+export const updateLikeDislike = async ({ type, action, id, articleId = null, articles }) => {
+    try {
+        // Find the target item
+        let target;
+        if (type === 'article') {
+            target = articles.value.find((a) => a.id === id);
+        } else if (type === 'comment') {
+            const article = articles.value.find((a) => a.id === articleId);
+            if (article) {
+                target = article.comments.find((c) => c.id === id);
+            }
+        }
+
+        if (!target) {
+            console.error(`Target ${type} not found`);
+            return;
+        }
+
+        // Increment the likes or dislikes
+        if (action === 'like') {
+            target.likes += 1;
+        } else if (action === 'dislike') {
+            target.dislikes += 1;
+        } else {
+            console.error('Invalid action specified');
+            return;
+        }
+
+        // Determine API endpoint
+        const endpoint = type === 'article' ? `/api/articles/${id}` : `/api/comments/${id}`;
+
+        // Make the API call
+        await $fetch(endpoint, {
+            method: 'PUT',
+            body: {
+                [action === 'like' ? 'likes' : 'dislikes']: action === 'like' ? target.likes : target.dislikes,
+                ...(type === 'comment' && { articleId }),
+            },
+        });
+
+        console.log(`${type} ${action} updated successfully`);
+    } catch (error) {
+        console.error(`Error updating ${type} ${action}:`, error);
+    }
+};

lib/overlayHandler.js

@@ -0,0 +1,21 @@
+
+/**
+ * Display overlay with dynamic parameters.
+ * @param {Object} options - Overlay configuration.
+ * @param {string} options.icon - Icon to display in the overlay.
+ * @param {string} options.message - Message to display in the overlay.
+ * @param {string} options.buttonText - Button text to display in the overlay.
+ * @param {string} options.iconColor - Icon color to display in the overlay.
+ * @param {Ref<boolean>} overlay - Reactive overlay state.
+ */
+export const showOverlay = (options, overlay) => {
+    const { icon, message, buttonText, iconColor } = options;
+
+   overlay.value = {
+        icon,
+        message,
+        buttonText,
+        iconColor,
+        visible: true,
+    };
+};

nuxt.config.ts

@@ -1,29 +1,31 @@
-import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import { defineNuxtConfig } from 'nuxt/config';
 
 export default defineNuxtConfig({
+  ssr: false,
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
-
+  app: {
+    head: {
+      title: 'DAV',
+      meta: [
+        {
+          name: 'description',
+          content: `Droits de l'ame et du vivant`,
+        },
+      ],
+    },
+  },
   css: [
     '~/assets/css/main.css', 
   ],
-
   postcss: {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   },
-  build: {
-    transpile: ['vuetify'],
-  },
   modules: [
-    (_options, nuxt) => {
+      'vuetify-nuxt-module',
-      nuxt.hooks.hook('vite:extendConfig', (config) => {
-        // @ts-expect-error
-        config.plugins.push(vuetify({ autoImport: true }))
-      })
-    },
     '@nuxt/content',
     '@nuxtjs/supabase',
     "@prisma/nuxt"
@@ -34,12 +36,36 @@ export default defineNuxtConfig({
     key: process.env.SUPABASE_KEY,
     redirect: false,
   },
-
+ vuetify: {
-  vite: {
+   vuetifyOptions: {
-    vue: {
+      components: 'VBtn',
-      template: {
+      theme: {
-        transformAssetUrls,
+        themes: {
+          light: {
+            colors: {
+              primary: '#A7D129',
+              secondary: '#FFD93D',
+              tertiary: '#FFB400',
+              accent: '#646464',
+            },
+          },
+        },
+      },
+      aliases: {
+        VBtnValid: 'VBtn',
+      },
+      defaults: {
+        VBtn: {
+          color: 'accent',
+          class: 'custom-btn',
+        },
+        VBtnValid: {
+          color: 'primary',
+          class: 'custom-btn',
+        },
       },
     },
   },
+  vite: {
+  },
 })

package.json

@@ -10,22 +10,20 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@mdi/font": "^7.4.47",
     "@nuxt/content": "^2.13.4",
     "@nuxtjs/supabase": "^1.4.4",
     "@prisma/nuxt": "^0.1.3",
     "nuxt": "^3.14.1592",
-    "uuid": "^11.0.3",
     "vue": "latest",
-    "vue-router": "latest"
+    "vue-router": "latest",
+    "vuetify": "^3.7.6",
+    "vuetify-nuxt-module": "^0.18.3"
   },
   "devDependencies": {
     "@prisma/client": "^5.22.0",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
-    "prisma": "^6.0.1",
+    "prisma": "^6.1.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.16"
-    "vite-plugin-vuetify": "^2.0.4",
-    "vuetify": "^3.7.5"
   }
 }

pages/index.vue

@@ -1,197 +1,246 @@
 <template>
-    <v-container fluid class="lg:mx-12 mx-2">
+    <v-container fluid>
-        <v-row class="video-section">
+        <!-- Loading Section -->
-            <video autoplay loop muted playsinline class="video-background">
+        <v-row v-if="isLoading" class="justify-center">
-                <source src="/videos/video.mp4" type="video/mp4" />
+            <Loader />
-                Your browser does not support the video tag.
-            </video>
         </v-row>
-        <!-- Introduction section -->
-        <v-row v-if="introduction" class="d-flex justify-center align-center text-center">
-            <h1 class="my-8 lg:text-xl text-l text-black">{{ introduction.title }}</h1>
-            <p class="text-xs text-black mb-8 mr-2 lg:mr-8 text-justify">{{ introduction.description }}</p>
-        </v-row>
-        <!-- Articles Section -->
-        <v-row>
-            <!-- Left Column -->
-            <v-col cols="12" md="6">
-                <div v-for="(article, index) in leftColumnArticles" :key="article.id || index" class="article">
-                    <v-card class="mb-12" elevation="0">
-                        <v-card-title>
-                            <h2 class="lg:text-sm text-xs text-wrap text-black font-bold">{{ article.title }}</h2>
-                        </v-card-title>
-                        <v-card-text>
-                            <p class="text-xs text-black">{{ article.description }}</p>
-                        </v-card-text>
-                        <v-card-actions>
-                            <v-btn icon="mdi-play" @click="toggleShow(article.id)">
-                            </v-btn>
-                            <p class="text-gray-700 lg:text-xs text-xs">Suggérer une modification de texte</p>
-                        </v-card-actions>
 
-                        <v-expand-transition>
+        <!-- Main Content Section -->
-                            <div v-show="showStates[article.id]">
+        <v-row v-else class="mx-5">
-                                <v-divider></v-divider>
+            <v-row class="video-section">
-                                <p class="text-gray-500 text-xs mx-5"> La constitution des DAV ne se fera pas
+                <video autoplay loop muted playsinline class="video-background">
-                                    seule. Chacun et
+                    <source src="/videos/video.mp4" type="video/mp4" />
-                                    chacune sont
+                    Your browser does not support the video tag.
-                                    invité(e)s à donner le meilleur d’eux même pour assurer sa constitution,
+                </video>
-                                    son respect, ainsi que sa mise en application.
+            </v-row>
-                                    Soyez courtois . Tout commentaire désobligeant irrespectueux ou agressif sera
+            <!-- Introduction section -->
-                                    systématiquement supprimé. </p>
+            <v-row v-if="introduction" class="d-flex justify-center align-center text-center mx-4">
+                <h1 class="my-8 lg:text-xl text-l text-black">{{ introduction.title }}</h1>
+                <p class="text-xs text-black sm:mb-24 mr-2 lg:mr-8 text-justify font-bold">{{ introduction.description
+                    }}</p>
+            </v-row>
+            <!-- Articles Section -->
+            <v-row>
+                <!-- Left Column -->
+                <v-col cols="12" md="6">
+                    <div v-for="(article, index) in leftColumnArticles" :key="article.id || index" class="article">
+                        <v-card class="mb-12" elevation="0">
+                            <v-card-title>
+                                <h2 class="lg:text-sm text-xs text-wrap text-black font-bold">{{ article.title }}</h2>
+                            </v-card-title>
+                            <v-card-text>
+                                <p class="text-xs text-black">{{ article.description }}</p>
+                            </v-card-text>
+                            <v-card-actions>
+                                <v-btn icon="mdi-play" @click="toggleShow(article.id)">
+                                </v-btn>
+                                <p class="text-gray-700 lg:text-xs text-xs">Suggérer une modification de texte</p>
+                            </v-card-actions>
 
-                                <!-- Comments Section -->
-                                <v-card-text>
-                                    <v-textarea v-model="newComments[article.id]" outlined rows="2"
-                                        auto-grow></v-textarea>
-                                    <VBtnValid @click="addComment(article.id)">
-                                        Valider
-                                    </VBtnValid>
-                                </v-card-text>
-                            </div>
-                        </v-expand-transition>
-                    </v-card>
-                </div>
-            </v-col>
-
-            <!-- Right Column -->
-            <v-col cols="12" md="6">
-                <div v-for="(article, index) in rightColumnArticles" :key="article.id || index" class="article">
-                    <v-card class="mb-12" elevation="0">
-                        <v-card-title>
-                            <h2 class="lg:text-sm text-xs text-wrap text-black font-bold">{{ article.title }}</h2>
-                        </v-card-title>
-                        <v-card-text>
-                            <p class="text-xs text-black">{{ article.description }}</p>
-                        </v-card-text>
-                        <v-card-actions>
-                            <v-btn icon="mdi-play" @click="toggleShow(article.id)">
-                            </v-btn>
-                            <p class="text-gray-700 lg:text-xs text-xs">Suggérer une modification de texte</p>
-                        </v-card-actions>
-
-                        <v-expand-transition>
-                            <div v-show="showStates[article.id]">
-                                <v-divider></v-divider>
-                                <p class="text-gray-500 text-xs mx-5"> La constitution des DAV ne se fera pas
-                                    seule. Chacun et
-                                    chacune sont
-                                    invité(e)s à donner le meilleur d’eux même pour assurer sa constitution,
-                                    son respect, ainsi que sa mise en application.
-                                    Soyez courtois . Tout commentaire désobligeant irrespectueux ou agressif sera
-                                    systématiquement supprimé. </p>
-
-                                <!-- Comments Section -->
-                                <v-card-text>
-                                    <v-textarea v-model="newComments[article.id]" outlined rows="2"
-                                        auto-grow></v-textarea>
-                                    <VBtnValid @click="addComment(article.id)">
-                                        Valider
-                                    </VBtnValid>
-                                </v-card-text>
-                            </div>
-                        </v-expand-transition>
-                    </v-card>
-                </div>
-            </v-col>
-        </v-row>
-        <v-row v-if="summary" class="d-flex justify-center align-center text-center">
-            <p class="text-xs text-black mb-8 px-1 text-center">{{ summary.description }}</p>
-        </v-row>
-        <v-row class="justify-center">
-            <v-col cols="12" md="6" lg="8"> <!-- Make it take more space on large screens -->
-                <v-expansion-panels variant="accordion">
-                    <v-expansion-panel v-for="(article, index) in articles" :key="article.id" class="article">
-                        <v-expansion-panel-title class="d-flex flex-column align-start" expand-icon="" collapse-icon="">
-                            <div class="d-flex align-center mb-2">
-                                <span class="mr-2">
-                                    <v-icon class="m-1 text-primary hover:text-green-500 text-xs"
-                                        @click.stop="likeArticle(article.id)">
-                                        mdi-thumb-up
-                                    </v-icon>
-                                    <p class="ml-2 lg:ml-0 text-primary">{{ article.likes }}</p>
-                                </span>
-
-                                <span class="mr-3">
-                                    <v-icon class="m-1 text-tertiary hover:text-red-500 text-xs"
-                                        @click.stop="dislikeArticle(article.id)">
-                                        mdi-thumb-down
-                                    </v-icon>
-                                    <p class="ml-2 lg:ml-0 text-tertiary">{{ article.dislikes }}</p>
-                                </span>
-                                <h2 class="text-sm text-wrap text-black font-bold m-0">
-                                    {{ article.title }}
-                                </h2>
-                            </div>
-                            <div class="d-flex align-center mt-2">
-                                <!-- Control the panel opening -->
-                                <v-icon class="mr-1">
-                                    mdi-play
-                                </v-icon>
-                                <p class="text-gray-700 text-xs ml-2">Voir les suggestions</p>
-                            </div>
-                        </v-expansion-panel-title>
-                        <v-expansion-panel-text>
                             <v-expand-transition>
+                                <div v-show="showStates[article.id]">
+                                    <v-divider></v-divider>
+                                    <p class="text-gray-500 text-xs mx-5"> La constitution des DAV ne se fera pas
+                                        seule. Chacun et
+                                        chacune sont
+                                        invité(e)s à donner le meilleur d’eux même pour assurer sa constitution,
+                                        son respect, ainsi que sa mise en application.
+                                        Soyez courtois . Tout commentaire désobligeant irrespectueux ou agressif sera
+                                        systématiquement supprimé. </p>
+
+                                    <!-- Comments Section -->
+                                    <v-card-text>
+                                        <v-textarea v-model="newComments[article.id]" outlined rows="2"
+                                            auto-grow></v-textarea>
+                                        <VBtnValid @click="addComment(article.id)">
+                                            Valider
+                                        </VBtnValid>
+                                    </v-card-text>
+                                </div>
+                            </v-expand-transition>
+                        </v-card>
+                    </div>
+                </v-col>
+
+                <!-- Right Column -->
+                <v-col cols="12" md="6">
+                    <div v-for="(article, index) in rightColumnArticles" :key="article.id || index" class="article">
+                        <v-card class="mb-12" elevation="0">
+                            <v-card-title>
+                                <h2 class="lg:text-sm text-xs text-wrap text-black font-bold">{{ article.title }}</h2>
+                            </v-card-title>
+                            <v-card-text>
+                                <p class="text-xs text-black">{{ article.description }}</p>
+                            </v-card-text>
+                            <v-card-actions>
+                                <v-btn icon="mdi-play" @click="toggleShow(article.id)">
+                                </v-btn>
+                                <p class="text-gray-700 lg:text-xs text-xs">Suggérer une modification de texte</p>
+                            </v-card-actions>
+
+                            <v-expand-transition>
+                                <div v-show="showStates[article.id]">
+                                    <v-divider></v-divider>
+                                    <p class="text-gray-500 text-xs mx-5"> La constitution des DAV ne se fera pas
+                                        seule. Chacun et
+                                        chacune sont
+                                        invité(e)s à donner le meilleur d’eux même pour assurer sa constitution,
+                                        son respect, ainsi que sa mise en application.
+                                        Soyez courtois . Tout commentaire désobligeant irrespectueux ou agressif sera
+                                        systématiquement supprimé. </p>
+
+                                    <!-- Comments Section -->
+                                    <v-card-text>
+                                        <v-textarea v-model="newComments[article.id]" outlined rows="2"
+                                            auto-grow></v-textarea>
+                                        <VBtnValid @click="addComment(article.id)">
+                                            Valider
+                                        </VBtnValid>
+                                    </v-card-text>
+                                </div>
+                            </v-expand-transition>
+                        </v-card>
+                    </div>
+                </v-col>
+            </v-row>
+            <v-row v-if="summary" class="d-flex justify-center align-center text-center">
+                <p class="text-xs text-black mb-8 px-1 text-center font-bold">{{ summary.description }}</p>
+            </v-row>
+            <v-row class="justify-center">
+                <v-col cols="12" md="6" lg="8">
+                    <v-expansion-panels variant="accordion">
+                        <v-expansion-panel v-for="(article, index) in articles" :key="article.id" class="article">
+                            <v-expansion-panel-title class="d-flex flex-column align-start" expand-icon=""
+                                collapse-icon="">
+                                <div class="flex items-center mb-0">
+                                    <!-- Like/Dislike Section -->
+                                    <div class="mr-3 flex items-center">
+                                        <v-icon class="mr-1 text-xs" size="18" color="secondary"
+                                            @click.stop="likeArticle(article.id)">
+                                            mdi-thumb-up
+                                        </v-icon>
+                                        <p class="text-gray-400 text-sm">{{ article.likes }}</p>
+
+                                        <v-icon class="mr-1 ml-2 text-xs" size="18" color="tertiary"
+                                            @click.stop="dislikeArticle(article.id)">
+                                            mdi-thumb-down
+                                        </v-icon>
+                                        <p class="text-gray-400 text-sm">{{ article.dislikes }}</p>
+                                    </div>
+                                    <h2 class="text-sm text-wrap text-black font-bold m-0">
+                                        {{ article.title }}
+                                    </h2>
+                                </div>
+                                <div class="d-flex align-center mt-2">
+                                    <!-- Control the panel opening -->
+                                    <v-icon class="mr-1">
+                                        mdi-play
+                                    </v-icon>
+                                    <p class="text-gray-700 text-xs ml-2">Voir les suggestions</p>
+                                </div>
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
                                 <v-timeline align="start" density="compact" class="ml-3">
                                     <v-timeline-item v-if="article.comments.length"
-                                        v-for="(comment, cIndex) in article.comments" :key="cIndex" dot-color="primary"
+                                        v-for="(comment, cIndex) in article.comments" :key="cIndex"
-                                        size="x-small">
+                                        dot-color="secondary" size="x-small">
-                                        <div class="mb-0">
+                                        <div class="flex items-center mb-0">
-                                            <p class="text-sm text-black">{{ comment }}</p>
+                                            <!-- Like/Dislike Section -->
+                                            <div class="mr-3 flex items-center">
+                                                <v-icon color="secondary" size="14"
+                                                    @click="likeComment(article.id, comment.id)">mdi-thumb-up</v-icon>
+                                                <span class="text-xs text-gray-400 ml-1 mr-2">{{ comment.likes }}</span>
+                                                <v-icon color="tertiary" size="14"
+                                                    @click="dislikeComment(article.id, comment.id)">mdi-thumb-down</v-icon>
+                                                <span class="text-xs text-gray-400 ml-1">{{ comment.dislikes }}</span>
+                                            </div>
+                                            <!-- Comment Content -->
+                                            <p class="text-sm text-black">{{ comment.content }}</p>
                                         </div>
                                     </v-timeline-item>
 
-                                    <v-timeline-item v-else dot-color="secondary" size="x-small">
+                                    <!-- No Comments Placeholder -->
+                                    <v-timeline-item v-else dot-color="accent" size="x-small">
                                         <p class="text-sm text-black">Aucune suggestion pour cet article</p>
                                     </v-timeline-item>
                                 </v-timeline>
-                            </v-expand-transition>
+                            </v-expansion-panel-text>
-                        </v-expansion-panel-text>
-                    </v-expansion-panel>
-                </v-expansion-panels>
-            </v-col>
-        </v-row>
 
-        <!-- Signature Section -->
+                        </v-expansion-panel>
-        <v-row class="justify-center my-8">
+                    </v-expansion-panels>
-            <v-col cols="12" md="8" lg="6">
+                </v-col>
-                <v-card elevation="3" class="pa-6 bg-gray-100" color="secondary">
+            </v-row>
-                    <v-card-title class="text-center">
-                        <h2 class="text-uppercase text-md font-semibold font-sans">Signer la Charte</h2>
-                    </v-card-title>
-                    <v-divider></v-divider>
-                    <v-card-text>
-                        <v-form @submit.prevent="submitSignature" lazy-validation class="text-xs font-sans">
-                            <v-text-field v-model="name" label="Nom complet" outlined dense hide-details
-                                :rules="[rules.required]" class="mb-2" prepend-inner-icon="mdi-account"></v-text-field>
-                            <v-text-field v-model="email" type="email" label="Email" placeholder="Entrez votre email"
-                                outlined dense hide-details :rules="[rules.required, rules.email]" class="mb-2"
-                                prepend-inner-icon="mdi-email"></v-text-field>
-                            <v-textarea v-model="comment" label="Ajouter un commentaire"
-                                placeholder="Partagez vos réflexions ou suggestions" outlined dense hide-details
-                                rows="2" class="mb-2" prepend-inner-icon="mdi-message-text"></v-textarea>
-                            <VBtnValid :disabled="!isFormValid" type="submit" block>
-                                <v-icon size="16" left>mdi-check-circle</v-icon>
-                                Signer
-                            </VBtnValid>
-                        </v-form>
 
-                    </v-card-text>
+            <!-- Signature Section -->
+            <v-row class="justify-center w-full">
+                <v-col cols="12" md="6" lg="8">
+                    <v-card elevation="3" class="pa-6 bg-gray-100" color="accent">
+                        <v-card-title class="text-center">
+                            <h2 class="text-uppercase text-md font-semibold font-sans">Signer la Charte</h2>
+                        </v-card-title>
+                        <v-divider></v-divider>
+                        <v-card-text>
+                            <v-form @submit.prevent="submitSignature" lazy-validation class="text-xs font-sans">
+                                <v-text-field v-model="name" label="Nom / prénom / pseudonyme" outlined dense
+                                    hide-details :rules="[rules.required]" class="mb-2"
+                                    prepend-inner-icon="mdi-account"></v-text-field>
+                                <v-text-field v-model="email" type="email" label="Email"
+                                    placeholder="Entrez votre email" outlined dense hide-details
+                                    :rules="[rules.required, rules.email]" class="mb-2"
+                                    prepend-inner-icon="mdi-email"></v-text-field>
+                                <v-textarea v-model="comment" label="Ajouter un commentaire"
+                                    placeholder="Partagez vos réflexions ou suggestions" outlined dense hide-details
+                                    rows="2" class="mb-2" prepend-inner-icon="mdi-message-text"></v-textarea>
+                                <VBtnValid type="submit" block>
+                                    <v-icon size="16" left>mdi-check-circle</v-icon>
+                                    Signer
+                                </VBtnValid>
+                            </v-form>
+                        </v-card-text>
+                    </v-card>
+                </v-col>
+            </v-row>
+
+            <!-- Signature Display Section -->
+            <v-row class="justify-center">
+                <v-col cols="12" md="6" lg="8">
+                    <v-expansion-panels variant="accordion">
+                        <v-expansion-panel>
+                            <v-expansion-panel-title class="d-flex flex-column align-start" expand-icon=""
+                                color="primary" collapse-icon="">
+                                <div class="text-uppercase text-l font-semibold font-sans">voir les signatures</div>
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
+                                <v-timeline align="start" density="compact">
+                                    <v-timeline-item v-for="signature in signatures" :key="signature.id"
+                                        dot-color="accent" size="x-small">
+                                        <div>
+                                            <div class="font-weight-normal font-sans text-sm">
+                                                <strong>{{ signature.name }}</strong> @{{ signature.createdAt }}
+                                            </div>
+                                            <div class="font-weight-normal font-sans text-sm">{{ signature.comment }}
+                                            </div>
+                                        </div>
+                                    </v-timeline-item>
+                                </v-timeline>
+                            </v-expansion-panel-text>
+                        </v-expansion-panel>
+                    </v-expansion-panels>
+                </v-col>
+            </v-row>
+
+            <!-- Success Overlay (Dynamic Content) -->
+            <v-overlay v-model="overlay.visible" class="d-flex align-center justify-center"
+                :style="{ background: 'rgba(0, 0, 0, 0.5)', backdropFilter: 'blur(4px)' }">
+                <v-card class="py-10 px-8 text-center" elevation="4" rounded="lg" style="max-width: 400px;">
+                    <v-icon :color="overlay.iconColor" size="48" class="mb-4">{{ overlay.icon }}</v-icon>
+                    <p class="overlay-msg text-sm font-semibold text-black text-uppercase">{{ overlay.message }}</p>
+                    <VBtnValid class="mt-6" @click="overlay.visible = false">
+                        {{ overlay.buttonText }}
+                    </VBtnValid>
                 </v-card>
-            </v-col>
+            </v-overlay>
         </v-row>
-        <!-- Success Overlay (Dynamic Content) -->
-        <v-overlay v-model="overlay" class="d-flex align-center justify-center"
-            :style="{ background: 'rgba(0, 0, 0, 0.5)', backdropFilter: 'blur(4px)' }">
-            <v-card class="py-10 px-8 text-center" elevation="4" rounded="lg" style="max-width: 400px;">
-                <v-icon :color="overlayIconColor" size="48" class="mb-4">{{ overlayIcon }}</v-icon>
-                <p class="overlay-msg text-sm font-semibold text-black text-uppercase">{{ overlayMessage }}</p>
-                <VBtnValid class="mt-6" @click="overlay = false">
-                    {{ overlayButtonText }}
-                </VBtnValid>
-            </v-card>
-        </v-overlay>
     </v-container>
 </template>
 
@@ -199,6 +248,11 @@
 import { ref, onMounted } from 'vue';
 import { useAsyncData } from 'nuxt/app';
 
+import Loader from '~/components/Loader.vue';
+import { updateLikeDislike } from '~/lib/likes.ts';
+import { fetchArticlesData, fetchCommentsData, fetchSignatures } from '~/lib/fetchers';
+import { showOverlay } from '~/lib/overlayHandler';
+
 definePageMeta({
     layout: 'default',
 });
@@ -210,7 +264,6 @@ const rightColumnArticles = ref([]);
 const showStates = ref({});
 const introduction = ref(null);
 const summary = ref(null);
-
 const signatures = ref([]);
 // Form fields
 const name = ref('');
@@ -218,12 +271,15 @@ const email = ref('');
 const comment = ref('');
 
 const isFormValid = computed(() => name.value && email.value);
+const isLoading = ref(true);
 
-const overlay = ref(false);
+const overlay = ref({
-const overlayIcon = ref('mdi-check-circle'); // Default icon
+    icon: '',
-const overlayMessage = ref('Votre suggestion à été ajoutée avec succès'); // Default message
+    message: '',
-const overlayButtonText = ref('Continuer'); // Default button text
+    buttonText: '',
-const overlayIconColor = ref('success');
+    iconColor: '',
+    visible: false,
+})
 
 const rules = {
     required: (value) => !!value || "Ce champ est obligatoire.",
@@ -235,178 +291,194 @@ const toggleShow = (articleId) => {
 };
 
 // Fetch articles data
-const { data: contentData, error } = await useAsyncData("content", () =>
+const fetchContent = async () => {
-    queryContent().find()
+    try {
-);
+        const { data: contentData, error } = await useAsyncData('content', () =>
+            queryContent().find()
+        );
 
-// Process fetched content
+        // Process fetched content
-if (!error.value && contentData.value) {
+        if (!error.value && contentData.value) {
-    for (const file of contentData.value) {
+            for (const file of contentData.value) {
-        if (file.type === "intro") {
+                if (file.type === "intro") {
-            introduction.value = file;
+                    introduction.value = file;
-        } else if (file.type === "article") {
+                } else if (file.type === "article") {
-            try {
+                    const article = {
-                // Add default values (likes, dislikes, comments) if missing
+                        id: file.id,
-                const article = {
+                        title: file.title,
-                    id: file.id,
+                        description: file.description,
-                    title: file.title,
+                        likes: file.likes || 0,
-                    description: file.description,
+                        dislikes: file.dislikes || 0,
-                    likes: file.likes || 0,
+                        comments: file.comments || [],
-                    dislikes: file.dislikes || 0,
+                    };
-                    comments: file.comments || [],
-                };
 
-                // Add the article locally
+                    // Add the article locally
-                articles.value.push(article);
+                    articles.value.push(article);
 
-                await $fetch('/api/articles', {
+                    await $fetch('/api/articles', {
-                    method: 'POST',
+                        method: 'POST',
-                    body: {
+                        body: {
-                        id: article.id,
+                            id: article.id,
-                        title: article.title,
+                            title: article.title,
-                        description: article.description,
+                            description: article.description,
-                        likes: article.likes,
+                            likes: article.likes,
-                        dislikes: article.dislikes,
+                            dislikes: article.dislikes
-                        comments: article.comments,
+                        },
-                    },
+                    });
-                });
+                } else if (file.type === "summary") {
-            } catch (err) {
+                    summary.value = file;
-                console.error('Error creating article:', err);
+                }
             }
-        } else if (file.type === "summary") {
-            summary.value = file;
         }
+        // Split articles into left and right columns
+        // leftColumnArticles.value = articles.value.filter((_, index) => index % 2 === 0);
+       // rightColumnArticles.value = articles.value.filter((_, index) => index % 2 !== 0);
+        // Split articles into two columns (assuming a 50% split)
+        const midIndex = Math.ceil(articles.value.length / 2);
+        leftColumnArticles.value = articles.value.slice(0, midIndex);
+        rightColumnArticles.value = articles.value.slice(midIndex);
+        // Initialize newComments object based on article IDs
+        articles.value.forEach(article => {
+            newComments.value[article.id] = '';
+        });
     }
-
+    catch (err) {
-    // Initialize newComments object based on article IDs
+        console.error('Error fetching content:', err);
-    articles.value.forEach(article => {
+    } finally {
-        newComments.value[article.id] = '';
+        isLoading.value = false;
-    });
+    }
-
+};
-    // Split articles into two columns (assuming a 50% split)
-    const midIndex = Math.ceil(articles.value.length / 2);
-    leftColumnArticles.value = articles.value.slice(0, midIndex);
-    rightColumnArticles.value = articles.value.slice(midIndex);
-}
 
 onMounted(async () => {
-    try {
+    await fetchContent()
-        const response = await $fetch(`/api/articles`, {
+    await fetchArticlesData(articles);
-            method: 'GET',
+    await fetchCommentsData(articles);
-        });
+    await fetchSignatures(signatures);
-
-        if (response.success && response.data) {
-            // Update the articles array by merging data from the response
-            articles.value = articles.value.map((article) => {
-                const updatedArticle = response.data.find((data) => data.id === article.id);
-                return updatedArticle
-                    ? {
-                        ...article,
-                        likes: updatedArticle.likes,
-                        dislikes: updatedArticle.dislikes,
-                        comments: updatedArticle.comments,
-                    }
-                    : article;
-            });
-        } else {
-            console.error('Failed to fetch articles:', response.message || 'Unknown error');
-        }
-    } catch (error) {
-        console.error('Error fetching articles:', error);
-    }
 });
 
+const likeArticle = (articleId) => {
+    updateLikeDislike({
+        type: 'article',
+        action: 'like',
+        id: articleId,
+        articles,
+    });
+};
 
-const likeArticle = async (articleId) => {
+const dislikeArticle = (articleId) => {
-    const article = articles.value.find((a) => a.id === articleId);
+    updateLikeDislike({
-    if (!article) return;
+        type: 'article',
-    article.likes += 1;
+        action: 'dislike',
+        id: articleId,
+        articles,
+    });
+};
 
-    try {
+const likeComment = (articleId, commentId) => {
-        await $fetch(`/api/articles/${articleId}`, {
+    updateLikeDislike({
-            method: 'PUT',
+        type: 'comment',
-            body: { likes: article.likes },
+        action: 'like',
-        });
+        id: commentId,
+        articleId,
+        articles,
+    });
+};
 
-        console.log('Article updated successfully');
+const dislikeComment = (articleId, commentId) => {
-    } catch (error) {
+    updateLikeDislike({
-        console.error('Error in likeArticle:', error);
+        type: 'comment',
-    }
+        action: 'dislike',
-};;
+        id: commentId,
-
+        articleId,
-
+        articles,
-const dislikeArticle = async (articleId) => {
+    });
-    const article = articles.value.find((a) => a.id === articleId);
-    if (!article) return;
-    article.dislikes += 1;
-
-    try {
-        await $fetch(`/api/articles/${articleId}`, {
-            method: 'PUT',
-            body: { dislikes: article.dislikes },
-        });
-
-        console.log('Article updated successfully');
-    } catch (error) {
-        console.error('Error in dislikeArticle:', error);
-    }
 };
 
 const addComment = async (articleId) => {
     const commentText = newComments.value[articleId]?.trim();
     if (!commentText) return;
 
-    const article = articles.value.find((a) => a.id === articleId);
-    article.comments.push(commentText);
-    newComments.value[articleId] = '';
-
-    overlayIcon.value = 'mdi-check-circle';
-    overlayMessage.value = `Merci pour votre suggestion. Veuillez la consulter tout en descendant vers le bas de la page`;
-    overlayButtonText.value = 'Continuer';
-    overlayIconColor.value = 'success';
-    overlay.value = true;
     try {
-        await $fetch(`/api/articles/${article.id}`, {
+        const response = await $fetch('/api/comments', {
-            method: 'PUT',
+            method: 'POST',
-            body: { comments: article.comments },
+            body: {
+                content: commentText,
+                articleId,
+                likes: 0,
+                dislikes: 0,
+            },
         });
 
-        console.log('Comment added successfully');
+        if (response.success) {
+            const article = articles.value.find((a) => a.id === articleId);
+            if (article) {
+                article.comments.push({
+                    id: response.data.id,
+                    content: commentText,
+                    likes: 0,
+                    dislikes: 0,
+                });
+            }
+
+            // Reset the input field for the current article
+            newComments.value[articleId] = '';
+
+            // Display success overlay 
+            showOverlay(
+                {
+                    icon: 'mdi-check-circle',
+                    message: `Merci pour votre suggestion. Veuillez la consulter tout en descendant vers le bas de la page.`,
+                    buttonText: 'Continuer',
+                    iconColor: 'success',
+                },
+                overlay
+            );
+            console.log('Comment added successfully');
+        } else {
+            console.error('Failed to add comment:', response.message);
+        }
     } catch (error) {
         console.error('Error in addComment:', error);
     }
 };
 
 const submitSignature = async () => {
-    const signatureData = {
+    if (isFormValid.value) {
-        name: name.value,
+        const signatureData = {
-        email: email.value,
+            name: name.value,
-        comment: comment.value,
+            email: email.value,
-    };
+            comment: comment.value,
-    signatures.value.push({ ...signatureData });
+        };
-    try {
+        signatures.value.push({ ...signatureData });
-        await $fetch('/api/charte', {
+        try {
-            method: 'POST',
+            await $fetch('/api/charte', {
-            headers: {
+                method: 'POST',
-                'Content-Type': 'application/json'
+                headers: {
-            },
+                    'Content-Type': 'application/json'
-            body: JSON.stringify(signatureData)
+                },
-        })
+                body: JSON.stringify(signatureData)
-        console.log('Charte is submitted successfully');
+            })
-    } catch (error) {
+            // Display success overlay using the reusable function
-        console.error('Error in submit signature:', error);
+            showOverlay(
-    }
+                {
-    overlayIcon.value = 'mdi-check-circle';
+                    icon: 'mdi-check-circle',
-    overlayMessage.value = `Merci pour votre signature ${name.value}`
+                    message: `Merci pour votre signature ${name.value}`,
-    overlayButtonText.value = 'Continuer';
+                    buttonText: 'Continuer',
-    overlayIconColor.value = 'success';
+                    iconColor: 'success',
-    overlay.value = true;
+                },
-    name.value = '';
+                overlay
-    email.value = '';
+            )
-    comment.value = '';
+            name.value = '';
+            email.value = '';
+            comment.value = '';
+            console.log('Charte is submitted successfully');
+        } catch (error) {
+            console.error('Error in submit signature:', error);
+        }
+    } return;
 };
-
 </script>
+
 <style scoped>
 .video-section {
     position: relative;
@@ -429,6 +501,7 @@ h1 {
 
 p {
     font-family: "Times New Roman", Times, serif;
+    white-space: pre-wrap;
 }
 
 .v-expansion-panel-title {
@@ -451,4 +524,8 @@ p {
     min-width: 40px;
     line-height: 1.2;
 }
+
+.v-icon:hover {
+    opacity: 0.5;
+}
 </style>

plugins/vuetify.ts

@@ -1,38 +0,0 @@
-// import this after install `@mdi/font` package
-import '@mdi/font/css/materialdesignicons.css'
-
-import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
-import { VBtn } from 'vuetify/components';
-
-export default defineNuxtPlugin((app) => {
-  const vuetify = createVuetify({
-     theme: {
-      themes: {
-        light: {
-          colors: {
-            primary: '#A7D129',
-            secondary: '#686D76',
-            tertiary: '#BE3737',
-            tangerine: '#EC8F67ff',
-            accent: '#000000',
-          },
-        },
-      },
-    },
-   aliases: {
-      VBtnValid: VBtn,
-    },
-    defaults: {
-      VBtn: {
-        color: 'accent',
-        class: 'custom-btn', 
-      },
-      VBtnValid: {
-        color: 'primary',
-        class: 'custom-btn',
-      },
-    },
-  });
-  app.vueApp.use(vuetify)
-})

prisma/migrations/20241222124646_dav/migration.sql

@@ -0,0 +1,24 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `comments` on the `Article` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Article" DROP COLUMN "comments";
+
+-- CreateTable
+CREATE TABLE "Comment" (
+    "id" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "likes" INTEGER NOT NULL DEFAULT 0,
+    "dislikes" INTEGER NOT NULL DEFAULT 0,
+    "articleId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Comment_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Comment" ADD CONSTRAINT "Comment_articleId_fkey" FOREIGN KEY ("articleId") REFERENCES "Article"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/schema.prisma

@@ -8,14 +8,25 @@ datasource db {
 }
 
 model Article {
-  id          String   @id @default(uuid())
+  id          String     @id @default(uuid())
   title       String
   description String
-  likes       Int      @default(0)
+  likes       Int        @default(0)
-  dislikes    Int      @default(0)
+  dislikes    Int        @default(0)
-  comments    String[] @default([]) 
+  comments    Comment[] 
-  createdAt   DateTime @default(now())
+  createdAt   DateTime   @default(now())
-  updatedAt   DateTime @updatedAt
+  updatedAt   DateTime   @updatedAt
+}
+
+model Comment {
+  id          String     @id @default(uuid())
+  content     String
+  likes       Int        @default(0)
+  dislikes    Int        @default(0)
+  articleId   String     // Foreign key for the related article
+  article     Article    @relation(fields: [articleId], references: [id]) // Define relationship
+  createdAt   DateTime   @default(now())
+  updatedAt   DateTime   @updatedAt
 }
 
 model Charte {

public/robots.txt

@@ -1 +0,0 @@
-

server/api/articles/[id].get.ts

@@ -2,14 +2,18 @@ import prisma from '~/lib/prisma';
 
 export default defineEventHandler(async (event) => {
   const id = event.context.params?.id;
-console.log('prisma' + event.context.params?.id)
+
   try {
-    const article = await prisma.article.findUnique({ where: { id } });
+    const article = await prisma.article.findUnique({
+      where: { id },
+      include: { comments: true }, 
+    });
 
     if (!article) {
       return {
         success: false,
         data: null,
+        message: 'Article not found.',
       };
     }
 

server/api/articles/[id].put.ts

@@ -4,7 +4,7 @@ export default defineEventHandler(async (event) => {
   const id = event.context.params?.id;
   const body = await readBody(event);
 
-  if (!id ) {
+  if (!id) {
     return {
       success: false,
       message: 'Invalid article ID.',
@@ -15,19 +15,19 @@ export default defineEventHandler(async (event) => {
     const updatedArticle = await prisma.article.update({
       where: { id },
       data: {
-        id: body.id,
         title: body.title,
         description: body.description,
         likes: body.likes,
         dislikes: body.dislikes,
-        comments: body.comments,
       },
     });
+
     return {
       success: true,
       data: updatedArticle,
     };
   } catch (error) {
+    console.error('Error updating article:', error);
     return {
       success: false,
       error: error.message,

server/api/articles/index.get.ts

@@ -2,7 +2,9 @@ import prisma from '~/lib/prisma';
 
 export default defineEventHandler(async (event) => {
   try {
-    const articles = await prisma.article.findMany(); 
+    const articles = await prisma.article.findMany({
+      include: { comments: true }, 
+    });
 
     if (!articles || articles.length === 0) {
       return {

server/api/articles/index.post.ts

@@ -3,16 +3,14 @@ import prisma from '~/lib/prisma';
 export default defineEventHandler(async (event) => {
   try {
     const body = await readBody(event);
-    const { id, title, description, likes, dislikes, comments } = body;
+    const { title, description, likes, dislikes } = body;
 
     const newArticle = await prisma.article.create({
       data: {
-        id,
         title,
         description,
         likes: likes || 0,
         dislikes: dislikes || 0,
-        comments: comments || [],
       },
     });
 

server/api/charte/index.get.ts

@@ -0,0 +1,26 @@
+import prisma from '~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  try {
+    const chartes = await prisma.charte.findMany(); 
+
+    if (!chartes || chartes.length === 0) {
+      return {
+        success: false,
+        data: null, 
+        message: 'No chartes found.',
+      };
+    }
+
+    return {
+      success: true,
+      data: chartes,
+    };
+  } catch (error) {
+    console.error('Error fetching chartes:', error);
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+});

server/api/comments/[id].delete.ts

@@ -0,0 +1,30 @@
+import prisma from '~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const id = event.context.params?.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: 'Invalid comment ID.',
+    };
+  }
+
+  try {
+    await prisma.comment.delete({
+      where: { id },
+    });
+
+    return {
+      success: true,
+      message: 'Comment deleted successfully',
+    };
+  } catch (error) {
+    console.error('Error deleting comment:', error);
+    return {
+      success: false,
+      message: 'An error occurred while deleting the comment',
+      error: error.message,
+    };
+  }
+});

server/api/comments/[id].put.ts

@@ -0,0 +1,37 @@
+import prisma from '~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const id = event.context.params?.id;
+  const body = await readBody(event);
+
+  if (!id) {
+    return {
+      success: false,
+      message: 'Invalid comment ID.',
+    };
+  }
+
+  try {
+    const updatedComment = await prisma.comment.update({
+      where: { id },
+      data: {
+        content: body.content,
+        likes: body.likes,
+        dislikes: body.dislikes,
+      },
+    });
+
+    return {
+      success: true,
+      message: 'Comment updated successfully',
+      data: updatedComment,
+    };
+  } catch (error) {
+    console.error('Error updating comment:', error);
+    return {
+      success: false,
+      message: 'An error occurred while updating the comment',
+      error: error.message,
+    };
+  }
+});

server/api/comments/index.get.ts

@@ -0,0 +1,24 @@
+import prisma from '~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event);
+  const { articleId } = query;
+
+  try {
+    const comments = await prisma.comment.findMany({
+      where: articleId ? { articleId: String(articleId) } : undefined,
+    });
+
+    return {
+      success: true,
+      data: comments,
+    };
+  } catch (error) {
+    console.error('Error fetching comments:', error);
+    return {
+      success: false,
+      message: 'An error occurred while fetching comments',
+      error: error.message,
+    };
+  }
+});

server/api/comments/index.post.ts

@@ -0,0 +1,37 @@
+import prisma from '~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  try {
+    const body = await readBody(event);
+    const { content, articleId, likes, dislikes } = body;
+
+    if (!content || !articleId) {
+      return {
+        success: false,
+        message: 'Content and articleId are required to create a comment.',
+      };
+    }
+
+    const newComment = await prisma.comment.create({
+      data: {
+        content,
+        articleId,
+        likes: likes || 0,
+        dislikes: dislikes || 0,
+      },
+    });
+
+    return {
+      success: true,
+      message: 'Comment created successfully',
+      data: newComment,
+    };
+  } catch (error) {
+    console.error('Error creating comment:', error);
+    return {
+      success: false,
+      message: 'An error occurred while creating the comment',
+      error: error.message,
+    };
+  }
+});