Repository: zestedesavoir/zds-site

Issue:
Avoir un rappel des bases du Mardkown à côté des zones de rédaction
L'idée est d'avoir un rappel des bases du Mardkown à côté des zones de rédaction (les grandes lignes + un lien vers le tuto).

Je sais qu'on a les boutons, mais c'est toujours utile pour ceux qui préfèrent éviter de jouer avec la souris, et je pense améliorera l'apprentissage du MD.

Le truc le plus important à y mettre est sans doute la gestion des sauts de ligne / paragraphes :)



Discussion:
S'inspirer de la textarea de [SO](http://stackoverflow.com) pour ça, éventuellement : 
- un premier lien dans la barre de boutons du genre `?`, qui provoque l'affichage d'une première barre d'aide ;
- un lien "Plus d'infos" qui renvoi vers l'article exhaustif.

Je m'en chargerais, j'ai déjà mon idée là dessus.

Si tu pouvais exprimer ton idée que l'on puisse t'aider là-dessus, ce
serait parfait.

Tu as déjà une grosse masse de boulot, ce serait dommage qu'on ne puisse
pas t'aider à avancer !

2014-05-12 2:12 GMT+02:00 DEMODE Alexandre notifications@github.com:

> Je m'en chargerais, j'ai déjà mon idée là dessus.
> 
> —
> Reply to this email directly or view it on GitHubhttps://github.com/Taluu/ZesteDeSavoir/issues/492#issuecomment-42787842
> .

+1 SpaceFox d'autant que c'est une issue facile en soit. Dans tous les cas, ce serait bien d'expliciter, certains auront peut être des avis divergents

Là, c'est moins simple que vous ne le pensez j'ai l'impression, ça nécessite : du style (responsive) et du JavaScript.

Par contre, vous pouvez rédiger le mini guide. Il faut que ce soit assez concis avec la syntaxe de base.

En soi, les choses "simples" je les ferais très rapidement, si je mets du temps c'est que ça n'est pas _si_ simple.

Sinon, si vous voulez m'aider : #464 et #465 

Dans une v1, il faut se limiter à la demande : un rappel des bases du MD
dans une bête zone de texte. Un truc ultra-simple.

Le fonctionnement à la StackOverflow, il est génial, mais pour moi c'est
clairement quelque chose qui doit attendre une v2.

Le 12 mai 2014 09:51, DEMODE Alexandre notifications@github.com a écrit :

> Là, c'est moins simple que vous ne le pensez j'ai l'impression, ça
> nécessite : du style (responsive) et du JavaScript.
> 
> Par contre, vous pouvez rédiger le mini guide. Il faut que ce soit assez
> concis avec la syntaxe de base.
> 
> En soi, les choses "simples" je les ferais très rapidement, si je mets du
> temps c'est que ça n'est pas _si_ simple.
> 
> Sinon, si vous voulez m'aider : #464https://github.com/Taluu/ZesteDeSavoir/issues/464et
> #465 https://github.com/Taluu/ZesteDeSavoir/issues/465
> 
> —
> Reply to this email directly or view it on GitHubhttps://github.com/Taluu/ZesteDeSavoir/issues/492#issuecomment-42804350
> .

Je comprend pas le besoin de JS justement : il y a déjà un editeur, le but de ce ticket est d'avoir un aide mémoire textuel. Pas un assistant en JS. Les deux sont différents pour moi.

Dans tous les cas, qu'elle que soit la solution choisie, je ne voit pas de raison de ne pas discuter de la solution que tu as choisis, certains auront peut etre des objections, légitimes ou non.

D'autre part, Alex, les idées dans un projet - et d'autant plus dans un
projet libre - ça se partage. Pour deux raisons :
1. La pérennité. Si jamais tu tombes malade ou pire, ton idée sera perdue à
   jamais, et ce serait vraiment dommage.
2. La discussion. Peut-être qu'on a des objections à ton idée, et pour ça
   il faut la connaître. Sinon c'est un risque de refus de la PR, et ce serait
   dommage d'avoir fait le boulot pour rien.

Voilà pourquoi, dans tous les cas, partager ses idées, même si on pense en
faire la réalisation, est absolument indispensable.

Le 12 mai 2014 09:54, Christophe Gabard notifications@github.com a écrit :

> Je comprend pas le besoin de JS justement : il y a déjà un editeur, le but
> de ce ticket est d'avoir un aide mémoire textuel. Pas un assistant en JS.
> Les deux sont différents pour moi.
> 
> Dans tous les cas, qu'elle que soit la solution choisie, je ne voit pas de
> raison de ne pas discuter de la solution que tu as choisis, certains auront
> peut etre des objections, légitimes ou non.
> 
> —
> Reply to this email directly or view it on GitHubhttps://github.com/Taluu/ZesteDeSavoir/issues/492#issuecomment-42804576
> .

Bon alors soyons clairs sur ce qu'on veut : 
- Un petit bouton rigolo tout gentil "Aide markdown" ;
- Quand on clic sur le bouton rigolo, hop ça affiche une petite boite d'info (oooh du JavaScript est nécessaire ici, la magie n'existe pas) ;
- Dans cette petite boite on aura donc un rappel mémoire (bah tiens, la petite boite rigolote elle a besoin de CSS : boom badaboom, faut aussi faire quelques lignes de SCSS... et faut que ce soit responsive : wowowow faut toucher à au moins 3 fichiers... tiens tiens !) ;
- Ce petit aide mémoire est très court mais permet d'avoir les bases, ainsi qu'un petit lien vers l'aide complète.

En somme, c'est tout ce qu'on a déjà dit sur le forum, mais aussi simple que cela puisse paraître ça nécessite un minimum de travail, le rendu aussi simpliste peut-il paraître.

> Un petit bouton rigolo tout gentil "Aide markdown" ;

En fait même pas : pour moi, au moins dans une v1, l'aide est affichée,
point barre. Pas de dynamisme ni rien.

Le 12 mai 2014 09:59, DEMODE Alexandre notifications@github.com a écrit :

> Bon alors soyons clairs sur ce qu'on veut :
> - Un petit bouton rigolo tout gentil "Aide markdown" ;
> - Quand on clic sur le bouton rigolo, hop ça affiche une petite boite
>   d'info (oooh du JavaScript est nécessaire ici, la magie n'existe pas) ;
> - Dans cette petite boite on aura donc un rappel mémoire (bah tiens,
>   la petite boite rigolote elle a besoin de CSS : boom badaboom, faut aussi
>   faire quelques lignes de SCSS... et faut que ce soit responsive : wowowow
>   faut toucher à au moins 3 fichiers... tiens tiens !) ;
> - Ce petit aide mémoire est très court mais permet d'avoir les bases,
>   ainsi qu'un petit lien vers l'aide complète.
> 
> En somme, c'est tout ce qu'on a déjà dit sur le forum, mais aussi simple
> que cela puisse paraître ça nécessite un minimum de travail, le rendu aussi
> simpliste peut-il paraître.
> 
> —
> Reply to this email directly or view it on GitHubhttps://github.com/Taluu/ZesteDeSavoir/issues/492#issuecomment-42804887
> .

Non, bah c'est dégueulasse ça... Sauf si t'as une solution élégante à me proposer.

Mais tous les super-user auraient un truc inutile qui leur serait proposé.

Est-ce qu'on pourrait me screen l'exemple SO ? Je ne pense pas avoir de compte chez eux.

@ Tous : détendons-nous un peu le slip. C'est clairement pas une feature critique à réaliser pour la v1, et ça a été tagué **à juste titre** `evolution`. Donc on en discute, on explique ce qu'on veut, etc. Mais on ne le réalise pas, tant que la beta publique n'est pas lancée.

S'il faut trancher maintenant, pour moi dans la v1 on se contente d'un lien vers l'article exhaustif de Shig, c'est suffisant.

Ah en fait, c'est visible publiquement... :-° I'm a boulay. Donc sur SO c'est sympa, mais faudrait déjà qu'on ait un éditeur qui soit joli (je sais, j'y travail).

Un lien ça me semble pas mal en soi. On pourra mettre la mini aide dans une v1.1 à la limite.

NB : quand je dis _dégueulasse_, c'est pas agressif... désolé pour mon vocabulaire qui n'a peut-être pas la même signification pour chacun :/

@Coy0te : t'as cité un pseudo existant, dans un dépôt privé... J'espère que Github est assez intelligent pour ne pas le notifier, sinon le pauvre va se poser des questions XD

> Non, bah c'est dégueulasse ça... Sauf si t'as une solution élégante à me
> proposer.
> Mais tous les super-user auraient un truc inutile qui leur serait proposé.

En même temps, on s'en fiche : c'est temporaire et si on la met à un
endroit qui n'est pas trop gênant, il suffira juste de ne pas la lire si on
sait déjà comment fonctionne MD.
Mon idée c'était un bloc comme le 1er bloc d'exemple sur wikipédia EN :
http://en.wikipedia.org/wiki/Markdown (mais adapté)

> Est-ce qu'on pourrait me screen l'exemple SO ? Je ne pense pas avoir de
> compte chez eux.

Pas la peine, la zone de rédaction est publique.

> S'il faut trancher maintenant, pour moi dans la v1 on se contente d'un
> lien vers l'article exhaustif de Shig, c'est suffisant.

Justement, non, AMHA ce n'est pas suffisant. En particulier, si on explique
pas au moins en 2 mots le coup des sauts de lignes, on va avoir des tas
d'incompréhensions.

Le 12 mai 2014 10:05, Coyote notifications@github.com a écrit :

> @Tous https://github.com/Tous : détendons-nous un peu le slip. C'est
> clairement pas une feature critique à réaliser pour la v1, et ça a été
> tagué _à juste titre_ evolution. Donc on en discute, on explique ce qu'on
> veut, etc. Mais on ne le réalise pas, tant que la beta publique n'est pas
> lancée.
> 
> S'il faut trancher maintenant, pour moi dans la v1 on se contente d'un
> lien vers l'article exhaustif de Shig, c'est suffisant.
> 
> —
> Reply to this email directly or view it on GitHubhttps://github.com/Taluu/ZesteDeSavoir/issues/492#issuecomment-42805348
> .

Si quelqu'un est motivé à rédiger "le mini-manuel du Markdown" qui sera accessible à côté de la zone de saisi, en plus du lien vers l'article/page qui décrit tout, ça pourrait être sympa de l'avoir pour la beta :)

Il faudrait un truc qui respecte quel format, à la louche ? (combien de lignes, quelle largeur)

Format "optimal". Je pense qu'il faut faire un premier jet et ajuster ensuite. Je ne saurais dire le format qui serait préférable.

Sachant qu'ici on ne parle que des bases, ça ne devrait pas être très grand.

C'est pas si évident de faire un truc bref dans un format simple "pavé de texte". Rien qu'en se limitant à gras, italique, lien, citation, code, et saut de ligne, ça fait déjà bien long.

AMHA si on ne doit en garder qu'un, et le mettre en premier, c'est les
sauts de lignes.

Le 28 mai 2014 10:49, Coyote notifications@github.com a écrit :

> C'est pas si évident de faire un truc bref dans un format "pa. Rien qu'en
> se limitant à gras, italique, lien, citation, code, et saut de ligne, ça
> fait déjà bien long.
> 
> —
> Reply to this email directly or view it on GitHubhttps://github.com/zestedesavoir/zds-site/issues/492#issuecomment-44380008
> .

_Les simples retours à la ligne ne sont pas pris en compte. Pour aérer vos paragraphes, pensez à sauter des lignes ! Pour plus d'infos, consultez notre [guide d'utilisation](http://url_article)._

Et sinon une petite liste genre:

```
**gras**
*italique*
![texte de lien](url du lien)
> citation
+ liste a puces
```

Ca me paraît pas mal l'ensemble de vos propositions :)

La phrase de @Coy0te serait-elle réductible ? Car là c'est un peu long non ?

Ca donne quoi ca ?

![](https://dl.dropboxusercontent.com/u/18967337/temp/test.png)

J'aime bien le contenu, mais ça n'a pas sa place dans la sidebar : la sidebar est dédiée à la navigation et aux actions.

En bon français, je préfère "Entrée" à "Enter" :)

> En bon français, je préfère "Entrée" à "Enter" :)

Oups, déformation du pays !!

Sinon assez d'accord avec toi sur la sidebar en fait... J'voulais juste faire un essai mais j'ai pas trop réfléchi à la syntaxe...

(D'ailleurs à la place de "Syntaxe Markdown" plutot dire "Mémo Markdown" ca sonne plus sympa !)

Idée en vrac:
- Pourquoi pas la meme chose _sous_ la sidebar
- Pourquoi pas dans un (gros) tooltip sur un bouton dans la barre des trucs du wysiwyg
- Pourquoi pas sous la zone de redaction (mais que se passe t'il quand on passe en prévisualisation ?)

Sous la sidebar : sur la plupart des pages ça sera bien trop bas ou trop haut, mais jamais en face de la zone de saisie.

Pour moi c'est quelque chose qui doit être _directement_ lié à la zone de saisie, donc un bloc à côté de celle-ci. En dessous ça me semble peu judicieux. Pourquoi pas au dessus à partir du moment où on est en saisie.


Resolving patch:
diff --git a/zds/settings.py b/zds/settings.py
--- a/zds/settings.py
+++ b/zds/settings.py
@@ -129,6 +129,8 @@
             'js/custom/keyboard-navigation.js',
             'js/custom/message-hidden.js',
             'js/custom/spoiler.js',
+            'js/custom/karma-ajax.js',
+            'js/custom/markdown-help.js',
         ),
         'output_filename': 'js/main.js'
     }


Test patch: