[Doc] Add beginner mode to hide advanced doc chapters

docs/Tutorial.md

@@ -1166,6 +1166,8 @@ After that, the best way to learn react-admin is by reading the introduction cha
 - [Preferences](./Store.md)
 - [Realtime](./Realtime.md)
 
+**Tip**: React-admin is a large framework, so its documentation is quite large. Don't get intimidated! React-admin works well for projects of any size. To continue your discovery of react-admin, we recommend that you **[enable the beginner mode](#beginner-mode)**, that hides the advanced features from the sidebar. Just remember to disable it when you're ready to go further.
+
 And to help you close the gap between theoretical knowledge and practical experience, take advantage of the react-admin [Demos](./Demos.md). They are great examples of how to use react-admin in a real world application. They also show the best practices for going beyond simple CRUD apps.
 
 <video controls autoplay playsinline muted loop width="100%">

docs/Vite.md

@@ -1,9 +1,9 @@
 ---
 layout: default
-title: "Vite Integration"
+title: "Installing React-admin With Vite"
 ---
 
-# Vite Integration
+# Installing React-admin With Vite
 
 [Vite](https://vitejs.dev/) is a JavaScript bundler which improves speed of dev server and production build compared to Webpack.
 

docs/_layouts/default.html

@@ -20,7 +20,7 @@
         />
         <link
             rel="stylesheet"
-            href="{{ '/css/style-v18.css' | relative_url }}"
+            href="{{ '/css/style-v19.css' | relative_url }}"
         />
         <link rel="stylesheet" href="{{ '/css/syntax.css' | relative_url }}" />
         <link rel="stylesheet" href="{{ '/css/prism.css' | relative_url }}" />
@@ -49,42 +49,54 @@
             @font-face {
                 font-display: block;
                 font-family: Roboto;
-                src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
+                src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2)
+                        format('woff2'),
+                    url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff)
+                        format('woff');
             }
 
             @font-face {
                 font-display: fallback;
                 font-family: Roboto;
                 font-weight: 600;
-                src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
+                src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2)
+                        format('woff2'),
+                    url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff)
+                        format('woff');
             }
 
             @font-face {
                 font-display: fallback;
                 font-family: Roboto;
                 font-weight: 700;
-                src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
+                src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2)
+                        format('woff2'),
+                    url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff)
+                        format('woff');
             }
 
             #sib-container input:-ms-input-placeholder {
                 text-align: left;
-                font-family: "Helvetica", sans-serif;
+                font-family: 'Helvetica', sans-serif;
                 color: #c0ccda;
             }
 
             #sib-container input::placeholder {
                 text-align: left;
-                font-family: "Helvetica", sans-serif;
+                font-family: 'Helvetica', sans-serif;
                 color: #c0ccda;
             }
 
             #sib-container textarea::placeholder {
                 text-align: left;
-                font-family: "Helvetica", sans-serif;
+                font-family: 'Helvetica', sans-serif;
                 color: #c0ccda;
             }
         </style>
-        <link rel="stylesheet" href="{{ '/css/newsletter.css' | relative_url }}">
+        <link
+            rel="stylesheet"
+            href="{{ '/css/newsletter.css' | relative_url }}"
+        />
     </head>
 
     <body>
@@ -159,14 +171,27 @@
         <script>
             window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code';
             window.LOCALE = 'en';
-            window.GENERIC_INVALID_MESSAGE = window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again.";
-            window.REQUIRED_ERROR_MESSAGE = "This field is required.";
+            window.GENERIC_INVALID_MESSAGE = window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE =
+                'The information provided is invalid. Please review the field format and try again.';
+            window.REQUIRED_ERROR_MESSAGE = 'This field is required.';
 
             var AUTOHIDE = Boolean(0);
         </script>
 
-        <script async defer src="https://unpkg.com/[email protected]/lib/typescript.js"></script>
-        <script async defer src="https://unpkg.com/[email protected]/standalone.js"></script>
-        <script async defer src="https://unpkg.com/[email protected]/parser-babel.js"></script>
+        <script
+            async
+            defer
+            src="https://unpkg.com/[email protected]/lib/typescript.js"
+        ></script>
+        <script
+            async
+            defer
+            src="https://unpkg.com/[email protected]/standalone.js"
+        ></script>
+        <script
+            async
+            defer
+            src="https://unpkg.com/[email protected]/parser-babel.js"
+        ></script>
     </body>
 </html>

docs/css/style-v18.css → docs/css/style-v19.css

@@ -164,6 +164,20 @@ ul.sidenav code {
     box-shadow: none;
 }
 
+.switch label input[type=checkbox]:checked+.lever {
+    background-color: #85b3df;
+}
+
+.switch label .lever:before {
+    background-color: rgba(38,77,166,0.15);
+}
+
+.switch label input[type=checkbox]:checked+.lever:after {
+    background-color: #145dc2;
+}
+
+/* Table of contents */
+
 .table-of-contents {
     overflow-y: auto;
     height: calc(100% - 75px);

docs/documentation.html

@@ -19,7 +19,7 @@
         />
         <link
             rel="stylesheet"
-            href="{{ '/css/style-v18.css' | relative_url }}"
+            href="{{ '/css/style-v19.css' | relative_url }}"
         />
         <link rel="stylesheet" href="{{ '/css/syntax.css' | relative_url }}" />
         <link rel="stylesheet" href="{{ '/css/prism.css' | relative_url }}" />

docs/js/ra-doc-exec.js

@@ -290,6 +290,54 @@ function loadNewsletterScript() {
     }
 }
 
+/**
+ * Beginner mode
+ */
+
+let beginnerMode = window.localStorage.getItem('beginner-mode') === 'true';
+
+function hideNonBeginnerDoc() {
+    const chapters = document.querySelectorAll('.sidenav > ul  li');
+    chapters.forEach(chapter => {
+        if (!chapter.classList.contains('beginner')) {
+            chapter.style.display = 'none';
+        }
+    });
+    document.querySelectorAll('.beginner-mode-on').forEach(el => {
+        el.style.display = 'block';
+    });
+}
+
+function showNonBeginnerDoc() {
+    const chapters = document.querySelectorAll('.sidenav > ul  li');
+    chapters.forEach(chapter => {
+        chapter.style.display = 'list-item';
+    });
+    document.querySelectorAll('.beginner-mode-on').forEach(el => {
+        el.style.display = 'none';
+    });
+}
+
+document
+    .getElementById('beginner-mode-trigger')
+    .addEventListener('click', () => {
+        beginnerMode = !beginnerMode;
+        if (beginnerMode) {
+            window.localStorage.setItem('beginner-mode', 'true');
+            hideNonBeginnerDoc();
+        } else {
+            window.localStorage.removeItem('beginner-mode');
+            showNonBeginnerDoc();
+        }
+    });
+
+window.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('beginner-mode-trigger').checked = beginnerMode;
+    if (beginnerMode) {
+        hideNonBeginnerDoc();
+    }
+});
+
 // Replace full page reloads by a fill of the content area
 // so that the side navigation keeps its state
 // use a global event listener to also catch links inside the content area