Reorganise usingComponents page

[ang-zeyu]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

Overview of changes:

• The usingComponents page is split into 6 different subsections.
• Some small content edits (dropdowns.mbdf) are done to make the content flow better with the new organisation.
• Old links to usingComponents.html are relinked as appropriate

Anything you'd like to highlight / discuss:

• Any better organisations
• I forced :expanded: on the submenu for now, due to [cs2103 website] Some site-nav items are not highlighted when open #1615. Not sure if we should leave it expanded or not since there's 6 items once its fixed though

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Reorganize using components page

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[ang-zeyu]

Not a fan of overly long pages, wdyt @jonahtanjz @damithc

There is the page nav, but the scrollbar becomes intimidatingly small =(

[damithc]

Not a fan of overly long pages, wdyt @jonahtanjz @damithc

There is the page nav, but the scrollbar becomes intimidatingly small =(

I'm OK with the splitting. The cost is that the question 'what components are there?' becomes harder to answer. I guess it is not a major issue. We can always add the full list to the 'Using Components' page later.

[ang-zeyu]

I'm OK with the splitting. The cost is that the question 'what components are there?' becomes harder to answer. I guess it is not a major issue. We can always add the full list to the 'Using Components' page later.

👍, we could do some organising of the full syntax reference (e.g. markdown / components / others -> then alphabetical sort) for this as well

[damithc]

No objections to splitting the page. Did not do a detailed review of the content though.

[jonahtanjz]

I think splitting them makes the components pages more organised and less cluttered. I'm fine with it as well :) The rest of the content looks good. Just 2 suggestions:

Should the previous page of Using HTML, JavaScript, CSS be Using Components -> Advanced instead?

[jonahtanjz]

Suggested change

	The image components here provide **convenient syntax & styling abstractions** on top of raw HTML and Markdown images.
	The diagram components here provide **convenient syntax & styling abstractions** on top of raw HTML and Markdown images.

Should we change this to diagram so that it is consistent with the title?

[ang-zeyu]

Thanks for looking through this!

Should the previous page of Using HTML, JavaScript, CSS be Using Components -> Advanced instead?

Fixed.

Should we change this to diagram so that it is consistent with the title?

Indeed, I actually meant to change the title to Image & Diagram Components instead.

I'm not sure if there's a better way of organising images and diagrams as well or if this is fine; On one hand they're slightly unrelated, on the other hand adding one more subpage makes the site nav seem a little too long.

[jonahtanjz]

I'm not sure if there's a better way of organising images and diagrams as well or if this is fine; On one hand they're slightly unrelated, on the other hand adding one more subpage makes the site nav seem a little too long.

I think this is fine for now since the section on diagrams is quite small. Once we introduce more ways of generating diagrams then we can consider splitting them up?

[jonahtanjz]

Should we also change the site title and filename to include the Image part as well?

[ang-zeyu]

Updated

[jonahtanjz]

LGTM 👍