New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Staticman Comment Reply #222

wants to merge 17 commits into
base: master


None yet
1 participant

VincentTam commented Nov 16, 2018

Demo site

screenshot_2018-11-16 my second post 2

New features

  • comment reply
  • comment preview

Bug fixes and modifications

Backward compatibility

I tested this for another existing Beautiful Hugo site. Despite some missing fields (c.f. staticman.yml) in existing YML comment data, this works fine.

old sites using this PR

Quick guide to test this pull request

If you're using a theme as a Git submodule (as recommended in Hugo's official tutorial), you may create a new (local/GitLab/etc) (private) repo for this theme and run these commands to get this PR merged against a testing branch pr222 in the private repo. I denote the URL of this repo as the upstream.

$ git remote -v
upstream (fetch)
upstream (push)
... # other remote omitted
$ git checkout -b pr222 # test on a new branch pr222
$ git fetch upstream pull/222/head # git pull will be rejected
$ git merge FETCH_HEAD # manually merge the this PR against branch pr222
$ cd <your-blog>
... # edit your .gitmodules with url="<repo-containing-pr222>" and branch = "pr222"
$ git submodule sync # inform Git the changes in .gitmodules
$ git submodule update --remote --recursive # switch to the HEAD of your cloned repo for the theme

Remarks rooms for improvement

I'm not a developer. I wrote this based on my basic knowledge in web markup and scripting languages, @dancwilliams's great example, some Google search results and trial-and-error. This commit history is far from clean: I've changed some important field names and file structure a few times.

  • I don't wish to change the <article id="comment-1"> in layouts/partials/staticman-comments.html, so I store the comment _id in a "reply to XYZ" link button.
  • Reply comments have id="comment-1r1". Though I call them "nested comments", a reply comment is not an HTML children() of any .static-comment.
  • I've changed {{ if not .parent }} in layouts/partials/staticman-comments.html (introduced at d68cf2e by @badele) to {{ if not .replyThread }} because options[parent] is for subscription entries. It's clear (to me, at least) that @badele intends to loop over all "main comment" (as in eduardoboucas/staticman#35) first.
    • I've chosen replyThread instead of threadID because a "main comment" starts a thread, so it belongs to a thread, thus it would look a bit strange without a threadID.
    • For each reply comment, there's (1) main comment, and (2) reply target, which aren't identical in general. Provided the double-loop structure discussed in eduardoboucas/staticman#35 and implemented at d68cf2e, whose outer loop iterates through (1) main comment and inner loop iterates through the reply recomment, there's two possible ways to reconstruct the whole reply tree, and this PR inclines to the Staticman side more than the Hugo side.
  • CSS can be improved, but the logic is already there.
  • I've introduced an offset in static/js/staticman.js so that the anchor target won't get covered by the navbar. Maybe there's a pure CSS solution.
  • I kept @dancwilliams's choice of using <a> instead of <button> for reply button. After hours of trial-and-error, I've to introduce either a delay or an animation (the way I prefered) so that I can jump to a different element (the top of the post) by feeding another href (id of the "reply to" button)
  • Internationization of "reply to" in the link button is missing.

See also

@VincentTam VincentTam changed the title from Add reply functionality to [Feature] Staticman Comment Reply Nov 20, 2018

VincentTam added some commits Nov 20, 2018

added i18n key and translations for reply button
Changed UI text from "Reply to {{ .user }}" to "Reply to this message"
to simplify template code.  In western European languages, the
original UI text reads "{{ i18n replyToMsg }} {{ .user }}", but this
order is reversed in some languages (e.g. German).

Languages that I know: Chinese, English, French

Sources for other translations:

- Norwegian Bokmål `nb`:

    Tenker du på deg selv som en bruker nå som du er på internett, eller noe helt annet?

    Scroll to bottom to the comments section to find the f

- Japanese `ja`: WordPress コメント機能の基本的な使い方 – 承認・返信・拒否・削除

- The translation for all other languages are copied from the key
  "$ReplyToThisComment" in
Debug broken KaTeX macros
Loading of renderMathInElement(document.body) in jQuery caused error,
blocking the load of custom KaTeX macros in per site /static/js/.
With this line removed, the custom KaTeX macros have managed to run

VincentTam added some commits Dec 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment