microsoft / microsoft/TypeScript-Website

[Proposal] Improve TypeScript tsconfig reference web page usability

Open
#3,377 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.6k
Forks
1.5k
Avg merge
2d 2h
Merged PRs (30d)
7

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the original TypeScript tsconfig reference page with the linked mock tsconfig reference page and its proposal overview. Done means the page has the proposed two-column layout, search, filtered configuration sections, and tooltips, with the implementation integrated into TypeScript-Website.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
documentation, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.