Background

I prefer including the date into the Permalink of a post. Everytime I create a new post, I type

hugo new post/$(date -I)-post-title.md

to ensure that the date is correct.

Problem

The title field in the post’s front matter contained the date, which wasn’t something that I wanted because it’s already shown next to the icon.

Observations

Neither \d nor [\d] works for the PCRE character class \d.

Motivation

The original navbar in words took up half of the horizontal spaces of the viewport. I couldn’t add new items like “Tags” to display the tag list.

Work

Thanks to the pre field in Hugo Menus, one can easily add the icon as an HTML element by some editing on the template file.

{{ range .Site.Menus.main.ByWeight }}
  {{ if .HasChildren }}
    <li class="navlinks-container">
      {{ if .Pre }}
        <a class="navlinks-parent" title="{{ .Name }}">{{ .Pre }}</a>
      {{ else }}
        <a class="navlinks-parent">{{ .Name }}</a>
      {{ end }}
      <div class="navlinks-children">
        {{ range .Children }}
          {{ if .Pre }}
            <a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
          {{ else }}
            <a href="{{ .URL  | relLangURL }}">{{ .Name }}</a>
          {{ end }}
        {{ end }}
      </div>
    </li>
  {{ else }}
    <li>
      {{ if .Pre }}
        <a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
      {{ else }}
        <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
      {{ end }}
    </li>
  {{ end }}
{{ end }}

The official Staticman script sample depends on jQuery. I have been using jQuery in my Staticman script for nested comments for more than six months.

Recently, in the new release of Hugo Swift Theme, in which I’m a collaborator, one has removed all jQuery methods at commit f137efa4. Here’s the structure of the script:

1. auxiliary functions like elem, elems, pushClass, deleteClass, etc.
2. A self-executing function comments()
   • some necessary local variables
   • handleForm() consisting merely of an event listener handling form submission.
     • formToJSON(form) for converting the comment form to a JSON string.
     • fetch(url, {...}).then(...).catch(...) for submitting a sever request and handling its response. It calls showModal(...) and it contains resetForm().
   • a conditional form ? handleForm(form) : false; to execute the above method provided the existence of the comment form.
   • closeModal() and showModal() for closing and showing the modal respectively.
   • a conditional containsClass(body, show) ? closeModal() : false;.
   • a self-executing toogleForm() function. Nesting a self-executing function inside another one limits the namespace of variables. Even though there’s no new variable defined inside this function, there’s a need to wrap it with parenthesis () because toggleForm() is not called elsewhere, unlike toggleMenu(). If the if(button){...} statement comes out directly, we will not know that it’s doing.

Goal

To port Huginn’s Staticman integration to Introduction.

Difficulties

I’ve used some class names from Minimal Mistakes since the modals in the original code clashes with Introduction’s mobile responsive card display for projects. If I had know the practice of prepending a CSS class to avoid overiding the CSS properties of other components of a web site, I wouldn’t have mixed this Jekyll theme with my template for nested comments.

Due to my existing work on my SASS file for Staticman + Introduction, I had decided to continue working with the class names in this SASS file. Changing the CSS class names in the JS script was easier than doing so in the SASS file since I was more familiar with the former.

Background

I’ve made nested comment support for Beautiful Hugo, which I’ve ported to other Hugo themes like Introduction, Hyde-hyde, etc.

Problem I

Some of those Hugo themes that I worked with did show the HTML form, but the CSS styles were gone on the GitLab Pages.

Reason I

This is due to the lack of resources/_gen/ in the indexed repo for themes making use of assets/.

Solution I

0. Check that you have the required prerequisites. For example, Introduction requires autoprefixer and postcss-cli.
1. Update submodule for the theme in the directory holding the source code of the static site.
2. Type hugo [server] so that the resources are locally generated.
3. Push the repo.

Problem II

The approach in my linked blog post is too complicated. It makes use of a mix of JavaScript and Hugo template. This can be hard to comprehend and port, since the file structure for JavaScripts isn’t the same in different themes. It’s better to make the internal referencing for nested comment display entirely in Hugo.

Goal

To provide Staticman support to the Hugo theme Huginn.

Motivation

A Framagit user tried using the public GitLab instance but failed. Finally, he removed Staticman from his site and his Hugo theme.

If I had been notified, I would have explained that that was due to the constraint of gitlabBaseUrl, which could only take one GitLab instance.

In response to demand for Staticman from Framagit users, I set up another GitLab instance of Staticman API and forked some Hugo/Jekyll repo under the project page Staticman et GitLab Pages.

Problem

There’s no custom $\KaTeX$ macro in local preview since I’ve merged some recent commits from the upstream of this blog’s theme, in particular, Beautiful Hugo’s pull requests #246 and #255, which allowed self-hosting the theme’s static JS, CSS and font files. This self-hosted option is particularly useful in case of slow response from Cloudflare’s CDN.

Even they do appear on the public GitLab site, the final rendered Markdown + $\TeX$ code would be succumb to syntax errors due to their absence in the preview process.

Problem

Since the recent Hugo upgrade to v0.55.3, the following messages popped up after each local site regeneration with hugo server.

WARN 2019/04/24 18:07:00 Page's .URL is deprecated and will be removed in a futu
re release. Use .Permalink or .RelPermalink. If what you want is the front matte
r URL value, use .Params.url.
WARN 2019/04/24 18:07:00 Page's .Hugo is deprecated and will be removed in a fut
ure release. Use the global hugo function.
WARN 2019/04/24 18:07:00 Page's .RSSLink is deprecated and will be removed in a 
future release. Use the Output Format's link, e.g. something like: 
    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.
Total in 136 ms

GitLab’s online runner also gave the same type of warnings. This was reported in Beautiful Hugo issue #261.

After reading Hugo Comments with Staticman on Kostas Tsalikis’ web site, I tried to leave the following comment.

As far as I know, Staticman can be used only with GitHub, since it works as a GitHub bot. Obviously, not all static sites are saved in GitHub, and this may be a showstopper for someone using another service. Thanks to eduardoboucas/staticman#219, Staticman now supports GitLab. You may view my demo Hugo site on Framagit at https://staticman-gitlab-pages.frama.io/bhdemo/posts/my-second-post/ Source) as a working example.

[Read More]

Background

Idem to Staticman on Framagit.

Besides, the build time for my Staticman + Beautiful Hugo demo on Framagit is half of that for the same project on GitLab.com.

Problem

After the setup, it’s possible that the theme shows “Sorry! There’s an error during submission.” To get an insight into this error, one has to open Web Developer Tools → Network and select the row corresponding to the POST request sent to the Staticman API. A side pane will pop out on the right. Select Response to view the API’s response in JSON.