No internet connection
  1. Home
  2. Ideas

Suggestions for Hugo integration

By Cris Perdue @CrisP
    2019-05-29 22:52:29.552Z

    I am experimenting with Talkyard in my Hugo-based site, and I have a couple of suggestions for the Hugo templates integration, in the comments.html template file.

    Mine now looks like this:

    <script>talkyardServerUrl={{ .Site.Params.talkyardServerUrl }};</script>
<script async defer src="{{ .Site.Params.talkyardScriptUrl }}"></script>
<!-- You can specify a per page discussion id on the next line, if your URLs might change. -->
<div class="talkyard-comments" data-discussion-id="{{ .RelPermalink }}" style="margin-top: 100px;">
<noscript>Please enable Javascript to view comments.</noscript>
<p style="margin: 25px 0 0 0; padding-bottom: 50px; font-size: 96%">Comments powered by
<a href="https://www.talkyard.io">Talkyard</a>.</p>
</div>

    No quotes around the talkyardServerURL. With the single quotes around it in your sample, Hugo escapes the occurrences of "/" with backslashes. It seems to do no harm, but when they are omitted, Hugo adds double quotes around the value anyway, which looks good and works.

    Also, for the data-discussion-id, {{ .relPermalink }} seems like a good starting point. It distinguishes discussions by the site-relative URL path. Or a user could go with just{{ .Permalink }}, which I expect would keep comments on the production site distinct from comments on a test site.

    My template also has some padding and margin changes you probably would not want.

    Reply
    • 2 replies
    1. KajMagnus @KajMagnus2019-06-07 06:26:56.674Z2019-06-07 06:34:27.423Z

      Hi Cris, Thanks for the suggestions ,

      1. The quotes

      but when [the single quotes] are omitted, Hugo adds double quotes around the value anyway, which looks good and works.

      How does Hugo know to do that :- ) I'd like to find and read the docs about how this works, before making any changes. I couldn't find any docs, though, about why Hugo adds " in this case. Does Hugo know that the surrounding context is a <script> and that the variable should therefore be wrapped in "? Hmm. (If you find the docs, could you paste a link here? this is where I had a look: https://gohugo.io/templates/introduction/ )

      2. The permalink discussion id

      .RelPermalink seems like a good default for the discussion id. I suppose people expect things (e.g. incoming links?) to break, if they change the permalink? And then it's also fairly ok, if the comments also "break" (disappear) I suppose.

      I'd like .RelPermalink to be the default, then, if no .Params.discussionId specified. Does the following seem like a good way do accomplish that?

      <div class="talkyard-comments"
   data-discussion-id="{{ with .Param "discussionId" }}{{ . }}{{ else }}{{ .RelPermalink }}{{ end }}"
   ...

      Or a user could go with just {{ .Permalink }}, which I expect would keep comments on the production site distinct from comments on a test site

      That's a good point. I think people in general don't have both a test and prod environment, so for most people I'd thik {{ .RelPermalink }} is the better choice, so comments work, also if they move to a different domain for example. And I'm thinking people who have both a test and a prod env, are a bit technically advanced and can change to .Permalink themselves :- )

      3. Custom styles

      padding and margin changes you probably would not want

      Hmm yes they tend to be site specific. Still it'd be interesting to see what changes you did, ... if you post a link to your blog perhaps? Edit Now I had a look over at https://prooftoys.org. I'll try to remember that you changed the comment button title, and also that you hid the horizontal bar. If more people also do this, maybe there should be some related built-in settings. /Edit

      Reply
      1. Cris Perdue @CrisP
          2019-06-07 15:55:30.615Z
          1. The quotes

          I don't know why Hugo does exactly that. I tried the safeJS function (or pseudo-function) and probably safeHTML in my template, but what you see is what got me the cleanest output. Despite its apparent popularity, Hugo is still at version 0.55 and the documentation does not always lead me to definite answers even when I try to read carefully.

          1. The permalink discussion id

          Yes, what you say.

          1. Custom styles

          Indeed. Overall, for my current purposes I wish to keep the comment capability as simple and unobtrusive as possible both visually and conceptually.

          Thanks for the response.

          Reply
        ReplyAdd progress note