[Optional feature]: Staticman Nested Comment Support #119
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -158,6 +158,89 @@ Set `googleAnalytics` in `config.toml` to activate Hugo's [internal Google Analy | |
|
|
||
| Set `disqusshortname` in `config.toml` to activate Hugo's [internal Disqus template](https://gohugo.io/templates/internal/#disqus). | ||
|
|
||
| ## Staticman | ||
|
|
||
| Procedures to start using Staticman: | ||
|
|
||
| 1. Add Staticman bot/app, depending on your Git service provider. | ||
| - GitHub: choose either one of the following method | ||
| + GitHub App: refer to issue | ||
| [https://github.com/eduardoboucas/staticman/issues/243](https://github.com/eduardoboucas/staticman/issues/243) | ||
| for detailed procedures. | ||
| + GitHub bot: invite | ||
| **[@staticmanlab](https://github.com/staticmanlab)** as a collaborator | ||
| to your repository (by going to your repository's **Settings** page, | ||
| navigating to the **Collaborators** tab. | ||
|
|
||
|  | ||
|
|
||
| Then help **[@staticmanlab](https://github.com/staticmanlab)** | ||
| accept the invitation by going to | ||
|
|
||
| https://staticman3.herokuapp.com/v3/connect/github/<username>/<repo-name> | ||
|
There was a problem hiding this comment. Staticman's documentation only covers v2, so there's a need to give a self-contained setup guide. |
||
|
|
||
|  | ||
|
|
||
| Now, **[@staticmanlab](https://github.com/staticmanlab)** has been | ||
| invited to your repository. | ||
|
|
||
|  | ||
|
|
||
| - GitLab: Add the GitLab user associated with your Staticman API endpoint | ||
| (e.g. **[@staticmanlab](https://github.com/staticmanlab)** as a | ||
| "**developer**" for your project by going to **Settings → Members → Invite | ||
| member**. | ||
|
|
||
| There's *no* invitation acceptance mechanism on GitLab. The invited | ||
| member enjoys the privileges once the invitation is sent. Therefore, | ||
| there's *no* need to hit `/connect`. | ||
|
|
||
| - Framagit: Since Framagit is a fork of GitLab, the overall setup is similar | ||
| to that on GitLab. (Note that the Framagit bot is named as | ||
| **[@statimcanlab1](https://framagit.org/staticmanlab1)**.) | ||
|
|
||
|  | ||
|
|
||
| 2. Fill in the site config file `config.toml` with reference to the instructions | ||
| in the comments. | ||
|
|
||
| Framagit users may choose `gitlab` for `gitProvider` in `config.toml`. | ||
|
|
||
| In case of empty `endpoint`, the public Framagit instance will be used. | ||
|
|
||
| | instance | `endpoint` | | ||
| | --- | --- | | ||
| | official production | `https://api.staticman.net` | | ||
| | GitLab | `https://staticman3.herokuapp.com` | | ||
| | Framagit | `https://staticman-frama.herokuapp.com` | | ||
|
|
||
| 3. Proceed to the **root-level** repo config file `staticman.yml`. Note that | ||
| the name and path of this file *can't* be changed. | ||
|
|
||
| The parameter `moderation` is for comment moderation, and it defaults to | ||
| `true`, so each new comment is created as a pull/merge request. If it is | ||
| switched to `false`, then Staticman will directly commit against the | ||
| configured `branch`. | ||
|
|
||
| If you are working on GitLab/Framagit and you have set `moderation: false`, | ||
| depending on your `branch`, you might need the following steps. | ||
|
|
||
| - protected branch (e.g. `master`): Go to **Settings → Repository → | ||
| Protected Branches** and permit the GitLab bot to push against that | ||
| branch. | ||
| - unprotected branch (GitHub's default): *no* measures needed | ||
|
|
||
| 4. (Optional, GitHub only) To prevent old inactive branches (representing | ||
| approved comments) from piling up, you may set up a webhook according to | ||
| [Staticman's documenation](https://staticman.net/docs/webhooks). Make sure to | ||
| input the **Payload URL** according to your chosen `endpoint`. For example, the | ||
| default `endpoint` is `https://staticman3.herokuapp.com`, so the corresponding | ||
| **Payload URL** should be `https://staticman3.herokuapp.com/v1/webhook`. | ||
|
|
||
| 5. (Optional, but recommended) To stop spam bots, it's suggested to enable | ||
| [reCAPTCHA](https://developers.google.com/recaptcha/docs/display). You may | ||
| refer to the site config file for details. | ||
|
|
||
| ## Custom css | ||
| You can add custom css files by placing them under `assets/` and adding the path to the file to `customCSS` in `config.toml`. | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| (function ($) { | ||
| $('.page__comments-form').submit(function () { | ||
| var form = this; | ||
|
|
||
| $(form).addClass('disabled'); | ||
| $('button[type="submit"]:enabled').addClass('hidden'); // hide "submit" | ||
| $('button[type="submit"]:disabled').removeClass('hidden'); // show "submitted" | ||
|
|
||
| var endpoint = '{{ .endpoint | default "https://staticman-frama.herokuapp.com" }}'; | ||
| var gitProvider = '{{ .gitprovider }}'; | ||
| var repo = '{{ .repo }}'; | ||
| var branch = '{{ .branch }}'; | ||
|
|
||
| $.ajax({ | ||
| type: $(this).attr('method'), | ||
| url: [endpoint, 'v3/entry', gitProvider, repo, branch, 'comments'].join('/'), | ||
|
There was a problem hiding this comment. Separated POST request URL in JS code to prevent abuses by spam bots through scraping the generated HTML source code. |
||
| data: $(this).serialize(), | ||
| contentType: 'application/x-www-form-urlencoded', | ||
| success: function (data) { | ||
| showAlert('success'); | ||
| setTimeout(function(){ clearForm() }, 3000); // display success message for 3s | ||
| $(form).disabled = false; | ||
| }, | ||
| error: function (err) { | ||
| console.log(err); | ||
| showAlert('failed'); | ||
| $(form).disabled = false; | ||
| } | ||
| }); | ||
|
|
||
| return false; | ||
| }); | ||
|
|
||
| function showAlert(msg) { | ||
| if (msg == 'success') { | ||
| $('.page__comments .submit-success').removeClass('hidden'); // show submit success message | ||
| $('.page__comments .submit-failed').addClass('hidden'); // hide submit failed message | ||
| } else { | ||
| $('.page__comments .submit-success').addClass('hidden'); // hide submit success message | ||
| $('.page__comments .submit-failed').removeClass('hidden'); // show submit failed message | ||
| } | ||
| $('button[type="submit"]:enabled').removeClass('hidden'); // show "submit" | ||
| $('button[type="submit"]:disabled').addClass('hidden'); // hide "submitted" | ||
| } | ||
|
|
||
| function clearForm() { | ||
| resetReplyTarget(); | ||
| $('.page__comments input') | ||
| .filter(function() { | ||
| return this.name.match(/^fields\[.*\]$/); | ||
| }) | ||
| .val(''); // empty all text & hidden fields | ||
| $('.page__comments textarea').val(''); // empty text area | ||
| $('.page__comments .submit-success').addClass('hidden'); // hide submission status | ||
| $('.page__comments .submit-failed').addClass('hidden'); // hide submission status | ||
| } | ||
|
|
||
| function resetReplyTarget() { | ||
| $('.page__comments .reply-notice .reply-name').text(''); // reset reply target | ||
| $('.page__comments .reply-notice img').remove(); // remove reply avatar | ||
| $('.page__comments .reply-notice a').remove(); // remove '×' button | ||
| $('.page__comments .reply-notice').addClass('hidden'); // hide reply target display | ||
| $('.page__comments input[name="fields[replyThread]"]').val(''); | ||
| $('.page__comments input[name="fields[replyID]"]').val(''); | ||
| $('.page__comments input[name="fields[replyName]"]').val(''); | ||
| } | ||
|
|
||
| // record reply target when "reply to this comment" is pressed | ||
| $('.page__comments .comment').on('click', '.reply-btn', function (evt){ | ||
| resetReplyTarget(); | ||
| var cmt = $(evt.delegateTarget); | ||
| $('.page__comments input[name="fields[replyThread]"]').val(this.title); | ||
|
There was a problem hiding this comment. If you find my approach of storing the |
||
| $('.page__comments input[name="fields[replyID]"]').val(cmt.attr('id')); | ||
| authorTag = cmt.find('.comment__author'); | ||
| replyName = authorTag.find('span[itemprop="name"]').text(); | ||
| $('.page__comments input[name="fields[replyName]"]').val(replyName); | ||
|
|
||
| // display reply target avatar and name | ||
| $('.page__comments .reply-notice').removeClass('hidden'); | ||
| $('.page__comments .reply-name').text(replyName); | ||
| avatarTag = cmt.find('.comment__avatar'); | ||
| // use clone to avoid removal of avatar in comments by resetReplyTarget() | ||
| $('.page__comments .reply-arrow').after(avatarTag.clone()); | ||
| // add button for removing reply target (static method would give error msg) | ||
| closeBtn = $("<a class='close-btn'></a>"); | ||
| $('.page__comments .reply-notice').append(closeBtn); | ||
| }); | ||
|
|
||
| // handle removal of reply target when '×' is pressed | ||
| $('.page__comments .reply-notice').on('click', 'a.close-btn', function(){ | ||
| resetReplyTarget(); | ||
| }); | ||
|
|
||
| // clear form when reset button is clicked | ||
| $('.page__comments input[type="reset"]').click(function (){ | ||
| clearForm(); | ||
| }); | ||
| })(jQuery); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| .page__comments | ||
| /* HTML form */ | ||
| .page__comments-form | ||
| margin-top: 1rem | ||
| &.disabled | ||
| input, button, textarea, label | ||
| pointer-events: none | ||
| cursor: not-allowed | ||
| filter: alpha(opacity = 65) | ||
| box-shadow: none | ||
| opacity: 0.65 | ||
|
|
||
| .form-group | ||
| margin: 0.6rem 0 0.6rem 0 | ||
| textarea | ||
| width: 100% | ||
| textarea, input | ||
| padding: 0.5rem | ||
| border: 1px solid $secondary | ||
| background: $background | ||
| color: $body-color | ||
| border-radius: 4px | ||
|
|
||
| .reply-notice | ||
| .reply-arrow | ||
| vertical-align: middle | ||
| .comment__avatar | ||
| display: inline-block | ||
| float: none | ||
| width: 2rem | ||
| height: 2rem | ||
| margin: 0 .6rem | ||
| vertical-align: text-bottom | ||
| border-radius: 50% | ||
| .close-btn | ||
| margin: 0 .6rem | ||
| &:after | ||
| content: '\2716' | ||
|
|
||
| .required | ||
| font-weight: bold | ||
|
|
||
| button | ||
| border-radius: 4px | ||
| background: $secondary | ||
| border: 1px solid $secondary | ||
| padding: 0.5rem | ||
| margin-right: 0.6rem | ||
|
|
||
| /* Static comments */ | ||
| $avatar__size: 5rem | ||
| $avatar__sep: 3rem | ||
| $reply__indent: 2rem | ||
|
There was a problem hiding this comment. Feel free to change the values here. Since I'm not a web designer, I haven't considered the mobile loading issue. |
||
|
|
||
| .comment | ||
| margin: 1rem 0 1rem 0 | ||
| float: left | ||
| width: 100% | ||
| clear: both | ||
|
|
||
| .comment__avatar-wrapper | ||
| float: left | ||
| width: $avatar__size | ||
| height: $avatar__size | ||
| margin-right: $avatar__sep | ||
| .comment__avatar | ||
| width: 100% | ||
| height: 100% | ||
| border-radius: 50% | ||
|
|
||
| .comment__content-wrapper | ||
| float: right | ||
| width: calc(100% - #{$avatar__size} - #{$avatar__sep} - 1px) | ||
| border-bottom: 1px solid $secondary | ||
| .comment__author | ||
| margin-bottom: 0.3rem | ||
| .comment__content | ||
| margin: 0.5rem 0 0.5rem 0 | ||
| .comment__reply-button | ||
| margin-top: 0.6rem | ||
| margin-bottom: 0.6rem | ||
|
|
||
| &.reply | ||
| margin-left: 2rem | ||
| width: calc(100% - #{$reply__indent} - 1px) | ||
|
|
||
| span[itemprop="name"] | ||
| &::after | ||
| font-family: 'Font Awesome 5 Free' | ||
| content: "\f064" | ||
| display: inline-block | ||
| padding-left: .5rem | ||
| padding-right: .5rem | ||
| vertical-align: middle | ||
| font-weight: 900 | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@staticmanapp and
https://api.staticman.net/v2no logner work, as reported in eduardoboucas/staticman#306.