microsoft / microsoft/TypeScript-Website

[Proposal] Improve TypeScript tsconfig reference web page usability

Offen
#3,377 1 Kommentar 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
TypeScript
Sterne
2.6k
Forks
1.5k
Ø Merge
2 T. 2 Std.
Gemergte PRs (30 T.)
7

Beschreibung

Summary

When visiting the original TypeScript tsconfig reference documentation web page, the first impression right away is that the page is Brobdingnagian, overweight and overwhelming. It has all the vast amount of configuration information crammed into a single, huge page that's hard to scroll and hard to survey.

From my personal point of view, it's too hard to find pertinent information therein in a timely manner. This is particularly true for daily work, where configuring TSC is not supposed to become a full-time task.

I propose to add search and filter options to the page as well as a new page layout, supposed to resemble the powerful, simple and easy to grasp File Explorer design.

Proposal

Using the original tsconfig reference documentation web page, I created a simple mock tsconfig reference page, visualizing my proposal:

        Improve tsconfig web page

Proposal Overview

The changes are simple and easy to implement:

  1. Re-arranging configuration property hyperlinks and content into two flex columns, restricting their max height to match the browser window height

  2. Adding a search bar to the top of the left flex block, along with the corresponding JavaScript

  3. When activating any of the configuration property hyperlinks, show filtered content in the right flex block by hiding all sections not addressed by the hyperlink

  4. Add an informative tooltip to each of the configuration property hyperlinks

You find the corresponding GitHub repository containing my mock implementation here:

https://github.com/SetTrend/tsConfig-config-proposal

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

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 damit, die ursprüngliche TypeScript-tsconfig-Referenzseite mit der verlinkten Mock-tsconfig-Referenzseite und ihrer Vorschau des Vorschlags zu vergleichen. Als abgeschlossen gilt die Aufgabe, wenn die Seite über das vorgeschlagene zweispaltige Layout, die Suche, gefilterte Konfigurationsabschnitte und Tooltips verfügt und die Implementierung in TypeScript-Website integriert ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, typescript
Bereich
documentation, frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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