Use with-form instead of with-page

src/views/main.lisp

@@ -1,3 +1,56 @@
 (in-package :ml-survey/views)
 
 (defparameter *use-cdn* nil)
+
+(defmacro with-form ((&key
+                        meta
+                        (title "Web page")
+                        add-css-urls
+                        add-js-urls)
+                     &body body)
+  "This macro simplifies the process of creating an HTML web page.
+
+META: The meta-information for the web page.
+
+TITLE: Specifies the title of the web page. Defaults to 'Web page'.
+
+MAIN-CON: If t add css class `container` to <main>.
+
+ADD-CSS-URLS: An optional parameter for additional CSS file URLs.
+
+ADD-JS-URLS: An optional parameter for additional JavaScript file URLs.
+
+BODY: Denotes the markup for the body of the web page.
+
+Example usage:
+   (with-form (:meta (:author \"John Doe\") :title \"My Page\") \"foo\")"
+  `(spinneret:with-html-string
+     (:doctype)
+     (:html :data-bs-theme ,dev.metalisp.sbt:*color-theme*
+            (:head (:meta :charset "utf-8")
+                   (:meta :name "viewport"
+                          :content "width=device-width, initial-scale=1")
+                   ,@(loop for (key value) on meta by #'cddr
+                           collect `(:meta :name
+                                           ,(string-downcase (symbol-name key))
+                                           :content ,(getf meta key)))
+
+                   (:title ,title)
+
+                   (:link :type "text/css" :rel "stylesheet" :href ,(dev.metalisp.sbt:bs-url-css))
+                   ,@(loop for url in add-css-urls
+                           collect `(:link :type "text/css"
+                                      :rel "stylesheet" :href ,url)))
+
+            (:body
+
+              (:div :class "container text-center py-3"
+                    (:a :href "#main-content"
+                        :class "skip-link"
+                        (find-l10n "skip-link" spinneret:*html-lang* *l10n*)))
+
+              ,@body
+
+              (:script :src ,(dev.metalisp.sbt:bs-url-js))
+              ,@(loop for url in add-js-urls
+                      collect `(:script :src ,url))))))

src/views/package.lisp

@@ -1,8 +1,7 @@
 (defpackage ml-survey/views
   (:use #:cl)
   (:import-from #:spinneret
-                #:*html*
+                #:*html*)
-                #:*html-lang*)
   (:import-from #:dev.metalisp.sbt
                 #:find-l10n)
   (:import-from #:dev.metalisp.sbt
@@ -17,9 +16,7 @@
   (:import-from #:dev.metalisp.sbt/utility
                 #:spacing)
   (:import-from #:dev.metalisp.sbt
-                #:*use-cdn*
+                #:*use-cdn*)
-                #:bs-url-css
-                #:bs-url-js)
   (:export #:index
            #:imprint
            #:new-survey

src/views/sus.lisp

@@ -13,14 +13,15 @@
   nil)
 
 (defun sus-form ()
-    (with-page (:title "SUS Form")
+  (with-form (:title "SUS Form")
-      (:section :class "container my-5"
+    (:main :id "main-content"
-                (:h2 "Usability Feedback Form")
+           :class "container my-5"
-                (:p "Please fill out the following forms and press the submit button.")
+           (:h1 "Usability Feedback Form")
-                (:form :action (hunchentoot:request-uri*)
+           (:p "Please fill out the following forms and press the submit button.")
-                       :method "post"
+           (:form :action (hunchentoot:request-uri*)
-                       :class (spacing :property "m" :side "y" :size 5)
+                  :method "post"
-                       ;; load the multi-form from disk
+                  :class (spacing :property "m" :side "y" :size 5)
-                       (load-form *html-lang* "sus.lisp")
+                  ;; load the multi-form from disk
-                       (btn-primary (:type "submit")
+                  (load-form spinneret:*html-lang* "sus.lisp")
-                         (find-l10n "submit" *html-lang* *l10n*))))))
+                  (btn-primary (:type "submit")
+                    (find-l10n "submit" spinneret:*html-lang* *l10n*))))))