fix: clean some slides

sfeir-open-source · Sep 3, 2024 · 65e43e3 · 65e43e3
1 parent d57831f
commit 65e43e3
Show file tree

Hide file tree

Showing 90 changed files with 404 additions and 203 deletions.
diff --git a/docs/markdown/02-routing/01-intro.md b/docs/markdown/02-routing/01-intro.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="two-column with-code" -->
 
-# Introduction
+# Routing
 
 **Key features :**
 

diff --git a/docs/markdown/02-routing/10-naming.md b/docs/markdown/02-routing/10-naming.md
@@ -1,6 +1,8 @@
-<!-- .slide: class="with-code title-margin-sm" -->
+<!-- .slide: class="with-code" -->
 
-# Naming convention
+# Routing
+
+## Conventions
 
 (.tsx | .js | .jsx)
 

diff --git a/docs/markdown/02-routing/11-hierarchy.md b/docs/markdown/02-routing/11-hierarchy.md
@@ -1,6 +1,8 @@
-<!-- .slide: class="two-column with-code title-margin-sm " -->
+<!-- .slide: class="two-column with-code" -->
 
-# Hierarchy
+# Routing
+
+## File hierarchy
 
 File components are rendered and nested in a specific order :
 

diff --git a/docs/markdown/02-routing/12-nesting.md b/docs/markdown/02-routing/12-nesting.md
@@ -1,6 +1,8 @@
-<!-- .slide: class="two-column with-code title-margin-sm " -->
+<!-- .slide: class="two-column with-code" -->
 
-# Hierarchy
+# Routing
+
+## Nested file hierarchy
 
 Nested routes = nested components
 

diff --git a/docs/markdown/02-routing/13-with-pages-router.md b/docs/markdown/02-routing/13-with-pages-router.md
@@ -7,7 +7,9 @@
   }
 </style>
 
-# Pages router
+# Routing
+
+## With pages router
 
 The app router always has priority over the page router
 

diff --git a/docs/markdown/02-routing/20-colocation.md b/docs/markdown/02-routing/20-colocation.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="two-column with-code title-margin-sm" -->
+<!-- .slide: class="two-column with-code" -->
 
 <style>
   .routing-colocation-img {
@@ -7,7 +7,9 @@
   }
 </style>
 
-# Colocation
+# Routing
+
+## Colocation
 
 You can collocate files alongside specific files.
 

diff --git a/docs/markdown/02-routing/21-colocation-private.md b/docs/markdown/02-routing/21-colocation-private.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="two-column with-code title-margin-sm" -->
+<!-- .slide: class="two-column with-code" -->
 
 <style>
   .routing-colocation-private-img {
@@ -7,8 +7,14 @@
   }
 </style>
 
-# Colocation
+# Routing
 
-You can also make an entire subfolder private with an underscore prefix to exclude it from routing :
+## Colocation
+
+You can also make an entire subfolder private with an underscore prefix to exclude it from routing
+
+##--##
+
+<br/> <br/>
 
 <img src="./assets/images/02-routing/colocation_folder.png" class="routing-colocation-private-img"  />
diff --git a/docs/markdown/02-routing/30-pages.md b/docs/markdown/02-routing/30-pages.md
@@ -1,6 +1,8 @@
 <!-- .slide: class="two-column with-code" -->
 
-# Page declaration
+# Routing
+
+## Page declaration
 
 Create a _page.tsx_ file in nested directories :
 

diff --git a/docs/markdown/02-routing/31-pages-dynamic.md b/docs/markdown/02-routing/31-pages-dynamic.md
@@ -1,6 +1,8 @@
-<!-- .slide: class="two-column with-code title-margin-sm" -->
+<!-- .slide: class="two-column with-code" -->
 
-# Dynamic routing
+# Routing
+
+## Page declaration : dynamic routing
 
 ```
 /app/post/[id]/page.tsx                 website.com/post/123

diff --git a/docs/markdown/02-routing/40-layout.md b/docs/markdown/02-routing/40-layout.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="two-column with-code title-margin-sm" -->
+<!-- .slide: class="two-column with-code" -->
 
 <style>
   .layout-schema-img {
@@ -7,7 +7,9 @@
   }
 </style>
 
-# Layouts
+# Routing
+
+## Shared layouts
 
 Layouts can be used to define a UI that is shared between several sub-segments.
 

diff --git a/docs/markdown/02-routing/41-root-layout.md b/docs/markdown/02-routing/41-root-layout.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Layouts
+# Routing
 
-## Root Layout
+## Root layout
 
 This layout is **required**
 

diff --git a/docs/markdown/02-routing/42-nested-layout.md b/docs/markdown/02-routing/42-nested-layout.md
@@ -7,7 +7,7 @@
   }
 </style>
 
-# Layouts
+# Routing
 
 ## Nested layouts
 

diff --git a/docs/markdown/02-routing/43-template.md b/docs/markdown/02-routing/43-template.md
@@ -1,4 +1,4 @@
-<!-- .slide: class="two-column with-code title-margin-sm" -->
+<!-- .slide: class="two-column with-code" -->
 
 <style>
   .template-schema-img {
@@ -9,7 +9,9 @@
   }
 </style>
 
-# Templates
+# Routing
+
+## Templates
 
 Templates are layouts, but when navigating :
 
@@ -42,3 +44,5 @@ const Wrapper = () => {
   );
 };
 ```
+
+<!-- .element: class="fragment" data-fragment-index="1"-->
diff --git a/docs/markdown/02-routing/44-groups.md b/docs/markdown/02-routing/44-groups.md
@@ -7,7 +7,9 @@
   }
 </style>
 
-# Groups
+# Routing
+
+## Groups
 
 Groups are directories that do not affect URLs
 
@@ -17,9 +19,15 @@ Groups are directories that do not affect URLs
 
 <br/> <br/> <br/>
 
+<div>
+
 They can be used for :
 
 - Organizing /app directory (by section / feature)
 - Creating multiple nested layouts for the same segment
 - Creating multiple root layouts
 - Applying different layouts without affecting URLs
+
+</div>
+
+<!-- .element: class="fragment" data-fragment-index="1"-->
diff --git a/docs/markdown/02-routing/50-advanced.md b/docs/markdown/02-routing/50-advanced.md
@@ -1,6 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Advanced routing
+# Routing
+
+## Advanced features
 
 - Parallel routing
 - Intercepting routes
diff --git a/docs/markdown/02-routing/51-advanced-parallel.md b/docs/markdown/02-routing/51-advanced-parallel.md
@@ -7,7 +7,7 @@
   }
   </style>
 
-# Advanced routing
+# Routing
 
 ## Parallel routing
 

diff --git a/docs/markdown/02-routing/52-advanced-intercept.md b/docs/markdown/02-routing/52-advanced-intercept.md
@@ -11,7 +11,7 @@
   }
   </style>
 
-# Advanced routing
+# Routing
 
 ## Intercepting routes
 

diff --git a/docs/markdown/02-routing/53-advanced-intercept-patterns.md b/docs/markdown/02-routing/53-advanced-intercept-patterns.md
@@ -7,7 +7,7 @@
   }
 </style>
 
-# Advanced routing
+# Routing
 
 ## Intercepting routes
 

diff --git a/docs/markdown/02-routing/54-advanced-intercept-modal.md b/docs/markdown/02-routing/54-advanced-intercept-modal.md
@@ -12,7 +12,7 @@
   }
   </style>
 
-# Advanced routing
+# Routing
 
 ## Intercepting routes + Parallel routing
 

diff --git a/docs/markdown/02-routing/60-lab.md b/docs/markdown/02-routing/60-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Pages
+<h1 id="routing" style="margin-bottom: 30px;">Routing</h1>
 
 ## Lab
 
@@ -9,14 +9,22 @@
 **1. Create the application pages**
 
 - Homepage
-- Employees list page
-- Employees single page
-- Expenses page
 - Login page
+- Employees pages (List, Detail, Edit, Create)
+- Expenses page (List, Single)
 
-**2. Create the application layouts**
+**2. Add some metadatas (title, description)**
 
-- Dashboard layout
-- Authentication layout
+**3. Create the application layouts**
+
+- Authentication layout for the login page
+- Dashboard layout for all the rest
+
+<br/>
+<br/>
+
+_Styling isn't important. You can help yourself to these components :_<br/>
+_DashboardLayout, AuthLayout, PageTitle, PersonCard, ExpensesTable, ExpenseDetails_ <br/><br/>
+_You can also use mocked data from **/src/data**_
 
 </small>
diff --git a/docs/markdown/02-routing/80-lab.md b/docs/markdown/02-routing/80-lab.md
@@ -1,19 +1,24 @@
 <!-- .slide: class="exercice" -->
 
-# Navigating
+<h1 id="navigating" style="margin-bottom: 30px;">Navigating</h1>
 
 ## Lab
 
 <small>
 
-**1. Navigating between pages**
+**1. next/link component**
 
-- Implement the card Links
-- Implement the navigation menu
-- Show the active menu links
+- Update the navigation menu to use client-side navigation
+- On the employees list view, add two links per card to go on the details page, or on the edit page
 
-**2. Use router methods**
+**2. Programmatic navigation**
 
-- Implement a "Search" component
+- Modify the ExpensesTable component to navigate to the expense detail on click
+
+**3. Navigation state**
+
+- Implement a "Search" component (you can use the TextField component, or the \<input /\> element directly)
+- Update the URL when typing to add a query parameter containing the user search
+- Update the employees list view to filter depending on the URL query parameter
 
 </small>
diff --git a/docs/markdown/03-server-components/01-intro.md b/docs/markdown/03-server-components/01-intro.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="two-column with-code" -->
 
-# React Server Component : Why ?
+# Server Components : Why ?
 
 - Reduce JavaScript bundle size
 - Better initial performances

diff --git a/docs/markdown/03-server-components/10-csr.md b/docs/markdown/03-server-components/10-csr.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Rendering methods
+# Server Components : Why ?
 
-## Client-Side applications
+## Client-side applications
 
 index.html
 

diff --git a/docs/markdown/03-server-components/11-csr-workflow.md b/docs/markdown/03-server-components/11-csr-workflow.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Rendering methods
+# Server Components : Why ?
 
-## Client-Side applications
+## Client-side applications
 
 <br/>
 

diff --git a/docs/markdown/03-server-components/13-ssr.md b/docs/markdown/03-server-components/13-ssr.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Rendering methods
+# Server Components : Why ?
 
-## Server-Side Rendering
+## Server-side Rendering
 
 index.html
 

diff --git a/docs/markdown/03-server-components/14-ssr2.md b/docs/markdown/03-server-components/14-ssr2.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Rendering methods
+# Server Components : Why ?
 
-## Server-Side Rendering
+## Server-side Rendering
 
 index.html
 

diff --git a/docs/markdown/03-server-components/15-ssr3.md b/docs/markdown/03-server-components/15-ssr3.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Rendering methods
+# Server Components : Why ?
 
-## Server-Side Rendering
+## Server-side Rendering
 
 index.html
 

diff --git a/docs/markdown/03-server-components/16-ssr-next.md b/docs/markdown/03-server-components/16-ssr-next.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Rendering methods
+# Server Components : Why ?
 
-## Server-Side Rendering
+## Server-side Rendering
 
 Next.js : Page router
 

diff --git a/docs/markdown/03-server-components/17-ssr-workflow.md b/docs/markdown/03-server-components/17-ssr-workflow.md
@@ -1,8 +1,8 @@
 <!-- .slide: class="two-column with-code " -->
 
-# Rendering methods
+# Server Components : Why ?
 
-## Server-Side Rendering
+## Server-side Rendering
 
 <br/>