search

fahimscirex / fahimscirex.github.io

https://fahimscirex.github.io
2 stars 3 forks source link

[BUG] Staticman 405 error #1

Open VincentTam opened 3 years ago

VincentTam commented 3 years ago

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]: xxxx@live.hk
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

Screenshot displaying web dev tools

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.

https://github.com/fahimscirex/fahimscirex.github.io/blob/97a9e5dfd811e04fbca9b54446d764df583bc5ce/config.toml#L118

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.

https://github.com/fahimscirex/fahimscirex.github.io/blob/0ad71f0c60c0996e683125ea7230f5c640a09dc5/themes/beautifulhugo/layouts/partials/staticman-comments.html#L38

fahimscirex commented 3 years ago

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

fahimscirex commented 3 years ago

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

VincentTam commented 3 years ago

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.

staticman nested GIF

VincentTam commented 3 years ago

:information_source: I ran the test before your updates.

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

Screenshot from 2021-02-22 13-54-23

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.

Screenshot from 2021-02-22 14-00-05

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

Screenshot from 2021-02-22 13-52-51

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

Screenshot from 2021-02-22 14-11-27

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

https://github.com/fahimscirex/fahimscirex.github.io/blob/0ad71f0c60c0996e683125ea7230f5c640a09dc5/themes/beautifulhugo/layouts/partials/footer.html#L69-L72

The blog is derived from Beautiful Jekyll, for which I've contributed to its Staticman integration. The Jekyll theme's author span>@</spandaattali 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.

https://github.com/fahimscirex/fahimscirex.github.io/blob/0ad71f0c60c0996e683125ea7230f5c640a09dc5/static/js/staticman.js#L39-L49

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

https://github.com/fahimscirex/fahimscirex.github.io/blob/0ad71f0c60c0996e683125ea7230f5c640a09dc5/layouts/partials/staticman-comments.html#L65-L82

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 commented 3 years ago

Updated: despite the latest commit

https://github.com/fahimscirex/fahimscirex.github.io/blob/edd59a7b9b4df235d6ce67e4ede62152cfe25b69/config.toml#L117-L118

the Heroku app is still unavailable.

out

fahimscirex commented 3 years ago

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? Screenshot from 2021-02-23 07-58-50

fahimscirex commented 3 years ago

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 commented 3 years ago

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:

  1. How to make an HTTPS requests to a Staticman API from static site template code (in a jQuery/jQuery slim/pure jS way) ?
  2. Behavior of the user interface of the comment form (i18n, color change, display message and form elements' state before/during/after form submission)
  3. Theme-specific parameters for Staticman in static site config files (e.g. _config.yml/config.toml)
  4. 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.