Add a Help page that shows MDX documentation #59
Conversation
I've added a simple Help page with a sidebar for topics. The topics can be entered in the `help-topic-tree-items.ts` The documentation itself composes of multiple MDX files, for easy documenting.
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a Help page that displays MDX documentation, along with a sidebar for selecting help topics. Key changes include:
- Integrating MDX support via new rollup and React dependencies.
- Adding several MDX documentation files and configuring routes for the Help page.
- Implementing a new Help page with a sidebar and tree view for navigating topics.
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/main/react/vite.config.ts | Added MDX plugin to support MDX documentation. |
| src/main/react/package.json | Updated project name and added MDX-related dependencies. |
| src/main/react/docs/*.mdx | Added new MDX documentation files for help content. |
| src/main/react/app/routes/help/help.tsx | Implemented the Help page with sidebar and dynamic content load. |
| src/main/react/app/routes/help/help-topics.tsx | Introduced a tree view for help topics using a tree package. |
| src/main/react/app/routes/help/help-topic-tree-items.ts | Defined the help topic items and linked to MDX files. |
| src/main/react/app/routes/editor/* | Minor adjustments related to renaming and file removal. |
| src/main/react/app/components/navbar/* | Updated navbar/menu styling and active route detection. |
| {React.createElement( | ||
| helpTopic?.data.content ?? | ||
| (() => ( | ||
| <div> | ||
| The topic with id: <code>{topic}</code> does not seem to exist, it might have been moved or | ||
| deleted. Please select a different topic from the left sidebar. | ||
| </div> | ||
| )), |
There was a problem hiding this comment.
What's the point of doing createElement() here?
And if it's really needed, wouldn't it be nicer if it was a variable instead of having it inline like this?
There was a problem hiding this comment.
I will declare it in another variable. But I must admit that I started refactoring, so it is not possible to change anymore 😅
| renderItemArrow={({ item, context }) => { | ||
| if (!item.isFolder) { | ||
| return null | ||
| } | ||
| const Icon = context.isExpanded ? AltArrowDownIcon : AltArrowRightIcon | ||
| return ( | ||
| <Icon | ||
| onClick={context.toggleExpandedState} | ||
| className="rct-tree-item-arrow-isFolder rct-tree-item-arrow fill-gray-950" | ||
| /> | ||
| ) | ||
| }} | ||
| renderItemTitle={({ title }) => { | ||
| return <span className="font-inter ml-1 overflow-hidden text-nowrap text-ellipsis">{title}</span> | ||
| }} |
There was a problem hiding this comment.
This arrow function is pretty big, wouldn't it be nicer if the function was saved in a variable and then used here?
There was a problem hiding this comment.
Sure, I'll also do this in the next PR if you don't mind. Stupid of me to do such a big refactor with a PR open...
| // Used to fix import error in TypeScript | ||
| declare module '*.mdx' { | ||
| import { ComponentType } from 'react' | ||
| const component: ComponentType | ||
| export default component | ||
| } |
There was a problem hiding this comment.
Interesting, didn't know this could be done like that 😮
I've added a simple Help page with a sidebar for topics. The topics can be entered in the
help-topic-tree-items.tsThe documentation itself composes of multiple MDX files, for easy documenting.