From 7ccb16fc16f3e4d8f9774bec4ef29d8d24016d72 Mon Sep 17 00:00:00 2001 From: Arnaud Levy <contact@arnaudlevy.com> Date: Tue, 15 Feb 2022 09:36:40 +0100 Subject: [PATCH] docs --- docs/communication/websites/blocks.md | 67 ++++++++++++ docs/communication/websites/customs.md | 34 +++++++ docs/communication/websites/wysiwyg.md | 135 +++++++++++++++++++++++++ 3 files changed, 236 insertions(+) create mode 100644 docs/communication/websites/blocks.md create mode 100644 docs/communication/websites/customs.md create mode 100644 docs/communication/websites/wysiwyg.md diff --git a/docs/communication/websites/blocks.md b/docs/communication/websites/blocks.md new file mode 100644 index 000000000..0f74062a5 --- /dev/null +++ b/docs/communication/websites/blocks.md @@ -0,0 +1,67 @@ +# Blocks + +Blocs de contenus ajoutés à un objet (page, post, program...), +avec des templates (organigramme, partenaires...). + +Il faut lister les dépendances des blocs et les ajouter à l'objet about. + +## Dev + +### Model + +``` +communication/website/Block +- university:references +- website:references +- about:references (polymorphic) +- template:integer (enum) +- data:jsonb +``` + +Pour commencer, les valeurs de l'enum seront : +- 100, organization_chart +- 200, partners + +### Partial about +Un partial que l'on peut ajouter à un show d'objet, avec : +- la liste des blocs utilisés (avec boutons show et edit) +- la possibilité de les sort +- un bouton pour ajouter un bloc + +``` +views/admin/communication/website/blocks/_list.html.erb +``` + +### Show +Le show du bloc utilise le partial de son template +``` +views/admin/communication/website/blocks/templates/partners/_show.html.erb +``` + +### Edit +L'edit du bloc utilise le partial de son template +``` +views/admin/communication/website/blocks/templates/partners/_edit.html.erb +``` + +### Concern +Tous les objets ayant des blocs utilisent le concern `WithBlocks`, qui ajoute la méthode suivante `blocks` (la liste des blocs, dans l'ordre). + +### Export statique +Les blocs sont exportés dans le frontmatter grâce au partial +``` +views/admin/communication/website/blocks/_static.html.erb +``` +qui donne ce type de résultat +``` +blocks: + - kind: partners + data: + - name: Partner 1 + url: https://partner1.com + logo: "e09f3794-44e5-4b51-be02-0e384616e791" +``` +Les générateurs de chaque type suivent l'organisation : +``` +views/admin/communication/website/blocks/templates/partners/_static.html.erb +``` diff --git a/docs/communication/websites/customs.md b/docs/communication/websites/customs.md new file mode 100644 index 000000000..7f506fdad --- /dev/null +++ b/docs/communication/websites/customs.md @@ -0,0 +1,34 @@ +# Customs + +## communication/website/custom/Type + +- university:references +- website:references +- name:string +- identifier:string +- position:integer +- order:boolean +- tree:boolean +- date:boolean + +## communication/website/custom/type/Property + +- university:references +- website:references +- type:references +- name:string +- kind:integer (enum) +- position + +## communication/website/custom/Element + +- university:references +- website:references +- type:references +- name:string +- slug:string +- published:boolean +- published_at:datetime +- parent:references +- position:integer +- data:jsonb diff --git a/docs/communication/websites/wysiwyg.md b/docs/communication/websites/wysiwyg.md new file mode 100644 index 000000000..43a4073f8 --- /dev/null +++ b/docs/communication/websites/wysiwyg.md @@ -0,0 +1,135 @@ +# WYSIWYG + +## Quels enjeux ? + +Permettre l'édition, mais limiter les options graphiques (ni couleurs, ni tailles, ni typos). + +Fonctionnalités : +- intégration d'images dans le corps du texte, en gardant la trace du blob active storage, et en les intégrant dans la liste des dépendances. +- intégration de vidéos. +- intégration d'autres formats (Tweets...). + +## Solutions techniques + +### ActionText + +Avantages : +- active storage intégré +- Trix intégré + +Inconvénients : +- Pas de modèle (polymorphic) + +### Trix + +Avantages : +- intégré à ActionText +- très limité + +Inconvénients : +- très limité (target blank, 1 seul niveau de titre, pas d'embed, pas de code source) +- pas extensible + +### Summernote + +Avantages : +- vaste +- extensible + +Inconvénients : +- dépendance jQuery +- pas intégré à ActionText +- moyennement robuste quand on le torture + +### Page builder custom + +Avantages : +- puissant +- souple + +Inconvénients : +- compliqué à construire et maintenir +- compliqué à utiliser + + +## Benchmark + +[Refinery](https://www.refinerycms.com/) + + +[Spina](https://spinacms.com/) + + +[Alchemy CMS](https://alchemy-cms.com/) + + +[Locomotive CMS](https://www.locomotivecms.com/) + + +## Méthode + +### action-text-attachment + +Dans la BDD, on stocke cette balise : +``` +<action-text-attachment sgid="BAh[...]1df3" + content-type="image/jpeg" + url="http://demo.osuny:3000/rails/active_storage/blobs/redirect/eyJf[...]0f4a1/domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg" filename="domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg" + filesize="352931" + width="588" + height="746" + previewable="true" + presentation="gallery"> +</action-text-attachment> +``` + +A l'édition, la balise est "remplie" avant affichage, pour avoir une preview. +A l'enregistrement, la balise est vidée. + +Etapes normales +-[x] A l'import d'une image, ajouter l'action-text-attachement autour de l'img +-[ ] A la suppression d'une image dans l'éditeur, supprimer l'action-text-attachement autour de l'img +-[x] A l'enregistrement, déshydrater les action-text-attachements +-[x] A l'édition, réhydrater les action-text-attachements +-[ ] Après l'enregistrement mettre à jour les blobs attachés à l'objet parent (le post, par exemple) + +Si un programme a 5 champs Summernote avec 3 images dans chaque champ, cela fait 15 attachments à lier au programme. +Si on enlève une image d'un champ, il faut mettre à jour la liste pour avoir les 14 bons attachments. + +Actions de dev +-[ ] Coder les ajouts aux modèles dans Osuny +-[ ] Coder le JS dans Osuny +-[ ] Une fois que c'est fait, déplacer le Ruby et le JS dans summernote-rails + +Migration phase 1 +-[x] Ajouter des champs _new +-[x] Au rails app:fix, transformer le markup Trix en markup Summernote (application_record) dans les propriétés _new +Migration phase 2 +-[ ] Supprimer les champs ActionText dans les modèles +-[ ] Supprimer la table d'ActionText +-[ ] Renommer les champs en enlevant _new + +### Le pdf + +Autoriser dans summernote + +### Code HTML cible + +``` +<h2>Titre</h2> +<p> + Texte normal<br> + <b>Texte en gras</b><br> + <i>Texte en italique</i> + <action-text-attachment sgid="BAh7CEkiCGdpZAY6BkVUSSJUZ2lkOi8vb3N1bnkvQWN0aXZlU3RvcmFnZTo6QmxvYi9hYWUyNDI5OC1kNDE2LTQ2YWMtYTRlNS02ZjY4ZGU2MjFiZDE_ZXhwaXJlc19pbgY7AFRJIgxwdXJwb3NlBjsAVEkiD2F0dGFjaGFibGUGOwBUSSIPZXhwaXJlc19hdAY7AFQw--7e8ead4d79f455499f1d73e8d53a4b8e81a21df3" content-type="image/jpeg" url="http://demo.osuny:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibW...df8140070f4a1/domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg?website_id=6d8fb0bb-0445-46f0-8954-0e25143e7a58" filename="domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg" filesize="352931" width="588" height="746" previewable="true" presentation="gallery"> + <figure class="attachment attachment--preview attachment--jpg"> + <picture> + <source srcset="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOns...XJpYXRpb24ifX0=--7d11fdd26322fef8959415f46d5e2c6d6763b4c0/domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg 100w, /rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaE...527eb11f95949a389acb1c/domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg 200w" type="image/webp"> + <source srcset="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibW...9fd77765da7c4f647d453b2/domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg?website_id=6d8fb0bb-0445-46f0-8954-0e25143e7a58 100w, /rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibW...bb3bc14127bc06ce0d1e32/domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg?website_id=6d8fb0bb-0445-46f0-8954-0e25143e7a58 200w" type="image/jpeg"> + <img src="/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsi...190ffccd8/domenico_bruno_de_lobkowitz_watchingwindows_com_08.jpg?website_id=6d8fb0bb-0445-46f0-8954-0e25143e7a58" loading="lazy" decoding="async" width="800"> + </picture> + </figure> + </action-text-attachment> + <a href="https://www.u-bordeaux-montaigne.fr/fr/actualites/vie-etudiante/soutenir-les-etudiant-e-s-les-aides-de-l-universite.html">Lien</a> +</p> +``` -- GitLab