chore(i18n): sync main into translation/jp

.github/workflows/CI.yml

@@ -12,24 +12,25 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node_version: [20]
         # Build processes work differently across operating systems, so the
         # checks run on each one to make sure anyone can contribute to the
         # docs.
         os: [windows-latest, macOS-latest]
 
     steps:
     - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-    - name: ⚙️ Use Node.js ${{ matrix.node_version }}
+    - name: ⚙️ Use Node.js
       uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
-        node-version: ${{ matrix.node_version }}
+        node-version: 24
     - name: 🕸️ Install Dependencies
-      run: npm ci --legacy-peer-deps
+      run: npm ci
     - name: 🖌️ Lint
       run: npm run lint
     - name: Test
       run: npm run test
+    - name: 🧩 Typecheck
+      run: npm run typecheck
     - name: 🔤 Spell Check
       run: npm run spellcheck
     - uses: ./.github/workflows/actions/check-admonitions

.prettierignore

@@ -3,7 +3,9 @@
 # Wrapped components are our own code, so they follow the repo's formatting.
 src/theme/DocItem/Layout/index.tsx
 src/theme/EditMetaRow/index.tsx
+src/theme/Icon/DarkMode/index.tsx
 src/theme/Icon/Edit/index.tsx
+src/theme/Icon/LightMode/index.tsx
 src/theme/Icon/Language/index.tsx
 src/theme/Layout/index.tsx
 src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -12,25 +14,25 @@ src/theme/prism-include-languages.ts
 legacy-stencil-components
 scripts/bak
 
-docs/api
+# Auto-generated files
 docs/native
 versioned_docs/version-v*/native
 docs/cli/commands
-# Each definition in these files is one line of prose inside a JSX <section>.
-# Prettier's mdx parser reflows those children and moves link text onto its own
-# line, which MDX then wraps in a paragraph, rendering invalid HTML such as
-# <a><p>Android SDK</p></a>. Formatting these files reintroduces that markup.
-docs/reference/glossary.mdx
-versioned_docs/version-v*/reference/glossary.md*
+versioned_docs/version-v*/cli/commands
 
 # Archived versions
 versioned_docs/version-v5
 versioned_docs/version-v6
+versioned_docs/version-v7
+static/usage/v6
+static/usage/v7
 
 static/code/stackblitz
 
 .docusaurus
 .github
 build
 node_modules
+
+# Source material for the Japanese translation tooling, not documentation.
 src/translate

.prettierrc.js

@@ -0,0 +1,11 @@
+/**
+ * Prettier configuration for the docs site.
+ */
+
+const ionicConfig = require('@ionic/prettier-config');
+
+module.exports = {
+  ...ionicConfig,
+  // Override the trailingComma setting to avoid trailing commas in function arguments and JSX props.
+  trailingComma: 'es5',
+};

CONTRIBUTING.md

@@ -214,27 +214,119 @@ The Ionic documentation's `main` branch is deployed automatically and separately
 
 ### Archiving a Version
 
-Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. Two files control this:
+Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. That deployment is a full snapshot of the site, so it serves every version that was in the build. Two files control this:
 
-- [`versions.json`](./versions.json): lists the versions Docusaurus rebuilds on every deploy.
+- [`versions.json`](./versions.json): lists the older versions Docusaurus rebuilds on every deploy. It does not include the current version, which is built from `docs/` and takes its label from `versions.current` in `docusaurus.config.js`.
 - [`versionsArchived.json`](./versionsArchived.json): maps each archived version to the frozen deployment URL the version picker links to.
 
-The archived URL has to point at a build that _included_ the version, so you build it first, then move it to `versionsArchived.json`:
+The docs keep the current version plus one older version rebuildable, so each major release archives one version and involves two different version numbers. The steps below refer to them as:
 
-1. **Build the version.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`. Commit, push and let Vercel deploy.
-2. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled.
-3. **Copy its URL.** Use the deployment's unique `ionic-docs-<hash>-ionic1.vercel.app` URL, not the branch or production alias.
-4. **Archive it.** Remove the version from `versions.json`, then add it to `versionsArchived.json` with `/docs/<version>` appended and no trailing slash (a trailing slash causes a brief 404 flash):
+- `<archiving>`: the version being frozen and removed from `versions.json`.
+- `<last-current>`: the version that just stopped being current and moved into `versions.json`. It is not being archived, but step 1 has to account for it.
+
+For example, when `v9` becomes current: `v8` is `<last-current>` and `v7` is `<archiving>`.
+
+The archived URL has to point at a build that _included_ `<archiving>`, so you build it first, then move it to `versionsArchived.json`:
+
+1. **Check the `vercel.json` redirects.** The frozen deployment bakes in whatever `vercel.json` looked like at build time, and it serves every version in that build. Any `:version(...)` group missing a version therefore stays broken on that host for good. Make sure the groups already list `<last-current>`, which is the one most likely to be missing since it only just moved into `versions.json`. The `angular`, `react`, `vue` and `javascript` landing pages each need a group, as no version ships an index page for them:
+
+   ```json
+   {
+     "source": "/docs/:version(v6|v7|<last-current>)/angular",
+     "destination": "/docs/:version/angular/overview"
+   },
+   {
+     "source": "/docs/:version(<last-current>)/javascript",
+     "destination": "/docs/:version/javascript/overview"
+   }
+   ```
+
+   The groups accumulate, so existing entries stay in place whether or not that version is archived and you are only ever adding to them. The `javascript` group only covers versions that have a `javascript/` section.
+
+Everything from here on refers to `<archiving>`:
+
+2. **Build `<archiving>`.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`, and add it back to the generation scripts in step 10. Commit, push and let Vercel deploy.
+3. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled.
+4. **Copy its URL.** Use the deployment's unique `ionic-docs-<hash>-ionic1.vercel.app` URL, not the branch or production alias.
+5. **Archive it.** Remove `<archiving>` from `versions.json`, then add it to `versionsArchived.json` with `/docs/<archiving>` appended and no trailing slash (a trailing slash causes a brief 404 flash):
+
+   _`versions.json`_
+
+   ```diff
+    [
+   -  "v8",
+   -  "<archiving>"
+   +  "v8"
+    ]
+   ```
+
+   _`versionsArchived.json`_
 
    ```json
    {
-     "v6": "https://ionic-docs-<hash>-ionic1.vercel.app/docs/v6"
+     "<archiving>": "https://ionic-docs-<hash>-ionic1.vercel.app/docs/<archiving>",
+     "v6": "https://ionic-docs-lq0if04rc-ionic1.vercel.app/docs/v6",
+     "v5": "https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5"
    }
    ```
 
-5. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building that version.
+6. **Update `.prettierignore`.** Add the archived version folders to the archived versions group to keep Prettier from formatting generated files:
+
+   ```
+   static/usage/<archiving>
+   versioned_docs/version-<archiving>
+   ```
+
+7. **Update `cspell.json`.** Add the archived version to the `ignorePaths` array so the spell checker skips generated files:
+
+   ```diff
+   "ignorePaths": [
+     ...
+     "versioned_docs/version-v5",
+     "versioned_docs/version-v6",
+   + "versioned_docs/version-<archiving>"
+   ]
+   ```
+
+8. **Update `renovate.json`.** Add the archived version's StackBlitz examples to `ignorePaths` so Renovate stops opening dependency PRs against frozen examples:
+
+   ```diff
+   "ignorePaths": [
+     "static/code/stackblitz/v6/**",
+   + "static/code/stackblitz/<archiving>/**"
+   ]
+   ```
+
+   Then remove that version's `@ionic/` `allowedVersions` rule from `packageRules`, since it no longer has anything to match.
+
+9. **Update the playground generator.** Remove `<archiving>` from the version choices in [`_templates/playground/new/index.js`](./_templates/playground/new/index.js) so `npm run playground:new` stops offering a version that is no longer built. The choices are bare numbers, without the `v`:
+
+   ```diff
+   -              choices: ['<archiving>', '8', '9'],
+   +              choices: ['8', '9'],
+   ```
+
+10. **Update the generation scripts.** Remove `<archiving>` from the write lists in [`scripts/native.mjs`](./scripts/native.mjs) and [`scripts/cli.mjs`](./scripts/cli.mjs), so every build stops regenerating content for a version served from a frozen deployment. The remaining targets are `docs/` (the current version) and the one older version still in `versions.json`.
+
+    _`scripts/native.mjs`_
+
+    ```diff
+     writeFileSync(`docs/native/${fileName}`, apiContent);
+    -  writeFileSync(`versioned_docs/version-<archiving>/native/${fileName}`, apiContent);
+     writeFileSync(`versioned_docs/version-v8/native/${fileName}`, apiContent);
+    ```
+
+    _`scripts/cli.mjs`_
+
+    ```diff
+     writeFileSync(`docs/${path}`, data);
+    -  writeFileSync(`versioned_docs/version-<archiving>/${path}`, data);
+     writeFileSync(`versioned_docs/version-v8/${path}`, data);
+    ```
+
+11. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building `<archiving>`.
 
-Removed versions keep their `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`.
+Removed versions keep their authored `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`. Their `native/` and `cli/commands/` pages are generated rather than committed, so a rebuild also needs the version back in the write lists from step 10. Without it those sections build empty.
 
 > [!NOTE]
 > Ionic v3 and v4 use other build tools and are not managed here.

_templates/playground/new/index.js

@@ -55,7 +55,7 @@ module.exports = {
               name: 'version',
               message: 'Select the Ionic Framework version for the playground',
               initial: '9',
-              choices: ['6', '7', '8', '9'],
+              choices: ['8', '9'],
             },
             {
               type: 'toggle',
@@ -72,7 +72,7 @@ module.exports = {
 
             const playgroundName = changeCase.pascal(answers.path.split('/').pop());
             console.log(
-              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
+              `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.mdx';\n\n<${playgroundName} />\n`
             );
 
             return answers;

_templates/playground/new/index.mdx.ejs.t

@@ -0,0 +1,48 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/index.mdx` %>"
+---
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+<% if (css){ %>
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+<% } else { -%>
+import react from './react.md';
+<% } -%>
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+<% if (css){ -%>
+import angular_example_component_css from './angular/example_component_css.md';
+<% } -%>
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="<%= version %>"
+  code={{
+    javascript,
+<% if (css){ -%>
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+<% } else { -%>
+    react,
+<% } -%>
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+<% if (css){ -%>
+        'src/app/example.component.css': angular_example_component_css,
+<% } -%>
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
+/>