nodejs / nodejs/nodejs.org

UI: one line code block ghost copy button

Offen
#9,085 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

accessibility design
Vorherrschende Sprache
TypeScript
Sterne
6.9k
Forks
6.5k
Ø Merge
2 T. 8 Std.
Gemergte PRs (30 T.)
29

Beschreibung

Description

in example the one line bash code block didn't have copy button which is useful in this case.

Image

Why we remove tabs and button on bottom? Bascly took to much space.

Solution

Having a ghost button (mean visible on hover).

https://github.com/user-attachments/assets/9859ae75-1bea-4be7-872c-db201d3e4499

But there are still case where button is useless IMO. here for example have copy button isn't really usefull but when user will hover it button will appear so it's take "mental/visual ressource"

Image

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem verlinkten Beispiel für deprecations und verfolge den dort verwendeten Einstiegspunkt des copy-button für Codeblöcke. Die Änderung ist abgeschlossen, wenn einzeilige bash-Blöcke eine beim Darüberfahren erscheinende Kopieraktion behalten, während der Button in Fällen, in denen er weniger nützlich ist, keinen dauerhaften visuellen Platz hinzufügt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
nextjs, react, typescript
Bereich
design, frontend
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
62/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.