[BUG] Staticman 405 error #1

VincentTam · 2021-02-19T15:05:05Z

Description

Staticman form submission failed

Steps to reproduce

Fill in the comment form in https://fahimscirex.github.io/post/journal/capernaum/.

options[slug]: postjournalcapernaum
options[parent]: 
fields[comment]: Test my XHR ` send`  method.
fields[name]: Vincent Tam
fields[email]: [email protected]
fields[website]: https://vincenttam.gitlab.io

Click "submit".

Expected output

The page displays the submit success message.

Error received

I received a response with error 405.

<html>
<head><title>405 Not Allowed</title></head>
<body bgcolor="white">
<center><h1>405 Not Allowed</h1></center>
</body>

Screenshot

Analysis

The request URL displayed in my web browser's web dev tool is incorrect.

https://fahimscirex.github.io/post/journal/capernaum/%7B%7B%20.api%20%7D%7D

Git* Pages only supports static web host. The copies saved on Git* server can't respond to users' requests.

You've made a typo in the customizing the URL for your API instance.

fahimscirex.github.io/config.toml

Line 118 in 97a9e5d

    
           api = "https://staticman-scirex/v3/entry/github/fahimscirex/fahimscirex.github.io/master/data/comments"

The use of action in an HTML might feed the URL of your API instance to search bots. I made merged PR daattali/beautiful-jekyll#521 to address this problem. Please consider including that into your code.

fahimscirex.github.io/themes/beautifulhugo/layouts/partials/staticman-comments.html

Line 38 in 0ad71f0

    
           <form class="js-form form" method="post" action="{{ .Site.Params.staticman.api }}">

The text was updated successfully, but these errors were encountered:

fahimscirex · 2021-02-21T17:31:21Z

Sorry, I'm a newbie here. Didn't understand about the typo. Can you elaborate that?

fahimscirex · 2021-02-21T17:32:01Z

And I've moved to Hugo. So that merge won't work here I guess?

VincentTam · 2021-02-22T10:24:24Z

Sorry, I'm a newbie here. Didn't understand about the typo. Can you elaborate that?

I've created a PR for that.

And I've moved to Hugo. So that merge won't work here I guess?

Beautiful Hugo is actually the theme for my personal blog. I've submitted some PRs for fun. Some minor ones got merged, and some might be obsolete or too big to get merged, and the rest are version updates like upgrading KaTeX and replacing outdate jQuery with latest stable version of jQuery slim. I've tweaked it in the way I want on GitLab. (demo)

In the official demo, the POST URL is set using the action attribute of the <form> tag for pedagogical purposes—I doubt that users want that in practice as I suspect that search bots might get the URL of your API instance through a search. That's why I've submitted the aforementioned PR to Beautiful Jekyll. Changing static site generator only changes the template syntax, but not the logic. I don't have time to translate the functionality for nested comments written for Hugo to Jekyll. You may search for "staticman" in my GitLab repo for the tweaked Hugo theme.

use `{{ .Site.Params.staticman.api }}` instead of `{{ .api }}` fixes #1

patches #1

VincentTam · 2021-02-22T13:45:49Z

ℹ️ I ran the test before your updates.

Thanks for accepting my PR, but it's still giving errors.

Access to XMLHttpRequest at 'https://staticman-scirex.herokuapp.com/v3/entry/github/fahimscirex/fahimscirex.github.io/master/comments' from origin 'https://fahimscirex.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
staticman.js:27
xhr.onreadystatechange @ staticman.js:27
XMLHttpRequest.send (async)
(anonymous) @ staticman.js:34
dispatch @ jquery-1.12.4.min.js:3
r.handle @ jquery-1.12.4.min.js:3
staticman.js:34 POST https://staticman-scirex.herokuapp.com/v3/entry/github/fahimscirex/fahimscirex.github.io/master/comments net::ERR_FAILED
(anonymous) @ staticman.js:34
dispatch @ jquery-1.12.4.min.js:3
r.handle @ jquery-1.12.4.min.js:3

If you open your browser's web dev tool, you might see two requests, one in error and one in 200. The one in 200 corresponds with "options" as request method. I don't expect that to happen. Despite the "OK" message, the form submission actually fails.

The red line in the above screenshot suggests the actual XHR request sent resulted in an error.

It seems that your Staticman instance might be down for a while.

As I reported in halogenica/beautifulhugo#342, the theme isn't using an up-to-date jQuery.

fahimscirex.github.io/themes/beautifulhugo/layouts/partials/footer.html

Lines 69 to 72 in 0ad71f0

    
           <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script> 
        
           <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script> 
        
           <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
        
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

The blog is derived from Beautiful Jekyll, for which I've contributed to its Staticman integration. The Jekyll theme's author @daattali has switched to the latest slim version of jQuery (despite daattali/beautiful-jekyll#766). That motivated me to follow suite for Beautiful Hugo. As a result, I've submitted halogenica/beautifulhugo#380.

Note that I wrote my script staticman.js that controls the behavior of my form (with "submit and clear button"), whose code and CSS class names are derived and developped from both Minimal Mistakes (c.f. daattali/beautiful-jekyll#440) and Beautiful Hugo.

fahimscirex.github.io/static/js/staticman.js

Lines 39 to 49 in 0ad71f0

    
           function showAlert(msg) { 
        
             if (msg == 'success') { 
        
               $('.js-form .submit-success').removeClass('hidden');  // show submit success message 
        
               $('.js-form .submit-failed').addClass('hidden'); // hide submit failed message 
        
             } else { 
        
               $('.js-form .submit-success').addClass('hidden'); // hide submit success message 
        
               $('.js-form .submit-failed').removeClass('hidden');  // show submit failed message 
        
             } 
        
             $('button[type="submit"]:enabled').removeClass('hidden'); // show "submit" 
        
             $('button[type="submit"]:disabled').addClass('hidden');  // hide "submitted" 
        
           }

For example, the CSS class submit-success doesn't exist in your Go–HTML template in Beautiful Hugo.

fahimscirex.github.io/layouts/partials/staticman-comments.html

Lines 65 to 82 in 0ad71f0

    
             <fieldset> 
        
               <div class="textfield"> 
        
                 <input type="url" name="fields[website]"  placeholder="{{ i18n "yourWebsite" }}"/> 
        
               </div> 
        
             </fieldset> 
        
             {{ if .Site.Params.staticman.recaptcha }} 
        
             <fieldset> 
        
               <div class="g-recaptcha" data-sitekey="{{ .Site.Params.staticman.recaptcha.sitekey }}"></div> 
        
             </fieldset> 
        
             {{ end }} 
        
             <fieldset> 
        
               <button class="button"> 
        
                 Submit 
        
               </button> 
        
             </fieldset> 
        
           </form>

You might want to want to have a look at the current version of my comment form and the above GIF to visualize the actual user interface.

VincentTam · 2021-02-22T14:14:55Z

Updated: despite the latest commit

fahimscirex.github.io/config.toml

Lines 117 to 118 in edd59a7

    
           [Params.staticman] 
        
             api = "https://staticman-fahimscirex.herokuapp.com/v3/entry/github/fahimscirex/fahimscirex.github.io/master/comments"

the Heroku app is still unavailable.

fahimscirex · 2021-02-23T02:01:47Z

Working fine to me. BTW, I deployed the Heroku repo using the auto deploy button and when I pull the repo in my local machine it turns out to be empty. Why is that?

fahimscirex · 2021-02-23T02:50:50Z

Okay. So looks like the Heroku app is available only from my system. When I removed the RSA config variable from repo I got an application error. How can I make the app available for all?

VincentTam · 2021-02-23T08:14:29Z

For back-end Staticman problems, it's better asked in its official repo. In a Git* repo for a blog theme which implements Staticman integration, we deal with questions about the theme's template code which enables interactions between the static website and a Staticman API. More concretely, we deal with questions and problems like:

How to make an HTTPS requests to a Staticman API from static site template code (in a jQuery/jQuery slim/pure jS way) ?
Behavior of the user interface of the comment form (i18n, color change, display message and form elements' state before/during/after form submission)
Theme-specific parameters for Staticman in static site config files (e.g. _config.yml/config.toml)
How to parse JSON/YAML data files stored in the path specified in Staticman's site config file staticman.yml.

Note that these discussions depend on a working API instance.

VincentTam mentioned this issue Feb 22, 2021

Fixed incorrect Staticman POST URL #2

Merged

fahimscirex closed this as completed in #2 Feb 22, 2021

fahimscirex reopened this Feb 22, 2021

ahmubashshir mentioned this issue Feb 22, 2021

fix nonexistent variable in staticman.js template #4

Merged

fahimscirex closed this as completed in #4 Feb 22, 2021

fahimscirex pushed a commit that referenced this issue Feb 22, 2021

fix nonexistent variable in staticman.js template

1f07328

use `{{ .Site.Params.staticman.api }}` instead of `{{ .api }}` fixes #1

ahmubashshir mentioned this issue Feb 22, 2021

load api url from dom #5

Merged

fahimscirex pushed a commit that referenced this issue Feb 22, 2021

load api url from dom

74792ad

patches #1

fahimscirex reopened this Feb 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] Staticman 405 error #1

[BUG] Staticman 405 error #1

VincentTam commented Feb 19, 2021 •

edited

Loading

fahimscirex commented Feb 21, 2021

fahimscirex commented Feb 21, 2021

VincentTam commented Feb 22, 2021

VincentTam commented Feb 22, 2021 •

edited

Loading

VincentTam commented Feb 22, 2021

fahimscirex commented Feb 23, 2021 •

edited

Loading

fahimscirex commented Feb 23, 2021

VincentTam commented Feb 23, 2021 •

edited

Loading

[BUG] Staticman 405 error #1

[BUG] Staticman 405 error #1

Comments

VincentTam commented Feb 19, 2021 • edited Loading

Description

Steps to reproduce

Expected output

Error received

Screenshot

Analysis

fahimscirex commented Feb 21, 2021

fahimscirex commented Feb 21, 2021

VincentTam commented Feb 22, 2021

VincentTam commented Feb 22, 2021 • edited Loading

VincentTam commented Feb 22, 2021

fahimscirex commented Feb 23, 2021 • edited Loading

fahimscirex commented Feb 23, 2021

VincentTam commented Feb 23, 2021 • edited Loading

VincentTam commented Feb 19, 2021 •

edited

Loading

VincentTam commented Feb 22, 2021 •

edited

Loading

fahimscirex commented Feb 23, 2021 •

edited

Loading

VincentTam commented Feb 23, 2021 •

edited

Loading