Move forms to a separate page.

book/tutorial.nim

@@ -94,15 +94,16 @@ Let's create a couple boxes to get familiar with them.
     $ sauer make
     ```
 
-3. You should see this in your browser:
+    **Do it every time you change the code to apply the changes.**
+
+3. You should see this in your browser at [http://localhost:1337/app.html#/](http://localhost:1337/app.html#/):
 """
 
 nbKaraxCode:
   import karkas/styles
 
   karaxHtml:
     tdiv(style = {border: "solid gray 1px", padding: "10px"}):
-      h1: text "index"
       tdiv(style = box()):
         p: text "Box one" 
       tdiv(style = box()):
@@ -139,7 +140,6 @@ nbKaraxCode:
 
   karaxHtml:
     tdiv(style = {border: "solid gray 1px", padding: "10px"}):
-      h1: text "index"
       tdiv(style = box().merge(style {border: kstring"solid"})):
         p: text "Box one" 
       tdiv(style = box().merge(style {border: kstring"solid"})):
@@ -182,7 +182,6 @@ nbKaraxCode:
 
   karaxHtml:
     tdiv(style = {border: "solid gray 1px", padding: "10px"}):
-      h1: text "index"
       tdiv(style = hStack()):
         tdiv(style = box().merge(style {border: kstring"solid"})):
           p: text "Box one" 
@@ -220,7 +219,6 @@ nbKaraxCode:
 
   karaxHtml:
     tdiv(style = {border: "solid gray 1px", padding: "10px"}):
-      h1: text "index"
       tdiv(style = hStack()):
         tdiv(style = box(size = 1).merge(style {border: kstring"solid"})):
           p: text "Box one" 
@@ -268,7 +266,13 @@ The result is the same but the code is now much more approachable.
 
 Building web forms is one of basic tasks in web development. Let's build a form with Karkas by combining stacks and putting the form elements in boxes.
 
-1. In `index.nim`, add:
+1. Create a new page in the tutorial app by running this command inside `tutorial` folder:
+
+    ```shell
+    $ sauer pages new forms -d
+    ```
+
+2. Open `src/tutorial/pages/forms.nim` in your favorite editor. It should look like this:
 
     ```nim
     tdiv(style = hStack() <- {width: "300px", padding: "10px"}):
@@ -302,7 +306,7 @@ Building web forms is one of basic tasks in web development. Let's build a form
 
         tdiv(style = hStack() <- {margin: "10px"}):
           tdiv(style = box(1)):
-            input(`type` = k"radio", id = k"white", name = k"color")
+            input(`type` = k"radio", id = k"white", name = k"color", checked = true)
             label(`for` = k"white"):
               text k"White"
           tdiv(style = box(1)):
@@ -314,6 +318,8 @@ Building web forms is one of basic tasks in web development. Let's build a form
             label(`for` = k"red"):
               text k"Red"
     ```
+
+3. Open [http://localhost:1337/app.html#/forms](http://localhost:1337/app.html#/forms) in your browser. You should see something like this:
 """
 
 nbKaraxCode:

tutorial/src/tutorial/pages.nim

@@ -1,3 +1,4 @@
 type Page* = enum
   notfound
   index
+  forms

tutorial/src/tutorial/pages/forms.nim

@@ -0,0 +1,53 @@
+import karax/[karaxdsl, kdom, vdom]
+import kraut/context
+import karkas
+
+import ../pages
+import ../state
+
+
+proc render*(context: Context): VNode =
+  currentPage = Page.forms
+  document.title = "forms"
+
+  buildHtml(tdiv):
+    h1: text "forms"
+
+    tdiv(style = hStack() <- {width: "300px", padding: "10px"}):
+
+      tdiv(style = vStack() <- box(1)):
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            input(name = k"first_name", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"first_name"):
+              text k"First name:"
+
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            input(name = k"last_name", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"last_name"):
+              text k"Last name:"
+
+        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
+          tdiv(style = box(2)):
+            textarea(name = k"about_me", style = {width: k"100%"})
+          tdiv(style = box(1)):
+            label(`for` = k"about_me"):
+              text k"About me:"
+
+        tdiv(style = hStack() <- {margin: "10px"}):
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"white", name = k"color", checked = true)
+            label(`for` = k"white"):
+              text k"White"
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"blue", name = k"color")
+            label(`for` = k"blue"):
+              text k"Blue"
+          tdiv(style = box(1)):
+            input(`type` = k"radio", id = k"red", name = k"color")
+            label(`for` = k"red"):
+              text k"Red"
+

tutorial/src/tutorial/pages/index.nim

@@ -18,46 +18,3 @@ proc render*(context: Context): VNode =
       tdiv(style = box(size = 2) <- {border: "solid"}):
         p: text "Box two" 
 
-    tdiv(style = hStack() <- {width: "300px", padding: "10px"}):
-
-      # The entire form is a vertical stack.
-      tdiv(style = vStack() <- box(1)):
-
-        # Each form field is a row in the stack.
-        # It is itself a horizontal stack that holds the input field and its label.
-        # For our convenience, so that we first type the field and then its label, set the stacking direction to `rightToLeft`.
-        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
-          tdiv(style = box(2)):
-            input(name = k"first_name", style = {width: k"100%"})
-          tdiv(style = box(1)):
-            label(`for` = k"first_name"):
-              text k"First name:"
-
-        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
-          tdiv(style = box(2)):
-            input(name = k"last_name", style = {width: k"100%"})
-          tdiv(style = box(1)):
-            label(`for` = k"last_name"):
-              text k"Last name:"
-
-        tdiv(style = hStack(direction = rightToLeft) <- {margin: "10px"}):
-          tdiv(style = box(2)):
-            textarea(name = k"about_me", style = {width: k"100%"})
-          tdiv(style = box(1)):
-            label(`for` = k"about_me"):
-              text k"About me:"
-
-        tdiv(style = hStack() <- {margin: "10px"}):
-          tdiv(style = box(1)):
-            input(`type` = k"radio", id = k"white", name = k"color")
-            label(`for` = k"white"):
-              text k"White"
-          tdiv(style = box(1)):
-            input(`type` = k"radio", id = k"blue", name = k"color")
-            label(`for` = k"blue"):
-              text k"Blue"
-          tdiv(style = box(1)):
-            input(`type` = k"radio", id = k"red", name = k"color")
-            label(`for` = k"red"):
-              text k"Red"
-

tutorial/src/tutorial/routes.nim

@@ -3,3 +3,4 @@ import kraut/sugar
 
 routes:
   "/": index
+  "#/forms/": forms