[Proposal] Improve TypeScript tsconfig reference web page usability

まず、TypeScript の元の tsconfig リファレンスページを、リンクされているモックの tsconfig リファレンスページおよびその提案概要と比較します。ページに提案された 2 列レイアウト、検索、フィルタリングされた構成セクション、ツールチップがあり、実装が TypeScript-Website に統合されていれば完了です。

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:

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