more tests and cases and documentation

scrbl/usecases.scrbl

@@ -4,10 +4,17 @@
           (for-label racket/base
                      "../main.rkt"))
 
-@(define (side-by-side racket-source js-source)
-   (tabular #:style 'boxed #:sep (hspace 2)
-            (list (list (bold "Racket / js-maker") (bold "Generated JavaScript"))
-                  (list (verbatim racket-source) (verbatim js-source)))))
+@(define (code-box title source)
+   (tabular #:style 'boxed
+            (list (list (bold title))
+                  (list (verbatim source)))))
+
+@(define (code-pair racket-source js-source)
+   (list
+    (code-box "Racket / js-maker" racket-source)
+    (code-box "Generated JavaScript" js-source)))
+
+@(define side-by-side code-pair)
 
 @(define (tested s)
    (nested #:style 'inset (bold "Tested behavior: ") s))
@@ -23,6 +30,11 @@ snippet using @racket[js] and is tested by compiling it to JavaScript and
 executing that JavaScript with the configured test executor.  The corresponding
 tests are in @filepath{testing/jsmaker-usecases.rkt}.
 
+The examples are shown vertically: first the Racket/js-maker source, then the
+generated JavaScript.  Each code fragment is shown in a boxed documentation
+cell, preserving the light shaded background of the earlier side-by-side
+layout while avoiding narrow, wrapped code columns.
+
 The tests intentionally use @racket[js/expression] for their calls wherever
 possible.  Raw JavaScript remains only in small harness preambles, such as fake
 @tt{setInterval}, fake DOM objects, and fake @tt{fetch}.