From b4818e800d760b201e8986a2bb40e0e4fc1e07c4 Mon Sep 17 00:00:00 2001
From: Vincent Balat <vincent.balat@vblt.org>
Date: Mon, 16 Sep 2024 01:07:03 +0200
Subject: [PATCH] New version of tutochat

---
 talks/tutochat.html | 23 +++++++++++++++++------
 talks/tutochat.md   | 28 ++++++++++++++++++++++------
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/talks/tutochat.html b/talks/tutochat.html
index 4549bf9..232b8b7 100644
--- a/talks/tutochat.html
+++ b/talks/tutochat.html
@@ -1780,12 +1780,15 @@
     <slip-slipshow>
       <slip-slip immediate-enter>
         <slip-body>
-          <style>
+          <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+<style>
 slip-slipshow>slip-slip>.slip-scale-container>.slip-container>slip-body {
     margin: 0 auto;
 }
 slip-body {
-  font-family: "Ubuntu";
+  font-family: "Ubuntu", sans-serif;
   line-height: 1.4;
   margin: 0;
   color: #555;
@@ -1813,6 +1816,7 @@
 .vspace { height: 1em; }
 .hidden { position:absolute; visibility: hidden; }
 .center { text-align: center; }
+.right { text-align: right; }
 .smaller { font-size: smaller; }
 .focused { outline: 20000px solid #000000aa; }
 .comment { color: #888; font-style: italic; }
@@ -1880,7 +1884,11 @@ <h1 id="ocsigen-quickstart-guide"><a class="anchor" aria-hidden="true" href="#oc
 <p><span>FUN-OCaml - Berlin</span><br/><span> Sep 16-17 2024</span></p>
 </div>
 </div>
-<div style="height: 400px; width:100%;"></div>
+<div class="vspace"></div>
+<div class="vspace"></div>
+<p class="right comment"><span>Use arrow keys to navigate</span></p>
+ </slip-body>
+</slip-slip>
 <div class="slip-group">
 <slip-slip style="width: 33.33%;" auto-enter scale="0.3333" delay="1">
   <slip-body>
@@ -2201,7 +2209,7 @@ <h2 id="implement-a-basic-login-mechanism"><a class="anchor" aria-hidden="true"
 </ul>
 <p><span>Test your app with several browsers to check that you can have several users simultaneously.</span></p>
 <div down-at-unpause=endstep4 pause></div>
-<p class="comment"><span>See the solution </span><a href="https://github.com/ocsigen/quickstart-guide/myapp/myapp.eliom"><span>here</span></a><span>.</span></p>
+<p class="comment"><span>See the solution </span><a target="_blank" href="https://github.com/ocsigen/quickstart-guide/blob/Step4/myapp/myapp.eliom"><span>here</span></a><span>.</span></p>
 <p class="exo"><span>Advanced version: instead of using a reference with scope session,</span>
 <span>create a session group whose name is the user name.</span>
 <span>Check that you can share session data across multiple browsers.</span></p>
@@ -2334,6 +2342,9 @@ <h3 id="client-values-inserting-client-side-code-in-your-pages"><a class="anchor
 <slip-slip style="width: 33.33%;" auto-enter scale="0.3333" delay="1">
   <slip-body>
 <h2 id="client-side-services"><a class="anchor" aria-hidden="true" href="#client-side-services"></a><span>Client-side services</span></h2>
+<p><strong><span>Generating pages on the client or the server depending on cases</span></strong></p>
+<p><span>This is a typical example of service definition and registration</span>
+<span>for a client-server Web and mobile app:</span></p>
 <pre class="b server"><code class="language-ocaml">let%server myservice = Eliom_service.create
                          ~path:(Path [&quot;foo&quot;])
                          ~meth:(Get any)
@@ -2371,7 +2382,7 @@ <h2 id="client-server-version-of-your-program"><a class="anchor" aria-hidden="tr
 <span>that is, when a page is generated on the server (subsequent pages are generated</span>
 <span>on the client, without stopping the client-side process).</span></li>
 </ol>
-<p class="comment"><span>See the solution </span><a href="https://github.com/ocsigen/quickstart-guide/myapp/myapp.eliom"><span>here</span></a><span>.</span></p>
+<p class="comment"><span>See the solution </span><a target="_blank" href="https://github.com/ocsigen/quickstart-guide/blob/Step5/myapp/myapp.eliom"><span>here</span></a><span>.</span></p>
   </slip-body>
 </slip-slip>
 <slip-slip style="width: 33.33%;" auto-enter scale="0.3333" delay="1">
@@ -2439,7 +2450,7 @@ <h2 id="send-a-message-to-another-user"><a class="anchor" aria-hidden="true" hre
 <li><span>Use module </span><a href="https://ocsigen.org/eliom/api/11.0/Eliom_content.Html.Manip"><code>Manip</code></a><span> to append the new element to the page</span></li>
 <li><span>To_dom.of_element</span></li>
 </ol>
-<p class="comment"><span>See the solution </span><a href="https://github.com/ocsigen/quickstart-guide/myapp/myapp.eliom"><span>here</span></a><span>.</span></p>
+<p class="comment"><span>See the solution </span><a target="_blank" href="https://github.com/ocsigen/quickstart-guide/blob/Step7/myapp/myapp.eliom"><span>here</span></a><span>.</span></p>
   </slip-body>
 </slip-slip>
 </div>
diff --git a/talks/tutochat.md b/talks/tutochat.md
index 9c11614..2711ff1 100644
--- a/talks/tutochat.md
+++ b/talks/tutochat.md
@@ -1,9 +1,12 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
 <style>
 slip-slipshow>slip-slip>.slip-scale-container>.slip-container>slip-body {
     margin: 0 auto;
 }
 slip-body {
-  font-family: "Ubuntu";
+  font-family: "Ubuntu", sans-serif;
   line-height: 1.4;
   margin: 0;
   color: #555;
@@ -31,6 +34,7 @@ code { font-size: smaller; }
 .vspace { height: 1em; }
 .hidden { position:absolute; visibility: hidden; }
 .center { text-align: center; }
+.right { text-align: right; }
 .smaller { font-size: smaller; }
 .focused { outline: 20000px solid #000000aa; }
 .comment { color: #888; font-style: italic; }
@@ -103,8 +107,15 @@ pre.tt code { padding-top: 0; }
 >>
 >> FUN-OCaml - Berlin<br/> Sep 16-17 2024
 
-{style="height: 400px; width:100%;"}
+{.vspace}
+
+{.vspace}
 
+{.comment .right}
+Use arrow keys to navigate
+
+ </slip-body>
+</slip-slip>
 <div class="slip-group">
 <slip-slip style="width: 33.33%;" auto-enter scale="0.3333" delay="1">
   <slip-body>
@@ -561,7 +572,7 @@ Test your app with several browsers to check that you can have several users sim
 {pause down-at-unpause=endstep4}
 
 {.comment}
-See the solution [here](https://github.com/ocsigen/quickstart-guide/myapp/myapp.eliom).
+See the solution <a target="_blank" href="https://github.com/ocsigen/quickstart-guide/blob/Step4/myapp/myapp.eliom">here</a>.
 
 {.exo}
 Advanced version: instead of using a reference with scope session,
@@ -759,6 +770,11 @@ On this example, you can see a few new concepts:
 
 ## Client-side services
 
+**Generating pages on the client or the server depending on cases**
+
+This is a typical example of service definition and registration
+for a client-server Web and mobile app:
+
 {.server .b}
 ```ocaml
 let%server myservice = Eliom_service.create
@@ -809,7 +825,7 @@ generated page every time you connect or disconnect).
 
 
 {.comment}
-See the solution [here](https://github.com/ocsigen/quickstart-guide/myapp/myapp.eliom).
+See the solution <a target="_blank" href="https://github.com/ocsigen/quickstart-guide/blob/Step5/myapp/myapp.eliom">here</a>.
 
 
   </slip-body>
@@ -896,7 +912,7 @@ Hints:
 2. To_dom.of_element
 
 {.comment}
-See the solution [here](https://github.com/ocsigen/quickstart-guide/myapp/myapp.eliom).
+See the solution <a target="_blank" href="https://github.com/ocsigen/quickstart-guide/blob/Step7/myapp/myapp.eliom">here</a>.
 
   </slip-body>
 </slip-slip>
@@ -992,4 +1008,4 @@ and look at each example in Ocsigen Start's template.
 
   </slip-body>
 </slip-slip>
-</div>
\ No newline at end of file
+</div>