Add guide to customize admin and plugin

docs/.vuepress/config.js

@@ -189,6 +189,7 @@ module.exports = {
             '/3.0.0-beta.x/guides/jwt-validation',
             '/3.0.0-beta.x/guides/error-catching',
             '/3.0.0-beta.x/guides/external-data',
+            '/3.0.0-beta.x/guides/custom-admin',
             '/3.0.0-beta.x/guides/slug',
             '/3.0.0-beta.x/guides/webhooks',
           ],

docs/3.0.0-beta.x/guides/custom-admin.md

@@ -0,0 +1,114 @@
+# Custom admin
+
+In this guide we will see how you can customize the admin panel.
+
+## Introduction
+
+For this example, we will see two things, the first one will be the customization of the admin panel it self, by updating the content of the `/admin/` home page. And in a second time we will see ho to update the interface of a plugin, by replacing the `date` format in the content manager list view.
+
+First of all, you will have to read the [customization concept](../concepts/customization.md), it will help you to understand how to customize all your application.
+
+## Update the admin home page
+
+If you are following the customization concept, you can already create a `./admin` folder in your application.
+
+### Target the file to update
+
+Then you will have to investigate into the [`strapi-admin`](https://github.com/strapi/strapi/tree/master/packages/strapi-admin) package to find the file that is used to display the admin panel home page.
+
+Here is the [HomePage container](https://github.com/strapi/strapi/tree/master/packages/strapi-admin/admin/src/containers/HomePage/index.js) you will have to update.
+
+### Eject the file
+
+Let's eject this file to be able to customize it.
+
+**Path —** `./admin/src/containers/HomePage/index.js`
+
+In this new files, paste the current [HomePage container](https://github.com/strapi/strapi/tree/master/packages/strapi-admin/admin/src/containers/HomePage/index.js) code.
+
+To run your application, you will have to run the `yarn develop --watch-admin` command.
+
+If you visit the admin, nothing will have changed in the home page. And it's normal!
+
+### Customize the file
+
+To keep this example really simple, we will just reduce the HomePage in it's more simple design.
+
+**Path —** `./admin/src/containers/HomePage/index.js`
+
+```js
+import React, { memo } from 'react';
+
+import { Block, Container } from './components';
+
+const HomePage = ({ global: { plugins }, history: { push } }) => {
+  return (
+    <>
+      <Container className="container-fluid">
+        <div className="row">
+          <div className="col-12">
+            <Block>Hello World!</Block>
+          </div>
+        </div>
+      </Container>
+    </>
+  );
+};
+
+export default memo(HomePage);
+```
+
+Now the admin panel home page should just contain the sentence `Hello Wold!`.
+
+## Update the Content Manager
+
+If you are following the customization concept, you can already create a `./extensions/content-manager` folder in your application.
+
+::: tip
+
+To be able to see the update, you will need to have a Content Type that have a `date` attribute.
+
+:::
+
+### Target the file to update
+
+Then you will have to investigate into the [`strapi-plugin-content-manager`](https://github.com/strapi/strapi/tree/master/packages/strapi-plugin-content-manager) package to find the file that is used to format the date for the list view.
+
+Here is the [Row component](https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js) you will have to update.
+
+### Eject the file
+
+Let's eject the file to be able to customize it.
+
+**Path —** `./extensions/content-manager/admin/src/components/CustomTable/Row.js`
+
+In this new files, paste the current [Row component](https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js) code.
+
+To run your application, you will have to run the `yarn develop --watch-admin` command.
+
+If you visit the entry list view of your content type, nothing will have changed. And it's normal!
+
+### Customize the file
+
+In our example, we want to change the format of the date. We have to find in this file the line that manage the date format.
+
+Here is the code you have to find:
+
+```js
+return moment
+  .parseZone(date)
+  .utc()
+  .format('dddd, MMMM Do YYYY');
+```
+
+Now let's replace `.format('dddd, MMMM Do YYYY');` by `.format('YYYY/MM/DD');`
+
+And tada, the date will now display with the new format.
+
+## Build the new admin
+
+Well now you have the admin panel you want. But during all the process, the admin panel was updated on the run time because of the command `yarn develop --watch-admin`.
+
+If you start your application using `yarn start` or `yarn develop` the admin will be the old version. Your updates are not applied.
+
+To do so, you have to build the admin panel using the following command `yarn build`.