From d9852562caefd65f7a5a975e926ed9f793ed9b19 Mon Sep 17 00:00:00 2001 From: Julie Thezenas <julie@lydra.fr> Date: Mon, 16 May 2022 12:24:25 +0200 Subject: [PATCH] doc: add discourse cli on doc --- README.md | 5 ++++ doc/README_theme.md | 24 +++++++++++++++++ doc/configuration.md | 24 ++++++++++------- doc/discourse_theme_cli.md | 54 ++++++++++++++++++++++++++++++++++++++ readme_configuration.md | 20 -------------- 5 files changed, 98 insertions(+), 29 deletions(-) create mode 100644 doc/README_theme.md create mode 100644 doc/discourse_theme_cli.md delete mode 100644 readme_configuration.md diff --git a/README.md b/README.md index a06d7c9..1581399 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,11 @@ Ce thème à besoin de composants et de plugins pour être pleinement fonctionne ## Configuration Après l'installation du thème vous aurez besoin de le configurer correctement, voir [la section configuration](doc/configuration.md). + +## discourse CLI + +Pour créer/modifier ses propres thèmes et composants, Discourse Theme CLI utilise la synchronicité. On peut voir à distance les modifications apportée dans notre thème/composant local, et ce, en simultané ! Voir [la section discourse theme cli](doc/discourse_theme_cli.md). + ## Licence [](https://choosealicense.com/licenses/gpl-3.0/) diff --git a/doc/README_theme.md b/doc/README_theme.md new file mode 100644 index 0000000..656fc6f --- /dev/null +++ b/doc/README_theme.md @@ -0,0 +1,24 @@ +# Discourse Thème Community +#### Le thème Community se compose de plusieurs composants déjà inclus dans le fichier **about.json**. + +- **Versatile Banner** +Bannière de trois images avec du texte de présentation - Option plier / Déplier +- **Categories Layout Override** +Boîtes de présentation des catégories +- **Showcase Categories** +Deux boîtes qui présentent des catégories +- **Easy Footer** +Pied de page avec vos liens +- **Category Icons** +Les icones de vos catégories s'affichent +- **DiscoTOC** +Ajouter une option Tables des matières lors de la rédaction de topic +- **discourse-category-banners** +Ajouter une bannière de présentation dans chaque catégories +- **Discourse Loading Slider** +Barre de chargement horizontale +- **Icon Header Links** +Ajout de logo / icones en haut du site : Instagram, Gitlab, YouTube,... + +--- +### Configuration diff --git a/doc/configuration.md b/doc/configuration.md index 2002812..3e1f99b 100644 --- a/doc/configuration.md +++ b/doc/configuration.md @@ -6,7 +6,7 @@ Les couleurs par défaut peuvent être modifier avec votre palette de couleurs dans `Customize / Colors`. Pour plus d'information sur les palettes de couleurs [voir ici](https://meta.discourse.org/t/how-to-create-and-share-a-color-scheme/61196). -**Trois composants sont utilisés dans notre thème :** +**Le thème s'inspire de trois composants :** - _Versatile Banner_ - _Categories boxes_ @@ -14,14 +14,14 @@ Les couleurs par défaut peuvent être modifier avec votre palette de couleurs d ### Bannière _How to begin ?_ -C'est le composant **_Versatile Banner_** qui est utilisé pour cette banière. +C'est le composant **_Versatile Banner_** qui est utilisé pour cette bannière. - Doc : https://meta.discourse.org/t/versatile-banner/109133 - Dépôt : https://github.com/tshenry/discourse-versatile-banner.git #### Configuration -La bannière s'affiche pour tout le monde et il est possible de la masquer mais pas de l'enlever. +La bannière s'affiche pour tout le monde / possibilité de la masquer. Elle apparaît sur les pages : - `/latest` @@ -34,11 +34,11 @@ Elle apparaît sur les pages : - `/c/*` - `/t/*` -Il n'y a pas de fond ni d'image de fond, il est néanmoins possible d'en ajouter. +Pas d'image de fond, mais possible d'en ajouter. -Ensuite il faut configuer le contenu de la bannière : texte, images dans chaque colonnes en ecrivant le code HTML. +Ensuite il faut configuer le contenu de la bannière : texte, images dans chaque colonnes. -Pour personnaliser les images de la banière, il faut les ajouter dans la categorie accessible uniquement par [les responsables](https://meta.discourse.org/t/upload-image-in-discourse/141504/4). +Pour personnaliser les images de la bannière, il faut les ajouter dans la categorie accessible uniquement par [les responsables](https://meta.discourse.org/t/upload-image-in-discourse/141504/4). Pour se faire, créez un post avec une image dans la catégorie _staff_ (privée). parcourir le post créée qui affiche l'image et faite un clic droit pour **copier le lien de l'image**. Puis, coller ce lien dans la page configuration du composant, section `Column Icons`. [Pour plus d'information voir ici](https://meta.discourse.org/t/upload-image-in-discourse/141504/4) @@ -47,18 +47,17 @@ Pour se faire, créez un post avec une image dans la catégorie _staff_ (privée ### Categories boxes -Ce composant est inspiré du composant **_Categories Layout Override_**. C'est luis qui affiche les boîtes de categories. +Ce composant est inspiré du composant **_Categories Layout Override_** qui affiche les boîtes de categories. - Doc : https://meta.discourse.org/t/categories-layout-override/131098 - Dépôt : https://github.com/tshenry/discourse-categories-layout-override -- [ ] TODO mettre le lien de notre dépot --- ### Category post -Le composant **_Showcased Categories_** présente deux boîtes avec une liste de 4 postes. +Le composant est inspiré de **_Showcased Categories_** présentant deux boîtes avec une liste de 4 postes. - Doc : https://meta.discourse.org/t/showcased-categories-theme-component/173524 - Dépôt : https://github.com/discourse/discourse-showcased-categories.git @@ -66,3 +65,10 @@ Le composant **_Showcased Categories_** présente deux boîtes avec une liste de #### Configuration Défini la taille en nombre de post maximum du contenu des boîtes et les catégories qui seront dans les boites contenu : _Latest_ et _Top_. + + +## Licence + +[](https://choosealicense.com/licenses/gpl-3.0/) + +**community-theme** is maintained by [Lydra](https://lydra.fr/) and released under the GPL3 license. diff --git a/doc/discourse_theme_cli.md b/doc/discourse_theme_cli.md new file mode 100644 index 0000000..6d71449 --- /dev/null +++ b/doc/discourse_theme_cli.md @@ -0,0 +1,54 @@ +# Comment utiliser le Discourse theme CLI ? + +## Utilité + +__Discourse theme CLI offre une synchronicité entre son travail en local, et le rendu à distance.__ + +#### 1 - Installation + +Ressources sur [Discourse Theme CLI.](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) + +Avant toute chose, il faudra générer une clé API dans Discourse, et on enregistre une clé API par thème. + +Le Theme CLI est utilisé via __Ruby 2.2__ au minimum. Il faut donc l'installer et mettre à jour sa version de Ruby. + +Une fois cette étape réalisée, on installe le Discourse dans son local. + +```shell +gem install discourse_theme +``` + +#### 2 - Utilisation + +Une fois que le CLI est lancé, Discourse va nous proposer plusieurs options : + +- Créer un nouveau thème via le discourse CLI : + +```shell +discourse_theme new MON_NOUVEAU_THEME +``` + +- Modifier un thème ou un composant existant sur notre Discourse en local, et user de la synchronicité. Pour se faire, on doit se retrouver à la racine du dossier dans notre répertoire, et lancer le watch. +Exemple : + +```shell +discourse_theme watch component-community-fonts +``` + +- Dernière option : télécharger un thème existant sur le Discourse distant, puis le watch : + +```shell +discourse_theme download MON_THEME +``` + +#### 3 - Bon à savoir + +Ça y est ! Vous utilisez Discourse CLI et vous avez la possibilité de créer ou de watch des thèmes et des composants. + +__Note : il n'est pas possible de regarder plusieurs thèmes/composants en simultané. +Exemple :__ + +```shell +discourse_theme watch component-community-fonts community-theme component-colors +``` +Ceci génèrera une erreur, alors nous procédons élément par élément. diff --git a/readme_configuration.md b/readme_configuration.md deleted file mode 100644 index 9e34e5e..0000000 --- a/readme_configuration.md +++ /dev/null @@ -1,20 +0,0 @@ -# Installation du thème - -## Configuration - -Après avoir installer le thème, suivre les étapes de configurations suivantes : - -#### Palette de couleurs -**Option 1** Télécharger le dépôt pour importer la palette. -- la palette va s'installer dans le thème et ajouter un composant fonts. -- - -**Option 2** Créer une palette manuellement dans **color** pour créer sa ***palette de couleurs*** en partant d'une palette existante. -- Copier la palette existante et faire ses modifications. - -- Ajouter sa ***palette de couleurs*** dans son thème : section **color palette**. - -#### Installer une police de caractère - -- Les fonts sont installées grace au fichier about.json du dépôt. -- On peut aussi installer des fonts existantes du Discourse, depuis **Admin/Settings/Basic Setup.** -- GitLab