IE & jQuery slim compatible Staticman JS

[VincentTam]

Goal

To resolve #766 in an IE-compatible way.

⚠️ Merge either this PR or #781. Don't merge both.

Background, description idem to linked PR.

Testing

Procedures

To save time, I did a Git merge on my demo site (https://git.io/bjsm0). To see the difference, you may run VincentTam/beautiful-jekyll@e37a4fd...ee14efa.

diff --git a/assets/js/staticman.js b/assets/js/staticman.js
index e8bdfbe..b52708f 100644
--- a/assets/js/staticman.js
+++ b/assets/js/staticman.js
@@ -14,29 +14,42 @@ layout: null
     var endpoint = '{{ sm.endpoint }}';
     var repository = '{{ sm.repository }}';
     var branch = '{{ sm.branch }}';
+    let url = endpoint + repository + '/' + branch + '/comments';
+    let data = $(this).serialize();
 
-    $.ajax({
-      type: $(this).attr('method'),
-      url: endpoint + repository + '/' + branch + '/comments',
-      data: $(this).serialize(),
-      contentType: 'application/x-www-form-urlencoded',
-      success: function (data) {
-        $('#comment-form-submit').addClass('d-none');
-        $('#comment-form-submitted').removeClass('d-none');
-        $('.page__comments-form .js-notice').removeClass('alert-danger');
-        $('.page__comments-form .js-notice').addClass('alert-success');
-        showAlert('success');
-      },
-      error: function (err) {
-        console.log(err);
-        $('#comment-form-submitted').addClass('d-none');
-        $('#comment-form-submit').removeClass('d-none');
-        $('.page__comments-form .js-notice').removeClass('alert-success');
-        $('.page__comments-form .js-notice').addClass('alert-danger');
-        showAlert('failure');
-        $(form).removeClass('disabled');
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", url);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+    xhr.onreadystatechange = function () {
+      if(xhr.readyState === XMLHttpRequest.DONE) {
+        var status = xhr.status;
+        if (status >= 200 && status < 400) {
+          formSubmitted();
+        } else {
+          formError();
+        }
       }
-    });
+    };
+
+    function formSubmitted() {
+      $('#comment-form-submit').addClass('d-none');
+      $('#comment-form-submitted').removeClass('d-none');
+      $('.page__comments-form .js-notice').removeClass('alert-danger');
+      $('.page__comments-form .js-notice').addClass('alert-success');
+      showAlert('success');
+    }
+
+    function formError() {
+      $('#comment-form-submitted').addClass('d-none');
+      $('#comment-form-submit').removeClass('d-none');
+      $('.page__comments-form .js-notice').removeClass('alert-success');
+      $('.page__comments-form .js-notice').addClass('alert-danger');
+      showAlert('failure');
+      $(form).removeClass('disabled');
+    }
+
+    xhr.send(data);
 
     return false;
   });

Screenshots and results

Success: VincentTam#36

References

1. https://attacomsian.com/blog/xhr-post-request
2. https://stackoverflow.com/a/10876284/3184351
3. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

[daattali]

@VincentTam I see that staticman's docs are finally officially supporting v3! 🎉

I wanted to test this, so I tried following the docs https://staticman.net/docs/getting-started to set up an instance, but I wasn't able to follow the instructions. Can you help me test? In the documentation, option 1 is using staticman v1, so I was trying to follow options 2 which uses v3. These are the instructions:

Option 2. Authenticate to GitHub using a personal access token on a bot
1. Register a new GitHub account to run your Staticman bot and create a personal access token for this new account.
2. From your main GitHub account, send your bot a collaboration invite.
3. Return to this step once your Staticman instance is running and send a GET request to {STATICMAN_BASE_URL}/v3/connect/{GIT_PROVIDER_USERNAME}/{REPO}

I followed steps 1-2, but in step 3 it says "once your staticman instance is running" -- but I thought these were the docs for how to get a staticman instance to run :) I wasn't sure what to do at this point.

[daattali]

@VincentTam I plan on making a release soon, so let me know if you'd like to include this in the new version

[VincentTam]

@VincentTam I plan on making a release soon, so let me know if you'd like to include this in the new version

Yes please.

I wanted to test this, so I tried following the docs https://staticman.net/docs/getting-started to set up an instance, but I wasn't able to follow the instructions. Can you help me test?

Yes again, but you might find more help from users using other themes on Staticman's official repo.

In the documentation, option 1 is using staticman v1, so I was trying to follow options 2 which uses v3.

• No, both options are using v3, despite the use of /v1/webhook.
• v1 and v2 are deprecated and legacy respectively.
• using a private GitHub Apps is preferred over a bot, but that's back-end settings. This PR (as well as my previous ones) should work for whatever agent chosen.

I followed steps 1-2, but in step 3 it says "once your staticman instance is running" -- but I thought these were the docs for how to get a staticman instance to run :) I wasn't sure what to do at this point.

Nice catch! Wow ! You discovered a bug! Lemme report this on https://github.com/eduardoboucas/staticman.net.

That's why in my guides, I always separate server-side and client-side setup. Unluckily, I read many guides which mix up the two.

My guides published three years ago on my personal blog don't have screenshots for the online Heroku dashboard. That caused a lot of errors. After 2.5 years of writing around the errors, I've polished my tricks and posted eduardoboucas/staticman#407, hoping that prospective users can benefit from my experience. For using GitHub, I've only included the new recommended GitHub Apps authorization method, but for using the legacy GitHub bot user, adapt the instructions for GitLab bot user and cross-reference with the official instructions for obtaining a personal token on GitHub configured with the appropriate scopes. The rough idea is the same, with the difference of the invitation mechanism.

[daattali]

Ah so I'll try using Option 1 from the documentations. Thanks for your response. If it goes well, I'll merge.

[daattali]

Thanks for all your help @VincentTam and for writing your own guides. This theme is meant to be used by non programmers who aren't expected to have to do their own research in order to use any of the supported features, so it's very important to me that every feature used in the theme would be self-contained and easy to follow. That currently doesn't seem to be the case with staticman. Let's see the followup on your issue eduardoboucas/staticman.net#26

[gtarnaras]

Hey guys, I was running into the same issue with staticman.js and I've applied the fix locally to test it. I no longer receive the ajax error but it seems I have issues with staticman itself. It is now throwing a 503 and it is failing (I' ve tried deploying it on Heroku following the official documentation). Something is either wrong with the staticman app or with its docs. I've spent a couple of hours trying to fix it but the docs are just too messy. Going to update the bug you raised in staticman's repo as well. Anyway, I just wanted to share the request seems to be routed properly from beautiful-jekyll.

[daattali]

I still want staticman to have complete documentation for people to be able to use it easily, but that's not affecting this PR. I should have merged this PR previously because it does fix #766