Improve admin panel customization docs

docusaurus/docs/cms/admin-panel-customization.md

@@ -26,5 +26,5 @@ Depending on what you want to achieve, you might need to update different parts
 | Choose and configure a bundler | By writing some code in dedicated configuration files found in the `src/admin` folder | [Bundlers](/cms/admin-panel-customization/bundlers) |
 | Replace or customize the WYSIWYG editor | _(Various strategies available, see related documentation)_ | [WYSIWYG editor](/cms/admin-panel-customization/wysiwyg-editor) |
 | Extend the admin panel | _(Various strategies available, see related documentation)_ | [Extension](/cms/admin-panel-customization/extension) |
-| Deploy the admin panel | _(Various strategies available, see related documentation)_ | [Deployment](/cms/admin-panel-customization/deployment) |
+| Deploy the admin panel | _(Various strategies available, see related documentation)_ | [Deployment](/cms/configurations/admin-panel#deployment) |
 | Customize the email templates | Directly from the admin panel through the settings for the Users & Permissions plugin | [User Guide for the Users & Permissions plugin](/cms/features/users-permissions#templating-emails) |

docusaurus/docs/cms/admin-panel-customization/favicon.md

@@ -0,0 +1,43 @@
+---
+title: Favicon
+description: Replace the favicon displayed in Strapi's admin panel.
+displayed_sidebar: cmsSidebar
+sidebar_label: Favicon
+toc_max_heading_level: 4
+tags:
+- admin panel
+- admin panel customization
+---
+
+# Favicon
+
+To replace the favicon:
+
+1. Create a `/src/admin/extensions/` folder if the folder does not already exist.
+2. Upload your favicon into `/src/admin/extensions/`.
+3. Replace the existing **favicon.png|ico** file at the Strapi application root with a custom `favicon.png|ico` file.
+4. Update `/src/admin/app.[tsx|js]` with the following:
+
+   ```js title="./src/admin/app.js"
+   import favicon from "./extensions/favicon.png";
+
+   export default {
+     config: {
+       // replace favicon with a custom icon
+       head: {
+         favicon: favicon,
+       },
+     },
+   };
+   ```
+
+5. Rebuild, launch and revisit your Strapi app by running `yarn build && yarn develop` in the terminal.
+
+:::tip
+This same process may be used to replace the login logo (i.e. `AuthLogo`) and menu logo (i.e. `MenuLogo`) (see [logos customization documentation](#logos)).
+:::
+
+:::caution
+Make sure that the cached favicon is cleared. It can be cached in your web browser and also with your domain management tool like Cloudflare's CDN.
+:::
+

docusaurus/docs/cms/admin-panel-customization/host-port-path.md

@@ -16,7 +16,7 @@ By default, Strapi's [admin panel](/cms/admin-panel-customization) is exposed vi
 
 ## Update the admin panel's path only
 
-Unless you chose to deploy Strapi's back-end server and admin panel server on different servers (see [deployment](/cms/admin-panel-customization/deployment)), by default:
+Unless you chose to deploy Strapi's back-end server and admin panel server on different servers (see [deployment](/cms/configurations/admin-panel#deployment)), by default:
 
 - The back-end server and the admin panel server of Strapi both run on the same host and port, which is `http://localhost:1337/`.
 - The admin panel is accessible at the `/admin` path while the back-end server is accessible at the `/api` path.
@@ -58,7 +58,7 @@ export default ({ env }) => ({
 
 ## Update the admin panel's host and port
 
-If the admin panel and the back-end server of Strapi are not hosted on the same server (see [deployment](/cms/admin-panel-customization/deployment)), you will need to update the host and port of the admin panel.
+If the admin panel and the back-end server of Strapi are not hosted on the same server (see [deployment](/cms/configurations/admin-panel#deployment)), you will need to update the host and port of the admin panel.
 
 This is done in the admin panel configuration file, for example to host the admin panel on `my-host.com:3000` properties should be updated follows:
 

docusaurus/docs/cms/admin-panel-customization/locales-translations.md

@@ -0,0 +1,153 @@
+---
+title: Locales & translations
+description: Learn how to update locales and extend translations in the Strapi admin panel.
+displayed_sidebar: cmsSidebar
+sidebar_label: Locales & translations
+toc_max_heading_level: 4
+tags:
+- admin panel
+- admin panel customization
+---
+
+# Locales & translations
+
+The admin panel always ships with English translations but can display additional languages. You can also override any text that appears in the interface.
+This page shows how to define your own locales and extend Strapi or plugin translations from the project codebase. For a broader view of branding options, see [Admin panel customization](/cms/admin-panel-customization).
+
+## Locales
+
+To update the list of available locales in the admin panel, use the `config.locales` array:
+
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+
+```jsx title="./my-app/src/admin/app.js"
+export default {
+  config: {
+    locales: ["ru", "zh"],
+  },
+  bootstrap() {},
+};
+```
+
+</TabItem>
+
+<TabItem value="ts" label="TypeScript">
+
+```jsx title="./my-app/src/admin/app.ts"
+export default {
+  config: {
+    locales: ["ru", "zh"],
+  },
+  bootstrap() {},
+};
+```
+
+</TabItem>
+</Tabs>
+
+:::note NOTES
+
+- The `en` locale cannot be removed from the build as it is both the fallback (i.e. if a translation is not found in a locale, the `en` will be used) and the default locale (i.e. used when a user opens the administration panel for the first time).
+- The full list of available locales is accessible on <ExternalLink to="https://github.com/strapi/strapi/blob/v4.0.0/packages/plugins/i18n/server/constants/iso-locales.json" text="Strapi's Github repo"/>.
+
+:::
+
+### Extending translations
+
+Translation key/value pairs are declared in `@strapi/admin/admin/src/translations/[language-name].json` files. These keys can be extended through the `config.translations` key:
+
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+
+```js title="./my-app/src/admin/app.js"
+export default {
+  config: {
+    locales: ["fr"],
+    translations: {
+      fr: {
+        "Auth.form.email.label": "test",
+        Users: "Utilisateurs",
+        City: "CITY (FRENCH)",
+        // Customize the label of the Content Manager table.
+        Id: "ID french",
+      },
+    },
+  },
+  bootstrap() {},
+};
+```
+
+</TabItem>
+
+<TabItem value="ts" label="TypeScript">
+
+```js title="./my-app/src/admin/app.ts"
+export default {
+  config: {
+    locales: ["fr"],
+    translations: {
+      fr: {
+        "Auth.form.email.label": "test",
+        Users: "Utilisateurs",
+        City: "CITY (FRENCH)",
+        // Customize the label of the Content Manager table.
+        Id: "ID french",
+      },
+    },
+  },
+  bootstrap() {},
+};
+```
+
+</TabItem>
+</Tabs>
+
+A plugin's key/value pairs are declared independently in the plugin's files at `./admin/src/translations/[language-name].json`. These key/value pairs can similarly be extended in the `config.translations` key by prefixing the key with the plugin's name (i.e. `[plugin name].[key]: 'value'`) as in the following example:
+
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+
+```js title="./my-app/src/admin/app.js"
+export default {
+  config: {
+    locales: ["fr"],
+    translations: {
+      fr: {
+        "Auth.form.email.label": "test",
+        // Translate a plugin's key/value pair by adding the plugin's name as a prefix
+        // In this case, we translate the "plugin.name" key of plugin "content-type-builder"
+        "content-type-builder.plugin.name": "Constructeur de Type-Contenu",
+      },
+    },
+  },
+  bootstrap() {},
+};
+```
+
+</TabItem>
+
+<TabItem value="ts" label="TypeScript">
+
+```js title="./my-app/src/admin/app.ts"
+export default {
+  config: {
+    locales: ["fr"],
+    translations: {
+      fr: {
+        "Auth.form.email.label": "test",
+        // Translate a plugin's key/value pair by adding the plugin's name as a prefix
+        // In this case, we translate the "plugin.name" key of plugin "content-type-builder"
+        "content-type-builder.plugin.name": "Constructeur de Type-Contenu",
+      },
+    },
+  },
+  bootstrap() {},
+};
+```
+
+</TabItem>
+</Tabs>
+
+If more translations files should be added, place them in `./src/admin/extensions/translations` folder.
+