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

[Optional feature]: Unfinished Staticman Nested Comment Support #119

Open
wants to merge 12 commits into
base: master
from

Conversation

Projects
None yet
3 participants
@VincentTam
Copy link
Contributor

VincentTam commented Dec 19, 2018

Motivation

Provide a free commenting service.

Hugo's built-in Disqus has no Markdown support. Staticman is open-source and transmits HTML form data as YML files to be merged in GitHub/GitLab repos. Despite its MIT license, the project had been bundled with GitHub for years. Thanks to Nicholas Tsim's PR, Staticman now supports GitLab.

To add Staticman, I've combined Minimal Mistakes and Beautiful Hugo's code so as to avoid breaking the original modals. I am not good at CSS at the moment, so the visual layout will be strange. It took me hours to understand the role of container. During local preview, the SASS comes out. However, when it's deployed to GitLab, this has disappeared. However, the logic is already there at https://vincenttam.gitlab.io/introduction. Web developers should be able to fix the display much more efficiently than I do. I'm creating this PR to publish my code.

screenshot_2018-12-18-17-48-55

Features

  • Staticman comments
  • Reply function
  • sample config files (site, repo, GitLab config) in exampleSite
  • CSS
  • Documentation

Quick guide to test this PR

I assume the user has installed his/her Hugo theme(s) as a Git submodule.

$ git remote -v
upstream	https://github.com/vickylai/hugo-theme-introduction.git (fetch)
upstream	https://github.com/vickylai/hugo-theme-introduction.git (push)
... # other remote omitted
$ git checkout -b pr119 # test on a new branch pr119
$ git fetch upstream pull/119/head # git pull will be rejected
$ git merge FETCH_HEAD # manually merge the this PR against branch pr119
$ cd <your-blog>
... # edit your .gitmodules with url="<repo-containing-pr119>" and branch = "pr119"
$ 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

On the recent Staticman's public API bottleneck

Due to eduardoboucas/staticman#227, the parameter api in config.toml defaults to the API address associated with @staticmanlab.

VincentTam added some commits Dec 18, 2018

Fixed CSS alignment
Missed "container"
i18n for Staticman's button and notifications
i18n doesn't work under assets.  I've adopted Minimal Mistakes'
approach to get this work.
Fixed mistaken class names
I've done d818b0c against the wrong branch!
Bug fix to improve comment submission
1. Forgotten the last "fieldset" originally present in Bruno Adele's
code for Beautiful Hugo's native Staticman support
2. Clear form after successful submission
3. Shorter jQuery code to clear all form (and hidden) input fields

@hanzei hanzei self-requested a review Dec 19, 2018

@hanzei hanzei added the enhancement label Dec 19, 2018

@VincentTam

This comment has been minimized.

Copy link
Contributor

VincentTam commented Dec 19, 2018

Look back at what I've written, I believe that a self-review would help others.

  • unfinished SASS: perhaps the instances of px has to be changed. The original files can be found by searching "comments" among Minimal Minstake's SCSS files. I've abandonned Bruno Adele's CSS file since the code for modal clashes with those for "projects" in the hompage.

  • Staticman nested comments: the Go-HTML code is copied and adapted from Beautiful Hugo PR 222, so most points in the "remarks & rooms for improvement" in halogenica/beautifulhugo#222 (comment) applies to this PR as well, except

    • navbar in this theme doesn't float, so the point "I've introduced an offset" is irrelevant in this PR.
    • Internationization of "reply to" in the link button is missing introduced as comment_btn_submit_reply at 1be3757. I can't find a have to get Go-HTML template code parsed in assets/js/staticman.js. To speed up development, I've adopted Minimal Mistake's approach and put the JS code inside a <script> tag in an HTML file.
    • I don't wish to change the <article id="comment-1"> to <article id="comment-{{ ._id }}"> in layouts/partials/staticman.html, provided that this repo has no previous Staticman support. That simplifies things, and renders the following function redundant in layouts/partials/js/staticman.html. However, I would be like to a take break from doing the logic.
    // smooth scroll to different link anchor
    $('.comment-reply-target a[href^="#"]').click(function (){
    targetPostID = $(this).attr('href');
    targetID = "#" + $(targetPostID).parents('.js-comment').attr('id');
    $('html, body').animate({ scrollTop: $(targetID).offset().top }, 500);
    });

    P.S. If such change of id attribute were introduced in Beautiful Hugo, all URL to existing static comments on web sites powered by Beautiful Hugo would be broken unless the site owner/maintainer conducts a URL redirection scheme---that's too complicated for personal blog owners. Breaking URL has bad impacts on UX and Google Bot search, so that's bad for the site's SEO. As a result, I had to kept Bruno Adele's code for the id attribute and develop this JS workaround. However, in repos which have no existing Staticman support (like this one), there's no need to make such considerations.

I would appreciate any thoughts and code changes.

@hanzei

This comment has been minimized.

Copy link
Collaborator

hanzei commented Jan 10, 2019

@VincentTam First of all: Thank you very much for the time and effort you put into this! The code you wrote it very elegant and fits well into hugo.

But I'm not sure if this is something I want to add to this theme. The theme is about setting up a simple and minimalistic personal site. Blogging is just a site feature of this theme. I assume most people just want to set up there site and don't care about comments.

@VincentTam Thoughts on this? Out of interests: Why did you put work into this theme and not any other?

@vickylai Would love to hear your thoughts on this!

@VincentTam

This comment has been minimized.

Copy link
Contributor

VincentTam commented Jan 10, 2019

Thank you for your reply despite my unfinished work. Since I'm not a developer, I publish it here for interested users.

This PR aims at providing comment support alternative to existing Disqus support. For Disqus vs Staticman, you may google for the rationale of preferring the later. (I'm replying on mobile.)

Whether comment is important is subjective. A theme designer may (or may not) offer the freedom for its users to enable this feature. With Staticman's config parameters missing or blank (default), such features will be disabled.

Looking back, my code isn't the best. I've messed up the code for the reply target in each comment reply. Please see the last point for details.

I did integrate Staticman into other templates. You may consult

  1. GitLab Pages/Hugo MR ?
  2. GitLab Pages/Jekyll MR ?
  3. https://framagit.org/staticman-gitlab-pages

In fact, this is a derivative of halogenica/beautifulhugo#222, which aims to fix the logic problem mentioned in dancwilliams/networkhobo#373.


IMHO, interactions with readers are beneficial to site owners, who often get great ideas from readers. Moreover, having static comments (with Gravatar of other users) is great in terms of SEO because search engines view this as the activities of the page.

@vickylai

This comment has been minimized.

Copy link
Owner

vickylai commented Jan 15, 2019

But I'm not sure if this is something I want to add to this theme. The theme is about setting up a simple and minimalistic personal site. Blogging is just a site feature of this theme. I assume most people just want to set up there site and don't care about comments.

@vickylai Would love to hear your thoughts on this!

I’d leave this one to the community to decide, if anyone wishes to weigh in. Introduction is meant to be a minimalist personal site, but I’m not opposed to the addition of comment functionality, as long as it is clearly optional. Especially with Staticman over Disqus.

I would like to be able to take a look at the styling within the next couple weeks. If anyone else wants to give it a go in the meantime, please do!

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