Copier le composant de thème Codeblocks

[justin (Justin DiRose)]

Ce composant de thème est désormais déprécié au profit de Copier le contenu du bloc de code dans le presse-papiers, une fonctionnalité principale de Discourse.

Aperçu sur Theme Creator
Dépôt Git : https://github.com/discourse/discourse-copy-codeblocks
Comment installer un thème ou un composant de thème ?

Ce composant de thème ajoute un bouton de copie aux blocs de code dans les publications Discourse — idéal pour les communautés partageant des exemples de code ou des articles de base de connaissances nécessitant la copie de texte.

Sur ordinateur, le bouton de copie apparaît au survol du bloc.

Sur mobile, le bouton de copie est toujours affiché, mais il repousse le code vers le bas dans le bloc pour éviter de masquer la première ligne de code si elle est trop longue.

Notez que cela ne fonctionne que pour les blocs de code générés par ```, et non pour les blocs de code en ligne.

Ceci est un bloc de code.
Copiez ce texte.

Ceci est un bloc de code en ligne. La copie ne fonctionne pas ici.

Un grand merci à @j.jaffeux qui a réalisé une grande partie du développement initial de cette fonctionnalité.

[Falco]

Quelle est la différence entre ceci et https://meta.discourse.org/t/copy-option-for-code-blocks-in-discourse/60961?u=falco ?

[j.jaffeux (Joffrey Jaffeux)]

Plusieurs points :

• n’incorpore pas une bibliothèque complète de presse-papiers
• ne dépend pas de jQuery
• ne fuit pas les écouteurs d’événements
• ne repose pas sur plusieurs événements
• utilise des normes de codage à jour
• ne présente pas le bug de guillemets
• …

Je ne sais pas si cela fonctionne correctement sur mobile également.

[xrav3nz]

Super !

Je me demandais si nous étions ouverts à l’idée de remplacer le texte localisé « copier » / « copié » par des icônes ? Peut-être l’icône de copie pour « copier » et l’icône de coche pour « copié » ?

[justin (Justin DiRose)]

Je suis ouvert à l’idée d’ajouter un paramètre au composant. La raison pour laquelle j’ai opté pour du texte localisé est qu’il est clair ce qui se passe, et en plus, le texte peut avoir une hauteur plus réduite tout en restant lisible. L’esthétique semblait mieux correspondre au cas d’usage.

[codinghorror (Jeff Atwood)]

@j.jaffeux

Plusieurs choses :

On dirait qu’on devrait supprimer ou déprécier l’un ou l’autre et regrouper les efforts ?

[sam (Sam Saffron)]

Mineur, le délai de copie est trop rapide sur mon iPhone ; le texte devrait afficher « copié » pendant environ 3 secondes avant de revenir en arrière.

Cela a l’air bien

[justin (Justin DiRose)]

Modifié ici :

https://github.com/discourse/discourse-copy-codeblocks/commit/d1af36a4a5197dab4ca1dd62a05930088882de45

Quelques bugs liés aux anciennes versions de Discourse, qui ne disposent pas de @ember/runloop et de Promise de la bibliothèque rsvp, ont également été corrigés. (Merci à @jomaxro pour les rapports à ce sujet)

[pfaffman (Jay Pfaffman)]

Désolé, mais un ne suffit pas cette fois.

Super ! C’est génial. Cela combiné avec Placeholder Forms est vraiment cool.

Ce que je viens d’en faire

Replacing A Failed Hard Drive In A Software RAID1 Array

sfdisk -d /dev/=gooddev= | sfdisk /dev/=newdev=
mdadm --manage /dev/md1 --add /dev/=newdev=
mdadm --detail /dev/md1

Regardez-le fonctionner !

while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done

Obtenir le temps de mise sous tension pour tous les disques

for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done

[codinghorror (Jeff Atwood)]

J’adore ça ! Mais est-ce que le bouton de copie pourrait n’être visible qu’au toucher sur mobile ? Je suis un peu déçu par la perte constante d’espace d’écran sur mobile, avec une ligne supplémentaire pour chaque bloc de code :

Mais en y réfléchissant, je réalise que :

• les blocs de code ne sont pas si courants
• comme c’est une option, vous ne l’activeriez que sur des sites où copier des blocs de code est une activité courante

… cela étant dit .. les chances qu’un bloc de code donné soit copié sur mobile sont infimes, donc je trouve que le ratio entre l’interface utilisateur et l’utilisation n’est pas bon ici, et je préférerais un affichage au toucher pour mobile ?

Pas urgent.

[j.jaffeux (Joffrey Jaffeux)]

Oui, c’est tout à fait une demande raisonnable Je partage cette préoccupation également, nous trouverons une solution.

[codinghorror (Jeff Atwood)]

Même cela serait préférable sur mobile, je pense. L’alignement n’est pas parfait, mais vous comprenez le concept :

(Même si cela chevauche du texte, etc., je ne sais pas si cela rend la chose plus difficile ou plus facile que l’affichage au toucher ? )

[justin (Justin DiRose)]

Nous avions cela à l’origine, mais cela chevauchait le texte sans pouvoir le voir. J’aime l’idée qu’il devienne visible au toucher. Je vais m’y pencher.

[codinghorror (Jeff Atwood)]

@justin

le texte se chevauchait sans pouvoir être lu

Sur mobile, c’est un compromis bien meilleur, et de loin. Sur ordinateur portable, ordinateur de bureau ou tablette, l’espace supplémentaire occupé est tout à fait acceptable.

[lcestou (Lutechi)]

Bonjour,

J’aimerais beaucoup utiliser cet outil, mais dès que je l’ai activé pour mon thème Grey Amber, mon site est devenu lent et parfois non réactif jusqu’à ce que je le désactive.

Quelqu’un a-t-il rencontré ce comportement, ou cela peut-il trop solliciter le VPS lorsqu’il est activé ?

Le site est composé à 99,9 % de lignes de code simples, et j’espérais pouvoir les convertir en blocs de code. Donc, il ne devrait pas s’agir de récupérer du code existant pour le convertir. Ou si ?

Dois-je lui laisser un certain temps pour se stabiliser ? Il a continué à rendre le site temporairement inaccessible, et parfois, lorsqu’une page se chargeait, un message d’erreur s’affichait avec la suggestion « réessayer » de Discourse.

Merci d’avance.

[codinghorror (Jeff Atwood)]

Oh wow, ça ressemble à un vrai bug en fait !

[riking (Kane York)]

Petit bug : le texte « copier » peut apparaître dans une citation. (Beaucoup moins grave que le post précédent.)

@pfaffman

copier

while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done

Obtenir le temps de mise sous tension pour tous les disques

copier

for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done

Le button.copy-cmd doit être exclu de la citation. L’application de user-select: none dans le CSS corrige Ctrl-C mais pas la fonctionnalité de citation.

[j.jaffeux (Joffrey Jaffeux)]

Avez-vous un lien vers votre site ? Il semble très étrange qu’un thème puisse causer cela. Combien de blocs de code avez-vous sur une page ?

[j.jaffeux (Joffrey Jaffeux)]

J’ai donc apporté plusieurs modifications ici. Étant donné que nos problèmes étaient les suivants :

• l’espace écran sur mobile
• le bug de copie de texte sur les citations
• et que nous avions reçu des demandes pour avoir une icône à la place du texte

La solution évidente résolvant tout cela… était d’utiliser une icône.

Sur mobile, il est maintenant acceptable de la placer à droite, car elle prend moins de place et nous pouvons simplement ajouter un peu de padding pour le texte :

Seule petite gêne : sur les premières lignes très longues, elle sera cachée derrière le bouton. Je pense que c’est acceptable étant donné que vous pouvez faire défiler :

Et sur bureau, cela fonctionnera comme avant, sans le bug de citation :

Concernant le bug de performance potentiel, j’ai testé une page avec des dizaines de blocs de code et je n’ai rencontré aucun problème. Il me faudra donc une reproduction avant de pouvoir agir @lcestou, s’il vous plaît.

Essayez le nouveau bloc de code ici :

rsync -a file.txt file_backup.txt
rsync -a /var/www/public_html/ /var/www/public_html_backup/

[justin (Justin DiRose)]

Cette fonctionnalité est désormais intégrée au cœur de Discourse

Par conséquent, ce composant de thème est désormais OBSOLÈTE. Il continuera de fonctionner sur les anciennes instances de Discourse, mais ne recevra plus aucune mise à jour.

J’ai mis à jour le premier message pour refléter ces informations.