feat : rework slides (#6)

* feat: implement last labs (start) * feat: enhances slides * feat: save excalidraw schemas
sfeir-open-source · Sep 23, 2024 · 795468d · 795468d
1 parent 6d3c807
commit 795468d
Show file tree

Hide file tree

Showing 54 changed files with 58,135 additions and 11,064 deletions.
diff --git a/docs/assets/images/02-routing/app-vs-pages-priority.png b/docs/assets/images/02-routing/app-vs-pages-priority.png
diff --git a/docs/assets/images/02-routing/component-hierarchy.png b/docs/assets/images/02-routing/component-hierarchy.png
diff --git a/docs/assets/images/02-routing/component-nesting.png b/docs/assets/images/02-routing/component-nesting.png
diff --git a/docs/assets/images/02-routing/naming-error.png b/docs/assets/images/02-routing/naming-error.png
diff --git a/docs/assets/images/02-routing/naming-global-error.png b/docs/assets/images/02-routing/naming-global-error.png
diff --git a/docs/assets/images/02-routing/naming-layout.png b/docs/assets/images/02-routing/naming-layout.png
diff --git a/docs/assets/images/02-routing/naming-loading.png b/docs/assets/images/02-routing/naming-loading.png
diff --git a/docs/assets/images/02-routing/naming-notfound.png b/docs/assets/images/02-routing/naming-notfound.png
diff --git a/docs/assets/images/02-routing/naming-page.png b/docs/assets/images/02-routing/naming-page.png
diff --git a/docs/assets/images/02-routing/naming-route.png b/docs/assets/images/02-routing/naming-route.png
diff --git a/docs/assets/images/02-routing/naming-template.png b/docs/assets/images/02-routing/naming-template.png
diff --git a/docs/assets/images/02-routing/naming.png b/docs/assets/images/02-routing/naming.png
diff --git a/docs/assets/images/02-routing/vocabulary-1.png b/docs/assets/images/02-routing/vocabulary-1.png
diff --git a/docs/assets/images/02-routing/vocabulary-2.png b/docs/assets/images/02-routing/vocabulary-2.png
diff --git a/docs/assets/images/02-routing/vocabulary-3.png b/docs/assets/images/02-routing/vocabulary-3.png
diff --git a/docs/assets/images/08-rendering/meme.jpg b/docs/assets/images/08-rendering/meme.jpg
diff --git a/docs/assets/images/component-hierarchy.png b/docs/assets/images/component-hierarchy.png
diff --git a/docs/assets/images/component-nesting.png b/docs/assets/images/component-nesting.png
diff --git a/docs/assets/images/gde.png b/docs/assets/images/gde.png
diff --git a/docs/assets/images/jf.jpg b/docs/assets/images/jf.jpg
diff --git a/docs/assets/resources/schemas.excalidraw b/docs/assets/resources/schemas.excalidraw
diff --git a/docs/markdown/00-school/30-speaker.md → docs/markdown/00-school/10-speaker.md b/docs/markdown/00-school/30-speaker.md → docs/markdown/00-school/10-speaker.md
diff --git a/docs/markdown/00-school/31-tour-de-table.md → docs/markdown/00-school/11-tour-de-table.md b/docs/markdown/00-school/31-tour-de-table.md → docs/markdown/00-school/11-tour-de-table.md
diff --git a/docs/markdown/00-school/10-planning.md → docs/markdown/00-school/20-planning.md b/docs/markdown/00-school/10-planning.md → docs/markdown/00-school/20-planning.md
diff --git a/docs/markdown/00-school/22-requirements.md b/docs/markdown/00-school/22-requirements.md
diff --git a/docs/markdown/00-school/30-requirements.md b/docs/markdown/00-school/30-requirements.md
@@ -0,0 +1,13 @@
+## Requirements
+
+- Basic knowledge of HTML and CSS
+- Completion of Typescript institute or equivalent
+- Completion of the React institute or equivalent
+
+<br/><br/>
+
+**Technical requirements**
+
+- Node v18
+- npm
+- IDE : VSCode or Webstorm recommanded
diff --git a/docs/markdown/00-school/20-wifi.md → docs/markdown/00-school/31-wifi.md b/docs/markdown/00-school/20-wifi.md → docs/markdown/00-school/31-wifi.md
diff --git a/docs/markdown/00-school/21-repo.md → docs/markdown/00-school/32-repo.md b/docs/markdown/00-school/21-repo.md → docs/markdown/00-school/32-repo.md
diff --git a/docs/markdown/02-routing/02-vocabulary.md b/docs/markdown/02-routing/02-vocabulary.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="two-column with-code" -->
+
+<style>
+  .routing-vocabulary-1 {
+    width: 1100px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Vocabulary
+
+<img src="./assets/images/02-routing/vocabulary-1.png" class="routing-vocabulary-1"  />
diff --git a/docs/markdown/02-routing/03-vocabulary-1.md b/docs/markdown/02-routing/03-vocabulary-1.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="two-column with-code" -->
+
+<style>
+  .routing-vocabulary-2 {
+    width: 1100px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Vocabulary
+
+<img src="./assets/images/02-routing/vocabulary-2.png" class="routing-vocabulary-2"  />
diff --git a/docs/markdown/02-routing/04-vocabulary-2.md b/docs/markdown/02-routing/04-vocabulary-2.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="two-column with-code" -->
+
+<style>
+  .routing-vocabulary-3 {
+    width: 1100px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Vocabulary
+
+<img src="./assets/images/02-routing/vocabulary-3.png" class="routing-vocabulary-3"  />
diff --git a/docs/markdown/02-routing/10-naming.md b/docs/markdown/02-routing/10-naming.md
@@ -1,26 +1,28 @@
-<!-- .slide: class="with-code" -->
+<!-- .slide: class="two-column with-code" -->
+
+<style>
+  .routing-naming {
+    width: 500px;
+    height: auto;
+  }
+</style>
 
 # Routing
 
 ## Conventions
 
-(.tsx | .js | .jsx)
+(.tsx | .ts | .js | .jsx)
+
+<img src="./assets/images/02-routing/naming.png" class="routing-naming"  />
+
+##--##
 
-- **layout** : shared UI for a segment (and its children)
-- **template** : shared UI for a segment with re-render (and its children)
-- **page** : public route UI
-- **loading** : loading UI for a segment (and its children)
-- **not-found** : page not found UI for a segment (and its children)
-- **error** : Unexpected error UI for a segment (and its children)
-- **route** : Server API endpoint definitions
+<br/> <br/> <br/>
 
 <div>
-<br/>
 
-**Special files**
+⚠️ **Warning :** <br/> It's not possible to create routes other than with the file-system based router
 
-- **/error** (root level) : Unexpected global error
-- **default** : (advanced) Fallback UI for parallel routes
 </div>
 <!-- .element: class="fragment" data-fragment-index="1"-->
 

diff --git a/docs/markdown/02-routing/10.1-naming-page.md b/docs/markdown/02-routing/10.1-naming-page.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-page.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/10.2-naming-layout.md b/docs/markdown/02-routing/10.2-naming-layout.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-layout.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/10.3-naming-template.md b/docs/markdown/02-routing/10.3-naming-template.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-template.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/10.4-naming-loading.md b/docs/markdown/02-routing/10.4-naming-loading.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-loading.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/10.5-naming-error.md b/docs/markdown/02-routing/10.5-naming-error.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-error.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/10.6-naming-global-error.md b/docs/markdown/02-routing/10.6-naming-global-error.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-global-error.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/10.7-naming-notfound.md b/docs/markdown/02-routing/10.7-naming-notfound.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-notfound.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/10.8-naming-route.md b/docs/markdown/02-routing/10.8-naming-route.md
@@ -0,0 +1,14 @@
+<!-- .slide: class="with-code" -->
+
+<style>
+  .routing-naming-example {
+    width: 1500px;
+    height: auto;
+  }
+</style>
+
+# Routing
+
+## Conventions
+
+<img src="./assets/images/02-routing/naming-route.png" class="routing-naming-example "  />
diff --git a/docs/markdown/02-routing/11-hierarchy.md → docs/markdown/02-routing/12-hierarchy.md b/docs/markdown/02-routing/11-hierarchy.md → docs/markdown/02-routing/12-hierarchy.md
@@ -1,12 +1,19 @@
 <!-- .slide: class="two-column with-code" -->
 
+<style>
+  .routing-component-hierarchy {
+    width: 1700px;
+    height: auto;
+  }
+</style>
+
 # Routing
 
 ## File hierarchy
 
 File components are rendered and nested in a specific order :
 
-![full-width](./assets/images/component-hierarchy.png)
+<img src="./assets/images/02-routing/component-hierarchy.png" class="routing-component-hierarchy"  />
 
 Notes:
 

diff --git a/docs/markdown/02-routing/12-nesting.md → docs/markdown/02-routing/13-nesting.md b/docs/markdown/02-routing/12-nesting.md → docs/markdown/02-routing/13-nesting.md
@@ -1,12 +1,19 @@
 <!-- .slide: class="two-column with-code" -->
 
+<style>
+  .routing-component-nesting {
+    width: 1400px;
+    height: auto;
+  }
+</style>
+
 # Routing
 
 ## Nested file hierarchy
 
 Nested routes = nested components
 
-![](./assets/images/component-nesting.png)
+<img src="./assets/images/02-routing/component-nesting.png" class="routing-component-nesting"  />
 
 Notes:
 

diff --git a/...rkdown/02-routing/13-with-pages-router.md → ...rkdown/02-routing/14-with-pages-router.md b/...rkdown/02-routing/13-with-pages-router.md → ...rkdown/02-routing/14-with-pages-router.md
diff --git a/docs/markdown/02-routing/20-colocation.md b/docs/markdown/02-routing/20-colocation.md
@@ -17,6 +17,20 @@ They will not be interpreted as routes :
 
 <img src="./assets/images/02-routing/colocation.png" class="routing-colocation-img"  />
 
+##--##
+
+<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
+
+<div>
+
+**⚠️ Warning**
+
+- It can create confusion
+- May conflict with future conventions
+
+</div>
+<!-- .element: class="fragment" data-fragment-index="1"-->
+
 Notes:
 
 La colocation de fichier permet d'envisager toute structure de projet

diff --git a/docs/markdown/02-routing/31-pages-dynamic.md b/docs/markdown/02-routing/31-pages-dynamic.md
@@ -17,9 +17,9 @@
 Catch all segments :
 
 ```
-/app/post/[...slug]/page                website.com/a
-                                        website.com/a/b
-                                        website.com/a/b/c
+/app/post/[...slug]/page.tsx            website.com/post/a
+                                        website.com/post/a/b
+                                        website.com/post/a/b/c
                                         ...
 ```
 
@@ -32,9 +32,9 @@ Catch all segments :
 Optional catch all segments :
 
 ```
-/app/post/[[...slug]]/page              website.com
-                                        website.com/a
-                                        website.com/a/b
+/app/post/[[...slug]]/page              website.com/post
+                                        website.com/post/a
+                                        website.com/post/a/b
                                         ...
 ```
 

diff --git a/docs/markdown/02-routing/50-advanced.md b/docs/markdown/02-routing/50-advanced.md
@@ -1,11 +1,6 @@
-<!-- .slide: class="two-column with-code " -->
+<!-- .slide: class="transition bg-pink" -->
 
-# Routing
-
-## Advanced features
-
-- Parallel routing
-- Intercepting routes
+# Routing : Advanced Patterns
 
 Notes:
 

diff --git a/docs/markdown/02-routing/60-lab.md b/docs/markdown/02-routing/60-lab.md
@@ -13,13 +13,13 @@
 - Employees pages (List, Detail, Edit, Create)
 - Expenses page (List, Single)
 
-**2. Add some metadatas (title, description)**
-
 **3. Create the application layouts**
 
 - Authentication layout for the login page
 - Dashboard layout for all the rest
 
+**Bonus : Add some metadatas (title, description)**
+
 <br/> <br/>
 
 **ℹ️ Running the lab**<br/>

diff --git a/docs/markdown/08-rendering-methods/70-attendance-sheet.md b/docs/markdown/08-rendering-methods/70-attendance-sheet.md
@@ -0,0 +1,7 @@
+<!-- .slide: class="exercice" -->
+
+## Lab
+
+# But just one thing first
+
+<img src="./assets/images/08-rendering/meme.jpg" class="meme-70" />
diff --git a/docs/markdown/08-rendering-methods/70-lab.md → docs/markdown/08-rendering-methods/80-lab.md b/docs/markdown/08-rendering-methods/70-lab.md → docs/markdown/08-rendering-methods/80-lab.md
diff --git a/docs/markdown/09-deploying-and-hosting/.gitkeep b/docs/markdown/09-deploying-and-hosting/.gitkeep
diff --git a/docs/markdown/20-conclusion/00-title.md b/docs/markdown/20-conclusion/00-title.md
@@ -0,0 +1,3 @@
+<!-- .slide: class="transition bg-pink" -->
+
+# Conclusion