diff options
Diffstat (limited to 'jakob')
| -rw-r--r-- | jakob/builder/blog.scm | 21 | ||||
| -rw-r--r-- | jakob/dynamic/capabilities/comment-form.scm | 111 |
2 files changed, 66 insertions, 66 deletions
diff --git a/jakob/builder/blog.scm b/jakob/builder/blog.scm index bb5567c..00b7ddc 100644 --- a/jakob/builder/blog.scm +++ b/jakob/builder/blog.scm @@ -102,7 +102,6 @@ ,(first-paragraph post) (p ,(hyperlink (or crosspost-uri local-uri) "read more →"))))) -;; TODO: Should dynamically pull comments. (define (comments-section post) `(section (@ (class "comments-section") (aria-labelledby "comments-heading")) @@ -110,17 +109,11 @@ (fetch-webmentions (post-identifier post))) (div (@ (class "comment-form-module")) (h4 (@ (class "module-title")) - "Leave a Comment") - (form (@ (class "comment-form")) - (div (@ (class "form-row")) - (input (@ (type "text") (placeholder "Name") (required "") (aria-label "Name"))) - (input (@ (type "text") (placeholder "Subject (Optional)") (aria-label "Subject")))) - (div (@ (class "form-row")) - (input (@ (type "url") (placeholder "Website (https://...)") (aria-label "Website URL")))) - (textarea (@ (placeholder "Write your comment here...") - (rows "4") - (required "") - (aria-label "Comment body"))))))) + "Leave a Comment") + (noscript + (p (@ (style "font-size: 10px; color: #666; text-align: center; padding: 10px;")) + "Click " ,(hyperlink (build-comment-url post) "here") " to write a comment on this post.")) + ,(render-dynamic-comment-form (post-slug post))))) ;;; @@ -154,8 +147,8 @@ #:scripts (if (not (eof-object? scripts)) scripts '()) #:content `(,(render-article post) ,(comments-section post) - ,(script "section-folds.js") - ,(script "comment-reaction.js"))) + ,(script "comment-reaction.js") + ,(script "section-folds.js"))) sxml->html)) diff --git a/jakob/dynamic/capabilities/comment-form.scm b/jakob/dynamic/capabilities/comment-form.scm index 958e9dc..5ce4008 100644 --- a/jakob/dynamic/capabilities/comment-form.scm +++ b/jakob/dynamic/capabilities/comment-form.scm @@ -34,40 +34,57 @@ get-comment-form)) (define (render-comment-field) - `(fieldset (@ (id "comment-content")) - (legend "Comment") - (label (@ (for "name") (class "required")) "Name:") - (input (@ (type "text") (id "name") (name "name") (required #t))) - (label (@ (for "email")) "Email:") - (input (@ (type "text") (id "email") (name "email"))) - (label (@ (for "url")) "Webpage URL:") - (input (@ (type "text") (id "url") (name "url"))) - (label (@ (for "subject")) "Subject:") - (input (@ (type "text") (id "subject") (name "subject"))) - (label (@ (for "comment") (class "required")) "Comment :") - (textarea (@ (id "coment") (name "comment"))) - (p "(*) Indicates a required field."))) + `((div (@ (class "form-row")) + (input (@ (type "text") + (id "name") + (name "name") + (required #t) + (aria-label "Name") + (placeholder "Name"))) + (input (@ (type "text") + (id "subject") + (name "subject") + (aria-label "Subject") + (placeholder "Subject (Optional)")))) + (div (@ (class "form-row")) + (input (@ (type "text") + (id "url") + (name "url") + (aria-label "Website URL") + (placeholder "Website (https://...)")))) + (textarea (@ (id "coment") + (name "comment") + (placeholder "Write your comment here...") + (rows "4") + (required "") + (aria-label "Comment body"))))) (define* (render-comment-captcha-field #:optional (captcha-id "") captcha-image #:key hidden) - `(fieldset ,(if hidden - '(@ (id "comment-captcha") (hidden "#t")) - '(@ (id "comment-captcha"))) - (legend "Captcha") - (div (@ (id "captcha-challenge-primary")) - (label (@ (for "captcha")) "Please evaluate the following definite integral:") - (img (@ (id "captcha-image") - (src ,(if captcha-image - (format #f "data:image/jpeg;charset=utf-8;base64,~a" - (base64-encode captcha-image)) - "")))) - (input (@ (type "text") (id "captcha") (name "captcha") (size 24)))) - (button (@ (id "pow-trigger") (hidden #t)) - "Too hard? (Or unable to see the challenge?) Click here.") - (input (@ (autocomplete "off") (type "text") (id "captcha-id") (name "captcha-id") (hidden #t) (value ,captcha-id))) - (input (@ (autocomplete "off") (type "text") (id "captcha-alt") (name "captcha-alt") (hidden #t))) - (input (@ (autocomplete "off") (type "text") (id "captcha-alt-id") (name "captcha-alt-id") (hidden #t))) - (input (@ (type "submit") (id "submit-form") (value "Submit"))))) + `((div (@ (id "captcha-container")) + (div (@ (id "captcha-image-wrapper"))) + (div (@ (id "captcha-input-wrapper")) + (input (@ (type "text") + (id "captcha-solution") + (name "captcha") + (required "true"))) + (button (@ (id "captcha-challenge-trigger") + (type "button")) + "Fetch Captcha")) + (input (@ (autocomplete "off") (type "text") (hidden #t) + (id "captcha-id") (name "captcha-id") (value ,captcha-id))) + (input (@ (autocomplete "off") (type "text") (hidden #t) + (id "captcha-alt") (name "captcha-alt"))) + (input (@ (autocomplete "off") (type "text") (hidden #t) + (id "captcha-alt-id") (name "captcha-alt-id"))) + (div (@ (id "captcha-alternative-wrapper") + (hidden "true")) + (p "If you can't solve this integral, click this button to run an +alternative proof-of-work captcha.") + (button (@ (type "button") + (id "proof-of-work-trigger") + (aria-label "Automatic Captcha Button")) + "Calculate Proof-of-Work For Me"))))) (define (render-static-comment-form slug captcha-id captcha-image) `(div (@ (id "comment-form")) @@ -79,27 +96,17 @@ ,(script "proof-of-work.js"))) (define (render-dynamic-comment-form slug) - `(div (@ (id "comment-form")) - (h3 (@ (id "comment-form-header")) "Comment form") - (form (@ (id "comment-input") (action "/api/comment") (method "post")) - (input (@ (autocomplete "off") - (type "text") - (name "slug") - (hidden #t) - (value ,slug))) - (input (@ (autocomplete "off") - (type "text") - (name "reply-to") - (id "reply-to") - (hidden #t) - (value ""))) - ,(render-comment-field) - (fieldset (@ (id "captcha-trigger-block")) - (legend "Captcha") - (label "You need to complete a captcha to write a comment.") - (button (@ (id "captcha-challenge-trigger")) - "Click here to generate a captcha challenge")) - ,(render-comment-captcha-field #:hidden #t)) + `(form (@ (id "comment-form") (action "/api/comment") + (method "post") (hidden "true")) + ;; Hidden fields. + (input (@ (autocomplete "off") (type "text") (hidden #t) + (name "slug") (value ,slug))) + (input (@ (autocomplete "off") (type "text") (hidden #t) + (name "reply-to") (id "reply-to") (value ""))) + ,@(render-comment-field) + ,@(render-comment-captcha-field) + (button (@ (type "submit") (style "margin-top: 10px;")) + "Submit Comment") ,(script "dynamic-comment-form.js") ,(script "proof-of-work.js"))) |