ReactIndex - Making Folder Index Pages More Practical

Table of Contents

React learning and family needs

Work requires exposure to React, and before formally contacting related products, to understand some basics. Besides examples in standard tutorials, it always felt a bit insufficient. Coincidentally, my wife recently gave me a task:

Our son’s learning materials need organizing, while also being convenient for him to review.
When reviewing, it’s best to be able to quickly view, with answers preferably right beside, facilitating repeated memorization.

In response to the leader’s requirements, I immediately thought of

Rough plan

Web-based learning material browsing maximizes usability. As long as a self-built server exists, the child can browse during spare time anytime, anywhere.
Answer toggling - simple, just use Javascript to make a simple image toggle.
Most image links use python to automatically generate html pages.

Started immediately, but preliminary plan attempt revealed several problems

Image toggle JavaScript is simple, but generating static pages even with python automation still requires manual execution. File maintenance isn’t just about image files themselves.
Opening pages still requires entering from Directory index; for many folders, some classification functionality is needed.

Implementation direction change

Since Directory index form is fixed. Using ajax fetch can further process. Generate dynamic pages, requiring only maintenance of content files in folders.
Use react to build, add content classification functionality.

React index prototype

Using Ant design to replace crude Directory index

Adding secondary classification functionality based on folder names

Adding folder content type setting to add Markdown text pages (preliminary attempt)

Adding learning material review page - Using Ant design components appears stylish

Not very necessary - but still added category icon customization functionality based on online iconfont

Future plans

React Index design itself is for family internal website for simple viewing by family members. As long as they understand folder and file organization management, mother and child can easily add content. So based on some needs in current family usage, there are some future intentions:

Add PDF preview (without downloading PDF) (this still requires technical investigation; seems there are js libraries that can achieve).
Multi-domain support and switching, enabling configuration of multiple (maybe not very necessary).
See if functional pages can be made dynamically loadable, facilitating expansion.
Depending on leader’s needs…