chore(docusaurus): JP - update to latest

[thetaPC]

Issue URL: N/A

What is the current behavior?

Docusaurus was on an old version.

What is the new behavior?

Node 18 can now be used to run the project without failing.

Docusaurus has been updated to the latest version.

• docusaurus-theme-classic/ was removed in order to rely on the official docusaurus-theme-classic theme via the official docusaurus-preset-classic preset.

docusaurus-theme-classic/ was originally added in order to create custom navbar item types (cta, icon link, and separator). However, this approach would require a need to manually check differences between the original and the custom.

During the update, I decided to remove it in order to make it easier to upgrade and because the custom theme would lead to errors after updating. There are currently no documents that provide a clear way to keep the old approach. There is a current feature request to allow custom navbar items.

In the meantime, the cta and icon links are now being rendered through an html type or doc type. The functionality is the same. However, the styling had to be updated to prevent any visual changes between the before and after update.

The icon links are set up the same way that the official Docusaurus sets its social links. Instead of passing the SVG through a component, it's being set up through CSS. In order for the SVG to change colors based on light/dark mode, the SVG is being passed through a mask.

• docusaurus-preset-classic preset is being used as the project's theme

The preset already ships multiple packages like @docusaurus/plugin-content-docs. I uninstalled the shipped packages since they are not required to be installed as dependencies. It will also relay each option entry to the respective plugin/theme through the docusaurus.config.js presets.

• @ionic-internal/ionic-ds is still being used. This is great because we won't need to do anything extra when a new update is released.

• isDarkTheme is deprecated. It's been updated to the latest code (colorMode)

• CSS selectors were updated since the HTML structure has changed

• Theme components are up to date with the official docusaurus-theme-classic theme components.

There are some components that were swizzled (ejected). This allows us to override the original component's file. There are certain components that take advantage of this to display a different view. For example, the navbar is originally across the entire screen. However, Ionic only wants it inside the docs page.

Swizzling is considered unsafe since the developers would need to maintain it vs the original theme. For example, we have swizzled Icon/Edit because we want to show a GitHub logo instead of a pencil icon. We need make sure that our file syncs up to the original as much as possible. Otherwise, updates can be a pain.

So in short, we want to swizzle as little as possible and follow the original theme's file structure as much as possible. When we do swizzle, comment what was done to make maintenance easier.

• Added a swizzled LocaleDropdownNavbarItem in order to visually hide the language text.
• Added a swizzled Icon/Edit to change the svg
• Added a swizzled Icon/Language to change the svg

Does this introduce a breaking change?

• Yes
• No

Other information

I also applied the same changes to a branched version of main. The changes were successful and can be viewed at PR #3014.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 30, 2023 5:53pm

[thetaPC]

This can be removed once the project settings on Vercel are updated to Node v18.

[thetaPC]

This was auto generated.

[liamdebeasi]

Removing myself and Sean for review until this is out of draft. Once that happens, feel free to re-request!

[thetaPC]

The PR that targets main is almost ready to merge so this one can be reviewed.

[thetaPC]

The PR that targets main has been approved!

[liamdebeasi]

Approving provided both #3014 (comment) and the build here are fixed first. (The build failure seems new, but I was able to review the rest of the site prior to that)

I'd like to hold off on merging until next Monday at the earliest so we can have you, me, and Sean on hand for when it deploys since this is big upgrade.