From ef3cd5367ed7926c337182ebfb22002e40a53029 Mon Sep 17 00:00:00 2001
From: Erik Martin-Dorel <erik.martin-dorel@irit.fr>
Date: Mon, 1 Nov 2021 22:14:08 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Rename=20Try=5FOCaml=E2=86=92Tutorials,?=
 =?UTF-8?q?=20--enable-tryocaml=E2=86=92--enable-tutorials?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Rename all relevant identifiers in the code, to avoid any ambiguity;

* learnocaml_main.ml: Keep CLI option --enable-tryocaml for
  backward-compatibility; Use a dedicated list of old option names

Close ocaml-sf/learn-ocaml#415
---
 src/app/learnocaml_config.ml     |   2 +-
 src/app/learnocaml_config.mli    |   2 +-
 src/app/learnocaml_index_main.ml |  12 ++--
 src/main/learnocaml_main.ml      |  16 +++--
 static/css/learnocaml_main.css   | 108 +++++++++++++++----------------
 translations/fr.po               |  11 ++--
 6 files changed, 79 insertions(+), 72 deletions(-)

diff --git a/src/app/learnocaml_config.ml b/src/app/learnocaml_config.ml
index 9a4a1742c..49cb79f0c 100644
--- a/src/app/learnocaml_config.ml
+++ b/src/app/learnocaml_config.ml
@@ -8,7 +8,7 @@
 module Js = Js_of_ocaml.Js
 
 class type learnocaml_config = object
-  method enableTryocaml: bool Js.optdef_prop
+  method enableTutorials: bool Js.optdef_prop
   method enableLessons: bool Js.optdef_prop
   method enableExercises: bool Js.optdef_prop
   method enableToplevel: bool Js.optdef_prop
diff --git a/src/app/learnocaml_config.mli b/src/app/learnocaml_config.mli
index 2c4baafd6..fb0967861 100644
--- a/src/app/learnocaml_config.mli
+++ b/src/app/learnocaml_config.mli
@@ -12,7 +12,7 @@
 module Js = Js_of_ocaml.Js
 
 class type learnocaml_config = object
-  method enableTryocaml: bool Js.optdef_prop
+  method enableTutorials: bool Js.optdef_prop
   method enableLessons: bool Js.optdef_prop
   method enableExercises: bool Js.optdef_prop
   method enableToplevel: bool Js.optdef_prop
diff --git a/src/app/learnocaml_index_main.ml b/src/app/learnocaml_index_main.ml
index cf32396b6..d3eda82e2 100644
--- a/src/app/learnocaml_index_main.ml
+++ b/src/app/learnocaml_index_main.ml
@@ -56,7 +56,7 @@ module El = struct
   module Dyn = struct
     (** Elements that are dynamically created (ids only) *)
     let exercise_list_id = "learnocaml-main-exercise-list"
-    let tryocaml_id = "learnocaml-main-tryocaml"
+    let tutorial_id = "learnocaml-main-tutorial"
     let lesson_id = "learnocaml-main-lesson"
     let toplevel_id = "learnocaml-main-toplevel"
   end
@@ -301,7 +301,7 @@ let lessons_tab select (arg, set_arg, _delete_arg) () =
   end >>= fun () ->
   Lwt.return lesson_div
 
-let tryocaml_tab select (arg, set_arg, _delete_arg) () =
+let tutorial_tab select (arg, set_arg, _delete_arg) () =
   let open Tutorial in
   let navigation_div =
     Tyxml_js.Html5.(div ~a: [ a_class [ "navigation" ] ] []) in
@@ -320,7 +320,7 @@ let tryocaml_tab select (arg, set_arg, _delete_arg) () =
   let buttons_div =
     Tyxml_js.Html5.(div ~a: [ a_class [ "buttons" ] ] []) in
   let tutorial_div =
-    Tyxml_js.Html5.(div ~a: [ a_id El.Dyn.tryocaml_id ])
+    Tyxml_js.Html5.(div ~a: [ a_id El.Dyn.tutorial_id ])
       [ navigation_div ; step_div ; toplevel_div ; buttons_div ] in
   let toplevel_buttons_group = button_group () in
   disable_button_group toplevel_buttons_group (* enabled after init *) ;
@@ -329,7 +329,7 @@ let tryocaml_tab select (arg, set_arg, _delete_arg) () =
     let on_enable () = Manip.removeClass step_div "disabled" in
     toplevel_launch ~on_disable ~on_enable toplevel_div
       Learnocaml_local_storage.toplevel_history
-      (fun () -> Lwt.async select) toplevel_buttons_group "tryocaml"
+      (fun () -> Lwt.async select) toplevel_buttons_group "tutorials"
   in
   show_loading [%i"Loading tutorials"] @@ fun () ->
   Lwt_js.sleep 0.5 >>= fun () ->
@@ -680,8 +680,8 @@ let () =
   let init_tabs token =
     let get_opt o = Js.Optdef.get o (fun () -> false) in
     let tabs =
-      (if get_opt config##.enableTryocaml
-       then [ "tryocaml", ([%i"Try OCaml"], tryocaml_tab) ] else []) @
+      (if get_opt config##.enableTutorials
+       then [ "tutorials", ([%i"Tutorials"], tutorial_tab) ] else []) @
       (if get_opt config##.enableLessons
        then [ "lessons", ([%i"Lessons"], lessons_tab) ] else []) @
         (if get_opt config##.enableExercises then
diff --git a/src/main/learnocaml_main.ml b/src/main/learnocaml_main.ml
index 154bc7ec0..cca1be85e 100644
--- a/src/main/learnocaml_main.ml
+++ b/src/main/learnocaml_main.ml
@@ -155,14 +155,18 @@ module Args = struct
       value & opt dir default & info ["contents-dir"] ~docv:"DIR" ~doc:
         "directory containing the base learn-ocaml app contents"
 
-    let enable opt doc =
+    (** [enable "opt" ~old["old";"very old"](*backward-compat opts*) "the.."] *)
+    let enable opt ?(old: string list = []) doc =
+      let f_on_off opt = ("enable-"^opt, "disable-"^opt) in
+      let on_opt, off_opt =
+        List.split (List.map f_on_off (opt :: old)) in
       value & vflag None [
-        Some true, info ["enable-"^opt] ~doc:("Enable "^doc);
-        Some false, info ["disable-"^opt] ~doc:("Disable "^doc);
+        Some true, info on_opt ~doc:("Enable "^doc);
+        Some false, info off_opt ~doc:("Disable "^doc);
       ]
 
-    let try_ocaml = enable "tryocaml"
-        "the 'TryOCaml' tab (enabled by default if the repository contains a \
+    let try_ocaml = enable "tutorials" ~old:["tryocaml"]
+        "the 'Tutorials' tab (enabled by default if the repository contains a \
          $(i,tutorials) directory)"
 
     let playground = enable "playground"
@@ -367,7 +371,7 @@ let main o =
          (fun oc ->
             Lwt_io.fprintf oc
               "var learnocaml_config = {\n\
-              \  enableTryocaml: %b,\n\
+              \  enableTutorials: %b,\n\
               \  enablePlayground: %b,\n\
               \  enableLessons: %b,\n\
               \  enableExercises: %b,\n\
diff --git a/static/css/learnocaml_main.css b/static/css/learnocaml_main.css
index 8ba9bb61a..d0d0d78a7 100644
--- a/static/css/learnocaml_main.css
+++ b/static/css/learnocaml_main.css
@@ -652,13 +652,13 @@ body {
   }
 }
 
-/* -- Try OCaml activity --------------------------------------------------- */
+/* -- Tutorials activity --------------------------------------------------- */
 
-#learnocaml-main-tryocaml {
+#learnocaml-main-tutorial {
   position: absolute;
   top:0 ; left:0; right:0; bottom:0;
 }
-#learnocaml-main-tryocaml > .buttons {
+#learnocaml-main-tutorial > .buttons {
   height: 40px;
   background: linear-gradient(to bottom, #fff 0px, #ddd 10px, #aaa 60px);
   color: #fff;
@@ -667,11 +667,11 @@ body {
   flex-direction: row;
 }
 @media (max-width: 1399px) {
-  #learnocaml-main-tryocaml {
+  #learnocaml-main-tutorial {
     display: flex ;
     flex-direction: column;
   }
-  #learnocaml-main-tryocaml > .navigation {
+  #learnocaml-main-tutorial > .navigation {
     position: relative;
     z-index: 3;
     display: flex;
@@ -681,15 +681,15 @@ body {
     padding: 0px;
     flex: 0 0 auto;
   }
-  #learnocaml-main-tryocaml > .toplevel-pane {
+  #learnocaml-main-tutorial > .toplevel-pane {
     flex: 1 1 auto;
     position: relative;
     z-index: 1;
   }
-  #learnocaml-main-tryocaml > .buttons {
+  #learnocaml-main-tutorial > .buttons {
     flex: 0 0 auto;
   }
-  #learnocaml-main-tryocaml > .step-pane {
+  #learnocaml-main-tutorial > .step-pane {
     flex: 0 0 auto;
     position: relative;
     z-index: 2;
@@ -699,7 +699,7 @@ body {
     flex-direction: column;
     max-height: 50%;
   }
-  #learnocaml-main-tryocaml > .step-pane::after {
+  #learnocaml-main-tutorial > .step-pane::after {
     position: absolute;
     left:0; right:0; bottom: -8px; height: 8px;
     background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
@@ -707,7 +707,7 @@ body {
   }
 }
 @media (min-width: 1400px) {
-  #learnocaml-main-tryocaml > .navigation {
+  #learnocaml-main-tutorial > .navigation {
     position: absolute;
     top: 0; left:0; right: 0; height: 60px;
     z-index: 3;
@@ -717,16 +717,16 @@ body {
     background: #ddd;
     padding: 0px;
   }
-  #learnocaml-main-tryocaml > .toplevel-pane {
+  #learnocaml-main-tutorial > .toplevel-pane {
     position: absolute;
     right: 500px; top: 61px; bottom: 40px; left: 0px;
     z-index: 1;
   }
-  #learnocaml-main-tryocaml > .buttons {
+  #learnocaml-main-tutorial > .buttons {
     position: absolute;
     right: 500px; bottom: 0; left: 0px;
   }
-  #learnocaml-main-tryocaml > .step-pane {
+  #learnocaml-main-tutorial > .step-pane {
     position: absolute;
     right: 0; top: 61px; bottom: 0; width: 500px;
     z-index: 2;
@@ -735,20 +735,20 @@ body {
     display: flex;
     flex-direction: column;
   }
-  #learnocaml-main-tryocaml > .step-pane::after {
+  #learnocaml-main-tutorial > .step-pane::after {
     position: absolute;
     top:0; bottom:0; left: -8px; width: 8px;
     background: linear-gradient(to left, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
     content:"";
   }
 }
-#learnocaml-main-tryocaml > .toplevel-pane > .toplevel-output::after {
+#learnocaml-main-tutorial > .toplevel-pane > .toplevel-output::after {
   position: absolute;
   left:0; top:0; bottom: 0px; width: 8px;
   background: linear-gradient(to right, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
   content:"";
 }
-#learnocaml-main-tryocaml > .step-pane > h3 {
+#learnocaml-main-tutorial > .step-pane > h3 {
   margin: 0;
   padding: 0;
   background: #dfcf8f;
@@ -757,72 +757,72 @@ body {
   text-align: center;
   flex: 0 0 auto;
 }
-#learnocaml-main-tryocaml > .step-pane::before {
+#learnocaml-main-tutorial > .step-pane::before {
   position: absolute;
   left:0; right:0; bottom:0;
   content:"";
   background: rgba(128,128,128,0.4);
   opacity: 0;
 }
-#learnocaml-main-tryocaml > .step-pane.disabled::before {
+#learnocaml-main-tutorial > .step-pane.disabled::before {
   top:0;
   transition: opacity 0.5s 0.5s;
   opacity: 1;
 }
-#learnocaml-main-tryocaml > .step-pane > h3 > span {
+#learnocaml-main-tutorial > .step-pane > h3 > span {
   padding: 10px 0px 10px 0px;
   flex: 1 1 auto;
 }
-#learnocaml-main-tryocaml > .step-pane > h3 > button {
+#learnocaml-main-tutorial > .step-pane > h3 > button {
   padding: 10px 5px 10px 5px;
   flex: 0 0 auto;
   border: none;
   background: none;
 }
-#learnocaml-main-tryocaml > .step-pane > h3 > button .label {
+#learnocaml-main-tutorial > .step-pane > h3 > button .label {
   display: none;
 }
-#learnocaml-main-tryocaml > .step-pane > div {
+#learnocaml-main-tutorial > .step-pane > div {
   padding: 10px;
   flex: 1 1 auto;
   overflow: auto;
 }
-#learnocaml-main-tryocaml > .step-pane ul,
-#learnocaml-main-tryocaml > .step-pane p {
+#learnocaml-main-tutorial > .step-pane ul,
+#learnocaml-main-tutorial > .step-pane p {
     margin: 0;
 }
-#learnocaml-main-tryocaml > .step-pane ul + ul,
-#learnocaml-main-tryocaml > .step-pane ul + p,
-#learnocaml-main-tryocaml > .step-pane p + ul,
-#learnocaml-main-tryocaml > .step-pane p + p {
+#learnocaml-main-tutorial > .step-pane ul + ul,
+#learnocaml-main-tutorial > .step-pane ul + p,
+#learnocaml-main-tutorial > .step-pane p + ul,
+#learnocaml-main-tutorial > .step-pane p + p {
     margin-top: 5px;
 }
-#learnocaml-main-tryocaml > .step-pane pre.runnable {
+#learnocaml-main-tutorial > .step-pane pre.runnable {
   margin: 5px -5px 5px -5px;
   display: block;
   padding: 2px 7px 2px 7px;
   background: #fff8b8;
   cursor: pointer;
 }
-#learnocaml-main-tryocaml > .step-pane code.runnable {
+#learnocaml-main-tutorial > .step-pane code.runnable {
   padding: 2px;
   background: #fff8b8;
   cursor: pointer;
 }
-#learnocaml-main-tryocaml > .step-pane pre.runnable:hover,
-#learnocaml-main-tryocaml > .step-pane code.runnable:hover {
+#learnocaml-main-tutorial > .step-pane pre.runnable:hover,
+#learnocaml-main-tutorial > .step-pane code.runnable:hover {
   background: #ffffdd;
 }
-#learnocaml-main-tryocaml > .step-pane > div > pre.runnable:last-child {
+#learnocaml-main-tutorial > .step-pane > div > pre.runnable:last-child {
   margin-bottom: -5px;
 }
-#learnocaml-main-tryocaml > .navigation::after {
+#learnocaml-main-tutorial > .navigation::after {
   position: absolute;
   left:0; bottom: -9px; right: 0px; height: 8px;
   background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0px, rgba(0,0,0,0) 8px);
   content:"";
 }
-#learnocaml-main-tryocaml > .navigation > button {
+#learnocaml-main-tutorial > .navigation > button {
   flex: 0;
   padding: 0 10px 0 10px;
   background: none;
@@ -830,12 +830,12 @@ body {
   position: relative;
   display: block;
 }
-#learnocaml-main-tryocaml > .navigation > button > * {
+#learnocaml-main-tutorial > .navigation > button > * {
   padding: 5px;
   color: black;
   text-align: center;
 }
-#learnocaml-main-tryocaml > .navigation > select {
+#learnocaml-main-tutorial > .navigation > select {
   flex: 1 1 auto;
   padding: 0 10px 0 10px;
   background: none;
@@ -848,17 +848,17 @@ body {
   -moz-appearance:none;
   appearance:none;
 }
-#learnocaml-main-tryocaml > .navigation > select[disabled] {
+#learnocaml-main-tutorial > .navigation > select[disabled] {
   transition: background 0.5s 0.5s;
   background: rgba(128,128,128,0.4);
 }
-#learnocaml-main-tryocaml > .navigation > select:not([disabled]):hover {
+#learnocaml-main-tutorial > .navigation > select:not([disabled]):hover {
   background: rgba(170,204,255,0.3);
 }
-#learnocaml-main-tryocaml > .toplevel-pane {
+#learnocaml-main-tutorial > .toplevel-pane {
   overflow: hidden;
 }
-#learnocaml-main-tryocaml > .buttons > button {
+#learnocaml-main-tutorial > .buttons > button {
   flex: 1 1 auto;
   background: none;
   border: none;
@@ -868,40 +868,40 @@ body {
   position: relative;
   padding: 0;
 }
-#learnocaml-main-tryocaml > .buttons > button:not(:first-child) {
+#learnocaml-main-tutorial > .buttons > button:not(:first-child) {
   border-left: 1px #666 solid;
 }
 @media (min-width: 550px) {
-  #learnocaml-main-tryocaml > .navigation {
+  #learnocaml-main-tutorial > .navigation {
     flex: 0 0 60px;
   }
-  #learnocaml-main-tryocaml > .step-pane > h3 > span,
-  #learnocaml-main-tryocaml > .navigation > select {
+  #learnocaml-main-tutorial > .step-pane > h3 > span,
+  #learnocaml-main-tutorial > .navigation > select {
     font-weight: bold;
     font-size: 22px;
   }
-  #learnocaml-main-tryocaml > .step-pane > h3 > button,
-  #learnocaml-main-tryocaml > .navigation > button {
+  #learnocaml-main-tutorial > .step-pane > h3 > button,
+  #learnocaml-main-tutorial > .navigation > button {
     min-width: 80px;
   }
 }
 @media (max-width: 549px) {
-  #learnocaml-main-tryocaml > .buttons > button > .label {
+  #learnocaml-main-tutorial > .buttons > button > .label {
     display: none;
   }
-  #learnocaml-main-tryocaml > .navigation {
+  #learnocaml-main-tutorial > .navigation {
     flex: 0 0 40px;
   }
-  #learnocaml-main-tryocaml > .navigation > button > .label {
+  #learnocaml-main-tutorial > .navigation > button > .label {
     display: none;
   }
-  #learnocaml-main-tryocaml > .step-pane > h3 > span,
-  #learnocaml-main-tryocaml > .navigation > select {
+  #learnocaml-main-tutorial > .step-pane > h3 > span,
+  #learnocaml-main-tutorial > .navigation > select {
     font-weight: bold;
     font-size: 18px;
   }
-  #learnocaml-main-tryocaml > .step-pane > h3 > button,
-  #learnocaml-main-tryocaml > .navigation > button {
+  #learnocaml-main-tutorial > .step-pane > h3 > button,
+  #learnocaml-main-tutorial > .navigation > button {
     min-width: 40px;
   }
 }
diff --git a/translations/fr.po b/translations/fr.po
index bc30d1374..d84b10f73 100644
--- a/translations/fr.po
+++ b/translations/fr.po
@@ -5,7 +5,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: learn-ocaml ~dev\n"
-"PO-Revision-Date: 2021-10-11 15:30+0200\n"
+"PO-Revision-Date: 2022-01-07 03:03+0100\n"
 "Last-Translator: Louis Gesbert <Louis.gesbert@ocamlpro.com>\n"
 "Language-Team: OCamlPro\n"
 "Language: french\n"
@@ -508,9 +508,9 @@ msgstr "Pseudonyme"
 msgid "Choose an activity."
 msgstr "Sélectionnez une activité."
 
-#: File "src/app/learnocaml_index_main.ml", line 684, characters 30-41
-msgid "Try OCaml"
-msgstr "Try OCaml"
+#: File "src/app/learnocaml_index_main.ml", line 684, characters 31-42
+msgid "Tutorials"
+msgstr "Tutoriels"
 
 #: File "src/app/learnocaml_index_main.ml", line 686, characters 29-38
 msgid "Lessons"
@@ -937,6 +937,9 @@ msgstr "lors du chargement des dépendances"
 msgid "while testing your solution"
 msgstr "lors du test de la solution utilisateur"
 
+#~ msgid "Try OCaml"
+#~ msgstr "Try OCaml"
+
 #~ msgid "Failed to download archive. Please try again later!"
 #~ msgstr ""
 #~ "Le téléchargement de l'archive a échoué. Veuillez réessayer "