diff --git a/README.md b/README.md index 525ecfc953c610520bf02d1ab8cb537aafa2a464..61085c5e0ffe8548a47e0bce049d22e28386c0bd 100644 --- a/README.md +++ b/README.md @@ -1,138 +1,21 @@ # Community-theme -## Plugins -Ce thème utilise les plugins ci-dessous, pensez à les installer avant d'installer ce thème. -### One year anniversary +Ce thème est inspiré du thème [**_Mint_**](https://meta.discourse.org/t/mint-a-modern-theme-for-discourse/202822). Il est dédié à la la gestion de communautés en ligne. -Lors des un an de votre post, recevez une notification pour repartager celui-ci à votre communauté. +## Prérequis -- Doc : https://meta.discourse.org/t/discourse-yearly-review-plugin/105713 -- Dépôt : https://github.com/discourse/discourse-yearly-review +Le thème Community se compose de plusieurs composants déjà inclus dans le fichier **about.json**. Il a aussi besoin de plugins que vous devrez installer pour être pleinement fonctionnels, pour plus d'informations voir [la section des prérequis](doc/prerequis.md). -### Reaction +## Configuration -Ajoutez des émojis et participez de façon dynamique aux conversations. +Après l'installation du thème vous aurez besoin de le configurer correctement, voir [la section configuration](doc/configuration.md). -- Doc : https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261 -- Dépôt : https://github.com/discourse/discourse-reactions +## discourse CLI - -### Private topic to discover - -Vos contenus sont visibles partiellement : encouragez vos contacts à s'inscrire sur la plateforme pour voir la totalité des contenus. - -- Doc : https://meta.discourse.org/t/advertise-activity-in-a-private-category-discourse-category-lockdown/70649https://github.com/paviliondev/discourse-category-lockdown -- Dépôt : https://github.com/paviliondev/discourse-category-lockdown - -### Problème du topic réglé - -Indiquez à une communauté le statut "résolu" d'un problème. - -- Doc : https://www.discourse.org/plugins/solved.html -- Dépôt : https://github.com/discourse/discourse-solved - -### Automatisation (ex: for event) - -Automatisez des actions complexes (version beta). - -- Doc : https://meta.discourse.org/t/discourse-automation/195773 -- Dépôt : https://github.com/discourse/discourse-automation - -### Follower - -Suivez, recevez des notifications de vos membres préférés et tenez vous au courant du nombre de followers. - -- Doc : https://meta.discourse.org/t/follow-plugin/110579 -- Dépôt : https://github.com/discourse/discourse-follow - -### Calendrier - -Partagez des événement avec les autres membres sur votre calendrier, ou passez en mode "vacances". - -- Doc : https://meta.discourse.org/t/discourse-calendar/97376 -- Dépôt : https://github.com/discourse/discourse-calendar - -### map and post - -Ajoutez votre géolocalisation sur vos post, ceux-ci peuvent favoriser les recherches entre membres. - -- Doc : https://meta.discourse.org/t/locations-plugin/69742 -- Dépôt : https://github.com/paviliondev/discourse-locations - -### Location plugin - -Découvrez la carte des membres de votre communauté et organisez des événements avec les membres les plus proches. - -- Doc : https://meta.discourse.org/t/locations-plugin/69742/723 -- Dépôt : https://github.com/discourse/discourse-calendar - - -## Composants - -Ce thème utilise les composants ci-dessous, pensez à les installer avant d'installer ce thème. - -### Icônes pour les catégories - -Les catégories sont affichées avec des icônes complétant les titres. - -- Doc : https://meta.discourse.org/t/category-icons-component/104683 -- Dépôt : https://github.com/discourse/discourse-category-icons - - -### Discourse loading slider - -Une barre horizontale s'affiche lors du temps de chargement d'une page. - -- Doc : https://meta.discourse.org/t/experiment-on-meta-horizontal-loading-slider/177939 -- Dépôt : https://github.com/discourse/discourse-loading-slider - - -### Discourse category banners - -Affiche une barre de catégorie en haut de la page catégorie. - -- Doc : https://meta.discourse.org/t/discourse-category-banners/86241 -- Dépôt : https://github.com/discourse/discourse-category-banners.git - - -### Discourse search banner - -Affiche une barre de recherche sur la page d'accueil. - -- Doc : https://meta.discourse.org/t/search-banner-theme-component/122939 -- Dépôt : https://github.com/discourse/discourse-search-banner.git - - -### Easy footer - -Ajoute _footer_ simple et responsive. - -- Doc : https://meta.discourse.org/t/easy-responsive-footer/95818 -- Dépôt : https://github.com/discourse/Discourse-easy-footer - - -### Icons header - -Permet d'ajouter des liens sur la partie "header" de votre site avec des icones. - -- Doc : https://meta.discourse.org/t/custom-header-links-icons/86307 -- Dépôt : https://github.com/discourse/discourse-icon-header-links - -### MD Topic list - -Épuration de la partie page d'accueil en améliorant la charte initiale. - -- Doc : https://meta.discourse.org/t/md-topic-list-component/117694 -- Dépôts : https://github.com/MonDiscourse/md-topic-list - -### TOC, Table of content - -Ajoute la table des matière du post. - -- Doc : https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143 -- Dépôts : https://github.com/discourse/DiscoTOC.git +Pour créer/modifier ses propres thèmes et composants, Discourse Theme CLI utilise la synchronicité. On peut voir à distance les modifications apportées 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/) **community-theme** is maintained by [Lydra](https://lydra.fr/) and released under the GPL3 license. diff --git a/doc/configuration.md b/doc/configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..7e3817997b4cbcd8539766f00ec3f3007706a74e --- /dev/null +++ b/doc/configuration.md @@ -0,0 +1,61 @@ +# Configuration du thème et des composants + +## Comment ça marche ? + +### Bannière _How to begin ?_ + +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 + +La bannière s'affiche pour tout le monde / possibilité de la masquer. +Elle apparaît sur les pages : + +- `/latest` +- `/categories` +- `/new` +- `/unread` +- `/top*` +- `/tag/*` +- `/tags/*` +- `/c/*` +- `/t/*` + +Il n'y a pas d'image de fond, mais il est possible d'en ajouter une. + +Ensuite il faut configurer le contenu de la bannière : texte, images dans chaque colonne. + +Pour personnaliser les images de la bannière, il faut les uploader sur le forum. Pour ça il faut créer un post avec les images dans la catégorie _staff_ (privée). Puis parcourir le post créé 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). + +### Les boites de catégories + +Le composant est **_Categories Layout Override_** qui affiche les boîtes de categories avec leur images. + +Dans Theme Settings/categories layout il faut choisir `catégories_boxes`. + +- Doc : https://meta.discourse.org/t/categories-layout-override/131098 +- Dépôt : https://github.com/tshenry/discourse-categories-layout-override + +### _Showcased Categories_ + +Le composant 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 + +Vous pouvez définir la taille en nombre de post maximum du contenu des boîtes et les catégories qui seront dans les boites ainsi que leur titre. + +### Configuration des couleurs + +Les couleurs peuvent être modifiées en créant 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). Vous pouvez dupliquer les palettes `Community Light` ou `Community Dark` pour faire vos propres palettes. + +Pour en savoir plus sur quelle couleur correspond à quel élément, nous fournissons [un descriptif de celles-ci](descriptif_couleurs.md). + +Une fois votre palette créé ajouter celle-ci dans le thème : section **color palette**. + +#### Installer des polices de caractère + +Vous pouvez aussi installer des fonts existantes sur Discourse, depuis **Admin/Settings/Basic Setup.**. +Pour en savoir plus [voir ici](https://meta.discourse.org/t/how-to-change-default-font-of-your-site/21282). diff --git a/doc/descriptif_couleurs.md b/doc/descriptif_couleurs.md new file mode 100644 index 0000000000000000000000000000000000000000..7084a852fc72a31f074f20272d435022fd48ae9a --- /dev/null +++ b/doc/descriptif_couleurs.md @@ -0,0 +1,81 @@ +# Descriptif de la palette de couleur + +## primary + +- La plupart du texte, des icônes et des bordures +- Textes +- Textes sections +- Textes input +- Titres +- Bannière des options (en plus claire) +- Génère un bandeau lors d'un :hover d'une image dans le topic. + +## secondary + +- Couleur d'arrière-plan principale, et couleurs du texte de certains boutons. +- Couleur de fond des post/topics +- Couleur de fond des catégories +- Couleur de fond input +- Couleur des textes/icones du footer +- Couleur du texte des boutons +- Couleur des icones dans topics + +## tertiary + +- Les liens, certains boutons, notifications et accentuation +- Boutons:actif des menu +- Ombre des boutons d'action (more, new topic) +- Éléments des graphiques +- Titres des graphiques +- Titre:actifs des options des graphiques +- Titre:hover des options des graphiques +- Titre:hover du menu latéral +- Surlignement des messages Discourse pour l'utilisateur. + +## quaternary + +- Liens de navigation +- Section:active menu latéral +- Icones:hover + +## header background + +- Couleur de font de la bannière +- Bordures des post/topics +- Boutons:actifs +- Topics-action:hover +- Titre des options:hover de la bannière + +## header primary + +- Texte, icones de la bannière +- Fond de couleur de la page. + +## highlight + +- Couleur d'arrière-plan (surligner) des post et topics. +- Couleur de fond des champs de saisie + +## danger + +- Couleur d'arrière-plan (surligner) des actions like, suppression de post/topics +- Couleur de fond des boutons:actifs dans le menu customize theme/component +- Icone de suppression + +## success + +- Une action réalisée avec succès + +## love + +- Bouton like + +## primary-low-mid + +- Les icones + +## primary-medium + +- Les boutons +- Bouton:hover des categories/options +- Bordures des cadres diff --git a/doc/discourse_theme_cli.md b/doc/discourse_theme_cli.md new file mode 100644 index 0000000000000000000000000000000000000000..d43c732de1e5338502215fc7a9cc4e58356fd7bb --- /dev/null +++ b/doc/discourse_theme_cli.md @@ -0,0 +1,53 @@ +# Comment utiliser le Discourse Theme CLI ? + +## Utilité + +> Discourse Theme CLI permet de syncroniser son code local avec une instance discourse en ligne. + +#### Installation + +Il faut commencer par [générer une clé API `Global Key`](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950#credentials-4) dans Discourse, et on enregistre une clé API par thème. + +1. Installer `Ruby 2.2` minimum, le mieu c'est d'utiliser [`rbenv`](https://github.com/rbenv/rbenv). +2. Installer la gem `discourse_theme`. + +```bash +gem install discourse_theme +``` + +- [Ressources sur Discourse Theme CLI.](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) + +#### Utilisation + +Au lancement la CLI va nous proposer plusieurs options : + +1. Créer un nouveau thème via le discourse CLI : + +```bash +discourse_theme new <my_new_theme> +``` + +2. Syncroniser un thème ou un composant local avec le Discours distant. Pour ça on doit lancer le `watch` sur le répartoire de notre projet. + +```bash +discourse_theme watch <my_theme> +``` + +3. Télécharger un thème existant sur le Discourse distant, et le synchroniser grâce au `watch`. + +```bash +discourse_theme download <my_remote_theme> +``` +#### Bon à savoir + +Ça y est ! Vous utilisez Discourse Theme 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 : + +```bash +discourse_theme watch component-community-fonts community-theme component-colors +``` + +Ceci génèrera une erreur. Il faut dans ce cas lancer un cli par répertoire. diff --git a/doc/prerequis.md b/doc/prerequis.md new file mode 100644 index 0000000000000000000000000000000000000000..37fb0fee7233818c7462a4c600b9e2afb88025f2 --- /dev/null +++ b/doc/prerequis.md @@ -0,0 +1,134 @@ +# Prérequis + +## Composants + +Ce thème utilise les composants ci-dessous, ils sont installés avec le thème, pensez à les configurer. + +### Discourse loading slider + +Une barre horizontale s'affiche au dessus de l’entête durant le temps de chargement d'une page. + +- Doc : https://meta.discourse.org/t/experiment-on-meta-horizontal-loading-slider/177939 +- Dépôt : https://github.com/discourse/discourse-loading-slider + +### Icon Header Links + +Ajoute des liens sous la forme d’icône en entête du site : Instagram, Gitlab, YouTube,... + +- Doc : https://meta.discourse.org/t/custom-header-links-icons/86307 +- Dépôt : https://github.com/discourse/discourse-icon-header-links + +### Versatile Banner + +Ajoute une bannière de trois images avec du texte de présentation - Option plier / déplier +- Doc : https://meta.discourse.org/t/versatile-banner/109133 +- Dépôt : https://github.com/tshenry/discourse-versatile-banner + +### Showcase Categories + +Met en avant deux catégories et leur _top posts_. + +- Doc : https://meta.discourse.org/t/showcased-categories-theme-component/173524 +- Dépôt : https://github.com/discourse/discourse-showcased-categories + +### Categories Layout Override + +Les catégories sont présentées sous forme de boîte avec une image. La taille conseillée pour les images de catégorie est de maximum 150px. + +- Doc : https://meta.discourse.org/t/categories-layout-override/131098 +- Dépôt : https://github.com/tshenry/discourse-categories-layout-override + +### Category icons component + +Les catégories sont affichées avec des icônes complétant les titres. + +- Doc : https://meta.discourse.org/t/category-icons-component/104683 +- Dépôt : https://github.com/discourse/discourse-category-icons + +### Discourse category banners + +Affiche une bannière de présentation de catégorie en haut de chaque page catégorie. + +- Doc : https://meta.discourse.org/t/discourse-category-banners/86241 +- Dépôt : https://github.com/discourse/discourse-category-banners.git + +### DiscoTOC + +Ajoute une option Tables des matières lors de la rédaction de topic. + +- Doc : https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143 +- Dépôts : https://github.com/discourse/DiscoTOC.git + +### Easy footer + +Ajoute un pied de page simple et responsive avec vos liens. + +- Doc : https://meta.discourse.org/t/easy-responsive-footer/95818 +- Dépôt : https://github.com/discourse/Discourse-easy-footer + +## Plugins + +Pour une meilleure expérience utilisateur nous vous conseillons aussi d'installer les plugins suivant. + +### One year anniversary + +Toutes les années ce plugin créer un sujet anniversaire qui résume l'activité de l'année précédente sur un forum. + +- Doc : https://meta.discourse.org/t/discourse-yearly-review-plugin/105713 +- Dépôt : https://github.com/discourse/discourse-yearly-review + +### Reaction + +Ajoutez des émojis et participez de façon dynamique aux conversations. + +- Doc : https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261 +- Dépôt : https://github.com/discourse/discourse-reactions + +### Private topic to discover + +Vos contenus privés sont visibles partiellement : encouragez vos contacts à s'inscrire sur la plateforme pour voir la totalité des contenus. + +- Doc : https://meta.discourse.org/t/advertise-activity-in-a-private-category-discourse-category-lockdown/70649https://github.com/paviliondev/discourse-category-lockdown +- Dépôt : https://github.com/paviliondev/discourse-category-lockdown + +### Solved + +Indiquez à une communauté le statut "résolu" d'un problème. + +- Doc : https://www.discourse.org/plugins/solved.html +- Dépôt : https://github.com/discourse/discourse-solved + +### Automation (ex: for event) + +Automatisez des actions complexes (version beta). + +- Doc : https://meta.discourse.org/t/discourse-automation/195773 +- Dépôt : https://github.com/discourse/discourse-automation + +### Follower + +Suivez, recevez des notifications de vos membres préférés et tenez vous au courant du nombre de followers. + +- Doc : https://meta.discourse.org/t/follow-plugin/110579 +- Dépôt : https://github.com/discourse/discourse-follow + +### Calendrier + +Partagez des événements avec les autres membres sur votre calendrier, ou passez en mode "vacances". + +- Doc : https://meta.discourse.org/t/discourse-calendar/97376 +- Dépôt : https://github.com/discourse/discourse-calendar + +### map and post + +Ajoutez votre géolocalisation sur vos post, ceux-ci peuvent favoriser les recherches entre membres. + +- Doc : https://meta.discourse.org/t/locations-plugin/69742 +- Dépôt : https://github.com/paviliondev/discourse-locations + +### Location plugin + +Découvrez la carte des membres de votre communauté et organisez des événements avec les membres les plus proches. + +- Doc : https://meta.discourse.org/t/locations-plugin/69742/723 +- Dépôt : https://github.com/discourse/discourse-calendar